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
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" />
OK,
So I couldn't find anywhere in my template or other pages where i could change the links. They all seemed to be coming up with the links that you wanted me to change them to. I did change urren to MenuBar1, and applied to the site, but obviuosly something very screwy happened. Could you take a look at the site and see if you can help me troubleshoot. Sorry for the newb questions, but I seem to be really struggling.
Thanks again for all of the help
This must all have to do with the menubar and how I am telling it to access the files. I can go to the www.yellowstoneresearch.org site and see it just fine. i can click on the side bar menu items and see it just fine. but as soon as I try to use the menu bar it gives me the error message. I am wondering if it has to do with the files that are on the remote site. When i preview my local files in firefox they look fine. Here is the text of my template file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>YERC Template 1</title>
<!-- TemplateEndEditable -->
<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" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
a:link {
color: #252F24;
text-decoration: none;
}
a:visited {
color: #252F24;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #DB651E;
}
a:active {
text-decoration: none;
}
.style1 {
font-size: 13px;
font-style: italic;
}
-->
</style></head>
<body>
<div id="Wrapper">
<div align="left"><img src="../Pics/YERC_BannerNew.png" alt="YERC" width="869" height="110" border="0" /><br />
</div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../htdocs/index.html">Home</a> </li>
<li><a href="../htdocs/about.html" class="MenuBarItemSubmenu">About</a>
<ul>
<li><a href="../htdocs/about_mission.html">Mission</a></li>
<li><a href="../htdocs/about_gye.html">The GYE</a></li>
<li><a href="../htdocs/contact_us.html">Contact Us</a></li>
<li><a href="../htdocs/about_opportunities.html">Opportunities</a></li>
</ul>
</li>
<li><a href="../htdocs/projects.html" class="MenuBarItemSubmenu">Projects</a>
<ul>
<li><a href="../htdocs/projects_rspf-down.html">RSPF Tool</a></li>
<li><a href="../htdocs/projects_climatescape.html">ClimateScape</a></li>
<li><a href="../htdocs/projects_coaster.html">Coaster Data</a></li>
<li><a href="../htdocs/projects_wiki.html">Geospatial Data Wiki</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="../htdocs/research.html">Research</a>
<ul>
<li><a href="../htdocs/research_overview.html">Overview</a> </li>
<li><a href="../htdocs/news.html">News</a></li>
<li><a href="../htdocs/research_plan.html">5 Year Plan</a></li>
<li><a href="../htdocs/research_pubs.html" class="MenuBarItemSubmenu">Publications</a>
<ul>
<li><a href="../htdocs/research_pubs-date.html">Publications By Year</a></li>
<li><a href="../htdocs/research_pubs-topic.html">Publications By Topic</a></li>
</ul>
</li>
<li><a href="../htdocs/research_data-colabs.html" class="MenuBarItemSubmenu">Data & Collaboration</a>
<ul>
<li><a href="../htdocs/projects_wiki.html">Geospatial Data Wiki</a></li>
<li><a href="../htdocs/research_data-colabs_lowcost.html">Low Cost Data Layers</a></li>
</ul>
</li>
<li><a href="../htdocs/research_hightech.html" class="MenuBarItemSubmenu">High Tech Landscapes</a>
<ul>
<li><a href="../htdocs/research_hightech-rs.html">Remote Sensing</a></li>
<li><a href="../htdocs/research_hightech-model.html">Modeling</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="../htdocs/people.html">People</a></li>
<li><a href="../htdocs/education.html" class="MenuBarItemSubmenu">Education</a>
<ul>
<li><a href="../htdocs/education_workstudy.html">Work Study Program</a></li>
<li><a href="../htdocs/education_hayden.html" class="MenuBarItemSubmenu">Beyond Hayden</a>
<ul>
<li><a href="../htdocs/education_hayden_inspiration.html">Program Inspiration </a></li>
<li><a href="../htdocs/education_hayden_interns.html">Interns</a></li>
<li><a href="../htdocs/education_hayden_achievement.html">Program Achievements</a></li>
</ul>
</li>
<li><a href="../htdocs/education_engineering.html">Engineering Capstones</a></li>
</ul>
</li>
<li><a href="../htdocs/fieldstation.html" class="MenuBarItemSubmenu">Field Station</a>
<ul>
<li><a href="../htdocs/fieldstation_location.html">About</a></li>
<li><a href="../htdocs/fieldstation_future.html">Looking to the Future</a> </li>
<li><a href="../htdocs/fieldstation_plans.html">Plans & Models</a></li>
</ul>
</li>
<li><a href="../htdocs/donate.html" class="MenuBarItemSubmenu">Donate</a>
<ul>
<li><a href="../htdocs/store.html">Buy a GYE Map</a></li>
</ul>
</li>
</ul>
<table width="873" height="509" border="0" cellpadding="10" bordercolor="#000000">
<tr>
<td width="158" height="505" valign="top" bgcolor="#A5B7A3"><div align="center"><img src="../Pics/yercLogo_small.png" alt="YERC" border="0" /></div>
<!-- TemplateBeginEditable name="Sub_Navagation" -->
<h2 class="style16"><span class="style9 style8">Page Theme</span> <span class="style11">(research, news, education...)</span></h2>
<ul class="style12 style16">
<li class="style11">
<h3>point/link 1</h3>
</li>
<li class="style11">
<h3>point/link 2</h3>
</li>
<li class="style11">
<h3>point/link 3</h3>
</li>
</ul>
<!-- TemplateEndEditable --></td>
<td width="671" valign="top" bgcolor="#F0F5FF"><p><!-- TemplateBeginEditable name="Picture" --><img src="../Pics/image_example.png" alt="header pic" width="650" height="200" /><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Main" -->
<blockquote>
<h1 class="style6"><strong>.....NOW DOESN'T THIS LOOK NICE?!?!</strong></h1>
<h4 class="style6">Coming soon!!!</h4>
</blockquote>
<!-- TemplateEndEditable --></td>
</tr>
</table>
<div align="center">
<p><img src="../Pics/contact_bar2.png" width="873" height="100" /><br />
<span class="style1">Copyright YERC 2011 Forward. All Rights Reserved.<br /> Web Design by <a href="../htdocs/winkelman.html">B. Winkelman</a></span></p>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script></body>
</html>
My template file is also on the remote server. It should be there right?
Thanks for your help
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.
So when I try to open the page the page it is trying to go to is:
http://www.yellowstoneresearch.org/htdocs/about.html
this happens with all of the pages. Wehn I use the link icon on the template I link it to the file on the local by using the little crosshair icon. It is then showing that the link is ../about.html. Clearly I have linked it, but it still gives the same messsage. I update all the pages with the template when the window comes up after saving. Then I update all of my pages to the remote server.
Any thoughts?
Yes the template is in a template folder named templates in the root of my local site. I did notice that if I get rid of the ../ in the following example:
<li><a href="about.html" class="MenuBarItemSubmenu"> instead of
<li><a href="../about.html" class="MenuBarItemSubmenu">
Then if i go to yellowstoneresearch.org/about, it shows up. But, if I click on the menu bar on about then it give me the same error page, and the link it is trying to find is:
http://www.yellowstoneresearch.org/htdocs/about.html
with htdocs in grey.
Ok, this is getting frusterating. If i type in the site say www.http://www.yellowstoneresearch.org/projects_coaster.html, I can see the page just fine. Menu bar Looks fine and no more bulleted list. However, when ever I try to click on any menu bar item or submenu I get taken back to the 404 error page that says it cannot find the file. I just don't get it.
help
Ryan
Ok, I did that and it replaced everything, but never got a promp to update child pages. When I hit the apply button from the assets panel, I get an error message "some regions in this document have no corresponding regions in the new template. Editable regions document body, document head. I have been trying to figure this one out, but I ended up getting a template nested etc. so I reverted to a copy of the template. I have now done the find/replace, but can't apply until I get this one figured out.
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...
Nancy O.
Yes, that is what it is.
Here is the code for my template. Is there anything in there that you see as wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>YERC Template 1</title>
<!-- TemplateEndEditable -->
<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" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
a:link {
color: #252F24;
text-decoration: none;
}
a:visited {
color: #252F24;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #DB651E;
}
a:active {
text-decoration: none;
}
.style1 {
font-size: 13px;
font-style: italic;
}
-->
</style></head>
<body>
<div id="Wrapper">
<div align="left"><img src="../Pics/YERC_BannerNew.jpg" alt="YERC" width="871" height="95" border="0" /><br />
</div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.html">Home</a> </li>
<li><a href="../about.html" class="MenuBarItemSubmenu">About</a>
<ul>
<li><a href="../about_mission.html">Mission</a></li>
<li><a href="../about_gye.html">The GYE</a></li>
<li><a href="../contact_us.html">Contact Us</a></li>
<li><a href="../about_opportunities.html">Opportunities</a></li>
</ul>
</li>
<li><a href="../projects.html" class="MenuBarItemSubmenu">Projects</a>
<ul>
<li><a href="../projects_rspf-down.html">RSPF Tool</a></li>
<li><a href="../projects_climatescape.html">ClimateScape</a></li>
<li><a href="../projects_coaster.html">Coaster Data</a></li>
<li><a href="../projects_wiki.html">Geospatial Data Wiki</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="../research.html">Research</a>
<ul>
<li><a href="../research_overview.html">Overview</a> </li>
<li><a href="../news.html">News</a></li>
<li><a href="../research_plan.html">5 Year Plan</a></li>
<li><a href="../research_pubs.html" class="MenuBarItemSubmenu">Publications</a>
<ul>
<li><a href="../research_pubs-date.html">Publications By Year</a></li>
<li><a href="../research_pubs-topic.html">Publications By Topic</a></li>
</ul>
</li>
<li><a href="../research_data-colabs.html" class="MenuBarItemSubmenu">Data & Collaboration</a>
<ul>
<li><a href="../projects_wiki.html">Geospatial Data Wiki</a></li>
<li><a href="../research_data-colabs_lowcost.html">Low Cost Data Layers</a></li>
</ul>
</li>
<li><a href="../research_hightech.html" class="MenuBarItemSubmenu">High Tech Landscapes</a>
<ul>
<li><a href="../research_hightech-rs.html">Remote Sensing</a></li>
<li><a href="../research_hightech-model.html">Modeling</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="../people.html">People</a></li>
<li><a href="../education.html" class="MenuBarItemSubmenu">Education</a>
<ul>
<li><a href="../education_workstudy.html">Work Study Program</a></li>
<li><a href="../education_hayden.html" class="MenuBarItemSubmenu">Beyond Hayden</a>
<ul>
<li><a href="../education_hayden_inspiration.html">Program Inspiration </a></li>
<li><a href="../education_hayden_interns.html">Interns</a></li>
<li><a href="../education_hayden_achievement.html">Program Achievements</a></li>
</ul>
</li>
<li><a href="../education_engineering.html">Engineering Capstones</a></li>
</ul>
</li>
<li><a href="../fieldstation.html" class="MenuBarItemSubmenu">Field Station</a>
<ul>
<li><a href="../fieldstation_location.html">About</a></li>
<li><a href="../fieldstation_future.html">Looking to the Future</a> </li>
<li><a href="../fieldstation_plans.html">Plans & Models</a></li>
</ul>
</li>
<li><a href="../donate.html" class="MenuBarItemSubmenu">Donate</a>
<ul>
<li><a href="../store.html">Buy a GYE Map</a></li>
</ul>
</li>
</ul>
<table width="873" height="509" border="0" cellpadding="10" bordercolor="#000000">
<tr>
<td width="158" height="505" valign="top" bgcolor="#A5B7A3"><div align="center"><img src="../Pics/yercLogo_small.png" alt="YERC" border="0" /></div>
<!-- TemplateBeginEditable name="Sub_Navagation" -->
<h2 class="style16"><span class="style9 style8">Page Theme</span> <span class="style11">(research, news, education...)</span></h2>
<ul class="style12 style16">
<li class="style11">
<h3>point/link 1</h3>
</li>
<li class="style11">
<h3>point/link 2</h3>
</li>
<li class="style11">
<h3>point/link 3</h3>
</li>
</ul>
<!-- TemplateEndEditable --></td>
<td width="671" valign="top" bgcolor="#F0F5FF"><p><!-- TemplateBeginEditable name="Picture" --><img src="../Pics/image_example.png" alt="header pic" width="650" height="200" /><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="Main" -->
<blockquote>
<h1 class="style6"><strong>.....NOW DOESN'T THIS LOOK NICE?!?!</strong></h1>
<h4 class="style6">Coming soon!!!</h4>
</blockquote>
<!-- TemplateEndEditable --></td>
</tr>
</table>
<div align="center">
<p><img src="../Pics/contact_bar2.png" width="873" height="100" /><br />
<span class="style1">Copyright YERC 2011 Forward. All Rights Reserved.<br /> Web Design by <a href="../winkelman.html">B. Winkelman</a></span></p>
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script></body>
</html>
Osgood had told me to do this:
<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" />
If I do this then it shows my menu bar a a list and now menu bar when I make the changes.
Still getting this edible regions error as well if I try to apply.
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.
I realized that just before you posted. I don't know if it was that or the several other things that I did in the meantime, or a combination of all (likely), but thank you all as I now have a working site again. I still need to get in and clean this thing up a bit, but thanks to you my boss won't beat me for haveing the site down over the weekend:)
Thanks everyone
Ryan
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:
Here's the URL for the test page with the Spry Menu Bar 2.0 code:
Thanks for any suggestions.
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.
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.
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.
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.
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.
North America
Europe, Middle East and Africa
Asia Pacific