Tuesday, 15 February 2011

jquery - Need to hide loading content -



jquery - Need to hide loading content -

i'm using jquery cameraslider, it's working fine, when page loads pagination icons flash across top of containing div , client's keen see them disappear. code doing has been built do. however, still create pagination icons don't flash on load if possible.

here page in question.

i have identified elements need controlled, , have found script "think" i'm after, i'm not able want.

by setting element in styles" display:none; no pagination, know these elements control.

.camera_wrap .camera_pag .camera_pag_ul li { background: #929497; }

this line within script turns pagination off after 5 seconds, know can command it, can't reverse - appear after 5 seconds, or acceptable time.

settimeout(function() { $('.camera_pag_ul li').hide() }, 5000);

i thought next might display pagination icons after 5 seconds, doesn't.

<script type="text/javascript"> $(document).ready(function() { settimeout(function() { $('.camera_pag_ul li').show() }, 5000); }); </script>

i have tried approach out success.

<style>.camera_pag_ul li{display:none;}</style> $(window).load(function() { // when page has loaded $("camera_pag_ul li").show(5000); });

here're scripts appear @ bottom of page.

<script src="js/jquery.js"></script> <script>window.jquery || document.write('<script src="js/jquery.js"><\/script>')</script> <!-- photographic camera slideshow --> <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='js/slider/camera1920.js'></script> <script type="text/javascript"> $(function(){ //dropdown navigation $('#navigation_horiz').navidropdown({ dropdownwidth: '165px' //adjusted longest title in dropdown = corporate responsibility }); //add bounce effect on hover class $('.imghover').mouseenter(function () { $(this).effect("bounce", { distance: 3, times:1 }, 900); }); //camera slideshow jquery('#camera_wrap_1').camera({ thumbnails: false, //true create thumbnails of image appear on hovering on pagination dots pagination: true }); settimeout(function() { $('.camera_wrap .camera_pag .camera_pag_ul li').hide() }, 5000); //this works why can't opposite?? }); </script>

i don't mind how it, want able create them disappear until page has loaded.

i found solution - here is:

reference controls wrapper:

css .camera_pag { display: none; }

and command displaying of elements in script = show 1 time page has loaded.

js jquery('#camera_wrap_1').camera({ /*/ /*sets height */ thumbnails: false, pagination: true, onloaded: function() { $(".camera_pag").show(); // or .fadein(); } });

jquery hide loading

No comments:

Post a Comment