#main nav{ margin:0px; padding:0px; } #main nav ul{ list-style:none; } #main nav ul li{ float:left; background-color:#993333; height:100px; -moz-transition:-moz-transform 1s, background 1s, height 1s; -webkit-transition:-webkit-transform 1s, background 1s, height 1s; } #main nav ul li:hover{ float:left; background-color:#000; height:120px; } #main nav…
how to improve website loading time
1) Reduced the image size 2) Link library link with CDN(Content delivery network). 3) Use CSS and Javascript with compressed 4) Reduced the http request a) Using css sprite b) Rather than using lots of CSS file use 1 CSS…
accordian
<script type=”text/javascript”> $(‘dd:first’).show().siblings(‘dd’).hide(); $(‘dt’).on(‘mouseenter’, function(){ $(this).next().slideDown().siblings(‘dd’).slideUp(); }) </script> live example
one day
How to create hover text caption with jquery
<script> $(document).ready(function(){ $(‘.imgCaption’).css(‘opacity’, ‘0’); $(‘.singleImgHolder’).hover(function(){ $(this).find(‘.imgCaption’).animate({bottom:’0px’,opacity:0.5},function(){ }) } ,function(){ $(this).find(‘.imgCaption’).animate({bottom:’-10px’,opacity:0}); }) }); </script> Live example
jquery image loader
When we create image gallery it is better to show image loader rather than showing the blank page I have created jquery image loader. This is the loader gif img. <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”> </script> <script> $(document).ready(function(){ $(‘img’).hide(); $(‘img’).each( function(){ $(“<div></div>”,{ class:’loader’…
my first bootstrap website
Today i have done my first bootstrap website it was easy and we can create responsive website quickly.Really it was good experience for me. See the link and check http://nitesh-thapa.com/bootstrap/