Thursday, 26 December 2013

simple tab navigator jquery

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.tab{background: cadetblue;border: solid 1px;text-align: center;width: 22%;height: 8%;border-radius: 5%;margin-left: 1%;}
.contant{background: beige;width: 22%;text-align: center;display: none;margin-left: 1%;}
.bord{border: solid 1px;width: 25%;height: 6%;border-radius: 4%;background: darkcyan;}
</style>
<div id="container">
<div class="bord"></div>
<div id="tab" class="tab"> tab1 </div>
<div id="content" class="contant"> tab 1 contenttab 1 contenttab 1 contenttab 1 content </div>
<div id="tab" class="tab"> tab2 </div>
<div id="content" class="contant"> tab 2 contenttab 2 contenttab 2 contenttab 2 contenttab 2 content </div>
<div id="tab" class="tab"> tab3 </div>
<div id="content" class="contant"> tab 3 contenttab 3 content tab 3 content tab 3 content tab 3 content  </div>
</div>
<div class="bord"></div>
<script>
$("#container").children('.tab').click(function(){
$(this).parent().children('.contant').hide(1000);
$(this).next('.contant').show( "slow" );
});
</script>
Posted by at No comments:

Monday, 23 December 2013

change element position jquery toogel+toggle element

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
<div>
<ul class="aaaa">
<li id="first">first</li>
<li id="Second">Second</li>
<li id="third">third</li>
<li id="fourth">fourth</li>
<li id="fifth">fifth</li>
</ul>

asdasdasdasdsadasdasd

<ul class="aaaa">
<li id="first">first</li>
<li id="Second">Second</li>
<li id="third">third</li>
<li id="fourth">fourth</li>
<li id="fifth">fifth</li>
</ul>

</body>
<script type="text/javascript">

$(".aaaa li").click(function(){
var size = $(this).parent().children().size();
var first = $(this).parent().children().eq(0).index();
var last = $(this).parent().children().eq((size-1)).index();
if($(this).index()==last){
$(this).before(($(this).parent().children().eq(0)-1)).prependTo($(this).parent());
}if($(this).index()!=last){

$(this).parent().children().eq((size-1)).detach().insertBefore($(this).parent().children().eq(0));
}

});
</script>
</html>
Posted by at No comments:
Subscribe to: Comments (Atom)