Skip navigation
ryanholly83177
Currently Being Moderated

spry menu bar displaying as list in firefox

Jun 1, 2012 8:14 AM

Hi all,

I have inherited a website that was developed in dreamweaver CS3.  I am relatively new to dreamweaver, but can get around it a bit.  Anyway, I am having a problem with my horizontal spry menu bar.  It appears just fine in IE, but not in firefox/safari/etc.  When I preview it previews just fine, but when uploaded to the server it causes the list and the menu bar is gone.  Here is a link to the site:

www.yellowstoneresearch.org. 

 

It was working fine until yesterday when I created a new link and wanted to link to a new page.

 

The error I get in firebug is:  Menubar1 undefined.

 

Any help would be appreciated.  I am sure it is something little that I did, but need it fixed soon.

 

Thanks,

Ryan

 
Replies
  • Currently Being Moderated
    Jun 1, 2012 8:21 AM   in reply to ryanholly83177

    The <ul> tag id HAS to be MenuBar1 NOT "urren"

     

    <ul id="urren" class="MenuBarHorizontal">

     

    Also all the links to the spry js are incorrect. They currently point to files of your local computer so you need to put those right.

     

    <script src="file:///Y|/YERCweb/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

    <link href="file:///Y|/YERCweb/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


    <link href="file:///Y|/YERCweb/SpryAssets/PageStyle.css" rel="stylesheet" type="text/css" />

     

    The links should look like below:

     

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

    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />


    <link href="SpryAssets/PageStyle.css" rel="stylesheet" type="text/css" />

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 8:30 AM   in reply to osgood_

    Sorry, the part above about the <ul> id you can forget as I see you have amended the <script> at the foot of the page accordingly, so you just need to sort out the js and css spry links and you should be good to go.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 8:50 AM   in reply to ryanholly83177

    ryanholly83177 wrote:

     

    Should changing the links to the files get rid of the error in firebug MenuBar1 undefined?

    I'm not sure about that one. First step is get the links correct and see what happens.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 11:58 AM   in reply to ryanholly83177

    Try editting the links in code view.

     

    Also, did you define your site in Dreamweaver?  It helps.

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 12:01 PM   in reply to martcol

    What problems are you seeing now when you view the live site?

     

    Did you refresh the browser after uploading any edits?

     

    Martin

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 12:31 PM   in reply to ryanholly83177

    ryanholly83177 wrote:

     

    My template file is also on the remote server.  It should be there right?

     

    Only as a backup in case anything happens to your local copy of the Template.

     

    Only Dreamweaver can make use of the Template markup so it doesn't serve any other purpose outside of the Dreamweaver environment.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 12:47 PM   in reply to ryanholly83177

    htdocs is the virtual folder on the remote server in which your website resides. Should not be visible in any links.

     

    Is your local Template located inside a folder named Templates in the root of your local site?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 2:11 PM   in reply to ryanholly83177
    1. Create a copy of the Template locally (in case you ever need to revert back to it)
    2. Open the Template file in DW
    3. Edit > Find and Replace
      Find in: Current Document
      Search: Source code
      Find: a href="../htdocs/
      Replace: a href="../
      Replace All
    4. When prompted to update all Child pages, click Yes.
    5. Upload all changed Child pages to the remote server
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 2:34 PM   in reply to ryanholly83177

    When links go bad, it's almost always an indication that your site definition settings are not right.

     

    HTDOCS is the root folder for your Remote server, right?

     

    Then you must define it in your REMOTE site setup; not your LOCAL site folder. 

     

    See screenshot from Sites > Manage Sites > Edit Site > Servers...

     

    CS6-remote-site-root-folder.jpg

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 1, 2012 3:10 PM   in reply to ryanholly83177

    Links inside template.dwt files must be preceded by 2 dots and a forward slash to get out of the TEMPLATE folder and into the SPRY folder.

     

    ../SpryAssets/PageStyle.css

    ../SpryAssets/SpryMenuBar.js

     

    DW will intuitively reconcile these paths for you in all your Child Pages as long as your site definitions are configured correctly.

     

    Make sense?

     

     

    Nancy O.

     

    Message was edited by: Nancy O.  I forgot a forward slash.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 3:31 PM   in reply to Nancy O.

    I have a similar problem using Dreamweaver CS 6.

    I'm just checking out Spry Menu Bar 2.0, to see if it'll work on an iPhone.

     

    (My current Spry menus, from Dreamweaver 5.0, almost work. If I tap on a menu item with submenus nothing happens. If I then tap on a different menu item with submenus, it works. And the first one also works subsequently.)

     

    What I did was create a blank page with nothing on it but Spry Menu Bar 2.0, inserted with Insert > Widget. The only changes I made to the stock template was to choose vertical.

    In Dreamweaver's Live view, the menu looks as expected. In the preview in Safari or Firefox, it also works.

     

    But when I upload to the server, all I see is an indented text list. I get warnings that two .js files are needed. But they're there, and I think they're linked right.

     

    Here's the main site, with old Spry Menu Bar code that almost works on an iPhone 4:

    http://onh.eugraph.com

     

    Here's the URL for the test page with the Spry Menu Bar 2.0 code:

    http://onh.eugraph.com/test

     

    Thanks for any suggestions.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 3:55 PM   in reply to Klahane

    If you want to save some time, I have a working Spry Menu 2.0 Test page you can preview in your iPhone. 

    http://alt-web.com/DEMOS/Spry-test.html

     

    I think your Spry files became corrupted on upload.  Not sure why.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 8, 2012 6:37 PM   in reply to Nancy O.

    Thanks.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2012 9:40 AM   in reply to Nancy O.

    I'm still stuck on this.

    I've deleted and reuploaded the Spry-UI-1.7 folder.

    I've tried building a whole new test page.

    I think the links to the SpryWidget.js and SpryMenu.js, etc. are correct, and I can see the files in a browser on the server if I navigate manually.

    I've also checked on a different Mac and from my iPhone and still get the same error.

     

    I've looked at the source of your test page, and can't see anything different except that you have a SpryWidgets folder.

     

    And again, the menu works as expected in Live and Preview in Safari or Firefox.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2012 10:09 AM   in reply to Klahane

    This has come up before.  I don't know why it occurs but something is corrupting your Spry .js  files on upload. 

     

    Try using a dedicated FTP like Filezilla or Cute and set the transfer mode to ASCII; not Binary or Both.  ASCII is used for transferring text files.  Binary is used for images & media.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2012 11:32 AM   in reply to Nancy O.

    Excellent. Thank you.

    I used Cyberduck (the only stand-alone ftp app I have on hand), deleted the Spry-UI-1.7 folder, then uploaded it. Now I get no errors and the menu works.

    I wonder if there's a setting in Dreamweaver I could fix.

     

    Unfortunately, the Menu Bar 2.0 doesn't quite work right in Mobile Safari on an iPhone. The first tap causes the submenu to appear and then disappear instantly. The second tap brings up the submenu.

     

    I see the same thing on the test page you made.

     

    The Project Seven example page works with only one tap on the main menu item, but there is an annoying flicker of the main menu item before the submenu drops.

     

    I'll think about this a bit. Maybe I should just try a different approach altogether.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 13, 2012 10:00 AM   in reply to Klahane

    Looking again at the older Spry Menu bar on this site http://onh.eugraph.com  from my iPhone, I have an inkling of what might be going on.

     

    It looks as if something doesn't load when the page loads. A first tap on a menu item loads that something. Then tapping on any other main menu item works as expected, producing the submenus. (I don't know why the first main menu item gets stuck until you try another one.)

     

    I vaguely remember being able to preload images somehow.

    Is there a way to force preload the Spry components?

     

    Given that all the alternatives I've checked into have their own imperfections, I'm inclined to wait for Safari in iOS 6 just in case that behaves differently, at least before I do a lot of rebuilding.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points