PDA

View Full Version : Spry CSS Properties - Responding on one page, not another


dbepp
07-14-2011, 03:33 PM
I have created a website where I copied a "parent" page and edited the content.. creating new html pages every time. The problem I have run in to is that only on a few pages (cta buttons) does my Spry Menubar not respond to the horizontal CSS properties.. I think there may be a conflict with some javascript involved since I have some forms included on the page as well. The only thing is, is that it works fine on the "warranty register page" (which has an included Spry accordian), but not on the other cta buttons (engineering/locate a dealer/request a brochure).
Any ideas would be much appreciated! Thanks!

www.onlytrimax.com/test_index.html (http://www.onlytrimax.com/test_index.html)
(please click on the cta buttons on the right-hand side)

Example, if this helps:
From registration page:
<link href="css/pool_shapes.css" rel="stylesheet" type="text/css" />
<link href="css/why_product.css" rel="stylesheet" type="text/css" />
<link href="css/products_site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

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

<body>
<div id="container">
<div id="header">
<ul>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="test_index.html">Home</a></li>
</ul>
<img src="images/Only_Alpha_logo_tm_white.png" alt="only alpha logo" width="220" height="70" class="header_alpha_logo" /><a href="test_index.html"><img src="images/trimax_logo.png" width="380" height="38" class="product_logo" /></a></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="why_trimax.html">Why Trimax XP3</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Only Alpha Products</a>
<ul>
<li><a href="entry_systems.html">Entry Systems</a></li>
<li><a href="liners.html">Alpha Liners</a></li>
<li><a href="coping.html">Aluminum Coping</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Alpha Pool Shapes</a>
<ul>
<li><a href="pool_shapes.html">Alpha Shapes</a> </li>
<li><a href="garden_gems.html">Garden Gems</a></li>
</ul>
</li>
<li><a href="pool_gallery.html">Pool Gallery</a></li>
<li><a href="safety.html">Safety Information</a></li>
</ul>
<div id="pool_shapes_header"></div>
<div id="pool_shapes" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Registration Form</li>
<li class="TabbedPanelsTab" tabindex="0">Trimax XP3 Warranty</li>
<li class="TabbedPanelsTab" tabindex="0">Acrylic Fiberglass Steps Warranty</li>
<li class="TabbedPanelsTab" tabindex="0">Thermoplastic Steps Warranty</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
(Tabbed Content was here)
<iframe height="1114" allowtransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://www.emailmeform.com/builder/embed/zbcj66f14rcZ"><a href=
"http://www.emailmeform.com/builder/embed/zbcj66f14rcZ">Fill out form.</a></iframe>
</p>
</p>
</p>
</div>
(Tabbed Panels Content was here)
</div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("pool_shapes");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

From the Locate a Dealer Page:
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
<div id="header">
<ul>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="test_index.html">Home</a></li>
</ul>
<img src="images/Only_Alpha_logo_tm_white.png" alt="only alpha pool products" width="220" height="70" class="header_alpha_logo" /><a href="test_index.html"><img src="images/trimax_logo.png" width="380" height="38" class="product_logo" /></a></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="why_trimax.html">Why Trimax XP3</a> </li>
<li><a class="MenuBarItemSubmenu" href="#">Only Alpha Products</a>
<ul>
<li><a href="entry_systems.html">Entry Systems</a></li>
<li><a href="liners.html">Alpha Liners</a></li>
<li><a href="coping.html">Aluminum Coping</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Alpha Pool Shapes</a>
<ul>
<li><a href="pool_shapes.html">Alpha Shapes</a> </li>
<li><a href="garden_gems.html">Garden Gems</a></li>
</ul>
</li>
<li><a href="pool_gallery.html">Pool Gallery</a></li>
<li><a href="safety.html">Safety Information</a></li>
</ul>
<div id="contractor_header"></div>
<div>
<p style="color: #000; font-weight: bold; text-align: left;">FIND A LOCAL INDEPENDENT CONTRACTOR</p>
<p style="text-align: left">Only Alpha Pool Products / Trivector Manufacturing Inc. stands behind every product we produce pursuant to those representations which are stated in our written warranties. Your dealer / builder / contractor is an independent business person and not an agent or employee of Only Alpha Pool Products / Trivector Manufacturing Inc. We cannot and do not accept any responsibility for any representations, statements, or contracts made my any dealer / builder / contractor.</p>
</div>
<div id="contractor_form">
<iframe height="687" allowtransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="http://www.emailmeform.com/builder/embed/j493YdVSAfoMfd5PXU0"><a href=
"http://www.emailmeform.com/builder/embed/j493YdVSAfoMfd5PXU0">Fill out form.</a></iframe>
</div>
</div></div>
</body>
</html>

gentleone
07-15-2011, 10:10 AM
Perhaps you've deleted it or forgot to place it, but on your 'locate a dealer page' you don't call the MenuBar1 with javascript.

See the little javascript on you registration page just before the closing </body> tag. You need that too on your 'locate a dealer' page before the closing body tag, but then without the tabbedpanels call. This should work:

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>

dbepp
07-15-2011, 02:03 PM
Perhaps you've deleted it or forgot to place it, but on your 'locate a dealer page' you don't call the MenuBar1 with javascript.

This should work:

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>


Works perfectly now! Thanks!