aznjayx Posted June 22, 2011 Share Posted June 22, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Clean Clubs - Vancouver</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Collapsing Site Navigation with jQuery" /> <meta name="keywords" content="jquery, navigation, menu, collapsing, accordion, sliding, image, css3"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/Liberation_Sans.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('span'); Cufon.replace('li'); Cufon.replace('h1'); Cufon.replace('p'); </script> <style> body{ background:#000 url(images/stripe.gif) repeat top left; margin:0; padding:0; } span.reference{ font-family:Arial; text-transform:uppercase; position:fixed; right:95px; bottom:10px; font-size:11px; text-shadow:1px 1px 1px #000; } span.reference a{ color:#aaa; text-decoration:none; margin-right:20px; } span.reference a:hover{ color:#ddd; } .title{ position:absolute; right:10px; top:10px; width:91px; height:600px; background:transparent url(images/title.png) no-repeat top left; } </style> </head> <body> <div class="title"></div> <div id="cc_menu" class="cc_menu"> <div> <img src="images/logo_clean.png" /></div> <div class="cc_item" style="z-index:5;"> <img src="images/1.jpg" alt="image" /> <span class="cc_title">Home</span> <div class="cc_submenu"> <ul> <li class="cc_content_1">Home</li> </ul> </div> </div> <div class="cc_item" style="z-index:4;"> <img src="images/2.jpg" alt="image" /> <span class="cc_title">Our Values</span> <div class="cc_submenu"> <ul> <li class="cc_content_2">Our Values</li> </ul> </div> </div> <div class="cc_item" style="z-index:3;"> <img src="images/3.jpg" alt="image" /> <span class="cc_title">Concierge</span> <div class="cc_submenu"> <ul> <li class="cc_content_3">Concierge</li> </ul> </div> </div> <div class="cc_item" style="z-index:2;"> <img src="images/4.jpg" alt="image" /> <span class="cc_title">Commercial</span> <div class="cc_submenu"> <ul> <li class="cc_content_4">Cleaning</li> </ul> </div> </div> <div class="cc_item" style="z-index:1;"> <img src="images/5.jpg" alt="image" /> <span class="cc_title">Contact Us</span> <div class="cc_submenu"> <ul> <li class="cc_content_5">Contact Us</li> <li class="cc_content_6">Get in touch</li> </ul> </div> </div> <div id="cc_content" class="cc_content"> <span id="cc_back" class="cc_back"><< Go back</span> <div class="cc_content_1"> <h1>About Us</h1> <p>Clean Clubs is a Vancouver based business owned by entrepreneurs Carlos and Aaron. Combined, Carlos and Aaron have over two decades of customer service experience.</p> <p> Customer Service is an integral part of any business, and/or industry, as it is the key element to attracting loyalty from customers/clients.</p> <p> The company was established with the notion that the Washroom Concierge services currently being offered in town lack consistency and adequately trained staff in the art of Customer Service.</p> <p> Clean Clubs is committed to bringing the key element of Customer Service to the Night Life niche. With proven experience, we guarantee that our services will have your patrons coming out of the washrooms feeling welcome and taken care off.</p> </div> <div class="cc_content_2"> <h1>Our Company Values</h1> <p> Although we are just in the initial stages of our journey, we have instilled in all our employees with the following core values that define us and our company: • Honesty. • Integrity. • Loyalty. • Positive Attitude.</p> </div> <div class="cc_content_3"> <h1>Concierge</h1> <p>Picture The Washroom Concierge is the foundation to maintaining your restroom facility's clean environment for your patrons to enjoy. At Clean Clubs we believe that in order to create an unforgettable experience to your clients, the key aspect is customer service, as well as providing top of the line colognes and grooming products. Your washroom concierge will dress professionally and exude class. He will also be first aid certified and be equipped with the necessary skills to uphold your patrons' satisfaction and ensure that your washroom is clean. Statistics have confirmed that employing our concierge service reduces damage to your establishment. Our washroom concierges are currently serving in nightclubs such as Opus Bar as well as other pubs and ultra-lounges. We are also available for catering your special events regardless of how big or small.</p> </div> <div class="cc_content_4"> Picture Our commercial services transform your place of business into a utopia of eco-friendly and scent free synergy. Your establishment will be cleansed with industry established equipment and eco-friendly products such as the Vert-2-Go Bio line of products that are certified by Environment Canada's EcoLogoM program and or our scent free products. Our service guarantees that we will undertake any visible surface including but not limited to floors, countertops, mirrors, windows, chairs, walls and anything that needs our attention as per our client's needs. Our industry trained staff will ensure that your establishment brings out the synergy in you. </div> <div class="cc_content_5"> <h1>New York</h1> <p>Contact Information: Owners: Aaron: (778) 232 - 0980 Carlos: (604) 760 - 6942</p> </div> </div> <div id="footer"> © 2011 www.cleanclubs.ca </div> </div> <!-- The JavaScript --> <script type="text/javascript"> $(function() { $(".cc_item:first").addClass("bordx"); $(".cc_menu:first").addClass("bordx"); $(".cc_item img:first").addClass("bordx"); $(".cc_submenu ul:first").addClass("bordx"); $(".cc_item:last").addClass("bordx2"); $(".cc_menu:last").addClass("bordx2"); $(".cc_item img:last").addClass("bordx2"); //all the menu items var $items = $('#cc_menu .cc_item'); //number of menu items var cnt_items = $items.length; //if menu is expanded then folded is true var folded = false; //timeout to trigger the mouseenter event on the menu items var menu_time; /** bind the mouseenter, mouseleave to each item: - shows / hides image and submenu bind the click event to the list elements (submenu): - hides all items except the clicked one, and shows the content for that item */ $items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave) .find('.cc_submenu > ul > li', '.cc_title > span') .bind('click',function(){ var $li_e = $(this); //if the menu is already folded, //just replace the content if(folded){ hideContent(); showContent($li_e.attr('class')); } else //fold and show the content fold($li_e); }); /** mouseenter function for the items the timeout is used to prevent this event to trigger if the user moves the mouse with a considerable speed through the menu items */ function m_enter(){ var $this = $(this); clearTimeout(menu_time); menu_time = setTimeout(function(){ //img $this.find('img').stop().animate({'opacity':'1'},400); //cc_submenu ul $this.find('.cc_submenu > ul').stop().animate({'height':'300px'},400); },200); } //mouseleave function for the items function m_leave(){ var $this = $(this); clearTimeout(menu_time); //img $this.find('img').stop().animate({'opacity':'0.4'},400); //cc_submenu ul $this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400); } //back to menu button - unfolds the menu $('#cc_back').bind('click',unfold); /** hides all the menu items except the clicked one after that, the content is shown */ function fold($li_e){ var $item = $li_e.closest('.cc_item'); var d = 100; var step = 0; $items.unbind('mouseenter mouseleave'); $items.not($item).each(function(){ var $item = $(this); $item.stop().animate({ 'marginLeft':'-140px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = true; showContent($li_e.attr('class')); } }); }); } /** shows all the menu items also hides any item's image / submenu that might be displayed */ function unfold(){ $('#cc_content').stop().animate({'top':'-800px'},600,function(){ var d = 100; var step = 0; $items.each(function(){ var $item = $(this); $item.find('img') .stop() .animate({'opacity':'0.4'},200) .andSelf() .find('.cc_submenu > ul') .stop() .animate({'height':'0px'},200); $item.stop().animate({ 'marginLeft':'0px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = false; $items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave); hideContent(); } }); }); }); } //function to show the content function showContent(idx){ $('#cc_content').stop().css('left','140px').animate({'top':'0px'},200,function(){ $(this).find('.'+idx).fadeIn(); }); } //function to hide the content function hideContent(){ $('#cc_content').find('div').hide(); } }); </script> </body> </html> ORIGINAL SCRIPT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Clean Clubs Testing</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="description" content="Collapsing Site Navigation with jQuery" /> <meta name="keywords" content="jquery, navigation, menu, collapsing, accordion, sliding, image, css3"/> <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/Liberation_Sans.font.js" type="text/javascript"></script> <script type="text/javascript"> /*Cufon.replace('span'); Cufon.replace('li'); Cufon.replace('h1'); Cufon.replace('p');*/ </script> <style> body{ background:#000 url(images/stripe.gif) repeat top left; margin:0; padding:0; } span.reference{ font-family:Arial; text-transform:uppercase; position:fixed; right:95px; bottom:10px; font-size:11px; text-shadow:1px 1px 1px #000; } span.reference a{ color:#aaa; text-decoration:none; margin-right:20px; } span.reference a:hover{ color:#ddd; } .title{ position:absolute; right:10px; top:10px; width:91px; height:600px; background:transparent url(images/title.png) no-repeat top left; } </style> </head> <body> <div class="title"></div> <div id="cc_menu" class="cc_menu"> <div> <img src="images/logo_clean.png" /></div> <div class="cc_item" style="z-index:5;"> <img src="images/1.jpg" alt="image" /> <span class="cc_content_1">Home</span> </div> <div class="cc_item" style="z-index:4;"> <img src="images/2.jpg" alt="image" /> <span class="cc_content_2">Our Values</span> </div> <div class="cc_item" style="z-index:3;"> <img src="images/3.jpg" alt="image" /> <span class="cc_content_3">Concierge</span> </div> <div class="cc_item" style="z-index:2;"> <img src="images/4.jpg" alt="image" /> <span class="cc_content_4">Commercial</span> </div> <div class="cc_item" style="z-index:1;"> <img src="images/5.jpg" alt="image" /> <span class="cc_content_5">Contact Us</span> </div><!-- cc_menu --> <div id="cc_content" class="cc_content"> <span id="cc_back" class="cc_back"><< Go back</span> <div class="cc_content_1"> <h1>About Us</h1> <p>Clean Clubs is a Vancouver based business owned by entrepreneurs Carlos and Aaron. Combined, Carlos and Aaron have over two decades of customer service experience.</p> <p> Customer Service is an integral part of any business, and/or industry, as it is the key element to attracting loyalty from customers/clients.</p> <p> The company was established with the notion that the Washroom Concierge services currently being offered in town lack consistency and adequately trained staff in the art of Customer Service.</p> <p> Clean Clubs is committed to bringing the key element of Customer Service to the Night Life niche. With proven experience, we guarantee that our services will have your patrons coming out of the washrooms feeling welcome and taken care off.</p> </div> <div class="cc_content_2"> <h1>Our Company Values</h1> <p> Although we are just in the initial stages of our journey, we have instilled in all our employees with the following core values that define us and our company: • Honesty. • Integrity. • Loyalty. • Positive Attitude.</p> </div> <div class="cc_content_3"> <h1>Concierge</h1> <p>Picture The Washroom Concierge is the foundation to maintaining your restroom facility's clean environment for your patrons to enjoy. At Clean Clubs we believe that in order to create an unforgettable experience to your clients, the key aspect is customer service, as well as providing top of the line colognes and grooming products. Your washroom concierge will dress professionally and exude class. He will also be first aid certified and be equipped with the necessary skills to uphold your patrons' satisfaction and ensure that your washroom is clean. Statistics have confirmed that employing our concierge service reduces damage to your establishment. Our washroom concierges are currently serving in nightclubs such as Opus Bar as well as other pubs and ultra-lounges. We are also available for catering your special events regardless of how big or small.</p> </div> <div class="cc_content_4"> Picture Our commercial services transform your place of business into a utopia of eco-friendly and scent free synergy. Your establishment will be cleansed with industry established equipment and eco-friendly products such as the Vert-2-Go Bio line of products that are certified by Environment Canada's EcoLogoM program and or our scent free products. Our service guarantees that we will undertake any visible surface including but not limited to floors, countertops, mirrors, windows, chairs, walls and anything that needs our attention as per our client's needs. Our industry trained staff will ensure that your establishment brings out the synergy in you. </div> <div class="cc_content_5"> <h1>New York</h1> <p>Contact Information: Owners: Aaron: (778) 232 - 0980 Carlos: (604) 760 - 6942</p> </div> </div><!-- cc_content --> <div id="footer"> © 2011 Cleanclubs.ca - All Rights Reserved Designed by: http://www.jdrdesign.net </div> </div><!-- wrapper --> <!-- The JavaScript --> <script type="text/javascript"> $(function() { //all the menu items var $items = $('.cc_item'); //number of menu items var cnt_items = $items.length; //if menu is expanded then folded is true var folded = false; //timeout to trigger the mouseenter event on the menu items var menu_time; /** bind the mouseenter, mouseleave to each item: - shows / hides image and submenu bind the click event to the list elements (submenu): - hides all items except the clicked one, and shows the content for that item */ $items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave) .find('.cc_item > img > span') .bind('click',function(e){ var $li_e = $(this); //if the menu is already folded, //just replace the content if(folded){ hideContent(); showContent($li_e.attr('class')); console.log("button clicked"); e.preventDefault(); return false; } else //fold and show the content fold($li_e); e.preventDefault(); return false; }); /** mouseenter function for the items the timeout is used to prevent this event to trigger if the user moves the mouse with a considerable speed through the menu items */ function m_enter(){ var $this = $(this); clearTimeout(menu_time); menu_time = setTimeout(function(){ //img $this.find('img').stop().animate({'opacity':'1'},400); //cc_submenu ul //$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400); $this.find('.cc_item > span').stop().animate({'height':'200px'},400); },200); } //mouseleave function for the items function m_leave(){ var $this = $(this); clearTimeout(menu_time); //img $this.find('img').stop().animate({'opacity':'0.4'},400); //cc_submenu ul //$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400); $this.find('.cc_item > span').stop().animate({'height':'0px'},400); } //back to menu button - unfolds the menu $('#cc_back').bind('click',unfold); /** hides all the menu items except the clicked one after that, the content is shown */ function fold($li_e){ var $item = $li_e.closest('.cc_item'); var d = 100; var step = 0; $items.unbind('mouseenter mouseleave'); $items.not($item).each(function(){ var $item = $(this); $item.stop().animate({ 'marginLeft':'-140px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = true; showContent($li_e.attr('class')); } }); }); } /** shows all the menu items also hides any item's image / submenu that might be displayed */ function unfold(){ $('#cc_content').stop().animate({'top':'-700px', 'left':'140px'},600,function(){ var d = 100; var step = 0; $items.each(function(){ var $item = $(this); $item.find('img') .stop() .animate({'top':'0px'},200) .animate({'opacity':'0.4'},200) .andSelf() .find('.cc_item > span') .stop() .animate({'height':'0px'},200); $item.stop().animate({ 'marginLeft':'0px' },d += 200,function(){ ++step; if(step == cnt_items-1){ folded = false; $items.unbind('mouseenter') .bind('mouseenter',m_enter) .unbind('mouseleave') .bind('mouseleave',m_leave); hideContent(); } }); }); }); } //function to show the content function showContent(idx){ $('#cc_content').stop().animate({'top':'140px', 'left':'140px'},200,function(){ $(this).find('.'+idx).fadeIn(); }); } //function to hide the content function hideContent(){ $('#cc_content').find('div').hide(); } }); </script> </body> </html> MODIFIED CODE My problem is whenever I click on the home page since I change it the content is not being accessed. Please help me. This jQuery is driving me nuts targeting the linkage. Thanks. Quote Link to comment Share on other sites More sharing options...
Adam Posted June 23, 2011 Share Posted June 23, 2011 From the forum guild-lines: "5. Users will post relevant code and information to their question(s)" You have posted several hundred lines of code and expected us to look through it line-by-line. Can you please re-think your question? Only post the relevant code with an explanation of what the differences are and a better description of the overall problem. You don't have to of course, but you will receive better help a lot faster. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.