Skip navigation
pipface
pipface Calculating status...
Currently Being Moderated

Spry Menubar not operating in Safari

Apr 2, 2012 3:13 AM

Tags: #cs5 #safari #dreamweaver #spry #menubar

I am using a Spry vertical menubar in Dreamweaver CS5 and it shows fine in IE and Firefox but it does not show in Safari.

 

This is my SpryMenuBar.js

 

// SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1

/********************************************************************* **********

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

 

 

This is my html code:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateBeginEditable name="Fit4Action" -->
<title>Outdoor Group Fitness & Personal Training for the Sutherland Shire, Jannali, Oyster Bay, Bonnet Bay and Como - Home Page</title>

   
<meta name="Description" content="Outdoor Group Fitness sessions for all shapes, sizes and abilities. NO lengthy contracts, NO admin fees. Just fun, motivating, fat-burning workouts. If you want to be Slimmer, Fitter, Stronger this season, it's time to get Fit 4 Action" />

<meta name="Keywords" content="outdoor group fitness, outdoor group training, Sutherland, boot camp,training, exercise,health,fitness,personal training,weight loss,lose weight,diet,fat loss,weight loss,nutrition,fitness training,well-being, wellness,bmi,whtr,group fitness,bootcamp,boot-camp,one on one,bonnet bay,jannali,sutherland,como,oyster bay,kirrawee,bangor,menai,gymea,caringbah,cronulla,woollooware, miranda,woronora,illawong" />

<!-- TemplateEndEditable -->

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

<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->

<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="../SpryAssets/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
background-color: #84DFFA;
background-image: url(../images/sidebar.jpg);
}
h1 {
color: #666;
}
</style>
           
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20461848-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<link href="../jQuery/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2149023" binding="#social" />
</oa:widgets>
-->
</script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

</head>
<body>
  <div class="container">
<div class="bannerArea">  
<div class="bannernav"><a href="../PrivacyStatment.html" >Privacy Policy</a>  |<a href="../ContactUs.html"> Contact Us</a></div>
    <div class="toplogo"><a href="../index.html"><img src="../images/transparent.gif" width="253" height="145" border="0" /></a></div>
</div>
   
<div class="contentArea">
  
<div class="leftnavigation">
<ul id="MenuBar1" class="MenuBarVertical">
  <li><a href="../index.html" title="Fit 4 Action Home">Home</a></li>
  <li><a href="../AboutUs.html" title="About Fit 4 Action" class="MenuBarItemSubmenu">About Us</a>
    <ul>
      <li><a href="../AboutUs.html#OurMission" title="Our Mission">Mission Statement</a></li>
      <li><a href="../AboutUs.html#Expect" title="What to Expect">What to Expect</a></li>
      <li><a href="../AboutUs.html#Journey" title="Your Journey">Your Journey</a></li>
      <li><a href="../AboutUs.html#Trainer" title="Your Trainer">Your Trainer</a></li>
    </ul>
  </li>
  <li><a href="../WhyExercise.html" title="Why Exercise" class="MenuBarItemSubmenu">Why Exercise</a>
    <ul>
      <li><a href="../WhyExercise.html#Fitness">What is Fitness</a></li>
      <li><a href="../WhyExercise.html#WhyExercise">Why Exercise</a></li>
      <li><a href="../WhyExercise.html#Reasons">21 Reasons to Exercise</a></li>
    </ul>
  </li>
  <li><a href="../Services.html" title="Training Options" class="MenuBarItemSubmenu">Services</a>
    <ul>
      <li><a href="../Services.html" title="Services">Outdoor Group Fitness</a></li>
      <li><a href="../Services.html#OPT">Personal Training</a></li>
</ul>
  </li>
<li><a href="../OutdoorGroupFitnessSutherland.html" title="Outdoor Group Fitness Sutherland">Group Fitness</a></li>
<li><a href="../Schedule.html">Schedule</a></li>
<li><a href="../BMI.html" title="Calculators &amp; Tools" class="MenuBarItemSubmenu">Calculators &amp; Tools</a>
  <ul>
    <li><a href="../BMI.html">BMI Calculator</a></li>
    <li><a href="../WHtR.html">WHtR Calculator</a></li>
  </ul>
</li>
<li><a href="../Events/index.html">Events</a></li>
<li><a href="../Testimonials.html" title="BMI">Testimonials</a></li>
<li><a href="../Links.html">Links</a></li>
<li><a href="../ContactUs.html" class="MenuBarItemSubmenu">Contact Us</a>
  <ul>
    <li><a href="../ContactUs.html#Form">Submit an Equiry</a></li>
    <li><a href="../ContactUs.html#Location">Our Location</a></li>
  </ul>
</li>
<li><a href="../LogIn.php">Log In</a></li>
</ul>
    
<p> </p>
<a href="http://www.fitness.org.au/" target="_blank"><img src="../images/fitness_australia.jpg" width="158" height="60" border="0" /></a>

 

</div>
     
<div class="content"><!-- TemplateBeginEditable name="content" -->
<div class="contentleft">
<h1>Get Fit 4 2011</h1>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

<!-- TemplateEndEditable -->
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
  <div class="AccordionPanelTab tabTop">
      <div class="accordion_340_tab"> Social communities</div>
    </div>
    <div class="AccordionPanelContent" style="display: block">
      <div class="acontent">
        <div class="social">
          <p>You can find Fit 4 Action on the following social sites.</p>
          <p>Click the icon below to jump to our page </p>
        </div>
        <script type="text/javascript">
// BeginOAWidget_Instance_2149023: #social

$('.social').jsocial({
   twitter  :  '@fit4ActionPT',
   facebook :  'facebook.com/pages/Fit-4-Action/174324765926014?ref=ts',
//  flickr  :  'myID_2',
//  delicious :  'myID_3',
   linked  :  'linkedin.com/in/fit4action',
//  youtube  :  'youtube.com/myID',
//  feed  :  'myID_4',
//  friendfeed :  'myID_5',
//  digg  :  'myID_6',
//  lastfm  :  'myID_7',
   center  : false,
   inline  : true,
   small  : false,
   newPage  : true
  });
// EndOAWidget_Instance_2149023
        </script>
        <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.face book.com%2Fpages%2FFit-4-Action%2F174324765926014%3Fref%3Dts&amp;width =200&amp;colorscheme=light&amp;show_faces=false&amp;stream=false&amp;h eader=false&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:100px;" allowTransparency="true"></iframe>
      </div>
    </div>
</div>
<div class="AccordionPanel">
  <div class="AccordionPanelTab middleTab">
      <div class="accordion_340_tab">Special Offers</div>
    </div>
    <div class="AccordionPanelContent" style="display: block">
      <div class="acontent">
        <h2> </h2>
        <h2>PERSONAL TRAINING</h2>
        <p><strong><a href="../freesession/index.html"><img src="../images/Free-Session.jpg" width="208" height="58" border="0" /></a></strong></p>
        <p align="justify">Unsure if a Personal Trainer is  for you?</p>
        <p align="justify">Fit 4 Action know they can help and are offering a <strong>Free Session </strong>to sample Personal Training without obligation.</p>
        <p align="justify">Prefer  group sessions to motivate you?</p>
        <p align="justify">Give us a try and your first week is FREE</p>
        <p align="justify"><strong> Click <a href="../freesession/index.html">here</a> to find out more!</strong></p>
      </div>
    </div>
</div>
  <div class="AccordionPanel">
    <div class="AccordionPanelTab middleTab">
      <div class="accordion_340_tab"> Latest News</div>
    </div>
    <div class="AccordionPanelContent" style="display: block">
      <div class="acontent">
        <h2>Sydney Morning Herald Half Marathon entries now open!!</h2>
        <p>Need a challenge to keep you motivated in your training?</p>
        <p>Join the Fit 4 Action team and take on the 21.5km half marathon course on May 20, 2012.</p>
        <p>Click for <a href="http://www.smhhalfmarathon.com.au/" target="_blank">here</a> more information.</p>
        <p><a href="http://www.smhhalfmarathon.com.au/" target="_blank"><img src="../images/Half-Marathon-Lead.jpg" width="204" height="92" border="0" longdesc="http://www.smhhalfmarathon.com.au/" /></a></p>
        <p>Dont forget to enter the team name <strong>Fit4Action</strong> when you register.</p>
        <h2> </h2>
      </div>
    </div>
  </div>
</div>
  <div class="AccordionBottom"></div>
  </div>
  <div style="clear:both; text-align: center;">
    <blockquote>
      <blockquote>
        <blockquote>
          <p> </p>
          <p><span style="text-align: left; font-size: 12px; margin-left: 75px;"><a href="../index.html"> -Home </a><a href="../AboutUs.html">-About Us</a> <a href="../WhyExercise.html">-Why Exercise</a> <a href="../Services.html">-Services</a> <a href="../OutdoorGroupFitnessSutherland.html">-Group Fitness</a> <a href="../Schedule.html">-Schedule</a> <a href="../BMI.html">-Calcs</a> <a href="../Events/index.html">-Events</a> <a href="../Testimonials.html">-Testimonials</a> <a href="../Links.html">-Links</a> <a href="../ContactUs.html">-Contact Us</a></span></p>
        </blockquote>
      </blockquote>
    </blockquote>
  </div>
  </div>
  <div style="clear:both;"></div>
  </div>

  <div class="footerArea">
  <div class="copyright">&copy; 2011 Fit 4 Action.  All rights reserved.</div>
  </div> 
  </div>
<script type="text/javascript">
<!--
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:true, defaultPanel:2});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
  </script>
</body>
</html>

844 Views   3 Replies   Latest reply: Ben Pleysier, Apr 2, 2012 4:02 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Apr 2, 2012 6:49 AM   in reply to pipface
    Report

    No problem here.

     

    Gramps

     

    PS, I should have said that there is no problem with the markup and code that you have shown, hence the problem is in that portion that you have not show. The best way for us to help you is to supply a link to your site.

     
    |
    Mark as:
  • pipface
    Currently Being Moderated
    2. pipface,
    Apr 2, 2012 2:29 PM   in reply to Ben Pleysier
    Report

    Thanks Gramps.

     

    The site is www.fit4action.com.au

     

    In Safari, I have noticed the links work you just cant see the menu?

     

    Thanks in advance!!

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Apr 2, 2012 4:02 PM   in reply to pipface
    Report

    To start with, it is not very clever to comment out the original style rules in SpryMenuBarVertical.css as per

    /* Outermost menu container has borders on all sides */

    /*ul.MenuBarVertical

    {

        border: 1px solid #CCC;

    }*/

    /* Submenu containers have borders on all sides */

    /*ul.MenuBarVertical ul

    {

        border: 1px solid #CCC;

    }*/

    /* Menu items are a light gray block with padding and no text decoration

    ul.MenuBarVertical a

    {

        display: block;

        cursor: pointer;

        background-color: #EEE;

        padding: 0.5em 0.75em;

        color: #333;

        text-decoration: none;

    } */

    /* Menu items that have mouse over or focus have a blue background and white text */

    /*ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus

    {

        background-color: #33C;

        color: #FFF;

    }*/

    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */

    /*ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible

    {

        background-color: #33C;

        color: #FFF; 

    }*/

    All Spry widgets rely on markup (HTML), styling (CSS) and animation (JS). The original untouched files are very sensitive to change because they are reliant upon each other. The above commenting out of the code has upset the applecart in all browsers, although this may not be evident. For instance, if you remove the link to stylesheet.css, the widget should still work albeit not in the correct position. It does not work in any browser!

     

    What you have done is camouflaged the non-working widget with a few style rules of your own namely

    .leftnavigation a{

        margin-left: 0px;

        width: 156px;

        padding-left: 15px;

        padding-top: 5px;

        padding-right: 20px;

        padding-bottom: 5px;

        float: left;

        color: #364957;

        font-size: 11px;

        font-weight: bold;

        font-family: Verdana, Arial, Helvetica, sans-serif;

        text-decoration: none;

        background-image: url(images/nav_normalnoarrow.gif);

        background-repeat: repeat-x;

        background-position: 0px 0px;

        border-bottom: 1px solid #999;

     

    }

     

    .leftnavigation a:visited{

        color: #364957;

    }

    .leftnavigation a:hover{

        color: #ffffff;

        background-image: url(images/nav_downnoarrow.gif);

    }

    This is not clever.

     

    I suggest that you start with reading http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php #one to then start with an untouched version of SpryMenuBarVertical.css

     

    Gramps

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points