0

I have integrated code for a LavaLamp sliding menu which so far works great (I had a few issues but was able to quickly solve them by reading through the boards) however there is one frustrating thing that's in my way. When you initially load a page, the menu hover background is in the wrong position, its close but off a bit. For example, go to the home page and the background state is a little wider than it should be, hover over it and it corrects, now go to another link, say the About page, no problem, but hard refresh and its way off initially, hover again its fine... I don't think my client will like this but can't seem to fix it, please help!

Source: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=all#comments

My page: http://www.kristophersamari.com/concorde/index.html

EDIT: noticed that that depending on the menu item selected as current, the further to the right it is offset. i.e. "home" is only offset a bit. "about us" a little more, etc. then "contact" is way off...

kingkrikkit
  • 11
  • 3
  • could you provide a working fiddle? – Anubhav Apr 08 '14 at 18:40
  • 1
    You should post code here also, so if the site is ever taken down the question will still be relevant. – Matthew Johnson Apr 08 '14 at 21:18
  • Apologies, kind of new to this... created a fiddle but not sure I did it right... I think all relevant code is there but doesnt seem to function at all... http://jsfiddle.net/Q8wB2/ – kingkrikkit Apr 09 '14 at 14:50
  • @kingkrikkit where's jQuery included in yoru jsFiddle? Have you tested it troughly and minified it to the essential code to reproduce the issue? – Roko C. Buljan Apr 09 '14 at 17:15
  • So it appears after going back to the source files and basically rebuilding it again, it turns out the issue was the FONT. I was using a (yes, properly loaded) NARROW font that somehow conflicted with the background, I checked a few other narrow fonts that cause the menu to behave in the exact same way, I have no idea how but it appears to be a spacing issue of some sort... so that's prob where the issue needs to be addressed but I'm not sure there a code solution. – kingkrikkit Apr 09 '14 at 18:10

1 Answers1

1

OK so I found the solution, it was not a spacing issue per se, it was the way the script was being loaded. Because the the script was being loaded by default as $(function() { … } it was creating the space needed for the .back element using the default font space before loading the replacement font which would have defined the correct space needed.
Instead it was suggested on the message boards to replace the $(function() { … } with $(window).load( function() { … } instead, worked perfectly across all browsers!

kingkrikkit
  • 11
  • 3