Formatting Spry Menu to keep current page highlighted?
Hi,
I have O'Reilly's missing manual for CS5, but I can't find instructions for how to keep the menu bar highlighted so that the user always sees the specific page they are on within the menu. If someone selects the 'About' page, I would like the About text/tab to stay highlighted (in the hover style), so the user always knows the page they are on (without adding a breadcrumb or separate page header).
Can anyone point me to the instructions. Is there a specific sub-selector within the spry css or is there separate html code I need to add to the page html or the spry menu js?
Thanks,
Wendy
Just follow the instructions here http://labs.adobe.com/technologies/spry/articles/updater_help/
If you want a quick solution
make a new (empty) file in the SpryAssets folder named SpryDOMUtils.js
click here http://labs.adobe.com/technologies/spry/includes/SpryDOMUtils.js
copy the code that you see in in step 2 (on the page, right click and select all from the pop-up)
open your newly created SpryDOMUtils.js file and paste the contents in there (right click and choose paste)
And you have a working copy. Don't forget to upload the file to the remote server, otherwise your online version will not work.
Happy Sprying.
Ben
PS NEVER GIVE UP! There is always a solution.
Similar Messages
-
Spry menu bar lost current page code
I sure can use your help.
On this site http://www.evtn.com/ I created a drop down menu that originally had the
current-linked page in a blue background like the one that is now permanently
sitting on the HOME page link. But it stopped working.
I want this to work:
ul.MenuBarHorizontal a.current {
color: #F4F4F4;
background-color: #8FC8D1;
Do you know how I can straighten this out without starting all over again?
I would also like to have a visited-link-page coded in a separate color if possible as well and don't know how to code it with the java script and spry.css (horizontalmenubar.css)
I'll send more code of html and spry - whatever you need.
I've read older posts on this and tried different things but nothing has changed.
ul.MenuBarHorizontal a:hover works so I don't know why the content won't
Thank you!Add the following to each page, or to your template
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
if(a.href == window.location){
Spry.Utils.addClassName(node,"current");
Spry.Utils.addLoadListener(InitPage);
</script>
making sure that you do have SpryDOMUtils.js in the SpryAssets folder.
Because the above place a class of current in the list item, you will need to change the selctor to and add
ul.MenuBarHorizontal li.current a {
color: #F4F4F4;
background-color: #8FC8D1;
Gramps -
How do you make a Spry menu view on all pages but only have to change it one place?
How do you make a Spry menu view on all pages but only have to change it one place? Someone told me maybe I could create a Library item. Any help will be appreciated.
If your pages all have the same basic design, using a DW Template would be a way to do it...
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7abea.h tml -
HELP! Please. Spry Menu will not allow page to display once on server
Spry menu works fine "live" and in browser (firefox) but once uploaded, causes the entire page (index.html) not to appear. Can't find any help on the topic and extremely fustrated with this now. Here is my code. I hope this helps!?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>ADD_ADHDJoe</title>
<!-- TemplateEndEditable -->
<link href="oneColLiqCtr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:absolute;
width:80%;
height:27px;
z-index:1;
background-color: #000;
top: 0px;
color: #FFF;
#apDiv3 {
position:absolute;
width:80%;
height:19px;
z-index:2;
background-color: #D3D3D3;
top: 27px;
#apDiv4 {
position:absolute;
width:80%;
height:204px;
z-index:3;
background-color: #CCC;
top: 49px;
#apDiv5 {
position:absolute;
width:80%;
height:34px;
z-index:4;
background-color: #FFF;
top: 252px;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:5;
background-color: #066;
top: 292px;
left: 654px;
#apDiv7 {
position:absolute;
width:80%;
height:80%;
z-index:5;
background-color: #069;
top: 293px;
margin-top: -9px;
color: #333;
#apDiv11 {
position:absolute;
width:80%;
height:65px;
z-index:0;
background-color: #FFF;
top: 287px;
margin-top: -3px;
color: #000;
#apDiv13 {
position:absolute;
width:54%;
height:624px;
z-index:5;
background-color: #FFF;
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript">
function MM_scanStyles(obj, prop) { //v9.0
var inlineStyle = null; var ccProp = prop; var dash = ccProp.indexOf("-");
while (dash != -1){ccProp = ccProp.substring(0, dash) + ccProp.substring(dash+1,dash+2).toUpperCase() + ccProp.substring(dash+2); dash = ccProp.indexOf("-");}
inlineStyle = eval("obj.style." + ccProp);
if(inlineStyle) return inlineStyle;
var ss = document.styleSheets;
for (var x = 0; x < ss.length; x++) { var rules = ss[x].cssRules;
for (var y = 0; y < rules.length; y++) { var z = rules[y].style;
if(z[prop] && (rules[y].selectorText == '*[ID"' + obj.id + '"]' || rules[y].selectorText == '#' + obj.id)) {
return z[prop];
} } } return "";
function MM_getProp(obj, prop) { //v8.0
if (!obj) return ("");
if (prop == "L") return obj.offsetLeft;
else if (prop == "T") return obj.offsetTop;
else if (prop == "W") return obj.offsetWidth;
else if (prop == "H") return obj.offsetHeight;
else {
if (typeof(window.getComputedStyle) == "undefined") {
if (typeof(obj.currentStyle) == "undefined"){
if (prop == "P") return MM_scanStyles(obj,"position");
else if (prop == "Z") return MM_scanStyles(obj,"z-index");
else if (prop == "V") return MM_scanStyles(obj,"visibility");
} else {
if (prop == "P") return obj.currentStyle.position;
else if (prop == "Z") return obj.currentStyle.zIndex;
else if (prop == "V") return obj.currentStyle.visibility;
} else {
if (prop == "P") return window.getComputedStyle(obj,null).getPropertyValue("position");
else if (prop == "Z") return window.getComputedStyle(obj,null).getPropertyValue("z-index");
else if (prop == "V") return window.getComputedStyle(obj,null).getPropertyValue("visibility");
function MM_dragLayer(objId,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,d ragJS) { //v9.01
//Copyright 2005-2006 Adobe Macromedia Software LLC and its licensors. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all;
var NS=(!IE&&document.getElementById); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = document.getElementById(objId); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document){ if (NS) { var spns = getElementsByTagName("span"); var all = getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (MM_getProp(spns[i],'P')) allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) {
if (MM_getProp(all[i],'P')) allLayers[allLayers.length]=all[i];
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = MM_getProp(curDrag,'Z');
curLeft = MM_getProp(curDrag,'L');
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = MM_getProp(curDrag,'T');
if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objId.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objId.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objId.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = MM_getProp(aLayer,'Z');
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (MM_getProp(aLayer,'V')).indexOf('hid') == -1;
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer != document && MM_getProp(parentLayer,'P')) {
parentL += parseInt(MM_getProp(parentLayer,'L')); parentT += parseInt(MM_getProp(parentLayer,'T'));
parentLayer = parentLayer.parentNode;
if (parentLayer==document) parentLayer = null;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && MM_getProp(parentLayer,'P')) {
parentL += MM_getProp(parentLayer,'L'); parentT += MM_getProp(parentLayer,'T');
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-((MM_getProp(aLayer,'L'))+parentL+MM_hLeft);
var tmpY=mouseY-((MM_getProp(aLayer,'T'))+parentT+MM_hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += MM_getProp(aLayer,'W');
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += MM_getProp(aLayer,'H');
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer;
curLeft = MM_getProp(curDrag,'L');
curTop = MM_getProp(curDrag,'T');
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
var newZ = parseInt(document.MM_maxZ)+1;
eval('curDrag.'+('style.')+'zIndex=newZ');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objId.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objId.pageY : event.clientY + document.body.scrollTop;
var newLeft = mouseX-MM_oldX; var newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS){style.left = newLeft + "px"; style.top = newTop + "px";}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-(MM_getProp(document.MM_curDrag,'L')),2)+
Math.pow(MM_targT-(MM_getProp(document.MM_curDrag,'T')),2))<=MM_tol) {
if (NS) {style.left = MM_targL + "px"; style.top = MM_targT + "px";}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
if (NS) document.routeEvent(objId);
} return retVal;
</script>
</head>
<body onload="MM_dragLayer('apDiv6','',0,0,0,0,true,false,-1,-1,-1,-1,0,0,50,'',false,'')">
<div id="apDiv2"></div>
<div class="container">
<div class="content">
<div id="apDiv1">| <a href="Contact.html">Contact me</a> | <a href="about.html">About me</a> | <a href="site.html">Site Map</a></div>
<div id="apDiv3"></div>
<p> </p>
<div id="apDiv4"><img src="images/SplicedPhwMed700x200.jpg" width="100%" height="100%" alt="ADD_ADHD" /></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv8"></div>
<p> </p>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p> </p>
<p> </p>
<!-- TemplateBeginEditable name="EditRegion4" -->
<div id="apDiv13">
<p><img name="" src="images/Rx Logo.JPG" width="100" height="83" alt="" /> Once again, welcome to the site. There are many webpages on the net related to ADD/ADHD. Hopefully, you'll find the content on this website to be of quality and reflection. This website may be found to be more personal since I will offer my experiences. As someone with dyslexia (commonly associated with other disorders) and ADD I'm able to offer insight and thoughts. Please note that I recognize with ADD not ADHD. There is a huge difference! A person affliced with ADD is likely a more difficult diagnosis than ADHD, since the hyperactivity, while possiblity mild or subtle, is not difficult to miss! </p>
<p>Diagnoses does not always happen quickly. Many people have gone through many years of their life before "that large break through" experience, in which, a condition, unidentified becomes highlighted. The defining moment came from years of experiences and hard work. Through reflection and regarding a mention of ADHD/ADD during highschool years by authority, a change was made for the better. Treatment occured. The defining moments of ADD during my lifetime regarded an inablity to sit beyond one hour, restless leg syndrome, a lower GPA despite quick wits and daily activities constantly in line with minimal attention requirements. Also, to mention, were assessment scores!</p>
</div>
<!-- TemplateEndEditable -->
<p> </p>
<p> </p>
<p> </p>
<blockquote> </blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<div id="apDiv10"></div>
<!-- TemplateBeginEditable name="EditRegion3" -->
<div id="apDiv11"> Welcome to Joe's page about ADD/ADHD!</div>
<!-- TemplateEndEditable -->
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote> </blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h2> </h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv5">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="../anno.html">Annotations</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="../discussions.html">Discussions</a></li>
<li><a href="../Meds.html">Medications</a></li>
<li><a class="MenuBarItemSubmenu" href="../Stats.html">Statistics</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="../sucess.html"> Successes</a></li>
</ul>
</div>
<p> </p>
<p> </p>
<!-- end .content --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Works fine in IE9 and Firefox 5.
The last bit of text is
Diagnoses does not always happen quickly. Many people have gone through many years of their life before "that large break through" experience, in which, a condition, unidentified becomes highlighted. The defining moment came from years of experiences and hard work. Through reflection and regarding a mention of ADHD/ADD during highschool years by authority, a change was made for the better. Treatment occured. The defining moments of ADD during my lifetime regarded an inablity to sit beyond one hour, restless leg syndrome, a lower GPA despite quick wits and daily activities constantly in line with minimal attention requirements. Also, to mention, were assessment scores! -
How do I put a different image in my drop down menu for my current page?
Is there a way to put different images or color for each
buttons in my menubar? And is there a way to have a color to
identify the current page in my bar?
Thanks for your time and have a nice day!quote:
Originally posted by:
JM1978
khfinity
We are looking for "how to do it" answers, instead of "how it
looks like". You have been posting the same link multiple times on
this forum to others, however, it does not answer any of their
questions.
If you do not bother to post something useful, the don't
waste our time to see your posts!
Actually what I posted came after searching for an easy
"how to do it". The closest I found to a tutorial was this:
http://www.adobe.com/devnet/dreamweaver/articles/spryte_menu.html
The author designs and implements a spry menu with Fire Works
graphics. The last section describes how to modify the existing CSS
for multiple levels. Yet I found the sample page provided above,
easier to follow than the tutorial.
I'm sorry if you feel my post was not
"something useful", and I hope you find the mentioned
tutorial useful. -
How to make menu-item of current page appear in a different font color?
Hi,
My menu-bar works just fine. Hovering the links I get the text to take display the desired color. Now I want the menu-item of the selected page to show a third color.
With live-code enabled in Dreamweaver CS6, I can see the following code being generated by the Dynamic menu:
<script type="text/javascript" src="/CatalystScripts/Java_DynMenusSelectedCSS.js"></script><!-- Dynamic Menu Begin CSS Output --><div id="cat_549633_divs"><ul id="nav_549633"><li class="selected"><a href="/home.html">Home</a></li><li><a href="/leistungen.html">Leistungen</a></li><li><a href="/uhrenservice.html">Uhrenservice</a></li><li><a href="/versteigerungen.html">Versteigerungen</a></li><li><a href="/diamanten.html">Diamanten</a></li><li><a href="/ueber_uns.html">Über uns</a></li><li><a href="/kontakt.html">Kontakt</a></li></ul></div><script type="text/javascript">catSetSelectedCSSItem('nav_549633');</script><!-- Dynamic Menu End CSS Output -->
The class .selected is being created in the first list-item (home) as this is the current page.
And here is my CSS:
#nav_549633 {
float: right;
list-style-type: none;
padding-top: 5px;
#nav_549633 li {
float: left;
text-align: left;
#nav_549633 li a {
color:white;
text-decoration: none;
margin: 0 27px 0 0;
font-size: 13px;
text-transform: uppercase;
#nav_549633 li a:hover {
color: yellow;
.selected {
color: green;
The font color green does not appear. It is still white.
In order to see if the class is "working" I tried some other attributes, that DO work!
.selected {
color: green;
padding: 20px
background-color: blue;
In this case, the item appears as a blue box with 20px-padding, just as expected - but the font-color is still white.
Can anyone help me?
Regards,
HermanHi Mario,
Here's the link to my site:
http://grootaartseuronics.businesscatalyst.com/index.html
I have found a solution myself for 2 of the 3 questions i had:
I have deleted/changed this div: #nav_1371057 li li
And created a few new ones:
#nav_1371057 li li a, #nav_1371057 li li a:visited (To control the link en visited link colors in the sub-menu other than the root-menu)
#nav_1371057 li li a:hover (to control the hover in the sub-menu other than the root-menu if nessesary)
#nav_1371057 li li.selected a (to control the selected link and let the link change color or bolder like in my case)
Here are the CSS styles I used:
#nav_1371057 li li.selected a { /*Dit veranderd de dikte (bold) van de geselecteerde link in het submenu, dus de pagina waar je bent*/
font-weight:bolder;
#nav_1371057 li li a, #nav_1371057 li li a:visited{
background: #006;
color:#ffffff;
#nav_1371057 li li a:hover{
background: #999;
color:#ffffff;
Only thing i can't figure out is how I can change/control the color of the arrow which is black now. And i want to make it blue.
Thanks,
Frank -
How to update all spry menu tabs on all pages
Hi, Really need some help. I'm working in DW CS3. I've got a
working Spry menu. ( Eureka!). I quickly made a template to start
building pages. I left the spry bar as an uneditable region. My
question is I made a change to the Spry Menu on the homepage. I
changed one of the always visable tabs from Psychologist to
"Store", and I'm adding new tabs under "instruction" every day.
Problem is the already made pages are showing the original
"non-update" spry menu. Is there a way for me to have DW update the
spry bar on all pages, or is it because I made that uneditable it
won't do it and I have to change the template?
Thanks very much!I am not using an external style sheet....
Why the heck not? It's so much simpler to maintain site wide styles with one style sheet instead of many.
Dreamweaver, Linking HTML to External Style Sheets
As bregent says, CSS is not going to help you with HTML content. If your site is already built without the aid of Server-Side Includes or DW Templates, another option is Library Items.
Adobe Dreamweaver * Working with library items
Nancy O. -
Searching google on highlighted words
Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes -
Linking collapsable spry menu to other html pages
Hi,
I dont seem to be able the link the subject within my
collapsible, to another html page.
Surely it not hard, can someone explain how I do this, Im
having a blonde day.
Thanks in advanceThanks.
I'll try my best to keep replying although I cannot guarantee further responses and no-one else here can help you further without those details.
Several points:
See http://www.projectseven.com/products/menusystems/pmm2/ug-examples/includes/index.htm
(The instructions relate to a commercial product but the principles apply to every SSI.)
Your include statement is <!--#include file="Includes/thiswillwork.shtml" -->
The .shtml is required for the parent file to tell the server to parse the Include
In other words, the parent page should read http://www.yourdomain.com/index.shtml - and every page which has an Include statement must have a .shtml extension. (The article linked above discusses alternatives to this requirement if you talk to your host)
Then the include reads <!--#include file="Includes/thiswillwork.html" -->
The include file extension can be anything provided it's correctly linked from the parent page.
Also, with nav bars, you'll be calling them from every page of your website so you need a site root relative reference, not a document root relative one, so that the include file is correctly referenced from every page of the website regardless of its position in the folder structure.
i.e. <!--#include virtual="/Includes/thiswillwork.html" -->
Note: the "file=" changes to "virtual=" and the crucial forward slash in front of Includes. -
Background menu video keeps repeating when highlighting buttons
hi,
so... i'm making this awesome DVD right?:P but when i have motion menu's. (background video's with sound) but when i preview every time my mouse pointer goes over another button, the background video starts all over again. i want it to continue. not to repeat while zapping through the 55 buttons! xD
anyone knows how i can fix this? ^^thanks man.
btw, WIN7x64 , adobe encore cs4
system:
AMD phenom2x4 3.2ghz
6GB RAM
4TB hdd
nvidia geforce en250GTS 1GB.
you were right, when i used the control options instead of the mouse it was faster and it replayed only once when going through the buttons 3 times. i think that was a coincidence cause i put loop back on just then.
thanks -
Need help formatting Spry drop down menu
FYI, I'm using CS3 on a Mac.
I'm working on a full CSS layout of a page in a site. OK, not
full CSS, I have a table controlling the text in the main content
area. I need a drop down menu for this page, so I inserted a spry
menu bar for the page navigation. *phew*! The learning curve on
that is killing me! :) Just trying to get the menu items spread out
("full justify") has take me forever. I'm still having some major
issues.
Can someone tell me which styles to adjust to fix the things
below? I think I have fixed most of it, but can't figure out these
items:
1. I want the sub menu items to have normal font weight (but
the main menu items should remain "bold"
2. I want the sub menu items' background to extend at least
past the end of the item. With some of the longer items, the
background is cut off.
3. I want the border back around the sub menu items. It was
there originally, but I some how removed it and can't get it back.
I don't want a border around the main menu items.
4.
Most importantly! The sub menu items don't line up
vertically in IE on my PC. They fall into several horizontal rows
that run off the side of the page - almost impossible to use!
5. Oh, and I almost forgot, the submenu is now showing up all
the way on the left side of the page. It should be directly below
the "Participating Farms" link.
This is the page:
http://www.nectfarmersmarket.org/farmse.html
Thank you!Can anyone tell me if this is the right place for this
thread?
Thanks, -
How to make 1 spry menu for the entire site? but not on each page
i have a website that i wish to have multiple pages available all form the same menu and late and probably at regular intervals add more tabs to the menu
is there a way to create a spry menu speratley that the page some how references, something like a frameset but without using framesets?
im sort of new to webdesigning and unsure of the correct terminology, so i am finding it difficult to look up stuff that i don't know the name for, but will gladly go read someting if you point me in the right direction.
regards
for now
wayneYou can do this with PHP or ColdFusion
These are "server side" scripting languages so you will have to test your website after you upload to you web hosting account.
Or if you set up a local server. Without the local server you will get errors when you open them in firefox.
To use the following what you do is "Cut" the part you want to be on all pages out, "Paste" it into a seperate document and in its place on your page you put one of the following suitable tags.
You will also have to rename your main file to .php or .cfm as opposed to .html
Again, whatever page you put one of these tags on, their extention must change match the type of tag used.
First Method (PHP):
PHP is the more common method -
<?php @ require_once ("yourMenu.html"); ?>
Require_once is basically a safeguard so that you don't add the menu twice onto a page.
This will only work for PHP 4+
This method would work for older versions of php too -
<?php @ include("yourMenu.html"); ?>
Second Method (ColdFusion):
This will only work if your host has ColdFusion installled -
<cfinclude template="bla.html">
eg index.html
<html>
<head>
<title>Stuff</title>
<head>
<body>
<?php @ require_once("SpryMenu.html"); ?>
</body>
</html>
SpryMenu.html
<ul id="menubar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
</ul> -
Spry Menu bar interactivity page disappears
Hi,
I am using Dreamweaver trail CS3 for Mac. I am creating web
pages using frames and tables. When I insert a Spry Widget Menu Bar
Widget the "Spry Menu Bare: Menubar1" interactive page does not
appear, so I can add or change names of Main Items and Sub-items
along with linking. Why is it doing this?Hi, I am using a "Top and nested left Frames" The Left frame
I am using to display navigation menu. I insert
"menubarvertical#menubar1". The menu that allows to edit lables,
links and etc. does not come up. Do I need to edit through code?
Here is the code page for the left frame.
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"><style type="text/css">
<!--
body {
background-image: url(NewFiles/background-2.gif);
margin-left: .5in;
-->
</style>
<script src="SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<table width="123" height="48" border="0">
<tr>
<td><img src="NewFiles/Photobut-normal.jpg"
width="107" height="22"></td>
</tr>
</table>
<p> </p>
<p> </p>
<ul id="MenuBar1" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Item
1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item
3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item
3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p> </p>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",
{imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
Thanks,
Becky -
CS4 Help with spry menu bar. Want Top Centered and Subs left-justified.
Hi there, using DW8 mostly, but have the trial version of CS4
for the spry menu bar. WinXP.
Can someone help me with the spry menu bar on this page? I'd
like the main menu to be centered, as it looks better for
appearance, and the sub menus to be left-justified.
http://www.manmeetswoman.com/example4.html
But I can't seem to do that, if I make the main menu
centered, it seems to override the submenus even if I make a class
just for the submenu to be left-justified.
Am I doing something wrong or is this not possible?
And the menu bar looks horrific in IE6. I assume it looks ok
in IE7 and above. Can someone help me with a code just for IE6 for
this?audio90 wrote:
Not quite what I was looking for. I'm wanting the top menu to be grouped together and to the right and the submenu boxes to all a single square box, not just with backgrounds extending only the length of the word. Also, your menu bar doesn't display properly in IE6 either.
1) You should be able to achieve a square box for your submenu items by fixing the widths of all of your submenu items to something larger than the content of your widest submenu <li> tag. This should be achievable with a single change of setting in the following CSS rule.
ul.MenuBarHorizontal ul li {
width:???em;
Set your width using em units, so that the box shrinks and grows with the size of the text when the latter is changed by the user.
2) Getting your top menu items to group together to the right may be more difficult as the entire menu bar is built on an HTML list structure with left-floated <li> tags. If it is possible, then you should begin your experimentation with the following CSS rule
ul.MenuBarHorizontal li {
float:right;
Change the float property from left to right, as I have indicated.
My suspicion, however, is that many subsequent adjustments will have to be made. So, back up your current CSS file before you begin.
Roddy -
Clearing Spry Menu Bars within the website
How do I clear the spry menu bar values within a website. I am trying to create a horizontal spry menu bar on one page and then another horizontal one on another page. It keeps the same values everytime I create a new page. How do I clear the values for each page?
Thanks!heatherfar69 wrote:
I am redesigning the website in the test environment using a new page. While doing so I am redoing the spry menu bar. It changed the spry menu bar in the original website (production environment). I would like to have the spry menu's be separate. How do you create separate spry menu bars for a situation as such?
Thanks!
If you are editing locally it should not overwrite your remote file unless you have the option "Automatically upload files to server on save" checked off. If that is the case you should uncheck that box.
If you want to further separate the old version from the new version, the only other method is to just create a new site. Even if you start with a duplicate of the existing site. Then you don't risk the chance of overwriting the existing files on the server.
Maybe you are looking for
-
Wireless radio is not functioning - Photosmart c4599 All-in-one
I have had my printer connected to my home wireless network. The printer stopped working. When I run the wireless network test report it says "The wireless radio is not functioning. Contact HP Support. According to the HP web site, the printer i
-
Can I delete email addresses that pop up when I type a letter in the address bar.
my mail that I have linked to the mail app is yahoo and everytime I enter a letter into the to section it brings up other emails so I dont need to write it all out. For example: Ill type "M'" so I can email my brother and it will bring his up but the
-
Can we create views on XML datatypes in Oracle 8.1.7?
-
need help about this problem
-
Im using After Effects CS3 Professional and am struggling to get it to show the Euro sign, In previous versions I had no problem at all but now since using CS3 it will just not display the character despite it showing in my Character palette/window.