Results 1 to 7 of 7

Thread: jQuery Gooey Menu Problem

  1. #1
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jQuery Gooey Menu Problem

    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

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Make sure the location(path to) the
    Code:
    <script src="scripts/gooeymenu.js">
    Is correct.
    Thanks,

    Bud

  3. #3
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    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)
    Last edited by Beverleyh; 02-21-2013 at 04:24 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,982
    Thanks
    16
    Thanked 311 Times in 309 Posts
    Blog Entries
    11

    Default

    This link should help explain what degradation is: http://webdesign.about.com/od/webdes...egradation.htm
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanx again! You've been a great help.

Similar Threads

  1. jQuery Gooey Menu Confllict Problem
    By psonar19 in forum JavaScript
    Replies: 2
    Last Post: 12-10-2012, 10:30 PM
  2. jQuery Gooey Menu Problem
    By timm in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-04-2012, 01:04 PM
  3. jQuery Gooey Menu
    By gjhunter in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 06-24-2012, 04:09 PM
  4. jQuery Gooey Menu Problem
    By kollege in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-11-2011, 10:35 AM
  5. jQuery Gooey Menu Bar problem
    By xfyre99 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-23-2011, 11:14 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •