Jquery hide/show divs

Jquery hide/show divs

Hi there. I'm using the following code and desperately wondering how to get the initial box to display on page load rather than when someone clicks on a menu link. Is there a simpler way to do this?

  2. <script type="text/javascript">
  3. $(function() {
  4. var $menu = $('.menu'),
  5. $menuItems = $menu.children('a'),
  6. $mbWrapper = $('#content_wrapper'),
  7. $mbClose = $mbWrapper.children('.close'),
  8. $mbContentItems = $mbWrapper.children('.content'),
  9. $mbContentInnerItems= $mbContentItems.children('.content_inner');
  10. $mbPattern = $('#pattern'),
  11. $works = $('#imagelist > li'),
  12. $bgimage = $('#background > img'),
  14. Menu = (function(){
  16. var init = function() {
  17. preloadImages();
  18. initPlugins();
  19. initPattern();
  20. initEventsHandler();
  21. },
  22. //preloads the images for the work area (data-bgimg attr)
  23. preloadImages = function() {
  24. $works.each(function(i) {
  25. $('<img/>').attr('src' , $(this).children('img').data('bgimg'));
  26. });
  27. },
  28. //initialise the jScollPane (scroll plugin)
  29. initPlugins = function() {
  30. $mbContentInnerItems.jScrollPane({
  31. verticalDragMinHeight: 40,
  32. verticalDragMaxHeight: 40
  33. });
  34. },
  35. /*
  36. draws 16 boxes on a specific area of the page.
  37. we randomly calculate the top, left, and rotation angle for each one of them
  38. */
  39. initPattern = function() {
  40. for(var i = 0; i < 16 ; ++i) {
  41. //random opacity, top, left and angle
  42. var o = 0.1,
  43. t = Math.floor(Math.random()*196) + 5, // between 5 and 200
  44. l = Math.floor(Math.random()*696) + 5, // between 5 and 700
  45. a = Math.floor(Math.random()*101) - 50; // between -50 and 50
  47. $el = $('<div>').css({
  48. opacity : o,
  49. top : t + 'px',
  50. left : l + 'px'
  51. });
  53. if (!$.browser.msie)
  54. $el.transform({'rotate' : a + 'deg'});
  56. $el.appendTo($mbPattern);
  57. }
  58. $mbPattern.children().draggable(); //just for fun
  59. },
  60. /*
  61. when the User closes a content item, we move the boxes back to the original place,
  62. with new random values for top, left and angle though
  63. */
  64. disperse = function() {
  65. $mbPattern.children().each(function(i) {
  66. //random opacity, top, left and angle
  67. var o = 0.1,
  68. t = Math.floor(Math.random()*196) + 5, // between 5 and 200
  69. l = Math.floor(Math.random()*696) + 5, // between 5 and 700
  70. a = Math.floor(Math.random()*101) - 50; // between -50 and 50
  71. $el = $(this),
  72. param = {
  73. width : '50px',
  74. height : '50px',
  75. opacity : o,
  76. top : t + 'px',
  77. left : l + 'px'
  78. };
  80. if (!$.browser.msie)
  81. param.rotate = a + 'deg';
  83. $el.animate(param, 1000, 'easeOutExpo');
  84. });
  85. },
  86. initEventsHandler = function() {
  87. /*
  88. click a link in the menu
  89. */
  90. $menuItems.bind('click', function(e) {
  91. var $this = $(this),
  92. pos = $this.index(),
  93. speed = $this.data('speed'),
  94. easing = $this.data('easing');
  95. //if an item is not yet shown
  96. if(!$menu.data('open')){
  97. //if current animating return
  98. if($menu.data('moving')) return false;
  99. $menu.data('moving', true);
  100. $.when(openItem(pos, speed, easing)).done(function(){
  101. $menu.data({
  102. open : true,
  103. moving : false
  104. });
  105. showContentItem(pos);
  106. $mbPattern.children().fadeOut(500);
  107. });
  108. }
  109. else
  110. showContentItem(pos);
  111. return false;
  112. });
  114. /*
  115. click close makes the boxes animate to the top of the page
  116. */
  117. $mbClose.bind('click', function(e) {
  118. $menu.data('open', false);
  119. /*
  120. if we would want to show the default image when we close:
  121. changeBGImage('images/default.jpg');
  122. */
  123. $mbPattern.children().fadeIn(500, function() {
  124. $mbContentItems.hide();
  125. $mbWrapper.hide();
  126. });
  128. disperse();
  129. return false;
  130. });
  132. /*
  133. click an image from "Works" content item,
  134. displays the image on the background
  135. */
  136. $works.bind('click', function(e) {
  137. var source = $(this).children('img').data('bgimg');
  138. changeBGImage(source);
  139. return false;
  140. });
  142. },
  143. /*
  144. changes the background image
  145. */
  146. changeBGImage = function(img) {
  147. //if its the current one return
  148. if($bgimage.attr('src') === img || $bgimage.siblings('img').length > 0)
  149. return false;
  151. var $itemImage = $('<img src="'+img+'" alt="Background" class="bgimage" style="display:none;"/>');
  152. $itemImage.insertBefore($bgimage);
  154. $bgimage.fadeOut(1000, function() {
  155. $(this).remove();
  156. $bgimage = $itemImage;
  157. });
  158. $itemImage.fadeIn(1000);
  159. },
  160. /*
  161. This shows a content item when there is already one shown:
  162. */
  163. showContentItem = function(pos) {
  164. $mbContentItems.hide();
  165. $mbWrapper.show();
  166. $mbContentItems.eq(pos).show().children('.content_inner').jScrollPane();
  167. },
  168. /*
  169. moves the boxes from the top to the center of the page,
  170. and shows the respective content item
  171. */
  172. openItem = function(pos, speed, easing) {
  173. return $.Deferred(
  174. function(dfd) {
  175. $mbPattern.children().each(function(i) {
  176. var $el = $(this),
  177. param = {
  178. width : '100px',
  179. height : '100px',
  180. top : 154 + 100 * Math.floor(i/4),
  181. left : 200 + 100 * (i%4),
  182. opacity : 1
  183. };
  185. if (!$.browser.msie)
  186. param.rotate = '0deg';
  188. $el.animate(param, speed, easing, dfd.resolve);
  189. });
  190. }
  191. ).promise();
  192. };
  194. return {
  195. init : init
  196. };
  198. })();
  200. /*
  201. call the init method of Menu
  202. */
  203. Menu.init();
  204. });
  205. </script>