Full nav disappears, but TinyNav does not appear in mobile

[jbrookechao]

I originally placed the TinyNav files on my server in /javascripts/tinynav/, and added the code, js calls and css to my head and navigation includes. When I go to mobile size width, the main nav disappears as it should; however, the tiny nav does not appear. Which means the CSS is working, but something is preventing the Javascript from firing.

Because I was curious, I checked the demo.html, that is included in the original zip file, and when it's in a tinynav directory in my javascripts directory, along with the tinynav javascript file, it does the same thing - when it gets to mobile width, the ordered list disappears, but nothing takes its place. But if I put the tinyNav javascript file and demo.html in my root, demo.html works.

So that proved to me that basically the CSS is working beautifully (to disappear the normal navigation), but the javascript is not firing unless all files are in the root.

Here's the thing - my site is an ExpressionEngine site, using the Zurb Foundation framework, so my navigation and head are include files, and have to reside in sub directories. I have absolute links to all my css and javascript files, and the links are correct, so that shouldn't be the problem. When I look at the source file, on the rendered page, the code looks the same, so there really shouldn't be a difference.

I even tried putting the javascript file for TinyNav, in the root, and referencing it with an absolute link to the file in the root, and it still won't work.

Heck, I've even tried putting all of tinynav.min.js in the head, within tags, and it still doesn't fire.

Can someone help me figure out why the javascript is not firing? Could it be a conflict with some other javascript somewhere in Zurb Foundation? Is it the fact that my head and nav are in includes? Although, I shouldn't think that was the problem, since many, many websites use includes to build pieces of their website that remain static across the entire site.

The website url is: http://bradenandvanfossen.com. Any help you could provide would be appreciated.

[stevendavisphoto]

on your main script tag, you have this...

you are missing }); to close the dom ready function. so it should be...

this was throwing an error in the console. that may fix it.

[jbrookechao]

Thanks for pointing that out. What I had was copied and pasted from their code, but I fixed it.

Unfortunately it didn't fix the problem. :-(

[stevendavisphoto]

ok, so your implementation code is correct now, but im seeing a console error that says...

"Uncaught TypeError: Object [object Object] has no method 'tinyNav' "

so it means the plugin is not working. it seems you are trying to load the plugin BEFORE u load jquery, which wont work. it needs to be loaded after. so put the script tag after the jquery library is loaded in the code. i would but it just before the close tag.

[jbrookechao]

If you look at my head code, you will see that the script is after the Jquery call in the head. You said to put it just before the close, but the close of what? The head? The body?

[stevendavisphoto]

so u do. however, u are also loading it again in foundations.min.js toward the end of your main html file, so that might be screwing it up. and i meant before the close of the body tag.

[jbrookechao]

Ok, so I put the script in before the close of the body tag, and it still doesn't work. I think what we're running up against is there is just something about the Zurb Foundation that conflicts with this javascript application.

I can do all the same things, in the demo.html, and it works. But put it in my template code, the exact same way, in the same order, and it breaks.

[stevendavisphoto]

yeah, i think u just have too many scripts running in too many different places. clean up the order and placement of the script tags and then try it. i recommend putting everything just before the closing body tag in this order...

1. jquery
2. jquery plugins
3. your custom JS code that calls the plugin

[jbrookechao]

Other than the order, I cannot help the number of scripts. It's what it takes to run Zurb.

[stevendavisphoto]

and when in doubt, check your console to investigate where the error is coming from.

[stevendavisphoto]

what i normally do, is take away pieces until it works, then add back pieces one by one until it breaks. then u know what broke it, and fix that part.

[jbrookechao]

I've checked the console. It's telling me the same thing it's telling you - the javascript is not firing for this one functionality. I cannot take away anything but tinyNav. I am not about to start removing pieces of what runs the entire framework of the site. My site works. It may be that TinyNav doesn't play well with Zurb, and if that is, then that's just how it is, but I'm not going to sacrifice the framework of my entire site to prove it. Especially when it's live.

[jbrookechao]

I know you mean well, but at some point I don't have the developers skills to figure out why Zurb isn't playing well with TinyNav, beyond the basic troubleshooting. I already know that if this was residing in a plain ol' HTML document in the root, it would work. I already know that much. So I could take away everything about my site, and it would work beautifully. Unfortunately I can't "take away" Zurb Foundation, and even if I did, and proved Zurb was the issue, what then? Rebuild the whole site without using Zurb, just so this free internet script will work?

[stevendavisphoto]

ok, now we're getting the "unexpected end of input" error again because u commented out the code, but u also commented out the closing bracket for the dom ready code...

$(function () { // TinyNav.js $('#nav').tinyNav({ label: 'Menu' }); });

you are also loading jquery twice, thus increasing the load time, so either remove the inclusion of it, or take the code out of foundation.min.js.

[jbrookechao]

I have not commented out the code.

[stevendavisphoto]

im looking at the live page right now. line 238 of index.html

[jbrookechao]

I am also looking at the live page, and it is not commented out. My husband, who is an IT professional has confirmed what I am seeing. You may be viewing a cached version from when I was trying something else out, briefly. I can assure you that the code is not commented out.

I did take out the additional call to jQuery, and it did not solve the problem.

[jbrookechao]

I've given up. I found a Zurb based solution. But thanks for trying! I do appreciate you trying to help.

[virtual]

I had a similar problem but it is because minified foundation has jquery in it, the regular doesn't. So maybe try using https://gist.github.com/4569861 (view Raw) and it will let you use foundation without inserting another copy of jquery.

[maniraj64]

I have a problem regarding tinynav resposive menu. My site is resposive but nav menu is not working. Then, I searched on google and I found some codes on http://tinynav.viljamis.com/ link. But I don't know where, I have to put these codes in wordpress editor. Pls. help me out. How can I make my site responsive?