View Full Version : jQuery Gooey Menu (zooming and resizing issues)

03-03-2018, 03:30 AM
1) Script Title: jQuery Gooey Menu (zooming and resizing issues)

2) Script URL (on DD): See original code on http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm

3) Describe problem:


I realize this is an older script, but maybe someone can quickly help me because I'm not making any progress in resolving this issue. The jQuery Gooey Menu works great for the most part, but I've noticed various resizing issues depending on the browsers/platform used (PC vs. mobile).

On a mobile device browser, when you resize the webpage (pinch to zoom-in), the menu automatically tries to fit itself in the viewing area by splitting into multiple lines. You can also see this behavior in the gooey demo page http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm when running in a PC based browser.

I don't know if this related, but I've also noticed an additional issue on a PC based browser when I added the code to my webpages. In this case, when I resize the webpage (either zoom-in and/or reduce the browser width to it's minimum), part of the background gradient on the right hand side of the menu seems to disappear?

So my question is: is there a way to force the menu to remain fixed to it's original size? I've played with the configuration (in the gooeymenu.css) and can't seem to figure out how to force the gooey menu to remain in a single line, or how to prevent the background gradient from disappearing when resized/zoomed?

Any help would be greatly appreciated.

Tks... :)

03-22-2018, 07:47 PM
Thanks vikaskundu for your reply. After digging deeper into the Opera mobile browser, I noticed that "Text Wrap" was turned on in the "Settings" of the "Context" section. When I turned that off, the resizing/fitting of the menu to fit into the window stopped. I would think that setting the "Default User Agent" to "Desktop" in the Settings would have automatically prevented the resizing, but I guess not.

As far as the second part of my question regarding the gradient disappearing goes, I ended up adding another <Div> underneath the menu with the background set to a gradient .jpg and that seemed to fix the problem.

Here is the site that I'm referring to: https://ambrozuk.com/Book.aspx

Just thought I'd pass this on in case others are having similar issues.
Cheers... :)