[Support request] Javascript Added to "wp_head" Hook is Breaking Main Menu

[Aaron Harms]

Hey Tom,

First of all, I absolutely LOVE Generate Press! It’s been so easy to work with. Bravo! <3

I ran into a small problem that I’m hoping you can help me out with….

I am working on adding Text Resizing buttons to this site I’m working on: http://www.hhsc.org

To do this, I am using instructions found in this example: http://www.dynamicdrive.com/dynamicindex9/fluidtextresizer.htm

So I am adding this code to the wp_head hook:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

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

When I set everything up, my text-resizing buttons are working properly, but my main navigation breaks. (on mobile, the menu is not clickable (does not drop down), and on desktop the primary navigation item’s hover state will deactivate when hovering over that nav item’s subnav menu)

If I delete out both of the above lines of code from the wp_head hook, my menu functionality works as it should again.

I’m guessing that somehow/someway the new JS is conflicting with Generate Press’s current JS, but I don’t know enough about JavaScript to troubleshoot it / solve it.

Any ideas?

[Tom]

Hi there,

Glad you’re enjoying GP!

Remove this line: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

GP adds jQuery for you.

Also, make sure the src of the second line includes your full website URL, not just the file name.

Hope this helps 🙂

[Aaron Harms]

Hey Tom,

Thanks for the quick reply! 🙂

I went ahead and made sure my src path was absolute in my second line of code. ( http://www.hhsc.org/fluidtextresizer.js )

My text resizing buttons are working as they should. You can test this out at http://www.hhsc.org . Under the entry title of each page, you will see text-resizing buttons (three A’s with borders around them).

But this causes the functionality of my main menu to break.

If I then delete the line of code that you told me to delete, my menu still has the same problem, and my text resizing buttons do not work.

Any other ideas?

[Tom]

Right now this line is causing javascript errors on the page, which will break a lot of different things:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

The currently used jQuery version is 1.12, so as you can see the one they’re telling you to use is very old and not suggested at all.

I’m not sure I see what the resizing script is doing exactly? It shouldn’t technically be working right now as javascript is broken on the page.

[Author]

Posts