SPRY ALBUM GALLERY not working in IE7
Hi, I have created a spry album gallery using adobe's sample
code and have test via dreamweaver - firefox 3.0 & IE7 to view
the site. It works a treat.
I have uploaded the files and now running live. One problem.
I have type the web address into IE7
(www.carreon.com.au/elyssa/pictures.html) and nothing appears
except for the banner at the top. I have tried this in firefox and
it works fine.
I have made sure that the java script files are uploaded and
have checked that my IE settings are correct. what did i do wrong??
here is my page code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet" href="css/style.css"
type="text/css" />
<title>ELYSSA'S PICTURES</title>
<script type="text/javascript"
src="includes/xpath.js"></script>
<script type="text/javascript"
src="includes/SpryData.js"></script>
<script type="text/javascript"
src="includes/SpryEffects.js"></script>
<script type="text/javascript">
<!--
var dsGalleries = new
Spry.Data.XMLDataSet("data/galleries.xml", "galleries/gallery");
var dsPhotos = new
Spry.Data.XMLDataSet("{dsGalleries::@file}", "gallery/photo" );
function MM_effectHighlight(targetElement, duration,
startColor, endColor, restoreColor, toggle)
Spry.Effect.DoHighlight(targetElement, {duration: duration,
from: startColor, to: endColor, restoreColor: restoreColor, toggle:
toggle});
dsPhotos.setColumnType("file/@height", "number");
dsPhotos.setColumnType("file/@width", "number");
//-->
</script>
<link href="css/gallery.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrapper" align="center">
<div id="banner" style="width:800px">
</div>
<div id="menu">
<div align="right" class="smallwhitetext"
style="padding:9px;">
<a href="journal.html">Journal</a> |
<a href="pictures.html">Pictures</a> | <a
href="#">Videos</a> | <a href="#">Events</a> |
<a href="#">Wishes</a> </div>
<div class="smallgraytext" id="submenu"
spry:region="dsGalleries">
<label for="chooseGallery">Select gallery:
</label>
<select name="chooseGallery"
spry:repeatchildren="dsGalleries" id="chooseGallery"
onchange="dsGalleries.setCurrentRow(this.value)"
spry:choose="spry:choose">
<option value="{ds_RowID}" spry:when="{ds_RowNumber} ==
{ds_CurrentRowNumber}"
selected="selected">{name}</option>
<option value="{ds_RowID}"
spry:default="spry:default">{name}</option>
</select>
</div>
<div class="thumbs" id="thumbs" spry:region="dsPhotos">
<span spry:repeat="dsPhotos">
<img src="images/small/{file}" width="50" height="50"
onmouseover="MM_effectHighlight(this, 10, '#ffffff',
'#CE317E', '#CE317E', false)"
onmouseout="MM_effectHighlight(this, 10, '#CE317E',
'#FFFFFF', '#ffffff', false)"
spry:setrow="dsPhotos"/>
</span>
</div>
<div class="mainPic" spry:detailregion="dsPhotos">
<p><span class="smallredtext">
</span><span class="smalltitle">
</span><img src="images/large/{file}"
alt="Images"/> <span class="smallredtext"><br
/>
{caption}</span>
</p>
<p>
</p>
</p>
</div>
<div id="footer" class="smallgraytext">
<a href="#">Home</a> |
<a href="#">Journal</a> | Events
<a href="#"></a> | Wishes
<a href="#"></a> |
<a href="mailto:[email protected]">Contact
Us</a> |
© 2009</div>
</div>
</div>
</body>
</html>
please help me...
thank you
Jo
Hi,
Your server is serving up your XML files with a Content-Type
of text/html. It should be text/xml or application/xml. IE is
pretty particular about the Content-Type for XML files. It won't
create an XML DOM document in the XHR response unless the
Content-Type is one of the ones I mentioned above.
--== Kin ==--
Similar Messages
-
Spry Sliding Panels not working in IE7
I just created page with sliding panels horizontally and
works fine on safari FF and opera but in IE7 just not working
properly. The slides are expanding outside the page and i cant fix
that. Is that normal for IE?
the link is :
http://ironspiderart.com/Pages/mentshirts/mentshirts.html
Thank youThanks for your help :] I ended up realizing that a huge
bloated js navbar wasn't all that great of an idea anyway, so I
scrapped it and used a CSS-based one instead...much cleaner and
works better (no preloading! woohoo.) It looks like the problem was
probably an amalgamation of many things, but it's resolved now.
quote:
IE doesn't seem to like the PNG images you are using
understatement of the decade. -
Flash buttons not working in IE7 and Chrome
Here's my website where the problem is occuring www.bakercreative.co.uk
As you can see the Flash buttons animate, but when clicked they should go to a new html page.
I've tested it in IE8 and Firefox without any problems but it's not working in IE7 and Chrome.
Does anyone know what the problem is? Could it be the html code or the flash file itself?
ThanksHi, Glad you were able to solve that issue with the buttons and Chrome. Any small thing can cause big problems!! LOL
I'm sure IE7 will test out ok, IE6 did Your website is very nice and has a variety! I hope it all comes together for you.
Thanks,
eidnolb -
Flash Ad External API not working in IE7
I'm using the Flash AS 2.0 External API to call a Javascript
function in a page that adds an item to a shopping list when a
Flash Ad is clicked. This is working in FireFox 2 , Safari, and
IE6, but does not work in IE7. I tested the Flash Ad locally in
it's own html page and it calls the function in IE7. An example of
the ad can be viewed here:
http://ads.beta.groceryshopping.net/Shop/WeeklyAd.aspx
The issue may be tied to Ajax.the solution can be found here:
http://kb.adobe.com/selfservice/viewContent.do?externalId=kb400730&sliceId=1 -
Some smart album rules not working
At a bit of a loss here - either my upgrade to Mavericks or my upgrade of Aperture to 3.5 has caused my Smart Albums to not work with various EXIF checking rules.
I frequently have rules which check the EXIF tag, Camera Make, and check if it is Canon - this allows me to filter out and focus on my Canon 5D3 photos and not get distracted in relatively pointless editing of iPhone snaps. Unfortunately it doesn't work. Camera Make is Canon returns no matches, Camera Make starts with Canon returns nothing, Camera Make ends with Canon returns nothing.
If I go and look at a photo, I can see the Camera Make exif flag says "Canon" in the field. No spaces at the end or anything silly. It used to work.
Anyone experienced similar? Anyone have solutions?Hmm, interesting. Given your use of quotes I just tried "Canon" including the double quotes, but that made no difference either.
The EXIF filter is the only rule on the smart album, and while the smart album is set for a single project, there are several hundred photos that should match in it. If I set the smart album to "Library" rather than the project, it still matches none...! Just in case there's some other rule burried away that just isn't displayed, I switched the smart album to "Match Any" rather than "All", and that too returns no photos. -
Basic spry dataset not working in IE7 but will in FF & IE6?
I did no coding on this. I simply selected the xml file and used the spry wizard to set up the table:
<!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>Untitled Document</title>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("febBank.xml", "banks/bank", {sortOnLoad: "date", sortOrderOnLoad: "ascending"});
ds1.setColumnType("date", "date");
ds1.setColumnType("consumer", "number");
ds1.setColumnType("commercial", "number");
ds1.setColumnType("sum", "number");
//-->
</script>
</head>
<body>
<div spry:region="ds1">
<table>
<tr>
<th spry:sort="date">Date</th>
<th spry:sort="name">Name</th>
<th spry:sort="city">City</th>
<th spry:sort="state">State</th>
<th spry:sort="consumer">Consumer</th>
<th spry:sort="commercial">Commercial</th>
<th spry:sort="sum">Sum</th>
</tr>
<tr spry:repeat="ds1">
<td>{date}</td>
<td>{name}</td>
<td>{city}</td>
<td>{state}</td>
<td>{consumer}</td>
<td>{commercial}</td>
<td>{sum}</td>
</tr>
</table>
</div>
</body>
</html>
Why will this not work in IE 7???
Here is some of the xml:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<banks xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<bank>
<date>2/28/2009</date>
<name>1st Constitution Bancorp</name>
<city>Cranbury</city>
<state>NJ</state>
<consumer>43630</consumer>
<commercial>375729</commercial>
<sum>419359</sum>
</bank>
<bank>
<date>2/28/2009</date>
<name>1st Enterprise Bank</name>
<city>Los Angeles</city>
<state>CA</state>
<consumer>18838</consumer>
<commercial>108104</commercial>
<sum>126942</sum>
</bank>Turns out I was having a common problem- our web servers were not set up to send the xml as xml. The mime headers were set to text rather then xml. I work in a large federal site where the hardware is 3 contractors removed from the web team...
This was only a problen in IE 7 as it looks for the header type, while IE6 and FF do not... -
Spry Photo Gallery not viewing
am new to web design and followed this tutorial to make a
Spry Photo Gallery:
http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html
I am using Dreamweaver CS3 and when I preview my files,
everything is perfect and in place. When I upload everything and
view it on the server, no photos show up, and all of my div layers
are out of whack or missing even.
Any ideas, suggestions?? I feel like I am missing something
really simple.. THANKS!
http://www.summerinchicago.com/photoGallery/gallery.html
http://www.summerinchicago.com/photoGallery/photos.xml
http://www.summerinchicago.com/photoGallery/includes/SpryData.js
http://www.summerinchicago.com/photoGallery/includes/xpath.js
http://www.summerinchicago.com/photoGallery/imagesI've set up the photo gallery demo -china,paris,egypt- and
made a swap of a couple of my photos from in Dreamweaver's property
box src for thumbs, and link for the large pic. It works in Safari
and Opera but not in firefox and I don't know about IE as I'm on a
MAC and not that for into it yet.Is there something to look for in
the code? It shows no browser issues when I test for compatability?
I'd really like to use the xml version but I have tried and had no
luck except in Safari. -
Spry Photo Gallery not visible other than in Safari
Hi,
I created a photo gallery using Spry using the step-by-step instructions found at http://www.adobe.com/devnet/dreamweaver/articles/spry_photo_album.html.
The problem is that my gallery only can be viewed in Safari — Firefox, Netscape and Explorer (on a Mac) shows nothing of the gallery.
Here's the link:http://www.highmarkdesigns.com/Proofing/gsconsultants/website/gallery/gallery.html
I would greatly appreciate it if anyone can tell me why it's not working in the other browsers and how to correct it to work "everywhere."
Thanks!
HannaTHe IE version on the Mac is not supported by Spry. Its cross browser support includes:
Internet Explorer 6 +
Firefox 1.5 +
Opera 9.6 +
Safari 2.3 +
Chrome
As for the HTML content i saw in your scripts, it was just a basic empty page HTML.
Something like this;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
It didn't say the cause of this issue, just HTML tags. But if its fixed, than I wouldn't worry about it anymore. -
Spry Tab Navigation not working in IE
I have created a couple of test pages to highlight what happens and the issue I have.
ONE: http://www.netballzone.com.au/aeasphase1handover/testCentresml.html - navigation to specific tabs doesn't work in IE7 or 8 and all tabs content is displayed in one page and no tab navigation options available.
TWO: http://www.netballzone.com.au/aeasphase1handover/testCentresml2.html - no way to navigate to get to specific tabs that works in IE7 or 8.
In Webkit and Firefox all is well and the two examples show the same thing.
The main requirements I have is to be able to navigate to specific tabs from outside of the page. I have looked at various related topics but cannot see a solution that works for me and Option ONE seems to be the closest I can find.
As soon as I included the error I get in ONE above.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB6.5; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET4.0C; .NET CLR 3.0.30729)
Timestamp: Tue, 12 Oct 2010 01:33:34 UTC
Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 121
Char: 1
Code: 0
URI: http://www.netballzone.com.au/aeasphase1handover/testCentresml.html
From the page outside via a hyperlink I used <a href="testCentresML.html?tab=1#TestCentresTabs">
Thanks in anticipation and regards,
MikeIf you want to choose Brunei, the URL should look like
<a href="testCentresML.html?test=0&country=1">
and the code for the page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<h1>Test Centres</h1>
<div id="TestCentresTabs" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">First Tab</li>
<li class="TabbedPanelsTab" tabindex="0">Second Tab</li>
<li class="TabbedPanelsTab" tabindex="0">Third Tab</li>
<li class="TabbedPanelsTab" tabindex="0">Test Availability</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<h2>Countries</h2>
<div id="CountryTabs" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">AUSTRALIA</li>
<li class="TabbedPanelsTab" tabindex="0">BRUNEI</li>
<li class="TabbedPanelsTab" tabindex="0">CAMBODIA</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content AUSTRALIA</div>
<div class="TabbedPanelsContent">Content BRUNEI</div>
<div class="TabbedPanelsContent">Content CAMBODIA</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent"><h2>2nd Tab</h2></div>
<div class="TabbedPanelsContent">
<h2>3rd Tab</h2>
<p> 333333 </p>
</div>
<div class="TabbedPanelsContent">
<h2>4th Tab</h2>
<p> 44444 </p>
</div>
</div>
</div>
<script>
var TestCentresTabs = new Spry.Widget.TabbedPanels("TestCentresTabs", {defaultTab: params.test ? params.test : 0});
var CountryTabs = new Spry.Widget.TabbedPanels("CountryTabs", {defaultTab: params.country ? params.country : 0});
</script>
</body>
</html> -
my photo stream does not work at all. I've tried making a new album, but that does not work. So I've tried using an already existing album and deleting the pictures there. I decided to only upload 1 photo from my old phone (iPhone 4s iOS 7.1.1) to see if it'll show up on my new device (iPhone 5 iOS 8.1.1) it doesnt even show up in my new phone (iPhone 6 iOS 8.1.2) this picture is what shows up on both my iPhone 6 and 5 but on the 4s there is a picture that I "uploaded" and a second one that came out of nowhere. I do not know what to do because in the past this has worked out for me and it shows up on all three devices
You can't restore to a backup that was taken on a device which has a higher version of iOS than on your iPad, you will have to update your iPad to 8.1.3 to be able to restore to it
You should be able to update your iPad via Settings > General > Software Update -
Spry menu bar not working in IE
Hi there,
This is the first time I'm using Spry. Everything was fine until I tested the site in IE. My top menu moves position upon rollover and the submenu doesn't show at all. I looked at the forums and thought I would add the IE hack into the code, but upon doing that I saw that it was already there. I'm not sure where to go from here. Please help, many thanks in advance!
Update Note: I just noticed it says it's version 1.4. I did update to 1.6. When I check for Spry updates it does say I am using 1.6, but appears to be 1.4 in the css code. Any reason why?
Site:
http://retouching.zeoproductions.com/
SpryMenuBarHorizontal.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;
list-style-type: none;
font-size: 100%;
cursor: default;
/* 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
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 9.2em;
margin: 0;
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: 20pt;
cursor: default;
width: 190px;
position: absolute;
font-weight: normal;
text-decoration: none;
font-family: century;
line-height: 13px;
letter-spacing: 2pt;
text-align: right;
left: -1000px;
z-index: 1020;
margin-top: -2%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: -55%;
padding: 1px;
/* 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: 25pt;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background-color: #E8E8E8;
width: 190px;
text-align: right;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* 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
top: 0;
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: #FFFFFF;
padding: 0.5em 0.75em;
color: #999999;
text-decoration: none;
font-family: century;
font-variant: small-caps;
font-size: 10pt;
text-align: right;
text-indent: 40px;
/* 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: #FFFFFF;
color: #000000;
/* 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: #FFFFFF;
color: #000000;
left: 20px;
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;
background-color: #FFFFFF;
/* 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(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
white-space: nowrap;
/* 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(SpryMenuBarDown.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;
/* 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;OK... what I needed was a proper update... not sure why it didn't work the first time, but now I am definitely running 1.6. My initial problems are no longer relevant.
However.... this created a few other obstacles. The background color, text color, text-transform, and all hover attributes are not working in IE. Confused I am.
@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;
list-style-type: none;
font-size: 100%;
cursor: default;
/* 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
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
cursor: pointer;
width: 9.2em;
margin: 0;
float: left;
background-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
list-style-type: none;
font-size: 20pt;
cursor: default;
width: 190px;
position: absolute;
font-weight: normal;
text-decoration: none;
font-family: century;
line-height: 13px;
letter-spacing: 2pt;
text-align: right;
left: -1000px;
z-index: 1020;
margin-top: -2%;
margin-right: 0%;
margin-bottom: 0%;
margin-left: -55%;
padding: 1px;
/* 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: 25pt;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
background-color: #FFFFFF;
width: 190px;
text-align: right;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
/* 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
top: 0;
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: #FFFFFF;
padding: 0.5em 0.75em;
color: #999999;
text-decoration: none;
font-family: century;
font-size: 10pt;
text-align: right;
text-indent: 40px;
text-transform: uppercase;
font-variant: normal;
/* 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: #FFFFFF;
color: #000000;
/* 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: #FFFFFF;
color: #000000;
left: 20px;
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;
background-color: #FFFFFF;
/* 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(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
white-space: nowrap;
/* 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(SpryMenuBarDown.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;
/* 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; -
SPRY menu bar not working in IE 9
Hey! I recently just finished building my very first website using Dreamweaver CS5.5! It looks really great and works perfectly in firefox and safari however the SPRY menu bar does not work in IE 8 or 9. Does anyone know what i can do to fix this without messing up how the website looks in firefox and safari?
thanks,
Toby
here is a copy of my code:
1
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 200px;
/* 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 same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 50%;
position: absolute;
z-index: 1020;
cursor: default;
width: 180px;
left: -1000em;
top: 0;
background-color: #cccccc;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: ;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
color: ;
font-size: 100%;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: ;
color: ;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(home.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.MenuBarVertical 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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
2
// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
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
3
<!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>Integrated Sensors, LLC</title>
<style type="text/css">
body,td,th {
font-family: "Arial Narrow", "Arial Narrow Bold", "Arial Narrow Bold Italic", "Arial Narrow Italic";
font-size: medium;
color: #000000;
body {
background-image: url(images/_jpg%20png/background.jpg);
</style>
<link rel="shortcut icon" href="images/favicon.ico" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
text-decoration: underline;
a:visited {
text-decoration: underline;
a:hover {
text-decoration: none;
a:active {
text-decoration: underline;
h1 {
font-size: large;
color: #3165C9;
</style>
</head>
<body>
<table width="617" border="0" align="center" cellpadding="2" href="images/favicon.ico" rel="favicon">
<tr>
<td width="609"><table width="600" border="0" cellpadding="2">
<tr>
<td><img src="images/sensor2.gif" width="195" height="195" align="absmiddle" /></td>
<td><img src="images/heading.gif" width="600" height="170" /></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="817" border="0" cellpadding="0">
<tr>
<td width="200" height="35" valign="top"><ul id="MenuBar1" class="MenuBarVertical">
<li><a href="index.html"><img src="images/b2_home.gif" alt="" onmouseover=" this.src='images/b2_home_ov.gif'" onmouseout=" this.src='images/b2_home.gif'"
style="cursor:pointer;"></a> </li>
<li><a href="about_1.html" class="MenuBarItemSubmenu"><img src="images/b2_about.gif" alt="" onmouseover=" this.src='images/b2_about_ov.gif'" onmouseout=" this.src='images/b2_about.gif'"
style="cursor:pointer;"></a>
<ul>
<li><a href="about_1.html"><img src="images/bs_1.gif" alt="" onmouseover=" this.src='images/bs_1_ov.gif'" onmouseout=" this.src='images/bs_1.gif'"
style="cursor:pointer;"></a></li>
<li><a href="about_2.html"><img src="images/bs_2.gif" alt="" onmouseover=" this.src='images/bs_2_ov.gif'" onmouseout=" this.src='images/bs_2.gif'"
style="cursor:pointer;"></a></li>
<li><a href="about_3.html"><img src="images/bs_3.gif" alt="" onmouseover=" this.src='images/bs_3_ov.gif'" onmouseout=" this.src='images/bs_3.gif'"
style="cursor:pointer;"></a></li>
</ul>
</li>
<li><a href="technology_2.html" class="MenuBarItemSubmenu"><img src="images/b2_technology.gif" alt="" onmouseover=" this.src='images/b2_technology_ov.gif'" onmouseout=" this.src='images/b2_technology.gif'"
style="cursor:pointer;"></a>
<ul>
<li><a href="technology_2.html"><img src="images/bs_6.gif" alt="" onmouseover=" this.src='images/bs_6_ov.gif'" onmouseout=" this.src='images/bs_6.gif'"
style="cursor:pointer;"></a></li>
<li><a href="technology_3.html"><img src="images/bs_7.gif" alt="" onmouseover=" this.src='images/bs_7_ov.gif'" onmouseout=" this.src='images/bs_7.gif'"
style="cursor:pointer;"></a></li>
<li><a href="technology_4.html"><img src="images/bs_8.gif" alt="" onmouseover=" this.src='images/bs_8_ov.gif'" onmouseout=" this.src='images/bs_8.gif'"
style="cursor:pointer;"></a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu"><img src="images/b2_applications.gif" alt="" onmouseover=" this.src='images/b2_applications_ov.gif'" onmouseout=" this.src='images/b2_applications.gif'"
style="cursor:pointer;"></a>
<ul>
<li><a href="applications_1.html"><img src="images/bs_10.gif" alt="" onmouseover=" this.src='images/bs_10_ov.gif'" onmouseout=" this.src='images/bs_10.gif'"
style="cursor:pointer;"></a></li>
<li><a href="applications_2.html"><img src="images/bs_11.gif" alt="" onmouseover=" this.src='images/bs_11_ov.gif'" onmouseout=" this.src='images/bs_11.gif'"
style="cursor:pointer;"></a></li>
<li><a href="applications_3.html"><img src="images/bs_12.gif" alt="" onmouseover=" this.src='images/bs_12_ov.gif'" onmouseout=" this.src='images/bs_12.gif'"
style="cursor:pointer;"></a></li>
<li><a href="applications_4.html"><img src="images/bs_13.gif" alt="" onmouseover=" this.src='images/bs_13_ov.gif'" onmouseout=" this.src='images/bs_13.gif'"
style="cursor:pointer;"></a></li>
<li><a href="applications_5.html"><img src="images/bs_14.gif" alt="" onmouseover=" this.src='images/bs_14_ov.gif'" onmouseout=" this.src='images/bs_14.gif'"
style="cursor:pointer;"></a></li>
<li><a href="applications_6.html"><img src="images/bs_15.gif" alt="" onmouseover=" this.src='images/bs_15_ov.gif'" onmouseout=" this.src='images/bs_15.gif'"
style="cursor:pointer;"></a></li>
</ul>
</li>
<li><a href="publications.html" class="MenuBarItemSubmenu"><img src="images/b2_publications.gif" alt="" onmouseover=" this.src='images/b2_publications_ov.gif'" onmouseout=" this.src='images/b2_publications.gif'"
style="cursor:pointer;"></a></li>
<li><a href="contact.html"><img src="images/b2_contact.gif" alt="" onmouseover=" this.src='images/b2_contact_ov.gif'" onmouseout=" this.src='images/b2_contact.gif'"
style="cursor:pointer;"></a></li>
</ul></td>
<td width="611" valign="top" bgcolor="#FFFFFF"><div align="justify">
<blockquote>
<h1 align="center">Background</h1>
<p>Integrated Sensors is the first company in the world to apply the high gain, high-performance advantages of low cost PDP-TV (plasma display panel) technology to radiation detection. This has resulted in the development of what is now known as the Plasma Panel Sensor (PPS), which has been called a <em>revolutionary</em> technology by U.S. government scientists. </p>
<p>Integrated Sensors with seven issued patents holds all of the core intellectual property - which is seminal in scope - on the PPS radiation detector technology. The PPS could well prove to be a transformational technology for a number of <em>multibillion</em> dollar industries, ranging from radiation therapeutics for the treatment of cancer, to medical imaging, to homeland security. </p>
<p>With a secure IP and patent position established, and an international collaborative team involving over a dozen world-class scientists, and with substantial research investment by the U.S. government, Integration Sensors is now transitioning to the commercialization of its technology.</p>
</blockquote>
</div></td>
</tr>
</table></td>
</tr>
<tr>
<td><p> </p>
<p>Copyright 2007-2011. Integrated Sensors, LLC. All rights reserved.</p></td>
</tr>
</table>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>90% of browser rendering problems are caused by invalid code. See details here:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.i-sensors.com%2F
You have a bunch of unclosed <img /> tags on your menus.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
ITunes album view not working and no album art?
Hi all -
Bought a 64GB iPhone 5 and uploaded my music via my desktop - all seems to have run fine, except that album artwork isn't showing for many of them, even when I select the option "View artwork".
I've read on another thread that ID3 tags of 2.3 or lower are not supported, but find it hard to accept there's no compatibility here - so am presuming user error rather than Apple trying to force users to manually update all their albums (I have 57GB of music - don't want to update album art on everything!)
Also, I've just downloaded and installed iTunes on my laptop, and connected the iPhone to laptop. However, the album view options aren't working. All songs are simply listed by album name, but none of the column listing features work either (ie, sort by name, genre, etc).
I presumed iTunes had crashed, but restarting the laptop and the same happens. Am on latest software for iTunes and iOS 6.
One more curiosity - how do I download my music from the iPhone to the desktop? I had presumed it would do this automatically (ie, into the iTunes media folder) but so far nothing.
Or is it simply the case that iTunes is preparing to download all music into the desktop, hence why it's not working properly? Simply because there's no notice of anything happening.
Apologies for any newbie questions - found myself using the iPad quite a lot for apps, but never for music as it was only the 16GB version, so have been sold into joining the Apple walled garden. Would be nice to get these issues sorted out, though.Hi David
Yes, I found the importer now. I also fixed my problem, but with 'brute force':
For each of the folders not being indexed, including the ~/Library/Mail folder, I turned on Privacy in the Spotlight System Prefs and then turned it off again. This seems to have fixed things. I did this for some old document folders too and that also seems to have worked.
So far so good. thanks again. For now I'm marking this as solved. -
Spry dataset is not working properly in IE8, Help me plz...
I am a new user of dreamweaver CS5. I have designed some pages which are using Spry Dataset. It is working perfect in Firefox and IE 7 but it was not working at all in IE 8. Ben asked me to paste the following into the <HEAD> section
<meta http-equiv="X-UA-Compatible" content="IE=7" />
and after doing that it was working properly. But today I tested my site again and I came to know that it is only showing the Master Table, when we click on any master Picture of Spry Dataset it is not showing the details.
Here is the link of my site
http://dsdforu.com/WomensKNewArrivalCollection.htmlhttp://www.dsdforu.com/WomensKSDWCollection.html
I was trying to solve it by myself but I can't. Can any one tell me what am I doing wrong? or what would be the solution.
Thanks for your time.
SuboohiHi Suboohi,
I think the problem may be the pictures themselves. They do not seem to be loading quickly which gives the impression that they are not showing, especially when you have a slow connection.
You might look at optomising the pictures and preloading the images to allow your site to work properly.
I hope this helps.
Ben -
Links and photo gallery not working!
Hi,
I've just created a website by iWeb. After publishing the site in the local folder I've uploaded the entire contents to the server by FTP. From local folder it works fine but while trying to view online, the links between the pages not working (even not visible) at the same time my photo gallery is also not working (not visible). I was using Safari in mac.The same problem occurs while I am trying to browse the site from in my pc (copied the file in a local folder) and using Google Chrome and Internet Explorer
If anyone can tell me what is the possible error?
Thanks,
TariqueFrom viewing your site it's apparent that not all of the files are being uploaded to the server. Particularly those in the Scripts folder.
Have you opened your locally published site with your browser and checked it out? I think you'll find that the navbar will display correctly on both pages and the rest of the site will properly.
What ftp client are you using to upload the files? If you haven't tried the free Cyberduck client give it a try. Many users have found it to be successful where other clients were having problems.
Maybe you are looking for
-
Adding redirect path and pattern in Lion server for configuring software update server
Adding redirect path and pattern in Lion server for configuring software update server.Any changes
-
IPod Doesn't Show In iTunes (Windows XP)
My iPod Classic won't show up in iTunes because earlier, I had accidentally checked a box on my iPod settings (within the iTunes program) that said not to display settings for that iPod in iTunes automatically, or not to automatically sync the iPod.
-
How to change the answer text within the review widget of iBooks Author?
I want to change the answer text which appears after one has finished a test within the review widget of iBooks Author, but I can't figuere out how to do that. I also want to sum up the result of a couple of questions as a percentage. How does that w
-
Tabs or Collapsable view in Workflow Email
Hi all, We have a requirement to have Tabs in mail sent by WF or to have collapsable view. Collapsable : Click on a word or so and it opens a section . On clicking again, it should close. We are using HTML language to send the Workflow Email. The mai
-
Twinview with one monitor switched off
I have a setup with two monitors, one a DVI LCD, which I use as my main monitor, and an older VGA monitor, which I use only occasionally, both connected to an nvidia graphics card. They are easy to setup using nvidia-settings. The problem is I often