Help with Dreamweaver CS5 spry menus. Menu is not dropping down in IE7.
Hello.
We recently upgraded from GoLive CS3 to Dreamweaver CS5. Wow! This has been a big change for us. We are having trouble with a website that we are building, specifically the Spry Menu drop downs not appearing correctly in IE7 and older. While the dropdown menu appears in other browsers, it is not dropping down at all in IE7 and earlier versions. After researching this topic on many websites, including this forum, we are still unable to resolve our particular issue. We have tried many of the suggestions that are common to our problem, but have not found a solution as yet. Could someone please check out this page for us, and possibly give us some advise. We are working on Mac OSX. Thank you in advance for any suggestions you may offer.
http://www.advertools.net/pgtdemo/index.html
When I added the following to the document
<style>
#main_image {position:static;}
</style>
the menu items appeared albeit in the wrong position.
The reason for the hidden menu items is because #main_image had a position of relative, effectively creating a flow of its own rather than following the natural flow of the document.
Now for the postion of the submenu. If I add the following style rules to the document the submenu items are in the correct position
ul.MenuBarHorizontal li {text-align: left;}
ul.MenuBarHorizontal a {text-align: center;}
In the first line I have reset the rule that you had changed to center align and in the second line (which is not in the original CSS) I have aligned the text in the anchor tag to align center.
The reason is that IE<8 behaves differently to other browsers when it comes to list items causing the nested list items (submenu) to align themselves to the center of the text of the parent list item.
I hope the above helps.
Gramps
Similar Messages
-
Help with Dreamweaver CS5 spry menus. Submenus are not showing.
Hello.
I am working on a new website, and added 2 vertical spry menus to the page (left hand side under SEARCH). All of my submenus were working properly except for the fact that I couldn't see the entire list once it dropped down past the container window. I tried adding "overflow: visible" to the ul.MenuBarVertical ul AND ul.MenuBarVertical ul li and all of my submenus disappeared. Both spry menus were saved with different names. I tried UNDO multiple times, but they are still not working. HELP! I really don't want to have to go back and re-create these 2 menus.
Thank you.
Heres the link to my website
http://www.advertools.net/pmgdemo/index.html
P.S. I am Mac based and have only viewed my site on Safari, so I'm not sure how this looks on IE or any other browsers.I looked at your linked site from a PC on Chrome 12, Firefox 4 and IE9. Your menus show albeit that they sometimes overlap a little in an unpleasant (but workable) way. I have not checked with Safari, need to get an updated copy.
So the problem does not show up in the browser.
Is the problem with Contribute?
PS: You submenus show out horizontally, not vertically - is that what you intended? -
My Spry Vertical Menu does not "drop-down"
I've created my Srpy Vertical Menu and does not drop down to the second level, am I missing something?, I must have moved something in the style or something because it does work in a new page but not in the one I'm creating, how can I restart?...
My page is
http://www.solucionesinternetgdl.biz/radiadoresenguadalajara/html/Prueba1I've created my Srpy Vertical Menu and does not drop down to the second level, am I missing something?, I must have moved something in the style or something because it does work in a new page but not in the one I'm creating, how can I restart?...
My page is
http://www.solucionesinternetgdl.biz/radiadoresenguadalajara/html/Prueba1 -
Spry Menu Bars not dropping down in Firefox/IE
I recently published a website and found that my menu bars dont drop down in Firefox or IE, except the first cell on the first menu bar.
Here is the address: http://www.tvnewsjunkie.com/
Thanks,
GrantThere are too much sloppy coding to go through them all.
To help you on your way
line 4980: missing closing DIV tag
line 3693: missing closing LI tag
line 142: empty LI element.
If you delete line 142, the first three menus will work, but then there is something that is stopping the rest to work.
Gramps -
Help with images in Spry menus
I need help making this work: I want my menu buttons and
submenu buttons to be images rather than text. I've been able to
set it up to use different images for each of the main and
sub-level buttons, but only for the active state. I cannot figure
out how to use a different set of "hover images" for the hover
state. Note-- Each button and submenu button in the entire menu are
different images, so I suspect I need to use different ID's for
each, but I am not sure how to set that up in the
SpryMenuBarHorizontal.css file for each different button in, at
least, the active and hover states. Can anyone offer some help with
this?:V1 - Thank you for the suggestion, but this does not exactly
solve my dilemma. In its simplest terms, this is what I want to do:
Create a single drop-down menu where there is "Item 1" with
submenus "Item 1.1", "Item 1.2", and "Item 1.3". But, I want to use
different images for each item and subitem in their Active and
Hover states. So, in this example, there would be 8 different
images... An Active and a Hover image for each of Item 1, Item 1.1,
Item 1.2 and Item 1.3. -
When I click on the Apple icon the menu does not appear and drop down. I have restarted the computer and I don't know how to fix this or what it means.
Run troubleshooting. You can see the troubleshooting steps here, here and here.
Usually a Safe boot and/or booting into Single User mode to run fsck fixes the glitches on my PB G4. -
Help with further customisation spry menus
Hi,
I'm designing my first ever website using dreamweaver. I've successfully got a horizontal spry menu along the top of my pages which links them all together and I have all the normal and rollover colours I want etc. However, I would like the tabbed structure to show which page you're actually on by either displaying it in a different colour or it having a border or something, is this possible?
How would I go about doing this?
ThanksAs an amateur who's been mostly using design view could you give me a bit more detail on exactly how to do it please?
If you don't understand that tutorial, I'm afraid you won't understand anything else I tell you. If you want to do advanced things in DW, you need a working knowledge of HTML and CSS code.
Start here:
HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Spry dropdown menu not dropping down and reversing order cs4
Hi, thank you for reading my post.
I am having problems with my spry menu bar not dropping down when
I upload it to my site, I get bulleted lists. When I preview it, it works fine. Also, the menu is in reverse order (??) I've tried retyping it in the opposite order to see if that fixes it, but somehow it goes back to backwards. It should start with home at the left. I am trying to post my code, but it will not let me paste. How do I paste code? Sorry if thats a silly question.
Thank youHi, thank you for your replies. I set everything to left, which caused it to display correctly in dreamweaver. Thank you! I did enjoy the "wiggle" that I get from the menu items on hover, they move from right to left, will that cause problems if I change one back to right? I still am having trouble getting the menu bar to show on the website, Im still getting bullets.
How do I put the css files? They might be on the site, but not in the right place, where should they be? I also made another site from the same template, and saved it to a folder in my site so it can be previewed. Will that cause problems? Both spry's are not working..... argh! Thank you to everyone for your help, I appreciate it, this is my first time using the spry menu feature. Thank you for the help on posting code. Here is a link to the site and the code:
www.holly-parker.com
JAVA:
var Spry; if (!Spry) 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];
CSS:
/* 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;
color: #FCC;
background-color: #000;
font-family: Verdana, Geneva, sans-serif;
font-style: normal;
font-weight: bold;
text-align: center;
float: left;
width: 880px;
/* 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;
position: relative;
text-align: center;
cursor: pointer;
width: 145.8px;
background-color: #000;
color: #FCC;
float: left;
/* 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;
background-color: #000;
color: #FCC;
/* 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: 145.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;
color: #FCC;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 145.8px;
clear: left;
float: left;
/* 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: 0;
top: 0;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
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: #000;
padding: 0.5em 0.75em;
color: #FCC;
/* 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: #333;
color: #FFF;
font-weight: bold;
font-family: Verdana, Geneva, sans-serif;
text-align: right;
/* 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: #000;
color: #FCC;
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%;
color: #FCC;
/* 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: inline;
f\loat: left;
background: #000;
Home 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=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Holly Parker - Fashion, Commercial, Swim, Runway Model Los Angeles</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="mainstyling" -->
<style type="text/css">
<!--
body {
font: georgia;
background: #FFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000;
font-family: "Forgotten Futurist Shadow";
background-image: url();
background-color: #000;
padding-top: 0px;
.oneColFixCtrHdr #container {
width: 1200px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #000000;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
color: #FFF;
.oneColFixCtrHdr #header {
padding-top: 5px;
padding-bottom: 0px;
color: #FFF;
background-color: #000;
position: static;
text-align: center;
.oneColFixCtrHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-family: Tahoma, Geneva, sans-serif;
font-size: 60px;
color: #F39;
font-weight: bolder;
text-align: center;
margin-bottom: 0px;
.oneColFixCtrHdr #mainContent {
padding: 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
background: #FFFFFF;
font-family: "SF Foxboro Script";
color: #FFF;
font-size: 18px;
background-color: #000;
font-weight: bold;
text-align: center;
padding-top: 0px;
.oneColFixCtrHdr #footer {
padding: 0 10px;
color: #FCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
background-color: #000;
text-align: center;
.oneColFixCtrHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-size: 10px;
.navigation {
background-color: #000;
text-align: center;
float: left;
padding-left: 60px;
-->
</style>
<!-- TemplateEndEditable -->
<script src="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="file:///C|/Users/HOLLY/Desktop/Holly Parker Website/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtrHdr">
<div id="container">
<div id="header">
<h1><img src="images/holly-logo-top.jpg" width="875" height="139" /></h1>
<table width="800" border="0" cellspacing="0" cellpadding="4">
<tr>
<td align="right" valign="middle" bgcolor="#FFE8FF" class="navigation"><!-- TemplateBeginEditable name="navieditable" -->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">MAIN</a></li>
<li><a href="pone.html" class="MenuBarItemSubmenu">PHOTOS</a>
<ul>
<li><a href="pone.html">Un</a></li>
<li><a href="ptwo.html">Deux</a></li>
<li><a href="pthree.html">Trois</a></li>
<li><a href="pfour.html">Quatre</a></li>
</ul>
</li>
<li><a href="me.html">ME</a> </li>
<li><a href="connect.html">CONNECT</a></li>
<li><a href="links.html">LINKS</a></li>
<li><a href="video.html">VIDEO</a></li>
</ul>
<!-- TemplateEndEditable --></td>
</tr>
</table>
<!-- end #header -->
</div>
<div id="mainContent"><!-- TemplateBeginEditable name="bodyedit" -->
<p><img src="images/holly-parker-pink-beauty-web.jpg" width="265" height="349" /></p>
<!-- TemplateEndEditable -->
<!-- end #mainContent --></div>
<div id="footer"><!-- TemplateBeginEditable name="footeredit" -->
<p>HOLLY PARKER © 2010 ALL RIGHTS RESERVED </p>
<!-- TemplateEndEditable --></div></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html> -
SPRY menu not dropping down on certain pages
I'm having a lot of problems now that I've uploaded this webpage. I created this webpage in Dreamweaver and used the SPRY menu template and everything worked perfectly in Dreamweaver but now that I have uploaded it I can not use the drop downs on like 7 pages. When you are on the shop page, the dinning page, Living, Directions, Design, Events, and the contact page the SPRY menu will not drop down. Could someone look at my site and perhaps my code and tell me what I am doing wrong on those pages?
http://discoverclearfield.com/shop.html
http://discoverclearfield.com/dining.html
there are a couple of the pages that don't work.
Thanks so much.Have a look here and come back after you have fixed the markup http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdiscoverclearfield.com%2Fshop.htm l
Gramps -
Need help with installing Yahoo style flash menu CS5
I downloaded the Yahoo style menu bar from the the available widgets. I got the menu bar to show in Dreamweaver, but need help:
I have trouble understanding how to use the f-source flash editor to edit the links.
I don't seem to be able to drop the f-source.com button from the menu bar.
The bar shows up as a tiny bar in IE8, not as I had programmed it in the widget programmer.
I was instructed to Insert ==> f-source menus ==> Edit menu in Dreamweaver. Doing this leads to the following message: "Install at least one f-source menu'. I did install the f-source-UI G file in the Adobe Extension Manager CS5. What else needs to be installed?
My OS is Windows7 and I am working with Dreamweaver CS5. Please help.
Thanks,
Tony UythovenFlash menus (Flash navigation, period) is a terrible thing from a functional standpoint. It looks really nice, but the honeymoon ends there. As far as SEO goes, your entire site, beyond the landing page, is invisible. A search robot will only see an embeded Flash object.
You have to ask yourself a basic question.
1. What is the purpose of building a website and putting it online?
If it's for your own personal enjoyment and nothing more, then a Flash menu may be for you. If it's for a business or band, or a political group or social group, and you want people to be able to find it in Google, Yahoo, Bing, etc. then you want as many indexible links as possible on your landing page so they will show up in related searches like schedules, articles, galleries, etc. -
Strange problem with Dreamweaver Pop-Up menus
Hello:
I have encountered a very strange problem with DreamWeaver
pop-up menus, and I was wondering if I could get some help from
this forum, as I can't seem to find an answer anywhere else.
The problem involves use of DreamWeaver's pop-up menu
behavior — all works as expected, and my local preview of the
Web page/site works fine, but when I upload the site to a server, I
see extra question mark and "box" characters added to my drop-down
menus. This problem is inconsistent between browsers: Sometimes I
see it only on IE, sometimes I also see it on Firefox.
For example, check out the following URLs:
http://libertycreativesolutions.net/clients/cci/
... this implementation of drop-down menus ("Services"
button, etc.) displays an extra "box" character for each of the
drop-down menu items, but this only occurs in IE -- Firefox is
fine.
http://libertycreativesolutions.net/clients/microtek/HTML/MicroTek_home.html
... this implementation of drop-down menus shows an extra
question mark above the triggering link onMouseOver for Firefox,
and in IE, it shows this "box" character for both the triggering
buttons and for each menu item.
For both of these sites, the pop-up menus work without a
problem *when I'm looking at a local version on my workstation*.
What in the Wide Wide World of Sports is going on here????
Any help for this problem is appreciated.
Note that I stripped out the JavaScript code for menu
information from the <head></head> area of each of
these pages and placed it in a linked JavaScript document.
HELP!First, you need to read this, written by the person who
adapted that menu
code for Macromedia -
http://www.losingfight.com/blog/2006/08/11/the-sordid-tale-of-mm_menufw_menujs/
Then you need to know that there are MUCH better ways to do
such things -
Check the uberlink and MacFly tutorials at PVII -
http://www.projectseven.com/
and the Navbar tutorial/articles at Thierry's place
http://tjkdesign.com/articles/dropdown/
Or this one (more recent article):
http://tjkdesign.com/articles/Pure_CSS_Dropdown_Menus.asp
Or to get it done fast, go here -
http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Pomond69" <[email protected]> wrote in
message
news:[email protected]...
> Hello:
> I have encountered a very strange problem with
DreamWeaver pop-up menus,
> and I
> was wondering if I could get some help from this forum,
as I can't seem
> to
> find an answer anywhere else.
>
> The problem involves use of DreamWeaver's pop-up menu
behavior ? all works
> as
> expected, and my local preview of the Web page/site
works fine, but when I
> upload the site to a server, I see extra question mark
and "box"
> characters
> added to my drop-down menus. This problem is
inconsistent between
> browsers:
> Sometimes I see it only on IE, sometimes I also see it
on Firefox.
>
> For example, check out the following URLs:
>
>
http://libertycreativesolutions.net/clients/cci/
> ... this implementation of drop-down menus ("Services"
button, etc.)
> displays
> an extra "box" character for each of the drop-down menu
items, but this
> only
> occurs in IE -- Firefox is fine.
>
>
http://libertycreativesolutions.net/clients/microtek/HTML/MicroTek_home.html
> ... this implementation of drop-down menus shows an
extra question mark
> above
> the triggering link onMouseOver for Firefox, and in IE,
it shows this
> "box"
> character for both the triggering buttons and for each
menu item.
>
> For both of these sites, the pop-up menus work without a
problem *when I'm
> looking at a local version on my workstation*.
>
> What in the Wide Wide World of Sports is going on
here???? Any help for
> this
> problem is appreciated.
>
> Note that I stripped out the JavaScript code for menu
information from the
> <head></head> area of each of these pages
and placed it in a linked
> JavaScript
> document.
>
> HELP!
> -
Newbie - Help with Fireworks CS5 nav bar
I am new to Fireworks. I am using Fireworks CS5. I need help with creating navigation bars and menu. Any tutorial or tips is greatly appreciated.
Thank you.You'll find a tutorial named "Create a basic navigation bar" in the Fireworks help files.
-
Problem with Dreamweaver CS5.5
I have a proplem with Dreamweaver CS5.5 CSS panel. When you in the css panel box when you select and add a property, and then tab over to enter the values, all it does is highlight the box. In all previous versions when you tab over, you would be automattically able to start entering values without having to click in the fieild. Any suggesstions? This is becoming very frustrating, and slowing down my workflow that I have used since Dreamweaver CS3, CS4 and CS5.
When you posted this question on another forum
http://forums.adobe.com/message/4110895
one of the errors was
-------------------------------------- Summary --------------------------------------
- 0 fatal error(s), 0 error(s), 2 warning(s)
WARNING: DW065: Display requirements not met for {0215A652-E081-4B09-9333-DC85AAB67FFA}
WARNING: DW065: Display requirements not met for {35ED8892-98E5-488A-A23C-6DB842A46EA5}
Please search the above error/warning string(s) to find when the error occurred.
These errors resulted in installer Exit Code mentioned below.
Dreamweaver's specs list 1280x800 as a minimum screen resolution
http://www.adobe.com/products/dreamweaver/tech-specs.html
What's your screen resolution? -
What are versions of Internet Explorer compatible with Dreamweaver CS5.5 ?
What are versions of Internet Explorer compatible with Dreamweaver CS5.5 ?
Hello,
just to be safe you should test or validate your website there for example:
http://www.my-debugbar.com/wiki/IETester/HomePage and
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
JavaScript - http://www.jslint.com/
PHP - http://phpcodechecker.com/
Hans-Günter -
Has anybody had a problem with the mouse cursor lagging when navigating the drop down menus? this only started happening after a re-install. it only occurs in Photoshop elements 13 in the photo editing section,and no other application. My mouse drivers are up to date.Any help or advice would be most welcome.
Good day!
Please post Photoshop Elements related queries over at
http://forums.adobe.com/community/photoshop_elements
and please read this (in particular the section titled "Supply pertinent information for quicker answers"):
http://blogs.adobe.com/crawlspace/2012/07/photoshop-basic-troubleshooting-steps-to-fix-mos t-issues.html
Regards,
Pfaffenbichler
Maybe you are looking for
-
Hi Experts, We are required to send a message through PI 7.31 (single stack) in a Soap-to-Soap scenario connecting to a Soap 1.2 Web Service. We are getting a Security Context Token expired or Invalid error. Please help us resolving this error. Thank
-
How come I need Adobe Flash Player for Safari
I have the latest Macbook Pro and I guess the latest version of Safari. So why doesn't a current version of Safari play videos on the internet? Why must I download Adobe Flash Player to watch videos on the interne? I can watch a few videos on Y
-
Regarding Triggers in Oracle Forms
Hello Gurus, Please help me .I am very new to Oracle Apps .I got the requirement from my client. Iam a technical developer .Please see the below requirement. Order Management Super User >> Pricing >>Price Lists >>Price list Setup When an item is crea
-
All of a sudden when I try to export images from LR to my HD...I get the following error Unable to Export: An internal error has occurred ?:0 atempt to index a nil value. What does this mean? How do I fix?
-
Sir, Does Oracle have any tool for migrating databases from PRO IV to Oracle. Are there any documents regarding the same. Are there any third party utilities available for PRO IV to Oracle conversion. Thank you Ranjith.