PDA

View Full Version : DWcs4 Template editable region and Spry Menu


web-val
06-16-2009, 11:20 PM
Is it possible to insert a spry menu for example in a template editable region ?

And if not, how can I use a template with a Spry menu that I may want to change in the future?

Thank you.

edbr
06-17-2009, 01:46 AM
i dont use dw templates but i sure you can providing you have the links to the javascript and css files for it on any page that uses it

web-val
06-17-2009, 02:26 AM
i dont use dw templates but i sure you can providing you have the links to the javascript and css files for it on any page that uses it

Thank you edbr. I would think too but I am going by elimination knowing that the Spy menu works well in a new page but stop showing the submenu as soon as it is incorporated in an editable region. Could the problem come from the way I incorporated the menu code, knowing that the .css and .js used are the same as on the new page.

Here is the code of my template and in blue is the code I copied from the page where the menu was working

[CODE]<!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">
<link href="SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryMenuBar.js" type="text/javascript"></script>
<!-- InstanceBegin template="/Templates/main-design-page.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../basetemplatepage.css" rel="stylesheet" type="text/css" /><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->
</head>

<body class="twoColHybLtHdr">

<div id="container">
<div id="header">
<h1>
<img src="../LogoVoila.jpg" width="202" height="88" alt="logovoila" /><img src="../helpingyou-header.jpg" width="555" height="92" longdesc="../helpingyou-header.jpg" /><br />
</h1>
</div>
<div id="header2">
<h1>
<!-- end #header -->
<!-- InstanceBeginEditable name="EditRegion5" -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Portraiture</a>
<ul>
<li><a href="#" class="MenuBarItemSubmenu">Family Portrait</a>
<ul>
<li><a href="#">Portrait On Location</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Retouching</a></li>
<li><a href="#">A La Carte prices</a></li>
<li><a href="#">Custom Cards</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Children</a>
<ul>
<li><a href="#">Kindergarten</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Custom Cards</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">HS Seniors</a>
<ul>
<li><a href="#">It's about You</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Be at your Best</a></li>
<li><a href="#">Packages</a></li>
<li><a href="#">Custom Cards</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Executives</a>
<ul>
<li><a href="#">Head Shots</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Business Cards</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Pets</a>
<ul>
<li><a href="#">Pets Session</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Prices</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Weddings</a>
<ul>
<li><a href="#">Your Wedding Day</a></li>
<li><a href="#">Previews</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Registry</a></li>
<li><a href="#">Be at your Best</a></li>
<li><a href="#">Collections</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Events</a>
<ul>
<li><a href="#">Sports</a> </li>
<li><a href="#">Prom-Dance</a></li>
<li><a href="#">Others</a></li>
</ul>
</li>
<li><a href="#">Through my eyes</a> </li>
<li><a href="#">Bio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Links</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"./SpryMenuBarDownHover.gif", imgRight:"./SpryMenuBarRightHover.gif"});
//-->
</script>
<!-- InstanceEndEditable --></h1>
<h1><img src="../grey-bande.jpg" width="811" height="36" alt="greybande" /><br />
</h1>
</div>
<div id="sidebar1"><!-- InstanceBeginEditable name="EditRegion3" -->


I am close, please help :)

DWcourse
06-17-2009, 02:19 PM
Is the new page in the same folder as the one your copied the code from? if not you may need to update the links to the css and js files.

web-val
06-17-2009, 03:07 PM
Is the new page in the same folder as the one your copied the code from? if not you may need to update the links to the css and js files.

Thanks DW. I fixed the issue: the problem was to have together the Spry menu and the editable region of the template. I had to enlarge the editable region to have "room" to include the menu.