Jump to content
Stef's Coding Community
Andrea

Dropdown only works on one page --- WHY???

Recommended Posts

http://tinyurl.com/9k52noz

 

Username: Roatan - PW: pelican***

 

There's a drop-down on "Activities" (site is still under construction, so many pages don't even exist yet). Why would the dropdown work on my index page, but not under any of the 'sub' pages? Example, the Padi Courses (first option under the Activities).

 

As far as I'm aware, everything is the same. My link to jQuery is in the head section, and the link to the dropdown file is in my nav include.

 

So WHY WHY WHY is nothing dropping on any of the other pages?

 

PS - I don't really know JavaScript or jQuery - I'm just cutting pasting from some online tutorial I found.

Share this post


Link to post
Share on other sites

Where is the jquery that you are using to create the dropdown? (you should include the jquery library, but also have a couple lines that create the dropdown effect). I'm having trouble finding it.

Share this post


Link to post
Share on other sites

Tto be clear - there are 2 JavaScripts on the index page. The header image gallery and my drop-down navigation. All other pages will only have the navigation, no header image gallery. (I may need another one for an actual photo gallery on the 'photo' page, but I'm not there yet.)

 

Looking at the head section on index.php, I have

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.js" type="text/javascript"></script>

 

then, in the body, directly following the nav html I have:

<script src="js/modernizr.js"></script>

 

Right after this, and I'm only mentioning that since I'm not sure if these two affect each other in any way, follows some JS for the rotating header image:

<script> $(document).ready( function(){ 	$('#slideshowHolder').jqFancyTransitions({ width: 960, height: 300 }); }); </script> <script>  	$('#ft').jqFancyTransitions({ navigation: true, links : false });  </script>

 

Looking at my courses.php page, the head section is identical with the link to the jquery.js file, just no fancytransition file, and the nav including the modernizr.js file are inserted via php include the same as they are into index.php and are identical.

 

So as far as I see it - the only difference is that courses only has one JavaScript running (or not, actually, but it's supposed to), and index.php has two - and it works.

 

Unrelated to this issue - am I understanding this correctly??

 

There is only ONE jquery.js file out there (different versions, but technically, just one file) and that works in connection with all kinds of different JavaScript files, which could be for all kinds of different things. Like here - same jquery.js 'runs' my nav AND my header slideshow.

That was my 'AHA moment' yesterday. Is it valid?

Share this post


Link to post
Share on other sites

I just experience this last week where I had two different scripts both dependent on default jquery.js. What I found is that the version of jquery.js is the latest but it didn't work for my older script(1). So I replaced that jquery.js with an older one and then that script(1) started working fine but the other script(2) failed. Script(2) needed the latest jquery to work while script(1) needed an older version.

 

I'm not saying this is same issue you are having but you will probably need to keep an open mind about it.

 

The other thing to look for is the order.

 

jquery.js (1st)

script one

script two

scritp three

...etc.

 

If one of the script is not working then reorder script one, two and three.

 

jquery.js

script two

script one

script three

...etc.

 

I found this to be helpful especially when I introduce a script with another.

 

Based on what you've provided, I see that this line:

 

<script src="js/jqFancyTransitions.js" type="text/javascript"></script>

 

...is suppose to run both the nav and gallery??

 

Reason I asked is that this line:

 

<script> $(document).ready( function(){ $('#slideshowHolder').jqFancyTransitions({ width: 960, height: 300 }); }); </script>

<script> $('#ft').jqFancyTransitions({ navigation: true, links : false }); </script>

 

Both shows to be using that jqFancyTransitions file.

 

Not sure what that modernizer script is for.

Share this post


Link to post
Share on other sites

I don't think this applies here, as on the page where I run both scripts, BOTH are working. Also, I'm running the very latest jquery. I see what you're saying about version, but if the latest version runs my dropdown on one page, I'd expect it to work on another page as well.

 

It's the courses.php page (no image slider script needed here) where the dropdown doesn't work.

 

These lines are part of the image slider

<script> $(document).ready( function(){          $('#slideshowHolder').jqFancyTransitions({ width: 960, height: 300 });  }); </script> 
<script>   $('#ft').jqFancyTransitions({ navigation: true, links : false });  </script>

 

The modernizer script is the JavaScript file for the dropdown.

 

BTW, I"m not married to this particular dropdown script/method. It's just one of the first ones that looked simple enough to copy over. If there are other suggestions, I'm open.

Share this post


Link to post
Share on other sites

I was about to abort and try Superfish instead, when I decided to try one more time.

 

Turns out, I'd forgotten to add a class="no-js" to my body tag on my courses page, and apparently, the modernizer script needs it to run.

 

But Ben or Eddie or whoever, could you let me know if my thinking re this is correct or not? I think so, but if I'm wrong, it'll save me a lot of headaches correcting that belief now.

 

There is only ONE jquery.js file out there (different versions, but technically, just one file) and that works in connection with all kinds of different JavaScript files, which could be for all kinds of different things. Like here - same jquery.js 'runs' my nav AND my header slideshow.

That was my 'AHA moment' yesterday. Is it valid?

Share this post


Link to post
Share on other sites
Turns out, I'd forgotten to add a class="no-js" to my body tag on my courses page, and apparently, the modernizer script needs it to run.

Not exactly... What tutorial are you following?

 

Here's what's going on... Modernizr doesn't create dropdown menus (see http://modernizr.com/). You should have an additional script in your page for the Javascript dropdown -- probably an extra .js file and a <script></script> section. The reason it works when you have the "no-js" class in your page is because you have CSS set up as a fallback, creating the dropdown using CSS rather than Javascript. The dropdown script is supposed to add the "no-js" class to the page if Javascript isn't enabled, so the navigation will work even if Javascript isn't enabled.

 

Hope that makes sense?

Share this post


Link to post
Share on other sites

Hope that makes sense?

 

It does - darn, and I got so excited when things were actually working for me. Guess I better do some more reading. Thanks.

Share this post


Link to post
Share on other sites

It does - darn, and I got so excited when things were actually working for me. Guess I better do some more reading. Thanks.

There's nothing really wrong with the CSS method, it just doesn't use Javascript, which would add additional effects (for example, maybe fading or sliding down the dropdown rather than simply having it appear. I would go back to whatever tutorial you are following and double check the instructions.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...