jQuery Gooey Menu Problem

**CarvellKid** · 02-20-2013, 10:03 PM

1) Script Title: jQuery Gooey Menu

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

3) Describe problem: I have this sample set up for a friend to see and the menu works great on my local preview, but then when I upload it to my server it doesn't work live. I am very new to this and don't know what I may be doing wrong. Thank you. www.payitforwardonline.org/Sample2.html

**ajfmrf** · 02-21-2013, 12:41 PM

Make sure the location(path to) the

Code:

<script src="scripts/gooeymenu.js">

Is correct.

**CarvellKid** · 02-21-2013, 04:01 PM

So based on your response it made me think that maybe it was because I had put the gooeymenu.js file in it's own folder. The path was correct to the folder, but it seemed to be jamming it up. When I moved the file to the root folder and changed the path, the gooey bubble showed up, but there is still a big black bar behind everything. I had copied the css out of the external css file and embedded it directly into the head of the html file. Could that be where I messed it up now? Thanx so much for the help.

**Beverleyh** · 02-21-2013, 05:01 PM

The gap is because your elements are all freely stacking on each other in the page - they are not positioned or confined within divs (or in your case, tables) so they are just falling into the available space in whatever order they appear in the markup. The menu has no background colour, but it does have height so its occupying space, and it is that which is causing the black bar.

Maintaining your use of tables (and to avoid confusing you with divs while you're learning), I'd suggest containing all of your elements in one large outer table to give it better overall structure. Something like...

Code:

<body>
<table width="960" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
	<td><img src="images/PayItForward.png" width="398" height="99"></td>
    </tr>
    <tr>
	<td bgcolor="#FFFFFF">
		<ul id="gooeymenu1" class="gelbuttonmenu" style="z-index:100">
		  <li><a href="#">Home</a></li>
		  <li><a href="#">Pay It Forward</a></li>
		  <li><a href="#">Who We Are</a></li>
		  <li><a href="#">News</a></li>
		  <li><a href="#">Contact Us</a></li>
		  <li><a href="#">FAQs</a></li>
		</ul>
		<script>gooeymenu.setup({id:'gooeymenu1', selectitem:0})</script>
	</td>
    </tr>
    <tr>
    	<td height="600" align="center" valign="top" bgcolor="#FFFFFF"><img src="images/line.png" width="827" height="5" align="texttop"></td>
    </tr>
    <tr>
    	<td height="95" background="images/Footer_Bkgd.gif">&nbsp;</td>
    </tr>
</table>
</body>

Note the additional changes in red - setting the cell background which contains the menu to white and also setting the z-index on the menu to a higher number to make sure it lays on top of everything else.
You can move that to the CSS - I just put it all in the HTML markup so you could see how it applies.

Also, don't forget to close your tags (I added the closing </table> tag to tie things up)

**CarvellKid** · 02-21-2013, 06:10 PM

Thank you Beverleyh! That did the trick and even explained a bit for me. It looks like I need to read up on the correct stacking order. Is that also referred to as "degradation" or "degrading code"? I've seen a lot of people talking about that on their forums. Thanx again from the novice!