Tuesday, 15 April 2014

jquery load more

<html lang="en">
<head>
<meta charset="utf-8">
<title>Aditya demo</title>

<script src="jquery-1.10.2.js"></script>
</head>
<body>
<div id="disp">
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
<b>Aditya:</b>
</div>
<button id="but">aa</button>
<ol id="new-nav"></ol>
<script>
$(window).load(function(){
var disp = 1;
var dispunit = 2;
var aa = $('#disp').children('b').css('display','none').length;
for(var b=0;b<disp;b++){
$('#disp').children('b').eq(b).css('display','block');
}

aaa = parseInt(aa)-parseInt(disp);

var flen = parseInt(disp)+parseInt(dispunit);

alert(disp+" -- "+aaa);

$('#but').click(function(){

for(var a=disp;a<flen;a++){
$('#disp').children('b').eq(a).show('slow').css('display','block');
}
disp=flen;
flen = parseInt(flen)+2;
});
});
</script>
</body>
</html>
Posted by at No comments:

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)