Horizontal Scrolling menu bar
I want to create a horizontal scrolling menu. When you place your cursor over the graphics in the menu bar, they slide to the left or the right. Does anyone know where I can find a tutorial online for this?
Thank-you.
LT
Hi Donald,
Thanks for your help with the scrolling menu bar, I have
tried to add the code but must be putting it in the wrong place.
Please can you let me know where it need to go. The page I am
working on is
http://www.vr360homes.co.uk/nav_menu.htm.
Thanks in advance for your help.
Regards
Lee
Similar Messages
-
Horizontal Spry Menu Bar with Horizontal Sub Menu
I have created a horizontal menu bar with only one main menu item leading to a sub menu. I would like this sub menu to display horizontally also, instead of vertically as added by default.
I am relatively new to dreamweaver and would appreciate any help possible.Came across the fix by accident thru extensions in menu bar,
and choice of cursor for each section. Feeling happy! Happy New
Year everyone. -
Horizontal Scrolling Menu System
Hi,
Can someone please let me know if the following scrolling of horizontal menus is possible within ApEx - pls see site:
http://www.panic.com/coda/
I am referring to the menu system where it has the following tabs together with the left and right arrows:
Sites | Files | Editor etc...
If the answer is yes, can anyone please provide some insight as to how it might be done.
Thanks.
Tony.Well, if you float your mouse over the arrows on the left/right you'll see that it's calling a javascript. They're actually loading all those sections into the original page call, each wrapped in a [div] tag and then their javascript "scrolls" through the sections dependent on which menu/arrow action has been clicked.
The answers are actually all there on that page. Once you figure out how it works (by reviewing the javacripts and HTML) you would need to create ApEx templates to make it all work.
Earl -
http://www.lakeshoreentertainment.com
- in the "latest films" section, you see scrolling posters that get
bigger in the middle. How can I do this with AS2.
It Would be similar to
http://www.tutvid.com/tutorials/flash/tutorials/scrollThumbGal.php,
but without the images above.that looks like simple scaling.
-
My spry horizontal menu bar is now displaying vertical. How do I fix it?
My horizontal spry menu bar displays correctly at http://www.matthewvandyke.com/ar/photos/ but displays vertical at http://www.matthewvandyke.com/ar/about.html. It started doing this a few days ago and I am not sure why.
Can anyone take a look at this code and tell me why this would be happening?
Here is the code:
about.html
(the relevant code from this page)
<div id="topNavigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="الصفحة" _mce_href="http://www.matthewvandyke.com/ar/">الصفحة">http://www.matthewvandyke.com/ar/"> الصفحة الرئيسية</a></li>
<li><a href="حول" _mce_href="http://www.matthewvandyke.com/about.html">حول">http://www.matthewvandyke.com/a bout.html">حول ماثيو فاندايك</a></li>
<li><a href="الكتابhttp://www.matthewvandyke.com/book.html">الكتاب</a></li>
<li><a href="الفيلمhttp://www.matthewvandyke.com/film.html">الفيلم</a></li>
<li><a href="مقاتل" _mce_href="http://www.matthewvandyke.com/about.html#freedom-fighter">مقاتل">http://www.ma tthewvandyke.com/about.html#freedom-fighter">مقاتل الحرية</a></li>
<li><a href="مغامراتhttp://www.matthewvandyke.com/about.html#adventures">مغامرات</a></li>
<li><a href="تحليلاتhttp://www.matthewvandyke.com/analyst.html">تحليلات</a></li>
<li><a href="الحقائقhttp://www.matthewvandyke.com/the-facts.html">الحقائق</a></li>
<li><a href="الصورhttp://www.matthewvandyke.com/ar/photos/">الصور</a></li>
<li><a href="الفيديوhttp://www.matthewvandyke.com/video/">الفيديو</a></li>
<li><a href="المدونةhttp://www.matthewvandyke.com/blog/">المدونة</a></li>
<li><a href="الصحافةhttp://www.matthewvandyke.com/press.html">الصحافة</a></li>
<li><a href="الأحداث" _mce_href="http://www.matthewvandyke.com/events/">الأحداث">http://www.matthewvandyke.com/ events/">الأحداث والمناسبات</a></li>
<li><a href="الرعاةhttp://www.matthewvandyke.com/sponsors/">الرعاة</a></li>
<li><a href="وسائل" _mce_href="http://www.matthewvandyke.com/social-media.html">وسائل">http://www.matthewvand yke.com/social-media.html">وسائل الإعلام الاجتماعية</a></li>
</ul>
</div>
SpryMenuBarHorizontal.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0 .15em;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
display: block;
float: none;
width: auto;
white-space: nowrap;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #000000;
padding: 0.4em 0.15em;
color: #FFFFFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #d6c7a6;
color: #000;
/* 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: #d6c7a6;
color: #000;
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%;
padding: 0.4em 0.15em;
/* 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: #FFF;
SpryMenuBar.js
// SpryMenuBar.js - version 0.12 - 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.
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];I have not seen your error in either my IE or my chrome. I do note that you are using a "strict" Document Type Declaration.
You might try a transitional DTD, which should be more forgiving than the strict:
<!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">
Other than that, I don't see anything particular (because I don't see the error, either) that would cause the menu to drop vertically instead of horizontally.
Beth -
Horizontal menu bar is playing up
Please can someone help?
I have a horizontal Spry menu bar on my website (http://www.stmarysrickmansworth.org.uk) which was working absolutely fine until quite recently.
The drop down element is fine, displaying the submenu. However, when you click on the menu choice, the text leaps to the right and invariably the link does not work. There's a small graphic on the submenus - if you click this, it seems to work but clicking the actual text can be a hit and miss affair.
I haven't made any changes to the menu or CSS in ages so I'm at a loss to know what's happened.
I've tried several different browsers and each gives the same problem.When I look at the first line in your modified SpryMenuBarHorizontal.css I morph into a tantrum mode and do not bother reading the rest. Have a look for yourself
/* 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: 1em;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
I suggest that you revive the original CSS and then have a look here http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one (the format should be familiar) before attempting to make adjustments to suit personal tastes.
Gramps -
Double horizontal spry drop down menu bar problems
Hello Everyone,
I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
css spry drop down menu 1
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
css spry drop down menu 2
/* 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.adminbarh li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email. Contact me at [email protected]
See what I got here. www.prospectingtreasures.comHello Everyone,
I'm new to the spry tools and I need a little help. This is what I'm trying to accomplish in Dreamweaver CS4:
I need 2 horizontal spry menu bars for navigation. I have created a div for each spry tool, 1 div placed above the other and they cross the entire width of the page. I have created the spry menu bars. Everything seems to be working correctly in both menu bars, That is until you open the IE browser, all other browsers tested fine. The problem is that when you hover over the bottom menu bar in IE, the drop down menu does not drop all the way down. The first submenu of the drop down menu covers the main menu bar. I have tried to change the css for the spry menu bar at the ul.MenuBarHorizontal li.MenuBarItemIE to show the display: as inline and also tried block and niether had any effect. Someone please help. Thanks.
css spry drop down menu 1
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
css spry drop down menu 2
/* 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.adminbarh li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
This site is not yet live. If anyone is willing I can send an attachment of my complete spry CSS via email. Contact me at [email protected]
See what I got here. www.prospectingtreasures.com -
Spry Horizontal Menu Bar position change in different browsers
Here is the page: http://pragati.de/index2.html
There is a Horizontal Spry Menu Bar which is floating right. In Dreamweaver CS5's Live View, the navigation menu appears perfectly in line with background image and same is the true when previewed in Google Chrome and Safari. However when previewed in Firefox or Opera, the navigation menu appears a little below the background image and leaves kind of a dent which is clearly visible. I have not yet tried it in IE.
I have posted this question before but didn't find any solution.Here is the page: http://pragati.de/index2.html
There is a Horizontal Spry Menu Bar which is floating right. In Dreamweaver CS5's Live View, the navigation menu appears perfectly in line with background image and same is the true when previewed in Google Chrome and Safari. However when previewed in Firefox or Opera, the navigation menu appears a little below the background image and leaves kind of a dent which is clearly visible. I have not yet tried it in IE.
I have posted this question before but didn't find any solution. -
Spry horizontal menu bar messing up in IE
I'm using Dream Weaver CS4 and I have a horizontal spry menu bar at the top of my page and it shows up and functions properly in every browser except for IE. (tested in IE7). After the accepting the Active X warning, the menu shows up as a vertical style menu and the colors are not right. The Sub-menus are also showing up in a vertical fashion. Please help!
My Code:
( I tried mssing with the Brower hacks, however nothing I tried worked.)
@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 auto;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 41em;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: larger;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #F3B5B6;
padding: 0.5em 0.75em;
color: #000;
text-decoration: blink;
/* 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: #9F2000;
color: #000;
/* 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: #9F2000;
color: #000;
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%;
/* 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: none;
background: #FFF;
#History {
text-align: center; -
Spry Menu Bar Submenus Not Showing
Hi!
This is the first time I have ever used Spry .My Horizontal Spry Menu Bar Submenus are not working in ANY browsers whatsoever and I'm not sure whats wrong. My website is www.poor2chic.com. I have pasted a copy of my SpryMenuBarHorizontal.css as well as the .js code and the source code :
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.55em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #03C;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #9D9DFD;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #9D9DFD;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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: #FFF;
.container .content h1 {
font-family: Arial Black, Gadget, sans-serif;
.container {
font-family: Arial;
.container .content blockquote blockquote blockquote blockquote h1 em {
font-family: Arial;
.container .content p em strong {
color: #B62C0A;
.container .content p em strong {
color: #000;
.JS CODE:
// 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
PORTION OF SOURCE CODE CONCERNING MENU BAR:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="#">About Us</a>
<ul>
<li><a href="about_us_about_our_story.html">Our Story</a></li>
<li><a href="about_us_about_our_mission.html">Our Mission</a></li>
<li><a href="about_us_about_our_president.html">Our President</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Products</a>
<ul>
<li><a href="in_production.html" class="MenuBarItemSubmenu">Bags</a>
<ul>
<li><a href="in_production.html">Backpacks</a></li>
<li><a href="in_production.html">Purses</a></li>
<li><a href="in_production.html">Wallets</a></li>
<li><a href="in_production.html">Yoga Bags</a></li>
</ul>
</li>
<li><a href="in_production.html">Hats</a></li>
<li><a href="in_production.html">Hair Accessories</a></li>
<li><a href="in_production.html">Necklaces</a></li>
</ul>
</li>
<li><a href="in_production.html">Services</a></li>
<li><a href="blog_page.html">Blog</a></li>
<li><a href="policy_page.html">Policy</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>I just solved myself. Thank you to anyone who spent time to look at my question though. I really appreciate it.
-
Scrolling menu with indpendent static text
I was hoping someone would be able to help me, im not very
experienced, but i learn pretty quickly.
This
is a screenshot of my menu, it is a horizontal scrolling menu. Upon
rollover, the icons glow red. I copied the actionscript from
something i found online.
I need static text to appear in the bottom section when each
icon is selected, thus labeling the icon. I've tried different
things, but each time the text would move horizontally as the icons
do. I need the text to exsist independently from the menu, but i
have no idea how to do this. Any help would be greatly appreciated.
I can provide the FLA file if needed.
this is the action script i have placed on the menu, i dont
know if it will help
xm = 0;
//function to set the xpos of the movieclip
function xpos(bar_length,mul)
hpos = 0;
scroll_length = 490;
incr = bar_length/scroll_length;
xm = _xmouse;
if(_xmouse <= 10){xm = 10;}
if(_xmouse >= 400){xm = 400;}
scroll_x = hpos - xm;
scroll_x = scroll_x * mul;
x_pos = scroll_x * incr;
x_pos = x_pos + hpos;
return x_pos;
_root.onEnterFrame = function ()
// call function xpos
x_pos = xpos(700,.20);
with (bar)
_x += (x_pos - _x)*.4;
// call function xpos
x_pos = xpos(950,.75);
with (menu)
_x += (x_pos - _x)*.4;
thanks it advanceyou will need to create a 'dynamic' text field in the
position that you want there, and then assign text to the field on
rollOver of the button clip. You can control the text assignment
from within the onRollOver and onRollOut handlers. Something like
this from the main timeline: -
Scrolling menu with independent static text
I was hoping someone would be able to help me, im not very
experienced, but i learn pretty quickly.
This
is a screenshot of my menu, it is a horizontal scrolling menu. Upon
rollover, the icons glow red. I copied the actionscript from
something i found online.
I need static text to appear in the bottom section when each
icon is selected, thus labeling the icon. I've tried different
things, but each time the text would move horizontally as the icons
do. I need the text to exsist independently from the menu, but i
have no idea how to do this. Any help would be greatly appreciated.
I can provide the FLA file if needed.
this is the action script i have placed on the menu, i dont
know if it will help
xm = 0;
//function to set the xpos of the movieclip
function xpos(bar_length,mul)
hpos = 0;
scroll_length = 490;
incr = bar_length/scroll_length;
xm = _xmouse;
if(_xmouse <= 10){xm = 10;}
if(_xmouse >= 400){xm = 400;}
scroll_x = hpos - xm;
scroll_x = scroll_x * mul;
x_pos = scroll_x * incr;
x_pos = x_pos + hpos;
return x_pos;
_root.onEnterFrame = function ()
// call function xpos
x_pos = xpos(700,.20);
with (bar)
_x += (x_pos - _x)*.4;
// call function xpos
x_pos = xpos(950,.75);
with (menu)
_x += (x_pos - _x)*.4;
thanks in advanceyou will need to create a 'dynamic' text field in the
position that you want there, and then assign text to the field on
rollOver of the button clip. You can control the text assignment
from within the onRollOver and onRollOut handlers. Something like
this from the main timeline: -
Spry Menu Bar wraps to second line on a few monitors
Hello-
I am stuck on a spry horizontal menu bar and have discussed with a few local dreamweaver users and we can't figure this out. I'm using CS4 to create an internal site for my company (sorry, I can't send you link). I tested the site on firefox and explorer on my computer and everything works beautifully. When going through the soft launch one computer out of the six computers who reviewed the site had an issue with my navigation bar. I used the horizontal spry menu bar to create a navigation with six options. The problem computer wrapped the last two to a second line which makes everything weird on pages within the site.
Screen captures are below. Three images show the main page where the navigation wraps on top of the side column and right column. The second image shows the menu bar wrapping behind the left column on additional site pages which is happening on all additional site pages.
The code for the spry menu assets should be below the images. If you need additional information, if I didn't provide everything, I'll send it. I'm very new to this and pretty much self-taught. I have taken an online class through ed2go.com, I've asked a ton of questions from other designers using Dreamweaver, and I've watched MANY tutorials online. ANY help you can give would be MUCH appreciated. THANK YOU!!
MAIN PAGE/HOME PAGE
ADDITIONAL SITE PAGES
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #D6D6D6;
background-image: url(/Images/Autry_Background.jpg);
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
background-image: url(/Images/Autry_Background.jpg);
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
vertical-align: middle;
background-color: #005BAE;
/* 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: #CCC;
color: #000;
text-decoration: blink;
/* 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: #CCC;
color: #333;
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%;
/* 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: #FFF;Hi, Mel,
I see that you are using default widths for the list items in the menus. If you reduce the width of the list items, you should be able to settle on a width that works better than 8em and 8.2em.
Here are the bits that will need editing:
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em; /* make this width smaller */
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em; /* make this width smaller */
position: absolute;
left: -1000em;
background-image: url(/Images/Autry_Background.jpg);
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em; /* make this width smaller */
Z -
Spry Menu bar is being stubborn
I am trying to put a horizontal Spry menu bar in my header. Here is the code that, to me looks like it is in the header:
<div id="header">
<h1>Beer Diary</h1>
<ul id="header_navi" class="MenuBarHorizontal">
<li><a href="#">Home</a></li>
<li><a href="#">Add Beer</a></li>
<li><a href="#">BJCP</a></li>
<li><a href="#">Sites</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("header_navi", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div><!--end header div-->
Here is all the CSS script that, I think, affects the menu:
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 8em;
float: right;
I have no clue what's going on. Here are some screen snap shots of the outcome:
The above image is from Firefox. This is also the Live View view. The brown behind the navi bar is the container div.
In the second image, which is the Design view, it appears that the navi is in the header.
Any tips?
Also, on an aside- if you have a tip of making the red sidebar go all the way down to the footer, that be great too!
Thanks,
GreggValidate your HTML code and fix reported errors.
HTML - http://validator.w3.org/
If that doesn't help you fix the problem, we'll need to see a link to your online page.
Nancy O. -
Hello!
I'm using a horizontal spry menu bar with horizontal sub menu
and have almost gotten the navigation exactly how I need it. I'm
stuck, however, and don't know how to fix the following:
1. I have absolute positioning set for my sub menu so that
the items appear under the left-most main menu item instead of
their parent item. When I change screen sizes, the sub menu stays
put (as it should) and everything else moves with the re-size. I
can't figure out where the sub menu positioning is originally set
to change it or how to get it to appear where it currently is
without using absolute positioning.
2. I would like to center the contents of the sub menu and I
think I've tried text-align:center everywhere possible but to no
avail. Any suggestions would be greatly appreciated!
3. Is there any way that the menu can recongnize the page
that it's on and display the appropriate link high-lighted. For
example, when you open the home page the active/focus state for the
"Home" button shows (for this menu it would be a different color
background image) and it's corresponding sub menu would be
displayed automatically. Would a script do it? Is there anything
like this available?
The following is the page code and accompanying css. I have
not altered the js file. I apologize for not being able to provide
a link, but may be able to do so this evening.
Thanks in advance for your help!
Stephi
<!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>ContraCostaTest</title>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<link href="Style/style.css" rel="stylesheet"
type="text/css" />
<style>
#container{width:800px; margin:0 auto 0 auto;}
#content{width:714px; background-color:white;margin:22px 0 0
0;color:#CCCCCC; font-size:10px}
#navbar{padding:0 0 32px 0; *margin:0 0 -32px 0; }
</style>
</head>
<body>
<div id="container">
<div id="navbar">
<ul id="MainMenu" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu"
href="#">Home<br /> </a>
<ul>
<li><a href="#">About Us <span> |
</span></a></li>
<li><a href="#"> Contact Us <span> |
</span></a></li>
<li><a href="#"> ATM Locator <span> |
</span></a></li>
<li><a href="#"> News <span> |
</span></a></li>
<li><a href="#"> Links <span> |
</span></a></li>
<li><a href="#"> Join <span> |
</span></a></li>
<li><a href="#"> Employment</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Loans
&Rates</a>
<ul>
<li><a href="#">Consumer Loans <span> |
</span></a></li>
<li><a href="#"> VISA <span> |
</span></a></li>
<li><a href="#"> Mortgage Loans <span> |
</span></a></li>
<li><a href="#"> Auto Buying
Center</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu"
href="#">Checking & Savings</a>
<ul>
<li><a href="#">Regular Savings <span> |
</span></a> </li>
<li><a href="#"> Checking <span> |
</span></a></li>
<li><a href="#"> IRA <span> |
</span></a></li>
<li><a href="#"> Share Certificates <span>
| </span></a></li>
<li><a href="#"> Club Accounts <span> |
</span></a></li>
<li><a href="#"> Rates</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Electronic Services</a>
<ul>
<li><a href="#">@ccessOnline <span> |
</span></a></li>
<li><a href="#"> BillPay <span> |
</span></a></li>
<li><a href="#"> Direct Deposit &
Payroll Deduction <span> | </span></a></li>
<li><a href="#"> Automatic Bill Payments
<span> | </span></a></li>
<li><a href="#"> ATM or MasterMoney <span>
| </span></a></li>
<li><a href="#"> Access
Line</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Locations<br />
</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Forms
& Applications</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Auto
Buying Center</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</div>
<div id="content">This is a test. This is a test. This
is a test. This is a test. This is a test. This is a test. This is
a test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test.
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MainMenu",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
@charset "UTF-8";
ul.MenuBarHorizontal
margin: 0 auto 0 auto;
padding: 0; /*NOTE: removing this item causes menu bar to
shift right in FF. wierd...*/
list-style-type: none;
font-size: .7em;
cursor: default;
ul.MenuBarActive
z-index: 1000;
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
text-align: center;
cursor: pointer;
width: 9.1em;
float: left;
ul.MenuBarHorizontal ul
margin: 0 auto 0 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
position: absolute;
left: 112px;
*left: 101px;
border:#CC0033 1px solid;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 112px;
*left: 101px;
z-index: 1030;
/*NOTE: submenu set at higher z-index than for
ul.MenuBarHorizontal ul above at 1020 to display*/
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-image:url(../Images/BGup_03.gif);
color: #333;
text-decoration: none;
height:30px;
padding-top:2px;
text-align:center;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image:url(../Images/BGover_03.gif);
ul.MenuBarHorizontal iframe{
position: absolute;
left: 112px;
*left: 101px;
ul.MenuBarHorizontal ul{
background-color:#999999;
width:714px; /*NOTE:setting a width keeps submenu
horizontal*/
ul.MenuBarHorizontal li li{
width:auto;
ul.MenuBarHorizontal li li a{
background-color:#999999;
height:20px;
background-image:none;
margin-left:5px;
ul.MenuBarHorizontal li li a span{
color:black;
ul.MenuBarHorizontal li li a:hover, ul.MenuBarHorizontal li
ul li a:focus{
color:white;
height:20px;
background-image:none;
TextHello!
I'm using a horizontal spry menu bar with horizontal sub menu
and have almost gotten the navigation exactly how I need it. I'm
stuck, however, and don't know how to fix the following:
1. I have absolute positioning set for my sub menu so that
the items appear under the left-most main menu item instead of
their parent item. When I change screen sizes, the sub menu stays
put (as it should) and everything else moves with the re-size. I
can't figure out where the sub menu positioning is originally set
to change it or how to get it to appear where it currently is
without using absolute positioning.
2. I would like to center the contents of the sub menu and I
think I've tried text-align:center everywhere possible but to no
avail. Any suggestions would be greatly appreciated!
3. Is there any way that the menu can recongnize the page
that it's on and display the appropriate link high-lighted. For
example, when you open the home page the active/focus state for the
"Home" button shows (for this menu it would be a different color
background image) and it's corresponding sub menu would be
displayed automatically. Would a script do it? Is there anything
like this available?
The following is the page code and accompanying css. I have
not altered the js file. I apologize for not being able to provide
a link, but may be able to do so this evening.
Thanks in advance for your help!
Stephi
<!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>ContraCostaTest</title>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />
<link href="Style/style.css" rel="stylesheet"
type="text/css" />
<style>
#container{width:800px; margin:0 auto 0 auto;}
#content{width:714px; background-color:white;margin:22px 0 0
0;color:#CCCCCC; font-size:10px}
#navbar{padding:0 0 32px 0; *margin:0 0 -32px 0; }
</style>
</head>
<body>
<div id="container">
<div id="navbar">
<ul id="MainMenu" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu"
href="#">Home<br /> </a>
<ul>
<li><a href="#">About Us <span> |
</span></a></li>
<li><a href="#"> Contact Us <span> |
</span></a></li>
<li><a href="#"> ATM Locator <span> |
</span></a></li>
<li><a href="#"> News <span> |
</span></a></li>
<li><a href="#"> Links <span> |
</span></a></li>
<li><a href="#"> Join <span> |
</span></a></li>
<li><a href="#"> Employment</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Loans
&Rates</a>
<ul>
<li><a href="#">Consumer Loans <span> |
</span></a></li>
<li><a href="#"> VISA <span> |
</span></a></li>
<li><a href="#"> Mortgage Loans <span> |
</span></a></li>
<li><a href="#"> Auto Buying
Center</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu"
href="#">Checking & Savings</a>
<ul>
<li><a href="#">Regular Savings <span> |
</span></a> </li>
<li><a href="#"> Checking <span> |
</span></a></li>
<li><a href="#"> IRA <span> |
</span></a></li>
<li><a href="#"> Share Certificates <span>
| </span></a></li>
<li><a href="#"> Club Accounts <span> |
</span></a></li>
<li><a href="#"> Rates</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Electronic Services</a>
<ul>
<li><a href="#">@ccessOnline <span> |
</span></a></li>
<li><a href="#"> BillPay <span> |
</span></a></li>
<li><a href="#"> Direct Deposit &
Payroll Deduction <span> | </span></a></li>
<li><a href="#"> Automatic Bill Payments
<span> | </span></a></li>
<li><a href="#"> ATM or MasterMoney <span>
| </span></a></li>
<li><a href="#"> Access
Line</a></li>
</ul>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Locations<br />
</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Forms
& Applications</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Auto
Buying Center</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
</ul>
</div>
<div id="content">This is a test. This is a test. This
is a test. This is a test. This is a test. This is a test. This is
a test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test. This is a test. This is a test. This is a
test. This is a test.
</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MainMenu",
{imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
@charset "UTF-8";
ul.MenuBarHorizontal
margin: 0 auto 0 auto;
padding: 0; /*NOTE: removing this item causes menu bar to
shift right in FF. wierd...*/
list-style-type: none;
font-size: .7em;
cursor: default;
ul.MenuBarActive
z-index: 1000;
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
text-align: center;
cursor: pointer;
width: 9.1em;
float: left;
ul.MenuBarHorizontal ul
margin: 0 auto 0 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
position: absolute;
left: 112px;
*left: 101px;
border:#CC0033 1px solid;
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: 112px;
*left: 101px;
z-index: 1030;
/*NOTE: submenu set at higher z-index than for
ul.MenuBarHorizontal ul above at 1020 to display*/
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-image:url(../Images/BGup_03.gif);
color: #333;
text-decoration: none;
height:30px;
padding-top:2px;
text-align:center;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
background-image:url(../Images/BGover_03.gif);
ul.MenuBarHorizontal iframe{
position: absolute;
left: 112px;
*left: 101px;
ul.MenuBarHorizontal ul{
background-color:#999999;
width:714px; /*NOTE:setting a width keeps submenu
horizontal*/
ul.MenuBarHorizontal li li{
width:auto;
ul.MenuBarHorizontal li li a{
background-color:#999999;
height:20px;
background-image:none;
margin-left:5px;
ul.MenuBarHorizontal li li a span{
color:black;
ul.MenuBarHorizontal li li a:hover, ul.MenuBarHorizontal li
ul li a:focus{
color:white;
height:20px;
background-image:none;
Text
Maybe you are looking for
-
Changing the calendar settings: Sunday as the first day of the week
Dear Masters of SAP universe, In ECC6.0, I am using a LIS info-structure with the period split set to week. I would like to know how can I change the calendar settings in order to consider Sunday as the first day of the week, instead of Monday. For e
-
Can't set password for Root account
I have rebuilt my macbook from scratch not from a backup , I then opened Terminal and typed sudo passwd root (got the message) entered a password, I got Sorry try again. tryed again same thing, I definately reinstalled from scratch therefore my ro
-
How do I setup a NAS photo album in iphoto?
Subject says it all
-
Pivot Table with Dynamic Columns and Headers
Hello, I'm trying to pivot a table of data where the column headers will be dynamic. While I know how to pivot the table to get what I want how will I be able to pick up the table column header from the Pivot to display in the report? For example: U
-
Say I want to install a program that is over 50 Gigs and I don't have enough room on my internal hard drive to do that. Is it possible to install that program onto the external hard drive and open the program from there? I'm thinking of installing Lo