Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post

    Setup a JS image viewer, now my JS dropdown menu doesn't work! help please

    Ok here is the development site here:

    http://sneakylink.com/d

    Notice how on this page, if you hover over 'Bikes', there is no drop down menu - but any other page on the website, the 'Bike' menu will dropdown as normal.

    I dont know a ton about JS (I am largely dependent on online tutorials) but I think there is a conflict somewhere.

    Any help would be greatly appreciated!

    Thanks

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    well, you made the most common mistake, you loaded jQuery twice, and 2 different versions. see line 8 and 67 of your code.

  • Users who have thanked DanInMa for this post:

    BlackReef (07-19-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    well, you made the most common mistake, you loaded jQuery twice, and 2 different versions. see line 8 and 67 of your code.
    ouch.

    Ok, well, if I remove the line #8, my background images stop appearing (black background)

    But if I remove the one from line 67, then my image viewer stops working.

    Suggestions on this?

    Thank you very much

  • #4
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    any help would be appreciated, thanks

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    try replacing line 8 with line 67. its the newer version so you need to make sure it's included somwhere at the top before you load any other jquery related items.

  • Users who have thanked DanInMa for this post:

    BlackReef (07-20-2012)

  • #6
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    try replacing line 8 with line 67. its the newer version so you need to make sure it's included somwhere at the top before you load any other jquery related items.
    Well it was worth a shot, but that didn't seem to fix the issue unfortunately.

    I also notice on the particular page in question, that the background images don't rotate like the other pages. Its another js that stopped working
    Last edited by BlackReef; 07-20-2012 at 07:45 PM.

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    check your console, see if you getting any js errors

  • Users who have thanked DanInMa for this post:

    BlackReef (07-20-2012)

  • #8
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    also the version you have posted as of this moment, still has 2 versions of jquery loaded. you absolutely postively, must only use one version of jquery. so keep the first reference you have to 1.7.1 and remove the other entirely, then move forward with troubleshooting

  • Users who have thanked DanInMa for this post:

    BlackReef (07-20-2012)

  • #9
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    also the version you have posted as of this moment, still has 2 versions of jquery loaded. you absolutely postively, must only use one version of jquery. so keep the first reference you have to 1.7.1 and remove the other entirely, then move forward with troubleshooting
    Thanks Dan, I appreciate your feedback!

    OK - well, as you can tell I still have alot to learn about jquery.

    What I did was I removed line #8 entirely, and then left the reference to 1.7.1 on line 67, and the differnce is the background stopped appearing (went black), so I put it back the way it was

    However, I notice that if I removed the line 67, the image viewer/zoom stops working, but the menu comes back! lol

    thanks again for any future help you may be able to provide,

  • #10
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    put out one fire at a time . ok, put the reference to jquery 1.7.1 at the top of the head section, remove the 2nd reference completely, then troubleshoot from there. if one of the scripts doesnts function, then you focus on that one script. it could be a very old script, i noticed one of them was from over 4 years ago and was made for jquery 1.1 or something, so you may even not be able to use both scripts, but you need to work on your trouble shooting processes. as it stands you arent sure what goes where ( i know, your new to it , no problem ) so if it doesnt work your going backawards. I can assure you the 1.7.1 reference must be at the top and you must remove the second reference to the jquery library in order to get on the correct path.

  • Users who have thanked DanInMa for this post:

    BlackReef (07-24-2012)

  • #11
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    put out one fire at a time . ok, put the reference to jquery 1.7.1 at the top of the head section, remove the 2nd reference completely, then troubleshoot from there. if one of the scripts doesnts function, then you focus on that one script. it could be a very old script, i noticed one of them was from over 4 years ago and was made for jquery 1.1 or something, so you may even not be able to use both scripts, but you need to work on your trouble shooting processes. as it stands you arent sure what goes where ( i know, your new to it , no problem ) so if it doesnt work your going backawards. I can assure you the 1.7.1 reference must be at the top and you must remove the second reference to the jquery library in order to get on the correct path.
    Thank You Dan for your help.

    Ok, I've added the 1.7.1 reference to the very top of the code, and now the menu works, but the image zoom function is not working now, you can see here:


    http://sneakylink.com/g


    Here is the new code for reference:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Electra Verse // Official Bikes of Nothing Official</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/supersized.css" />
    <link rel="stylesheet" type="text/css" href="css/supersized.shutter.css" />
    <script src="zoom_assets/jquery-1.7.1.min.js"></script>
    <script type='text/javascript' src='js/jquery.easing.min.js'></script>
    <script type='text/javascript' src='js/supersized.3.2.6.min.js'></script>
    <script type='text/javascript' src='js/supersized.shutter.min.js'></script>
    
    <script type="text/javascript">
    jQuery(function(jQuery){
    	jQuery.supersized({
    		slide_interval          :   5000,	//Length between transitions
    		transition              :   1, 		//0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
    		transition_speed		:	1000,	//Speed of transition
    		random 					:   0,
    		performance				:	1,		//0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
    		image_protect			:	0,
    		slides 				:  	[		//Slideshow Images
    	{image : 'images/bg_01.jpg'},{image : 'images/bg_02.jpg'},{image : 'images/bg_03.jpg'},{image : 'images/bg_04.jpg'}]						
    	//{image : 'images/bg_01.jpg'},{image : 'images/bg_02.jpg'},{image : 'images/bg_03.jpg'},{image : 'images/bg_04.jpg'},{image : 'images/bg_05.jpg'},{image : 'images/bg_06.jpg'},{image : 'images/bg_07.jpg'}	]						
    	});
    });
    </script>
    <link rel="stylesheet" href="css/scoller.css" type="text/css" media="screen" />
    <script src="js/jcarousellite_1.0.1c4.js" type="text/javascript"></script>
    <script type="text/javascript">
    	$(function() {
    	$(".newsticker-jcarousellite").jCarouselLite({
    	vertical: true,
    	hoverPause:true,
    	visible: 1,
    	auto:1000,
    	speed:2000
    	});
    	});
    </script>
    <link rel="stylesheet" href="css/jquery.superbox.css" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery.superbox.js"></script>
    <script type="text/javascript">
        $(function(){
            $.superbox.settings = {
                closeTxt: "Close",
                loadTxt: "Loading...",
                nextTxt: "Next",
                prevTxt: "Previous"
            };
            $.superbox();
        });
    </script>
    <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
    <link rel="stylesheet" href="css/LBstyle.css" />
    <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]-->
    <script type='text/javascript' src='js/ddsmoothmenu.js'></script>
    <script type='text/javascript' src='js/drop-down.js'></script>
    <script type="text/javascript" src="js/tinybox.js"></script>
    <style>
    	.smooth_zoom_preloader {
    		background-image: url(zoom_assets/preloader.gif);
    	}	
    	.smooth_zoom_icons {
    		background-image: url(zoom_assets/icons.png);
    	}
    </style>
    <script src="zoom_assets/jquery.smoothZoom.min.js"></script>
    <script>
    jQuery(function($){
    	$('#verse').smoothZoom({
    		width: 940,
    		height: 400
    	});
    });
    </script>
    <script type="text/javascript" src="js/tinybox.js"></script>
    <link rel="stylesheet" href="css/LBstyle.css" />
    </head>
    
    <body>
    <div id="main">
      <div id="header"><a href="index.html"><img src="images/logo.png" class="logo" alt="" /></a>
        <div id="hed_right">
          <div id="nav1"><a href="http://electrabike.com/uploads/pdf/Electra-Catalog-v19.pdf">Bike Catalog</a> <a href="http://electrabike.com/uploads/pdf/Electra-Life-Catalog-v19.pdf">Accessories Catalog</a> <a href="http://dealer.electrabike.com">Dealer Log-In</a>
            <p>Follow Us On <span><a href="http://www.facebook.com/ElectraBicycleCompany"><img src="images/icon_01.png" alt="" /></a> <a href="http://www.linkedin.com/company/994641"><img src="images/icon_02.png" alt="" /></a> <a href="http://twitter.com/#!/electra_bicycle"><img src="images/icon_03.png" alt="" /></a></span></p>
          </div>      
         <div class="ddsmoothmenu" id="smoothmenu1">
            <ul>
              <li><a href="index.html"><span><span>Home</span></span></a></li>
              <li><a href="about-us.html"><span><span>Way to Roll</span></span></a></li>
              <li><a href="bikes.html" class="select"><span><span>Bikes</span></span></a>
                <ul>
                
                  <li><a href="verse.html">Verse</a></li>
                  
                  <li><a href="ticino.html">Ticino</a></li>
                  
                  <li><a href="amsterdam.html">Amsterdam</a></li>
                  
                  <li><a href="townie.html">Townie</a></li>
                  
                  <li><a href="cruiser.html">Cruiser</a></li>
                  
                  <li><a href="kids.html">Kids</a></li>
                  
                </ul>
              </li>
              <li><a href="http://shops.electrabike.com/"><span><span>Dealers</span></span></a></li>
              <li><a href="http://store.electrabike.com/eSourceTest/ecom/eSource/default/default.aspx"><span><span>Electra Store</span></span></a></li>
                        <li><a href="http://blog.electrabike.com/"><span><span>Blog</span></span></a></li>
              <li><a href="contact-us.html"><span><span>Contact Us</span></span></a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="body">
        <div id="contact_body">
          <h2>Verse</h2>
          <div id="contact_left">
            <h3>Rethink Fitness. </h3>
            Our bikes aren't simply a means to get from here to there,
    or a piece of equipment in your fitness regimen.
    Introducing the Verse.
    It's our entry to a category that's fairly conventional.
    And fortunately, conventional isn't our strong suit.
    So we infused our unique aesthetic into a fitness-oriented ride
    to give you a bike with speed, versatility and good looks all in one
    package.  A bike that doesn't discriminate against agenda or attire.
    A bike that asks you to rethink what you know about fitness riding.
            <div class="rom_box1">
              <h5>2012 Men's Verse<img src="images/electra_large.jpg" alt="" name="verse" id="verse" img /></h5>
              <br />
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. <span class="price">Find a Local dealer</span> 
              
    <url onclick="TINY.box.show({iframe:'http://dev.electrabike.com/electra/specs/verse/verse.html',boxid:'frameless',width:780,height:760,fixed:false,maskid:'bluemask',maskopacity:40,closejs:function(){closeJS()}})"><a href="#" class="read_more3">Full Specification Sheet</a></url>
    
    <script type="text/javascript">
    function openJS(){alert('loaded')}
    function closeJS(){}
    </script>
    
    
                  
                  
              <ul>
                <li>Shimano E-Z Fire Plus 24-Speed</li>
                <li>Alloy Side-Pull Caliper w/ Quick Release</li>
                <li>Available in Charcoal/Lava and Moss/Sage</li>
              </ul>
              <p>&nbsp;</p>
              <div id="socialwidget"><img src="images/social.png" width="333" border="0" height="67" alt="Social Widget" /></div>
            </div>
            <div class="rom_box1"></div>
          </div>
          
          <div class="clear"></div>
        </div>
      </div>
      <div class="clear"></div>
      <div id="footer"><span><a href="contact-us.html">Support</a><img src="images/spacer.png" width="14" height="8" alt="Spacer" border="0" /><a href="flat.html">Flat Foot Technology</a><img src="images/spacer.png" width="14" height="8" alt="Spacer" border="0" /><a href="http://shops.electrabike.com">Find an Electra Dealer</a><img src="images/spacer.png" width="14" height="8" alt="Spacer" border="0" /><a href="technical.html">Technical</a><img src="images/spacer.png" width="14" height="8" alt="Spacer" border="0" /><a href="privacy.html">Privacy Policy</a> © 2012 Electra Bicycle Company, LLC. All rights reserved.</span></div>
    
    
    
    </div>
    </body>
    </html>

  • #12
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Any additional assistance would be greatly appreciated!

  • #13
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    there does nto appear to be any changes on your live site , source still looks the same as before.....

  • Users who have thanked DanInMa for this post:

    BlackReef (07-27-2012)

  • #14
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DanInMa View Post
    there does nto appear to be any changes on your live site , source still looks the same as before.....
    haha, oh man what luck. I actually just put it back to original this morning to do a quick presentation.

    Anyways i just reverted back to the way it was, you can see it here:

    "I've added the 1.7.1 reference to the very top of the code, and now the menu works, but the image zoom function is not working now, you can see here:"

    http://sneakylink.com/g

  • #15
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok so now we have the problem narrowed down. it's looks like an incompatibility issue between the jquery versions.


    $mainmenu.parent().get(0) is undefined
    http://dev.electrabike.com/electra/js/ddsmoothmenu.js
    Line 35
    this is $mainmenu

    Code:
    var $mainmenu=$("#"+setting.mainmenuid+">ul") I'm guessing maybe its not picking it up right, im looking
    try chahning $mainmenu.parent().get(0).className=setting.classname || "ddsmoothmenu"

    to $mainmenu.parent().attr('class')=setting.classname || "ddsmoothmenu"

    or maybe $mainmenu.parent().get(0).className="ddsmoothmenu"

    - side note you should check out : http://fixingthesejquery.com/#slide1 very useful.
    Last edited by DanInMa; 07-29-2012 at 07:33 PM.

  • Users who have thanked DanInMa for this post:

    BlackReef (07-30-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •