Spry & fusebox
Just curious if anyone out there has successfully been able
to use spry and fusebox together?
OK... the problem that i am seeing is that i cant seem to get
anything that i load using Spry.Data.XMLDataSet to actually output.
My page doesn't trow any errors so i am assuming that i am calling
the spry functions correctly.
Below is the source code that i am using....
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Example 2</title>
<script language="JavaScript" type="text/javascript"
src="/papps/fl/callsheet_dev/Spry/includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript"
src="/papps/fl/callsheet_dev/Spry/includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript">
var dsEmployees = new
Spry.Data.XMLDataSet("/papps/fl/callsheet_dev/Spry/RyansExamples/Example2/loadData.cfm",
"dataset/row");
</script>
</head>
<body>
<!--Create the Spry dynamic region-->
<div spry:region="dsEmployees">
<!--Display the data in a table-->
<table id="ListOfEmployees">
<tr>
<th>name</th>
</tr>
<tr spry:repeat="dsEmployees">
<td>{FULLNAME}</td>
</tr>
</table>
</div>
</body>
</html>
Similar Messages
-
ERROR: spry:region or spry:detailregion attribute has no data set!
here's the basics...
i'm running fusebox for php (if that makes any difference)
i'm also reusing the same gallery for multiple fuseactions,
and using my circuit.xml file to set the var $gallery
depending on which fuseaction has been called.
the photos already exist in a database and full size and
thumbs have already been created by imagemagick
i plan on writing a script that uses imagemagick to get the
dimensions of the imagefiles and saves them to four respective new
columns in my db table (so i hope the problem isn't related to the
height attributes not being set in my xml.... let's hope it's
somthing else, ok?)
i'm creating my datasets like this
quote:
var dsGallery = new Spry.Data.XMLDataSet("/index.php",
"gallery", { method: "POST", postData: "do=m.get<?php echo
$gallery ?>Gallery", headers: { "Content-Type": "text/xml" });
var dsPhotos = new Spry.Data.XMLDataSet("/index.php",
"gallery/photos/photo", { method: "POST", postData:
"do=m.get<?php echo $gallery ?>Gallery", headers: {
"Content-Type": "text/xml"});
the output xml is perfect... here's an example
http://www.inkincnewyork.com/index.php?do=m.getFlashGallery
since i'm reusing the gallery, and have no need for the
dsGalleries related functionality i did this.
using the long way of referencing each piece of data, just to
make sure it's all kosher
quote:
<div id="thumbnails" spry:region="dsPhotos dsGallery">
<div spry:repeat="dsPhotos"
onclick="HandleThumbnailClick('{ds_RowID}');"
onmouseover="GrowThumbnail(this.firstChild,
'{dsPhoto::photo/@thumbwidth}', '{dsPhoto::photo/@thumbheight}');"
onmouseout="ShrinkThumbnail(this.firstChild);"><img
id="tn{ds_RowID}" alt="thumbnail for {dsPhoto::photo/@thumbpath}"
src="{dsGallery::thumbnail/@base}{dsPhoto::photo/@thumbpath}"
width="24" height="24" style="left: 0px; right: 0px;"
/></div>
<p class="ClearAll"></p>
</div>
but i am now getting this error
spry:region or spry:detailregion attribute has no data set!
for each XMLDataSet
anyone have any ideas?A few things I noticed when looking at your sample source
above:
The "Content-Type" should be the type for the post data, not
what you expect to get back. So in your case, you should be using:
"Content-Type": "application/x-www-form-urlencoded";
which is the default type so you don't really have to pass it
to the constructor unless you are posting something other than that
type.
Next, your {ds_RowID} data references are missing the data
set prefix. If you use more than one data set for a given region,
you need to use the prefix to make sure you are getting the
ds_RowID from the correct data set.
The error: "spry:region or spry:detailregion attribute has no
data set!" tells me that the data sets are not defined at the time
Spry first processes the region. Are your data sets being created
in a script tag in the head? Or are you creating them in some
function that gets fired off at a specific time?
--== Kin ==-- -
Spry Collapsible panel - open and closed default question...
I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
Thank you all!
AzaCheck out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel
-
Spry menu bar woes (add submenu levels and edit width)
So i need some spry menu bar help. Apparently as a graphic designer i'm also expected to webdesign, and while i can solve most problems with a good googling, i seem to be at my wit's end fo this one. So the site i'm doing has a header ith a horizontal spry pop-up menubar (in Dreamweaver CS4). But some problems arise: when i manually add another submenu level, they don't show up in chrome or FF, they do werk perfectly in IE6. I just add the following code to the codepage:
<li><a href="#" class="MenuBarItemSubmenu">audio equipment</a> <ul> <li><a href="#">Digital Matrix Systems</a></li> <ul> <li><a href="#">R2 Digital Audio Matrix</a></li> </ul> <li><a href="#">pre-amplifiers & mixers</a></li> <ul> <li><a href="#">PMX124</a></li> </ul>
the PMX never pops open in FF an chrome.. Should i be adding anything else to another part of the code? i'd like my submenu text to have a slight indent? How ever, when i add the indent to ul.menubarhorizontal ul , it elongates the submeny boxes in IE6, while looking normal (width) in chrome and FF. WHat part of the CSS style should i change to just have the text scoot over a bit without it really affecting the box layout? ALso, if anyone could tell me how to add a wee bit of spacing above the text (and beneath), i'd be eternally gratefull. Also, how do i change the with of the submenus? seing as my main buttons are images, but the names i ned to put in my submenus are turning out to be pretty long...
HTML code for the menu:
<tr> <td><ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/knoppenrollover_01.jpg',1)"><img src="images/knoppenbalk_01.jpg" name="Products" width="169" height="41" border="0" id="Products" /></a> <ul> <li><a href="#" class="MenuBarItemSubmenu">audio equipment</a> <ul> <li><a href="#">Digital Matrix Systems</a></li> <ul> <li><a href="#">R2 Digital Audio Matrix</a></li> </ul> <li><a href="#">pre-amplifiers & mixers</a></li> <ul> <li><a href="#">PMX124</a></li> </ul> <li><a href="#">music Sources</a></li> <li><a href="#">amplifiers</a></li> <li><a href="#">paging</a></li> <li><a href="#">speakers</a></li> <li><a href="#">microphones</a></li> </ul> </li> <li><a href="#">racks and stands</a></li> <li><a href="#">cables</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Company','','images/knoppenrollover_02.jpg',1)"><img src="images/knoppenbalk_02.jpg" name="Company" width="165" height="41" border="0" id="Company" /></a> <ul> <li><a href="#">Who are we?</a></li> <li><a href="#">history</a></li> <li><a href="#">contact us</a></li> <li><a href="#">philosophy</a></li> <li><a href="#">careers</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/knoppenrollover_03.jpg',1)"><img src="images/knoppenbalk_03.jpg" name="news" width="166" height="41" border="0" id="news" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projects','','images/knoppenrollover_04.jpg',1)"><img src="images/knoppenbalk_04.jpg" name="projects" width="166" height="41" border="0" id="projects" /></a></li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Downloads','','images/knoppenrollover_05.jpg',1)"><img src="images/knoppenbalk_05.jpg" name="Downloads" width="165" height="41" border="0" id="Downloads" /></a> <ul> <li><a href="#">catalogs</a> </li> <li><a href="#">manuals</a></li> <li><a href="#">software</a></li> <li><a href="#">documents</a></li> <li><a href="#">pricelists</a></li> </ul> </li> <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/knoppenrollover_06.jpg',1)"><img src="images/knoppenbalk_06.jpg" name="Contact" width="169" height="41" border="0" id="Contact" /></a></li> </ul></td>
sprymenuhorizontal.css:
@charset "UTF-8"; /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 14px; cursor: default; width: 1010px; font-family: Arial, Helvetica, sans-serif; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: [url]http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html[/url] */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 166px; position: absolute; left: -1000em; background-color: #6C6C6C; height: 0px; margin-top: 0px; margin-right: 0em; margin-bottom: 10px; margin-left: 0em; text-align: right; text-indent: 0em; padding-top: 0px; padding-right: 0em; padding-bottom: 0px; padding-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #666; border-right-color: #666; border-bottom-color: #666; border-left-color: #666; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; height: 0px; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 166px; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; height: 41px; margin-top: 0%; margin-right: 0%; margin-bottom: 0px; margin-left: 162px; float: right; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #666; background-color: #6C6C6C; height: 0px; padding-left: 0em; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background-color: #6C6C6C; padding: 0em; color: #FC0; text-decoration: none; font-size: 14px; margin-left: 0em; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { background-color: #FC0; color: #FFF; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { background-color: #FC0; color: #FFF; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 98% 50%; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 98% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 98% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 98% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarHorizontal iframe { position: absolute; z-index: 1010; filter:alpha(opacity:0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarHorizontal li.MenuBarItemIE { display: inline; f\loat: left; background: #FFF; } }[/SPOILER] any help would be greatly appreciated, as i've been fidgiting with this thing for 2 days now, to no satisfying effect...since the layout of the pasted text got all weird, here i'm trying it again.
sprymenubarhorizontal.css:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 14px;
cursor: default;
width: 1010px;
font-family: Arial, Helvetica, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 166px;
position: absolute;
left: -1000em;
background-color: #6C6C6C;
height: 0px;
margin-top: 0px;
margin-right: 0em;
margin-bottom: 10px;
margin-left: 0em;
text-align: right;
text-indent: 0em;
padding-top: 0px;
padding-right: 0em;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #666;
border-right-color: #666;
border-bottom-color: #666;
border-left-color: #666;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
height: 0px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 166px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
height: 41px;
margin-top: 0%;
margin-right: 0%;
margin-bottom: 0px;
margin-left: 162px;
float: right;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #666;
background-color: #6C6C6C;
height: 0px;
padding-left: 0em;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #6C6C6C;
padding: 0em;
color: #FC0;
text-decoration: none;
font-size: 14px;
margin-left: 0em;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #FC0;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #FC0;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 98% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?
Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!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" />
<title></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #003366;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/international.jpg);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
font-size: 18px;
line-height: 52px;
color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
background-color: #003366;
color: #FFF;
text-shadow: 1px 1px #000;
font-weight: bold;
background-image: url(images/TR_Col-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
background-color: #C3CFDF;
border-radius: 5px 5px 0px 0px;
color: #999
text-shadow: 1px 1px #000;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
background-image: url(images/TR_Gray2-WEB.png);
background-repeat: no-repeat;
line-height: 52px;
</style> -
How can I get a menu link to show active state in Spry?
I want to have my Spry menu bar show the page I am on as a highlighted with background-color and text-color being highlighted and different than the rest of the menu bar. It seems that there are two ways that people talk about doing this.
One is to modify the a:hover and a:focus styles in the Spry assets. If this is the answer, I am missing something. After much experimentation, I actually created a style for a:hover (which is rollover only) and a:focus (which is when you click on the bar). It has no bearing on the state of the menu when it is showing the page as the page the user is on. If someone can give me a clue whether the CSS in Spry assets is the way to go, please provide specific code that would go in a specific place. Generalities are not helping me go to a specific solution.
The other way to go seems to give the body an ID on each page. There is a thread here: <http://www.highdots.com/forums/macromedia-dreamweaver/using-css-highlight-current-page-227 823.html>
It says:
"Example:
<body id="home">
This is because the CSS is:
#home #menu .home a
background-color:#ED2424;
color: #E7E63E;
That means color the <a> tag with the class home, inside the #menu container,
inside the #home container which is the body.
Without giving the body an ID, there is no "home" container so the CSS doesn't
apply to anything."
If this is correct, where do each of these snippets of code actually go? Does this apply to Spry? I would assume that the body id is in Source Code, and the others are in CSS. But where?
There is also another solution posted elsewhere: <http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/>
What specific advice can you provide to get a web site to do something that is pretty basic from the perspective of the user?
Nv<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal li.MenuBarActive a {
background: #F00;
font-weight: bold;
</style>
</head>
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li class="MenuBarActive"><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script>var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});</script>
</body>
</html>
So that you do not have to repeat the style rules in every document, add the rules to the existing SpryMenuBarHorizontal.css. The class is added to the menu item that has the current document, in our case above it will be index.html or similar. The class will be placed on menu items that correspond to the current page.
Gramps -
Using a variable in Spry conditional tests included in a Spry Tooltip
I have the following code:
<div spry:region="company" id="tooltip">
<div spry:repeat="company" spry:choose="spry:choose">
<div spry:when="'{name}'==memberName">
<table>
<tr>
<td
align="center"><h2>{name}</h2></td>
</tr>
<tr>
<td align="center"><img src="{headshot}"
alt="{name}" width="227" height="350" /></td>
</tr>
<tr>
<td align="center">{description}</td>
</tr>
</table>
</div>
</div>
</div>
<script type="text/javascript">
var tooltip_trigger_one = new
Spry.Widget.Tooltip("tooltip","#trigger", {showDelay: 200,
hideDelay: 200, offsetX: 250, offsetY: 200} );
</script>
where the variable "memberName" is set elsewhere to a value
that matches one of the occurrences in the column "name" in the
dataset "company". I can see, using debugging tools, that the
variable is being set correctly. But.... when the tooltip is
triggered, only a small few-pixel square box opens up.
If, instead of using the variable "memberName" in:
<div spry:when="'{name}'==memberName">
I use a string, as in
<div spry:when="'{name}'=='John Doe'">
then the code works correctly and I get a large tootlip
showing me the correct information for that member of the company.
I have tried different tests (spry:if and spry:test for
instance), tried various combinations of quotes and parenthesis and
tried placing the code at various places both inside and outside of
the <body> -- but always get the same results.
Is it not possible to test against a variable or am I doing
something else incorrectly?
Thanks,
JanetOK.... some progress to report.
I was setting memberName onmouseover-- which is also the
trigger for the tooltip-- thusly:
<p><em onmouseover="memberName='John Doe'"
id="trigger">John Doe</em></p>
It seems that the variable is being set, but too late, as the
trigger has already caused the div... id="tooltip"> to be
evaluated with "memberName" not equal to any of the names in the
dataset. I tried using a function call to set "memberName" and
tried putting the onmouseover in the <p> tag and leaving the
trigger id in the <em> tag. but neither of those appear to
change the outcome. "memberName" still appears to be set to the
value I initialized it to up the the <head> section at the
time the tooltip <div> is evaluated. Although it is set
correctly if I check it's value using Firebug after I have
mouse-overed it.
Incidentally, using a Firebug breakpoint just before the
<div spry:when...> and checking the value of memberName was
how I discovered that "memberName" still seemed to have a value of
"initialized" which is what I set it to up in the <head>
section.
Having written all of this, I am wondering though, shouldn't
the value of "memberName" be equal to "John Doe" the second time I
mouseover it? Or, if there are more than one trigger "names" on the
page, shouldn't "memberName" be equal to the name of the previous
trigger that I moused-over? And with memberName having a legitimate
value at that point, shouldn't the tooltip now show the correct
display information rather than just that little few pixel square
box that I am getting when I mouse-over the trigger name?
Clearly there is something that I just am not understanding.
Janet -
Generate Photo Gallery XML for Spry with Adobe Bridge
Wanted to post a note to what I've discovered/worked out -- a
way to
generate a very useful photos.xml from Adobe Bridge. If you
use Bridge,
it's very easy to add titles, keywords, ratings -- all kinds
of metadata
that one might use in a photo gallery. Here it is in case
anyone wants
to use.
The script is based on one I found at the Adobe User to User
Bridge
Scripting Forum for exporting a CSV file.
Note 1: this particular script doesn't take into account
CDATA that
might exist in your metadata, like ampersands in your title.
I've just
avoided using those, but you could also have the script write
out a
CDATA node for that info instead.
Note 2: this script does not write out a thumbpath,
thumbwidth or
thumbheight attribute. But usually the thumbpath is the exact
same as
the regular "path" attribute, and the thumbwidth and
thumbheight are
just a ratio of the regular "width" and "height" attributes.
I added a
bit of JS to the gallery.js file to calculate those before
growing the
thumbnail on rollover.
Personally I'm using keywords as categories and titles as
captions and
sorting by rating (stars in Bridge), so here's the .jsx file
I created.
The script should be saved to the folder "StartupScripts" in
Program
Files/Common Files/Adobe.
Hope this is useful for others too!
#target bridge
if (BridgeTalk.appName == "bridge" ) {
// create menu
var menu = MenuElement.create( "command", "Export XML File",
"at the end
of Tools");
menu.onSelect = function(m) {
try {
// ask for the name of the output file
var f = File.saveDialog("Export XML file to:", "XML
File:*.XML");
if ( !f ) { return; }
// open filestream and write first line
f.open("w");
f.writeln("\<photos\>\r\r");
// get a list of all the visible thumbnails in Bridge
var items = app.document.visibleThumbnails;
for (var i = 0; i < items.length; ++i) { var item = items
f.writeln("\<photo path = \"" + item.name + "\"" + "\r" +
"width = " +
"\""+ getWidth(item) + "\"" + "\r" + "height = " + "\""+
getHeight(item)
+ "\"" + "\r" + "rating = " + "\""+ getRating(item) + "\"" +
"\r" +
"categories = " + "\""+ listKeywords(item) + "\"" + "\r" +
"caption = "
+ "\""+ getTitle(item) + "\"" + " \>" + "\r" +
"\<\/photo\>\r\r" ); }
f.writeln("\<\/photos\>");
f.close();
} catch(e) {
function getTitle(tn) {
md = tn.metadata;
md.namespace = "
http://purl.org/dc/elements/1.1/";
var varTitle = md.title;
return varTitle;
function getWidth(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/tiff/1.0/"
var varWidth = md.ImageWidth;
return varWidth;
function getHeight(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/tiff/1.0/"
var varHeight = md.ImageLength;
return varHeight;
function getRating(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/xap/1.0/"
var varRating = md.Rating;
return varRating;
function listKeywords(tn) {
md = tn.metadata;
md.namespace = "
http://ns.adobe.com/photoshop/1.0/";
var Keywords = md.Keywords;
var varKeywords = "" ;
for ( var i = 0; i < Keywords.length; ++i ) { varKeywords
= varKeywords
+ Keywords + ","; }
return varKeywords;I updated the script so it exports an XML file from Bridge
with full
compatibility with the Spry Demo Photo Gallery, to use as
photos.xml.
It's at the same address:
http://www.imagicdigital.com/spry/bridge_export_xml.zip
To Use:
The script goes in the folder "StartupScripts" in Program
Files/Common
Files/Adobe.
Launch Bridge and browse to a folder that contains the files
you want in
your gallery -- the "source" folder, as it were.
Choose the menu command "Tools > Export XML for Spry
Gallery".
Type a name for your XML file in the Save dialog box, choose
a location,
and hit "Save".
In the dialog box that pops up, enter a max length/width for
your
thumbnails, in pixels. Some common sizes are "75" , "100" or
"125".
Hit "OK". You should see an alert pop up telling you "XML
file
successfully created!" -
Spry menu bar doesn't appear correctly in IE
Hi guys..
I created a spry menu bar in DW CS4. It looks fine in Firefox but in IE 8, the background image of the navigation bar appears white after allowing activecontrol to run. I didn't include any image for ul.MenuBarHorizontal a because I wanted to use the background image for the div containing the navigation bar.(Hope I didn't confuse you there).. I tried using the search box but couldn't find any solution to my problem. Here are my screen shots.
This is in firefox.
This is in IE 8 before allowing activex.
This is in IE 8 after allowing activex. (Part of the navigation bar is white)
Here's the code.Hope you can help me asap. Thanks!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 9em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 9em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 9em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
background-image: url(../images/single.jpg);
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
color: #000;
text-decoration: none;
padding-top: 1.05em;
padding-right: 0.75em;
padding-bottom: 1.05em;
padding-left: 0.75em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image: url(../images/single.jpg);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../images/single.jpg);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;/* HACK FOR IE: to stabilize appearance of menu items; the slash in
float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display:
inline;
f\loat: left;
background: #FFF;
I hope this helps.
Ben -
Spry Dynamic Tabs - reCAPTCHA is missing when loading external php file
Hello,
I have solved all my problems lately on this forum.
But now im converting my site to use Dynamic tabs, and something goes wrong.
The dynamic tabs load content from external files. It loads html but i think something goes wrong with php and my buttons.
You need to know ALL is working perfect on the old site.
2 problems;
I dont know how to convert my buttons to this new style.
I dont know why the reCAP suddently is missing.
Why is reCAPTCHA missing?
SOURCE HTML (index.html);
<?php include("PHP/form.php"); ?>
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Wientjes Voegwerk & Renovatie - Home</title>
<meta http-equiv="Content-Language" content="NL" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Wientjes Voegwerk en Renovatie is een voeg- en renovatiebedrijf gespecialiseerd in gevelrenovatie. Dagelijkse werkzaamheden zijn het voegen van nieuwbouwwerk, en alle voorkomende vormen van gevelrenovatie. Ik geef uw woning, garage of schoorsteen de aandacht die het verdient en ben trots op het resultaat van mijn werk!"/>
<meta name="keywords" content="Voegwerk, Renovatie, Reinigen, Impregneren, Muur, Voegen, Steen, Woning, Garage, Schoorsteen, Bedrijf, Gevel, Wientjes, Uitslijten, Kappen, Fundering, Vorstschade, Metselen, Metselwerk, Vocht" />
<meta name="author" content="Rob Nijlaan" />
<link href="CSS/Style2.css" rel="stylesheet" type="text/css" />
<script src="JAVASCRIPT/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="JAVASCRIPT/SpryEffects.js" type="text/javascript"></script>
<script src="JAVASCRIPT/SpryData.js" type="text/javascript"></script>
<script src="JAVASCRIPT/xpath.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function FadeAndUpdateContent(ele, url){
try {
Spry.Effect.DoFade(ele,{
duration: 500, from: 100, to: 0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
catch(e){ alert(e); }
-->
</script>
</head>
<body>
<div id="WContainer">
<div id="WHeader" align="center"> <img src="Art/VoegenRenLos.png" width="540" height="58" alt="Voeg en Renovatiebedrijf" /><br />
<img src="Art/WientLogo.png" width="600" height="136" alt="Wientjes Voegwerk & Renovatie" /> </div>
<script type="text/javascript">
var dsTabs = new Spry.Data.XMLDataSet("data/data.xml", "tabs/tab");
function loadContent(panel,url){
Spry.Utils.updateContent(panel,url);
Spry.Data.Region.addObserver("example1Region",dateLoadedCallback);
function dateLoadedCallback(notificationType, notifier, data){
if (notificationType =="onPostUpdate"){
row= dsTabs.getRowByRowNumber(0)
if(row){
loadContent('0',row.url)
</script>
<div id="example1Region" spry:region="dsTabs">
<div id="dynamicTabs" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
<li spry:repeat="dsTabs" class="TabbedPanelsTab" onclick="loadContent('{ds_RowID}','{url}');" tabindex="0">{title}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="dsTabs" id="{ds_RowID}" class="TabbedPanelsContent"></div>
</div>
</div>
<script type="text/javascript">
var t1 = new Spry.Widget.TabbedPanels("dynamicTabs");
</script>
</div>
<div id="WFooter" align="center">
<p class="footer">Wientjes Voegwerk & Renovatie , 03- '02 » Site by ; <b>Rob Nijlaan</b></p>
</div>
</div>
</body>
</html>
Dont mind the extra javascripts they are not used for now (like SpryEffects.js) its for future use.
SOURCE XML (data.xml);
<?xml version="1.0" encoding="UTF-8"?>
<tabs>
<tab>
<title>
tab 1
</title>
<url>../data/HOME.html</url>
</tab>
<tab>
<title>Tab2</title>
<url>examples/tab2.html</url>
</tab>
<tab>
<title>Tab3</title>
<url>examples/tab2.html</url>
</tab>
<tab>
<title>Tab4</title>
<url>../PHP/form.php</url>
</tab>
</tabs>
The html file loads like it should be, but the php form has problems.
See it yourself: http://www.wientjesvoegwerk.nl/index2.html
The tab 1 displays a html file like it should.
The tab 4 displays the contact form but you will see the reCAPTHCA is missing.
I have really no clue why it happens, exept maybe its a PHP issue.
Maybe the script isnt compatible with non-html documents...
Can someone please tell me whats the problem and if there is a solution????
How do i change this button?
I used this in my previous site:
<table class="Button" >
<tr>
<td style="padding-right:0px" title ="Home">
<a href="#" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/>
</a></td>
</tr>
</table>
But the dynamic script uses {title} to get the <title> out of the xml.
I tryd to put this straight into the title tags in the xml but obviously it wont work.
And i really dont have a clue how to change this.
My button has a mouseover img. Basicly its 2 buttons in 1 img stacked on top of each other.
Like this: http://www.wientjesvoegwerk.nl/Buttons/contact.png
Because of the CSS script it hovers to the right position.
Part of SOURCE CSS (Style.css)
.Button a{display:block;}
.Button a:hover{background-position:left bottom;}
a.Button {display:none}
How can i change the xml and the script so "title" can be replaced with the button.
Or how can i change the button so the mouseover works and the script still takes the button-img from the xml???
Any help would be nice, because im finnaly in a postition to finish this site, and this is the only blockade left to conquer...Maybe it is not liking that the index page is an HTML page and not a PHP page. Try this way:
In your form.php, remove the following code:
<?php
require_once('recaptchalib.php');
$publickey = "6LfKNwwAAAAAAEdS6PjiDSHRQBDOYrGcM8R1eQQm"; // you got this from the signup page
echo recaptcha_get_html($publickey);
?>
Replace it with:
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6LfKNwwAAAAAAEdS6PjiDSHRQBDOYrGcM8R1eQQm"></script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=6LfKNwwAAAAAAEdS6PjiDSHRQBDOYrGcM8R1eQQm" height="300" width="500" frameborder="0"></iframe><br/>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
</noscript>
The replacement code is the same code that is outputted from the recaptchalib.php file. -
Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?
Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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 -->
<link href="../CSS/main.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
<div id="buyNow1">
<p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
</div>
</div>
<div id="mainNav">
<ul id="mainNavcontent" class="MenuBarHorizontal">
<li><a href="../index.htm">Home</a> </li>
<li><a href="../swimmer.html">Swimmer Buddy</a></li>
<li><a href="../order_now.html">Order Now</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
<ul>
<li><a href="../photo_gallery.html">Photos</a></li>
<li><a href="../video_gallery.html">Videos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
<ul>
<li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
<li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
<li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
<li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
</ul>
</li>
<li><a href="../about.html">About Us</a></li>
<li><a href="../contact.html">Contact Us</a></li>
</ul>
</div>
<!-- TemplateBeginEditable name="mainContent" -->
<div id="pageInfo">
<div id="info_page">
<p class="regionID">Region ID</p>
<hr class="breaklinePageInfo" />
<p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
</div>
<div id="mainContent">
<div id="content">
<p>Main Content Goes her</p>
</div>
</div>
</div>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="buynow2" -->
<div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
<!-- TemplateEndEditable -->
<div id="footer">
<div id="footertext">
<p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
</div>
<div id="footerlinks">
<p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 132.8px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same. -
Spry Rollover Menus Do not Retract or Hover
Here's my code and I will attach a screenshot:
<html>
<head>
<meta name="verify-v1" content="7UOb7pMZvRsNAeg3bRekSJNhH/EMwsI9CcQBQKDS/3I=" />
<title>Total Life Counseling Orlando Winter Park Clermont</title>
<meta name="KEYWORDS" content="Orlando Winter Park & Clermont family counseling individual group children teenagers adult Skype Online Phone Portuguese Espanol Spanish Portuguese">
<meta name="DESCRIPTION" content="Total Life Counseling Center offers a full range of individual, family, group, phone, online, Skype counseling and therapy services for children, teenagers, adolescents and adults in Orlando, Winter Park, Metro West, East Orlando and Clermont Florida using a relational non-judgmental and non-threatening approach. Total Life Center consists of competent masters level therapists, Espanol counselors, Portuguese Counselors, Licensed Mental Health Counselors, Business Coaches, Image Enhancement Coaches and Masters Level interns who provide counseling for emotional, mental, physical and spiritual care including marriage, the individual, the family, substance abuse and more. Our offices serve College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg.">
<LINK REV="Made" HREF="http://www.totallifecounseling.com">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="javascript/special_functions.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" type=text/css href="styles/stylesheet.css">
<script type="text/javascript" src="flashobject.js"></script>
<link rel="stylesheet" type="text/css" href="styles/anylink.css" />
<script type="text/javascript" src="javascript/anylink.js">
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
_uacct = "UA-1922062-1";
urchinTracker();
</script>
<meta name="Microsoft Theme" content="none">
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
.style17 {
color: #6CA7C2;
font-weight: bold;
-->
</style>
<style>
<!--
#blog-header h1 {
font-size: 24px;
text-align: left;
padding: 15px 20px 0 20px;
margin: 0;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top left;
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
div.Section1
{page:Section1;}
span.EmailStyle15
{font-family:"Arial","sans-serif";
color:#993366}
.__feedview__mainbody { margin-right: 0px }
#main {
margin:0;
padding:15px 20px;
.post {
margin:0 0 2em;
.post h3 {
margin:0 0 .25em;
line-height: 1.4em;
font-weight: bold;
font-size: 150%;
color:#8cdfff;
.style19 {color: #83B5CC}
.style23 {font-size: 18px}
.style25 {
font-size: 12pt;
font-family: Tahoma;
.style28 {font-size: 11px}
.style29 {
font-size: 10pt
.style22 { color: #77ADC6;
font-weight: bold;
.style31 {font-size: 12pt}
.style32 {
font-weight: bold;
font-family: Tahoma;
font-size: 14pt;
.style33 {color: #6CA7C2}
.style10 { font-size: 16pt;
font-weight: bold;
.style34 {font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
.style35 {font-size: 14pt}
.style36 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
.style37 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script src="../Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" class="home-bg">
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: -500; top: -500" id="layer2">
<img border="0" src="flash/images/image1.jpg" width="2" height="1"><img border="0" src="flash/images/image2.jpg" width="2" height="1"><img border="0" src="flash/images/image3.jpg" width="2" height="1"><img border="0" src="flash/images/image4.jpg" width="2" height="1"><img border="0" src="flash/images/top-right.jpg" width="2" height="1"></div>
<table width="106%" height="600" border="0" cellpadding="0" cellspacing="0" class="home-bg-l1">
<tr>
<td width="217" class="home-bg-l1"> </td>
<td width="893" valign="top"><table width="828" height="595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="532" valign="top"><table width="828" height="540" border="0" cellpadding="0" cellspacing="0" class="home-cbg2">
<tr>
<td width="30" class="home-bg-l2"> </td>
<td width="768" valign="top"><table width="768" height="532" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="307" valign="top" class="home-t1">
<div style="position: absolute; width: 768; height: 24; z-index: 1; top: 25" id="layer1" align="right">
<div id="horizontalMenu">
<ul id="MenuBar3" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="contact_us.htm">Contact Us</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="services.htm">Services</a></li>
<li><a class="MenuBarItemSubmenu" href="counselors.htm">Counselors</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="http://www.totallifecounseling.com/shop" target="_blank">Products</a></li>
<li><a href="forms.htm">Forms</a></li>
<li><a href="#">Court Ordered</a></li>
<li><a href="camps.htm">Camps</a></li>
</ul>
</div>
<!-- End HorizontalMenu Scripting -->
<div id="header">
<script type="text/javascript">
//var fo = new FlashObject("flash/HorizontalMenu10.swf", "header", "768", "307", "6");
//fo.addParam("wmode", "transparent");
//fo.addParam("base", "flash");
//fo.write("header");
</script>
</div>
<!-- End Header Scripting -->
<!-- #EndLibraryItem --></td>
</tr>
<tr>
<td valign="top" class="home-c"><table width="768" height="235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11"> </td>
<td width="576" valign="top">
<table border="0" style="border-collapse: collapse" width="100%" id="table45" cellpadding="0" height="100%">
<tr>
<td width="176" valign="top" bgcolor="#F2F4F5">
<table width="100%" border="0" cellpadding="2" cellspacing="2" id="table46" style="border-collapse: collapse">
<tr>
<td height="31" bgcolor="#2A6180"><p align="center"><A href="http://totallifecounseling.blogspot.com/"><strong>Articles & Blogs</strong></A></p></td>
</tr>
<tr>
<td height="1328" valign="top" bgcolor="#FFFFFF">
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:160; background-color: #ffffff;">
<p align="center" class="style12"></strong>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9ae1e727d21f0f"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 15,
interval: 6000,
width: 170,
height: 1326,
theme: {
shell: {
background: '#F2F4F5',
color: '#6CA7C2'
tweets: {
background: '#ffffff',
color: '#2a6180',
links: '#2a6180'
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}).render().setUser('TotalLife').start();
</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;">
<div align="center"><span class="style25"><font style="font-weight: bold; font-family:Georgia,'Times New Roman',Times,serif; font-size:12px; color:#006699;">Read E-Newsletter</font></span>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit" style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;">
<input type="hidden" name="m" value="1101177120388">
<input type="hidden" name="p" value="oi">
</div>
</form>
</div>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe -->
<!-- END: SafeSubscribe -->
<!-- BEGIN: Email Marketing you can trust -->
<!-- END: Email Marketing you can trust -->
<p align="center" class="messageBoxContent style19"><strong><A href="resources.htm" class="style1 style25 style31"><font color="#FF0000">Recommended Books, Vitamins & Resources</font></A></strong></p>
</td>
</tr>
</table>
<hr color="#2A6180" size="1"> </td>
<td width="2" valign="top"> </td>
<td width="435" align="center" valign="top" bgcolor="#F3F5F5" class="boxText3"><p align="center"><strong>Counseling in Orlando, Winter Park, East Orlando, Clermont Florida and Central Florida</strong>
<p>TLC offers a "full" range of Individual, Family, & Group Counseling services for Children, Teenagers, Adolescents, and Adults. Our skilled counselors are Relational, Approachable and Specialists providing therapy services in the Central Florida area including: Orlando, Winter Park, Metro West, East Orlando, and Clermont Florida.</p>
<p align="center"><strong><span class="style24"><span class="style32"><font color="#FF0000">Complimentary</font> <span class="style1">15 Minute Phone Consultation (407) 248-0030</span></span></p>
<script type="text/javascript">
AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1','type','application/x-shockwav e-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube .com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1' ); //end AC code
</script><noscript><object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object></noscript>
<p align="center" class="boxText2"><strong><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><a href="espanol.htm">Español Consejero</a> or <a href="portuguese.htm" target="_blank">Português Conselheiro</a></strong></p>
<p align="center"><span class="boxText3"><a href="testimonials.htm"><strong>Testimonial </strong></a></b>- "He is doing so well! We are continuing with the diet changes and vitamins and his attitude is so much better.
You were right - kids don't see you for very long We are so grateful for your help. We were in a bad place before we saw you and I am really amazed at the difference." </span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<div align="center">
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
</div>
<p><A href="camps.htm" target="_blank"><span class="style1"><blink>Channel 13 News</blink></span> interviews Jim West, president of Total Life Counseling on how our Orlando area Camps Helped a Student with Making Friends.</A></p>
<p align="left">Orlando Mental Health <a href="counselors.htm" target="_parent">Counselors</a> specializing in all areas of therapy. Call us today. We can help!
<HR>
<p align="left"><strong>Services:</strong> Total Life Counseling Center consists of Licensed Counselors, Masters Level Therapists, <a href="espanol.htm" title="Espanol Counseling Services in Orlando & Winter Park Florida" target="_blank"><strong>Espanol Counselors</strong></a>, <a href="portuguese.htm" target="_blank"><strong>Portuguese Counselors</strong></a>, Licensed Mental Health Counselors, <a href="corporate.htm" target="_blank"><strong>Business Coaches</strong></a>, <a href="image.htm" target="_blank"><strong>Image Enhancement Coaches</strong></a> who provide counseling for emotional, mental, physical and spiritual care including marriage, individual, family, substance abuse and more. TLC provides services for all ages in the Orlando Central Florida area and can handle almost any issue:<br>
<TABLE id="table49" width="100%" border="0">
<TBODY>
<TR>
<TD height="23" align="middle"><div align="left"><A href="adhd.htm" target="_parent">ADD or ADHD </A></div></TD>
<TD align="middle"><div align="left"><A href="marriage.htm" target="_parent">Marriage</A></div></TD>
<TD align="middle"><div align="left"><A href="sexualabuse.htm" target="_parent">Sexual Abuse</A></div></TD>
</TR>
<TR>
<TD height="22" align="middle"><div align="left"><A href="depression.htm" target="_parent">Depression</A></div></TD>
<TD align="middle"><div align="left"><A href="anger.htm" target="_parent">Anger Management</A></div></TD>
<TD align="middle"><div align="left"><A href="anxiety.htm" target="_parent">Anxiety</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="socialskillsgroups.htm" target="_parent">Social Skills Groups</A></div></TD>
<TD align="middle"><div align="left">Mood Disorders or Bi-Polar</div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-injurious Behavior</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="premarital.htm" target="_parent">Pre-marital</A></div></TD>
<TD align="middle"><div align="left">Eating Disorders</div></TD>
<TD align="middle"><div align="left">Women's Issues</div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><A href="odd.htm" target="_parent">Oppositional Defiance Disorder</A></div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-Mutilation or Self Harm</A></div></TD>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Challenged</a></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="janie.htm" target="_parent">Codependency</A></div></TD>
<TD align="middle"><div align="left"><A href="coaching.htm" target="_parent">Career Assessment</A></div></TD>
<TD align="middle"><div align="left"><A href="deb.htm" target="_blank">Gender Identity</A></div></TD>
</TR>
<TR>
<TD height="55" align="middle"><div align="left"><a href="ptsd.htm">Post Traumatic Stress Disorder PTSD</a></div></TD>
<TD align="middle"><div align="left"><a href="multiple.htm" target="_parent">Multiple Personality or Dissociative Disorders</a></div></TD>
<TD align="middle"><div align="left"><A href="adhd.htm" target="_parent">Attention Deficit Hyperactivity Disorder</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="counselors.htm" target="_parent">Christian Counseling</A></div></TD>
<TD align="middle"><div align="left"><a href="skype.htm" target="_blank">Skype, Phone or Online Counseling</a></div></TD>
<TD align="middle"><div align="left"><A href="cyberbullying.htm" target="_parent">Cyberbullying</A></div></TD>
</TR>
<TR>
<TD height="29" align="middle"><div align="left"><A href="grief.htm" target="_parent">Loss</A></div></TD>
<TD align="middle"><div align="left"><a href="anxiety.htm" target="_parent">Stress Management</a></div></TD>
<TD align="middle"><div align="left"><A href="grief.htm" target="_parent">Grief</A></div></TD>
</TR>
<TR>
<TD height="37" align="middle"><div align="left"><A href="substance_abuse.htm" target="_parent">Substance Abuse & Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm">Sports Psychology</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm" target="_blank">Mental Toughness</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="sexualaddictions.htm" target="_parent">Sexual Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="groups.htm">Groups</A></div></TD>
<TD align="middle"><div align="left"><A href="parenting.htm" target="_parent">Parent Coaching</A></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left">Family</div></TD>
<TD align="middle"><div align="left"><A href="divorce.htm">Divorce Recovery</A></div></TD>
<TD align="middle"><div align="left"><a href="premarital.htm" target="_parent">Pre-Marital</a></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Disabled</a></div></TD>
<TD align="middle"><div align="left"><a href="leadershipcoaching.htm">Leadership Coaching</a></div></TD>
<TD align="middle"><div align="left"><a href="selfharm.htm" target="_blank">Self Harm</a></div></TD>
</TR>
</TBODY>
</TABLE>
<HR><p>At Total Life Counseling we focus on more than just the “Mind;" we focus on the “Total” person. </p>
<p><U>Clients travel all over Florida, from the Bahamas and Georgia </U>as TLC has worked with patients' and their prescribers' to reduce their dependency on medication. Since 2003 85% of our patients were stabilized with FDA approved supplements and dietary adjustments.</p>
<p>Patients receive tremendous relief from their symptoms with less medication or in some cases without medication. </p>
<p>Orlando teen and adolescent life workshops and teen camps.</p>
<p><span class="style1"><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><strong>Se Habla Español</strong></a> <span class="style22">and</span> <a href="portuguese.htm" target="_blank"><strong>Portuguese (Portugues)</strong></a> <span class="style17">Counselors</span></span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
<HR>
<H2>Our Mission Statement</H2>
<p>To provide the Hope, Healing and Support to Individuals, Couples, and Families in a Warm, Approachable Way.</p>
<h2>Our Vision Statement</h2>
<p>To Accelerate Healing with our Relational, Holistic, Experiential approach through Communication, Camps, Coaching, and Counseling.</p>
<HR><h2 class="boxText3 style35">Office Locations and Areas Served</h2>
<p align="left" class="style36">Total Life Counseling Center provides counseling, therapy, coaching, camps and career services for all of central Florida, including: Orlando, Winter Park, Maitland, College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg. </p>
<p align="left" class="style36">Our counseling, therapy, camps, group, coaching and career services are conveniently located at:</p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=ewk9MRVLeIOeBOayBAhxUA= =&2g=4r1UgrxqqQkErUUWTq9wZA==&2v=ADDRESS&2a=1507 S Hiawassee Rd&2c=Orlando&2s=FL&2z=32835-5718&2y=US&2pn=&2pl=&cat=&q=">1507 S. Hiawassee
Road, Suite 101, Orlando, FL 32835</a></font></p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=QjNBshU7m2oAHEBWy833/w= =&2g=qrdtLjTZeC3HG9agi4ixtw==&2v=ADDRESS&2a=1850 Lee Rd&2c=Winter Park&2s=FL&2z=32789-2115&2y=US&2pn=&2pl=&cat=&q=">Lee
World-1850
Lee Road
Ste. #215, Winter Park, FL 32789</a></font></p>
<p align="left" class="style36"><a href="http://maps.google.com/maps?q=1850+N.+Alafaya+Trail+Building+1-B+Orlando,+FL+32826&oe=utf- 8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&split=0&gl=us&ei=syZJSpCoJ 4ii8QTjreGTDQ&sa=X&oi=geocode_result&ct=title&resnum=1" target="_parent" class="style37">1850 N. Alafaya Trail Building 1-A Orlando, FL 32826 Suite 1A</a></p>
<p align="left" class="style34"><span class="style29"><a href="http://maps.google.com/maps?client=safari&rls=en-us&q=7432+State+Road+50,+Groveland,+FL+34 736&oe=UTF-8&um=1&ie=UTF-8&split=0&gl=us&ei=dPWZSaKgNp6Dtwfel5CcCw&sa=X&oi=geocode_result& resnum=1&ct=title" target="_parent" class="style37">7432 State Road 50, Groveland, FL 34736</a></span></p>
<p class="style10"><b class="style32">Call us (407)
248-0030</b>
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
</p>
<DIV align="center">
<DIV>
<FORM name="ccoptin0" action="http://ui.constantcontact.com/d.jsp" method="post" target="_blank">
<strong><IMG alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" src="http://img.constantcontact.com/ui/images1/visitor/email1_trans.gif" border="0"> Read our e-Newsletter
<INPUT name="ea0">
<INPUT type="submit" value="GO" name="go0">
<INPUT type="hidden" value="1101177120388" name="m0">
<INPUT type="hidden" value="oi" name="p0">
</strong>
</FORM>
</DIV>
</DIV>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe --> <DIV align="center"><strong><A href="http://www.constantcontact.com/safesubscribe.jsp" target="_blank"><IMG height="14" alt="" src="http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif" width="168" vspace="5" border="0"></A></strong></DIV></td>
</tr>
</table> </td>
<td width="1"></td>
<td width="165" valign="top"> <table border="0" style="border-collapse: collapse" width="96%" id="table" cellpadding="2" cellspacing="2">
<tr>
<td height="32" bgcolor="#2A6180"><p align="center"><A href="consultation.htm"><strong>Upcoming Seminars</strong></A></p></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><p align="center" class="style12"><strong><a href="http://www.youtube.com/TotalLifeMedia" target="_blank"><span class="style23"><img src="images/Youtube.jpg" alt="Total Life Counseling Center You Tube Videos" width="97" height="41" border="0" align="top"></span></a></strong></p>
<p align="center"><a href="http://www.facebook.com/pages/Total-Life-Counseling-Center/174661783281?ref=mf" target="_blank"><img src="images/Facebook.jpg" alt="Total Life Counseling Centers Facebook Fan Club" width="120" height="52" border="0"></a>
<p align="center" class="style12"><a href="4hourparenting.htm" target="_blank"><strong>4 Hour Court Ordered Divorce Parenting Class-Helping Your Children Through the Transition of Divorce</strong>, Court Referrals Accepted, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="parenting.htm" target="_blank"><strong>4 Hour Parenting Class-Parenting with Purpose</strong></a>, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="angermanagement.htm" target="_parent"><strong>8 Hour Anger Management Class</strong></a> Court Referrals Accepted, Saturday, 9a-5:30p, <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><span class="style17"><a href="marriage.htm" target="_parent">Couples Cafe </a></span><a href="marriage.htm"><span class="style17">"Enjoying Our Differences" </span></a><a href="Documents/Marriage Couples Cafe.pdf" target="_parent"><strong>Northland Church Natures Table </strong></a>Longwood, FL, TBA, 6:30p-8:30p<BR>
<BR>
<strong>Teen Talk about Obesity, Video Game Addiction, & Hooking Up</strong> - January 26th, 12p-1p, <a href="http://www.810weus.com/" target="_blank"><strong>The Linnda Durre Show 810 AM</strong></a> - James West, MA, LMHC</p>
<p align="center"><span class="style12 style28"><strong>The Hook Up Mentality</strong><BR>
Feb 4th from 9:30a-10:30a, East Ridge Middle School, <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Social Networking & Internet Safety</strong><BR>
Feb 19th from 9:40a-11a, <a href="http://www.thefirstacademy.org" target="_blank">The First Academy</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Top 10 Technology Relationship Kilers</strong><BR>
May 14th from 9a-12p, RSVP at (407) 281-7000, <a href="http://www.psysolutions.com/facilities/universitybehavioralcenter/" target="_blank">University Behavioral Center</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a> & <a href="janie.htm" target="_blank">Janie Lacy, MS</a></span></p>
<p align="center" class="style12"><strong>Professional Communicators Available for <a href="corporate.htm" target="_blank">Corporations,</a><a href="consultation.htm" target="_blank"> Colleges, Schools or Local Organizations on a Variety of Topics.</a></strong></p>
<p align="center"><span class="style12"><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a></span></p>
<HR color="#2a6180" SIZE="1">
<TABLE id="table47" cellSpacing="2" cellPadding="2" width="99%" border="0">
<TBODY>
<TR>
<TD height="120" bgColor="#ffffff"><p align="center"><strong><a href="Documents/Staff Brochure.pdf" target="_blank">TLC Brochure</a></strong></p>
<p align="center"><strong><A href="http://www.adobe.com/products/acrobat/readstep2.html"><IMG height="31" alt="Get Adobe Reader logo" hspace="3" src="images/get_adobe_reader.gif" width="88" vspace="3" border="0"></A></strong></p></TD>
</TR>
</TBODY>
</TABLE>
<p align="center"><strong><A href="http://www.cfchristianchamber.com">Member of the Central Florida Christian Chamber of Commerce</A></strong></p>
<!-- google_ad_client = "pub-7929094220693135"; //Home Page, 120x240, created 12/4/07 google_ad_slot = "9273104889"; google_ad_width = 120; google_ad_height = 240; //--> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="30" class="home-bg-r1"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="90" valign="top" class="home-b1"><table width="828" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30" height="90"> </td>
<td width="90"> </td>
<td align="center" valign="top">
<!--COPYRIGHT info BEGIN-->
<div class='copyright'>Copyright © 2006. Total Life Counseling Center. All rights reserved.<BR>
<br>
Main Office: 1507 S. Hiawassee Road #101, Orlando FL 32835 Satellite Locations: Clermont, Winter Park, East Orando Florida<br>
</div>
<!--COPYRIGHT info END-->
<!--BOTTOM OF PAGE LINKS BEGIN-->
<div class='bottomLinks'>
<DIV><A href="index.html" target="_blank">Home Page</A> | <A href="contact_us.htm" target="_blank">Contact</A> | <A href="maps.htm" target="_blank">Office Locations</A> |<A href="forms.htm"> FAQ</A> <A href="resources.htm">Links</A> <a href="employment.htm"><span class="style33">EMPLOYMENT</span></a></DIV>
</div>
<!--BOTTOM OF PAGE LINKS END--></td>
<td width="90"> </td>
<td width="30"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="147" class="home-bg-r2"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Can you tell me where the error is in my HTML? Also how do I give you my JS script?
Here's my CSS:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #214D65;
top: 0px;
bottom: 10px;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #2B6180;
font-style: normal;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
z-index: -1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.05em;
float: left;
background-color: #235E80;
top: -15px;
border-top-color: #A4B5BF;
border-right-color: #A4B5BF;
border-bottom-color: #A4B5BF;
border-left-color: #A4B5BF;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
right: -8px;
color: #FFFFFF;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 10em;
position: absolute;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #285B78;
border-top-color: #2B6180;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
top: auto;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #2B6180;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
border-top-color: #587788;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #2E698B;
color: #285D78;
background-repeat: no-repeat;
background-image: none;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #2A6180;
color: #205775;
background-repeat: no-repeat;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-repeat: no-repeat;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-repeat: no-repeat;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
Does Spry have a lot of problems with IE 7 and/or 6?
Hi there,
I am wondering if Spry has a lot of issues with IE6 and/or
IE7?
I've been glancing at the forum topics and the majority of
topics I see involve IE and issues with it.
Is that because of the Spry framework itself, or is it mostly
on the site developers' mistakes?For the most part, they tend to be CSS layout issues that
would manifest whether using Spry or not. Sure, some are js bugs
and are fixed in the javascript, but usually it is a CSS fix.
For instance, trying to get the Menu Bar customized for the
site:
We are trying to make more samples of these common layout
issues so users can see the code to solve the issue.
It can be frustrating for sure and we are doing what we can
to make it easier for users. That is the original goal of Spry.
Thanks for asking.
Don -
Problem with spry:select not selecting
I am having trouble getting the spry:select to work on the
following code. Everything works except for the spry:select. If I
remove the spry:hover and the spry:sort, then the spry:select will
work. The only way I can get the spry:select to work is if it is
the only spry statement in the <td>. Please help.
NON-WORKING SPRY:SELECT CODE:
<div spry:region="pv1">
Records {ds_PageFirstItemNumber}-{ds_PageLastItemNumber} of
{ds_PageTotalItemCount}
<table cellpadding="0" cellspacing="0" border="0"
width="100%">
<tr>
<td class="tableheader" style="cursor:pointer;"
spry:select="tableheaderSel" spry:hover="tableheaderSel"
spry:sort="airport_code">Airport</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel" spry:sort="hotel">Hotel</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel"
spry:sort="bookings">Bookings</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel"
spry:sort="previous_year_bookings">Previous Year</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel" spry:sort="change">Change</td>
<td class="tableheader" style="cursor:pointer;"
spry:hover="tableheaderSel"
spry:sort="percent_change">%</td>
</tr>
<tr spry:repeat="pv1" spry:odd="tablerow1">
<td class="tablecell"
spry:content="{airport_code}"></td>
<td class="tablecell"
spry:content="{hotel}"></td>
<td class="tablecell"
spry:content="{bookings}"></td>
<td class="tablecell"
spry:content="{previous_year_bookings}"></td>
<td class="tablecell"
spry:content="{change}"></td>
<td class="tablecell"
spry:content="{percent_change}"></td>
</tr>
</table>
<p>
<div style="float:right;">
<input type="button" value="Next"
onClick="pv1.nextPage();" />
<input type="button" value="Last"
onClick="pv1.lastPage();" />
</div>
<div style="float:left;">
<input type="button" value="First"
onClick="pv1.firstPage();" />
<input type="button" value="Prev"
onClick="pv1.previousPage();" />
</div>
</div>When you use a spry:sort, you are sorting the data set and
the entire region is redrawn. This wipes out the spry:select. This
happens to the select, no matter where it is.
The way to highlight the currently selected column is a bit
tedious. You will have to have a spry:if that checked the value of
{ds_SortColumn}. This means repeating the <TD> for each
condition.
It's a sub-optimal solution but we don't have attribute level
control.
However, we do have some tools and enhancements coming up
that should make this easier. But they are not ready yet, so...
http://labs.adobe.com/technologies/spry/samples/data_region/DataSetMasterDetailSample.html
has an example of how we use spry:if to conditionally put on
an attribute.
Don -
Question: My spry menu bar is not displaying correctly in Dreamweaver
Hello,
I am new to Dreamweaver CS5, so coding isn't my area of expertise. My problem with my spry menu bar is that it does not display the tabs on the menu bar correctly. When I try to apply new changes to the CSS of the horizontal menu bar, half of the tabs will change and the other half will not. Also, I am unable to drag and move the menu bar itself around, a function that I was once able to do before. At times, only one tab of the menu bar will display itself, without any of the other tabs as well.
I have a hunch that my problems stem from some coding errors in the SpryMenuBarHorizontal.css, and possibly in the SpryMenuBar.js. On the CSS Styles panel, my SpryMenuBarHorizontal.CSS list reads as follows:
I also have a hunch that something about this line-up is also incorrect, but I don't exactly know what the problem is.
Here is what my coding for my SpryMenuBarHorizontal.css looks like right now:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-align: center;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
left: 10;
top: 10;
height: 10;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
text-align: left;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Futura;
float: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #C00;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #C00;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
text-align: center;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: block;
f\loat: left;
background: #FFF;
And here is what my SpryMenuBar.js coding looks like right now too:
SpryMenuBar.js
This file handles the JavaScript for Spry Menu Bar. You should have no need
to edit this file. Some highlights of the MenuBar object is that timers are
used to keep submenus from showing up until the user has hovered over the parent
menu item for some time, as well as a timer for when they leave a submenu to keep
showing that submenu until the timer fires.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
this.init(element, opts);
Spry.Widget.MenuBar.prototype.init = function(element, opts)
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
this.element.style.position = "relative";
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
linkitems[i].style.position = "relative";
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent('on' + eventType, handler);
catch (e) {}
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
layers[0].parentNode.removeChild(layers[0]);
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
if(this.currMenu)
this.clearMenus(this.currMenu);
this.currMenu = null;
if(menu)
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
if(menu)
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
})(); // EndSpryComponent
If anyone could possibly steer me on the right direction with this, I'd be very grateful! I've been struggling with this for about a month now and I feel like I may have only made the situation worse.
I'm not sure if I have to keep making a new spry assets folder in my website or not or if I have to drag and drop the spry assets into the root folder. I have restarted my website over at least a dozen times by now. I have tried changing folders, dragging and dropping various spry assets folders everywhere and I have also uninstalled and reinstalled my copy of Dreamweaver CS5 in the hopes of getting my spry horizontal menu bar to act normal. I am completely new at Dreamweaver and I really, really need some help with this.
Thanks!I haven't been able to get my site posted up yet. Here is a link to it anyway:andrearosales.com
I will be working on connecting my files up to my server. At the moment, here are some screen shots of some messages that I am getting when I am saving my file.
I'm not sure what to make of these messages. I tried to put a new spry horizontal menu bar on my main page, and when it appeared, it displayed as a spry vertical menu bar.
Here is a picture of what it looks like:
I"m going to refer to the links that were suggested to me though. I'm not sure if pictures of the code will help to solve my problem. I'm going to try again to connect my files to my server though.
Maybe you are looking for
-
Need to install NW 7.0 BW component with EHP1
Dear All, We are in need to install BW component 7.0 with EHP1 SR1 and we are using the installation master "51036888_13". I can able to see 1. SAP process integration 2. SAP Mobile Infrastructure
-
Why are my keywords not in sync?
My keywords are not syncing between iOS devices and Mac. The iOS devices(iPhone 6 and iPad Air) are running iOS 8 and recently iCloud Drive. However I have had this problem prior to switching over to iCloud Drive on iOS 8. A while back I had the same
-
Camera Settings and Printing -off topic
Hi Everyone; My teenage cousin is going on a trip to Europe for a few weeks and she will be taking alot of digital pictures with her Canon point & shoot camera ( 5 MP SD30), but will not be able to unload her images from the SD card. She already has
-
Inclusion of LiveCycle Designer with Acrobat Pro 8.0
Are there any restrictions to LiveCycle Designer that's furnished with Adobe Acrobat Professional 8.0 ? I've checked the validity of my copy of Acrobat Pro 8.0, including the installation S/N, with Adobe Customer Service. After Installation and activ
-
SQL Developer will not come up.
I had SQL developer installed and working fine. Then I did something, not sure what, and now when I try to start SQL developer, it does not start. Something may flash. I still have all of my SQL developer files in the correct directories on my PC. Do