Spry Menu Bar in Template .js Issues


	Cow Forums : Adobe Dreamweaver << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

Spry Menu Bar in Template .js Issues
by Kristen Dormaier on Jul 1, 2009 at 11:14:41 pm

I created a Horizontal Spry Menu Bar with submenus and it works perfectly on the page I created it on. I added the same code, and linked the CSS and .js file to my template for the site, but it is actling like the .js isn't attached, even in the Live View mode. The css is linked correctly-- it has the right appearance, but no submenus appear on rollover. Any recommendations?

To view the beta site of the page it does work on (this page does not use the template): http://www.gilbertassociates.com/new09/gahome1.html.

To view a page with using the template: http://www.gilbertassociates.com/new09/products.html

The Code for the template:

<!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>Untitled Document</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" media="screen" 

href="../CSSFiles/ie.css" />    

<![endif]-->



<!--[if IE 5]>

<style type="text/css"> 

/* place css box model fixes for IE 5* in this conditional comment */

.twoColFixLtHdr #sidebar1 { width: 230px; }

</style>

<![endif]-->

<!--[if IE]>

<style type="text/css"> 

/* place css fixes for all versions of IE in this conditional comment */

.twoColFixLtHdr #sidebar1 { padding-top: 30px; }

.twoColFixLtHdr #mainContent { zoom: 1; }

/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

</style>

<![endif]-->

<style type="text/css">

<!--

-->

</style>

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

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

<script type="text/javascript">

<!--

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

//-->

</script>



<!-- TemplateParam name="scndrynav" type="boolean" value="true" -->



</head>



<body class="twoColFixLtHdr">



<div id="container">

   <div id="header">

  

<table width="907" border="0" cellpadding="0" cellspacing="0">

      <tr>

        <td width="245" rowspan="2"><div class="galogo"><a href="gahome1.html"><img src="images/new/galogo.png" alt="Gilbert &amp; Associates" width="199" height="86" border="0" /></a></div></td>

        <td height="40" colspan="2"><div class="quicklinks">

          <ul>

            <li><a href="support.html">Support Links</a></li>

            <li><a href="contactus.html">Contact Us</a></li>

          </ul>

        </div></td>

      </tr>

      <tr>

        <td height="37" colspan="2"><!-- TemplateBeginEditable name="header" -->

          <div class="keywords">

            <h1>Content for  class "keywords" Goes Here</h1>

          </div>

        <!-- TemplateEndEditable --></td>

      </tr>

      <tr>

        <td width="245">&nbsp;</td>

        <td width="59" height="40">&nbsp;</td>

        <td width="603">

<div class="links">

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

      <li><a class="MenuBarItemSubmenu" href="products.html">Products</a>

        <ul>

          <li><a href="nav.html">Microsoft Dynamics NAV</a></li>

          <li><a href="SagePro.html">Sage Pro ERP</a></li>

          <li><a href="sagecrm.html">Sage CRM</a></li>

          <li><a href="addon.html">Add-On Products</a></li>

        </ul>

      </li>

      <li><a href="solutions.html" class="MenuBarItemSubmenu">Solutions</a>

        <ul>

          <li><a href="wholesaledistribution.html">Wholesale Distribution</a></li>

          <li><a href="manufacturing.html">Manufacturing</a></li>

          <li><a href="financialmanagement.html">Financial Management</a></li>

          <li><a href="crm.html">Customer Relationship Management</a></li>

        </ul>

      </li>

      <li><a href="resources.html" class="MenuBarItemSubmenu">Resources</a>

        <ul>

  <li><a href="doc.html">Document Library</a></li>

  <li><a href="news.html">Newsletter</a></li>

  <li><a href="events.html">Events</a></li>

  <li><a href="faqs.html">FAQs</a></li>

  <li><a href="#">Blog</a></li>

          </ul>

      </li>

      <li><a href="services.html">Services</a></li>

      <li><a href="about.html" class="MenuBarItemSubmenu">About Us</a>

        <ul>

<li><a href="TheTeam.html">Who We Are</a></li>

<li><a href="teambios.html">Our Team</a></li>

<li><a href="careers.html">Careers</a></li>

<li><a href="contactus.html">Contact Us</a></li>

        </ul>

      </li>

    </ul>

  </div>

</td>

      </tr>

    </table>

    <!-- end #header -->

  </div>

  <div id="sidebar1">

    <table width="200" border="0" align="center" cellpadding="0" cellspacing="2" id="logoholder">

      <tr>

        <td colspan="2"><div id="tagline"></div></td>

      </tr>

      <tr>

        <td colspan="2">&nbsp;</td>

      </tr>

      <tr>

        <td><div id="sagelogo"></div></td>

        <td><div id="msftlogo"></div></td>

      </tr>

      <tr>

        <td height="18" colspan="2">&nbsp;</td>

      </tr>

    </table>

    <div class="scndrynav"></div>

    <!-- TemplateBeginEditable name="CustomerQuote" -->

    <div class="quote" id="quote">

      <h4>&quot;Content for  class "quote" Goes Here, centered&quot;</h4>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

      <p>&nbsp;</p>

    </div>

    <!-- TemplateEndEditable -->

    <p>&nbsp;</p>

    <!-- TemplateBeginEditable name="Sidebar" -->

    <h3>&nbsp;</h3>

    <h3>Sidebar1 Content</h3>

    <p>text</p>

    <!-- TemplateEndEditable -->

    <!-- end #sidebar1 --></div>

  <!-- TemplateBeginEditable name="MainContent" -->

  <div id="mainContent">

    <h1>&nbsp;</h1>

<p>&nbsp;</p>

    <!-- end #mainContent -->

  </div>

  <!-- TemplateEndEditable -->

  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />

  <div id="footer">

    <p>Seattle, WA | p:206.284.4348 | <a href="mailto:kristen@gilbertassociates.com">Email Us</a><br />

      <a href="privacy.html">Privacy Statement</a> | <a href="sitemap.html">Site Map </a><br />

&copy;2009 Gilbert &amp; Associates, All Rights Reserved.</p>

    <!-- TemplateBeginEditable name="footerkeywords" -->

    <p>We are business process software experts specializing in Microsoft Dynamics NAV, Sage Pro ERP, and Sage CRM for small to mid-sized wholesale distribution and manufacturing companies in Washington and Alaska. </p>

    <!-- TemplateEndEditable -->

  <!-- end #footer --></div>

<!-- end #container --></div>

</body>

</html>

Kristen

Respond to this post • Return to posts index

Re: Spry Menu Bar in Template .js Issues
by Richard Williams on Jul 2, 2009 at 2:46:59 pm

Yeh, this is one of the issues with using a template and a spry.

When you create a spry, it puts in the script for including the files it needs, and it puts in the list objects, and it then also puts in code at the bottom which are the variables for your scripts. This part misses out when you use template insertion.

You need to include this at the bottom of your template page so it copies to all pages. (see code of your page that works)

<script type="text/javascript">

<!--

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });

var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { contentIsOpen: false });

var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", { contentIsOpen: false });

var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", { contentIsOpen: false });

var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", { contentIsOpen: false });

var MenuBar1 = new Spry.Widget.MenuBar("Navigation", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

Richard Williams

Respond to this post • Return to posts index

Re: Spry Menu Bar in Template .js Issues
by Kristen Dormaier on Jul 7, 2009 at 4:31:31 pm

That worked! Thanks for your help!

Kristen

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>