JQuery: Sample: simple Jigsaw Puzzle


<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
div {
display: block;
width: 100px;
height: 100px;
/*background-color: orange;*/
border: 1px solid orange;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
float: left;
}
#countdown{
display:block;

width: 5em;
height: 2em;
margin-right: auto; margin-left: auto;
text-align: center;

}
</style>

</head>
<body>
<div style=”width: 100%; height: 420px;”>

<div style=”width: 410px; height: 410px; background: url(us3.JPG);” >
<div style=”background:url(us3.JPG); background-position: -200px -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 -300px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px -300px ;”></div>
<div style=”background: url(us3.JPG); background-position: -200px 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: -200px -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -100px -100px ;”></div>
<div style=”background: url(us3.JPG); background-position: -200px -300px ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px 0 ;”></div>
<div style=”background: url(us3.JPG); background-position: 0 -200px ;”></div>
<div style=”background: url(us3.JPG); background-position: -300px -300px ;”></div>
</div>

<div style=”width: 410px; height: 410px; align:center; float: right;”>
<p>
Arrange the blocks in this block
</p>
</div>
</div>

<div id=”countdown” style=”left: 50%; “> </div>

<button style=”width: 10em”>start</button>

<script src=”js/jquery-1.9.1.min.js” ></script>
<script src=”js/jquery-ui.min.js”></script>
<script>
var select = false;
var count = 120;
$().ready(function(){
$(“.block”).hide();
})
$(“button”).click(function(){
$(“.block”).show();
setInterval(function(){
count = count -1;
$(“#countdown”).text(count);
}, 1000);
});
$(“.block”).mousedown(function(e) {
var element = this;
var x= e.pageX – this.offsetLeft;
var y = e.pageY – this.offsetTop;
if (select == false){
select = true;
$(window).bind(“mousemove”, function(e1){
$(element).css({
“position” : “absolute”
});
$(window).css({
“-webkit-user-select” : “none”
});
$(element).css({
“left” : (e1.pageX – x) + “px”
});
$(element).css({
“top” : (e1.pageY – y) + “px”
});

})
}else{
$(window).unbind(‘mousemove’);
select = false;
}
});
</script>
</body>
</html>

CSS: Rotate text 270Degree


  <style>
    .Rotate-90
    {
        display: block;
        position: absolute;
        right: -5px;
        top: 15px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
    }
</style>
<!–[if IE]>
    <style>
     .Rotate-90 {
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      right:-15px; top:5px;
     }
    </style>
    <![endif]–>

  <!– end CSS–>

JQuery: FadeOut-FadeIn


body{
font-family:Arial,sans-serif;
margin: 0px;
padding:0;
}
.container {
height: 400px;
width: 100%;
float: left;
clear: both;

}

.right {

float: right;

}

.left {
/*behavior: url(pie/PIE.htc);*/
-webkit-border-radius: 5px;
-webkit-border-top-right-radius: 0;
-moz-border-radius: 5px;
-moz-border-top-right-radius: 0;
border-radius: 5px;
border-top-right-radius: 0;
border: 6px solid orange;
height: 400px;
overflow: auto;
padding: 1em;
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}

.tabItems{
height: 2.5em;
vertical-align: middle;
display:table-cell;
vertical-align:bottom;
/* background-color: #6699FF; */
float: left;
width: 9em;
cursor: pointer;
}
.tabItems:hover{
color: white;
height: 2.5em;
vertical-align: middle;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #FF8300;

}

#mymenu{
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-top-right-radius: 5px;
-moz-border-bottom-right-radius : 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: 6px solid orange;
border-top: 6px solid orange;
border-bottom: 6px solid orange;
border-top-left-radius: 0;
width: 9em; float: left; margin: 0;
}

.clearfix:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

#menu{
display: table;

height:2.5em;

text-align: center;
clear:both;

margin: 0;
padding:0;

background-color: #FFDBB5;

width: 100%;float: none;
/*border: 1px solid green;*/
}
#content1{
/* Firefox */
height: 400px;
display: block;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-bottom-right-radius : 15px;
-moz-border-bottom-left-radius : 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
border: 5px solid #FF8300;
box-sizing:border-box;
margin: 0;
padding:0;
position: relative;

}

$().ready(function(){
$(“#menu > dd”).hide();
$(“#menu > dt”).addClass(“tabItems”);

$(“.tabItems”).on(“click”, function(){
var tab = $(this);
var cont = $(“#content”);
cont.fadeOut(“fast”,function() {
cont.html($(tab).next().html());
cont.fadeIn(“slow”);
});
});
})

This is a test

<!–

–>

MJ

section 1

Property Values

Value Description Play it
none The element will not be displayed at all Play it »
box (or flex-box) The element is displayed as a block-level flex container box  
block The element is displayed as a block-level element (like paragraphs and headers) Play it »
flex The element is displayed as a block-level flex container box  
inline This is default. The element is displayed as an inline-level element
(like span)
Play it »
inline-block The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-flex The element is displayed as an inline-level flex container box  
inline-table The element is displayed as an inline-level table  
list-item The element is displayed as a list-item, which means that it has a bullet in front of it Play it »
table The element is displayed as a table
table-caption The element is displayed as a table caption
table-cell The element is displayed as a table cell
table-column The element is displayed as a table column
table-column-group The element is displayed as a table column group (like <colgroup>)
table-footer-group The element is displayed as a table footer row group
table-header-group The element is displayed as a table header row group
table-row The element is displayed as a table row
table-row-group The element is displayed as a table row group
inherit The value of the display property will be inherited from the parent element


test123
section 2
Johri, Mayank 10:48 PM
section 3
this is section three
section 4
this is section four
left content flexible width