Spry If question
just wondering can you include a large block within a spry
if, like this and it will only render if the case is true ?
<div spry:if="dataFound">
<form id="form1" name="form1" method="post" action=""
>
<div id="optionTable" spry:region="dsOption dsMachine
dsValues" >
<div id="TP2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="dsOption" class="TabbedPanelsTab" >
<div id="{dsOption::id}Tab">{dsOption::name}
</div>
</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="dsOption"
class="TabbedPanelsContent">
<table border="0">
<tr>
<th width="18%">Machine</th>
<th width="82%">{dsOption::name}</th>
</tr>
<tr spry:repeat="dsMachine" spry:even="tableRow-even"
spry:odd="tableRow-odd">
<th width="18%">{dsMachine::machineName}</th>
<td width="82%" >
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="30%">
<table width="85%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="25%" spry:repeat="dsValues" ><input
name="{dsOption::id}{dsMachine::id}Radio"
type="radio"
id="{dsOption::id}{dsMachine::id}{dsValues::keyValue}Radio"
onClick="radioValueChange('{dsOption::id}','{dsMachine::id}','{dsMachine::name}')"
value="{dsValues::keyValue}" />
<label
for="{dsOption::id}{dsMachine::id}{dsValues::keyValue}Radio">{dsValues::keyLabel}</label>
</td>
</tr>
</table>
</td>
<td width="2%" > </td>
<td width="60%"
id="{dsOption::id}{dsMachine::id}"></td>
<td width="5%" >{dsMachine::isvalue} </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div><input name="apply" type="button"
class="buttonApply" value="Apply" onClick="applyButton()" />
<script>LoadBuiltPage();</script>
</div>
</form>
</div>
All Spry processing has to happen within a spry:region. If
you have the spry:if within a region, it should work.
Try that and let us know.
Don
Similar Messages
-
I've got the use of the spry tab figured out, but what I'd like to know is if I can change the 'look' of the tabs. Rather than just have them be plain ol' squares, I'd like to change the style of them (more than just the color). Is it possible to change the shapes? Or to specify a .jpg to use as the tab?
Thanks!I appreciate all the feedback, but I have a few more questions...
I want to do something like the example I've provided, but have two questions in that regard.
The 1st - those tabs overlap. Is their an easy way to accomplish that, as a newbie? I don't know much, still learning. Obviously it would be easier to create tabs that don't overlap and avoid this issue altogether, but I really like the look.
My 2nd question is the drop shadow. I can create the drop shadow in Photoshop, but I'm wondering if there's an easier way to do it in Dreamweaver. Just apply the Spry Tab Menu and tell it to put a drop shadow behind it. Is there something that easy, or do I need to create the drop shadow in Photoshop and use div tags to basically put it 'around' the spry tab menu? Does that even make sense? I know what I mean in my head, but might not be explaining it properly... -
I have a spry menu which one of the main menus looks like this
<li><a href="*" class="MenuBarItemSubmenu">PORTFOLIO</a>
<ul>
<li><a href="staticdesigns.html">STATIC</a></li>
<li><a href="flashdesigns.html">FLASH</a></li>
<li><a href="banners.html">BANNERS - RICH MEDIA</a></li>
</ul>
this code presently has a * for the PORTFOLIO link
i need to know how can I make the PORTFOLIO not have a link and just work with a mouseover so I get the hover but just the <li> items have links?
Oi tried to remove the href= but then I lose the text in the css sheet.
any help?
rdIf your question is your main menu item is PORTFOLIO and you do not want it linked to another URL then use the default notation as follows:
<li><a class="MenuBarItemSubmenu" href="#"> PORTFOLIO</a></li> -
can spry read in XML as a string? I have an xml page
generated by a coldfusion query (.cfm) The page parses correctly as
an XML file, but when spry reads it in, it does not read it as XML.
I can save the .cfm results (view source) as an XML file and it
views perfectly through spry. Wondering if there is a way to do
this with the original cfm file. NOTE: the example linked
here
does not workI use CF to generate XML all the time.
You have to make sure you set the content-type to XML and
make sure to remove whitespace:
http://labs.adobe.com/technologies/spry/samples/utils/query2xml.html
But to answer your questions: yes, Spry can read XML strings:
http://labs.adobe.com/technologies/spry/samples/data_region/XMLStringSample.html
Hope this helps.
Don -
I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
Any help?Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
You may link many style sheets to your .html pages...you are not limited to one per page.
By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
Z
You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
Message was edited by: Zabeth69 -
Aloha,
I have the menu configured that way i want it, but for the life of me I cant figure out how to do the following.
I have a menu home, about, contact etc......... The menu bar has two background images, one when you load the page and then the mouse over image. What i want to do is when your on the index.html page , the Menu link will be lite up in my case (blue) and then if you go off of that page the blue will go to the current page that is up on your screen.
I am not great with code, I have spent a few hours tring to figure it out, i have no idea if it can do that or not, but its prob super easy, I just dont know what setting i am looking for.
2ns Question.. Is there a way to make the Spry menu to look like this? HOME | ABOUT | ETC
Right now i dont have the | in there, not sure if its possable
Aloha!Thank you for posting your URL, this should be done as a matter of course.
You do need to have SpryDOMUtils.js uploaded to your SpryAssets folder for the script to work.
The following explains the working of the script
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){ // check each li within a region with an ID of MenuBar1
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){ // if the href is the same as the current window location e.g. index.html
Spry.Utils.addClassName(node,"activeMenuItem"); // add a class called activeMenuItem
As soon as a class is added, CSS will take care of the styling. In the case that I have suggested, the CSS merely changes the background colour. This could just as happily be a background image.
If you want a different image for each menu item, then assign a class to the menu item as in
<li><a href="index.html">Home</a></li>
<li><a href="home-services.html" class="red">Home Services</a></li>
<li><a href="business-services.html">Business Services</a></li>
<li><a href="web-hosting.html">Web Hosting</a></li>
<li><a href="online-backup.html">Online Backup</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
The style rule could then be
.red .activeMenuItem { background: url(home-button.png); }
Cheers,
Gramps -
I have two (2) questions about using the Spry Effects script in a horizontal slide configuration.
Question 1:
In DW CS4 if I add the command <duration: 500,> the numerals turn red. I also get an error in line ???? from DW which is the line the variable is on. If I go ahead and accept the change I see the desired quicker slide in Firefox and Safari. The default is 1,000 milliseconds so I am cutting it in half. But! In Internet Explorer 7 the script locks the browser window up. Even if I revert to the saved HTML and JS files the problem still persists. This problem also occurs if I set the duration higher than 1,000 milliseconds.
This also happens if I upload the files to the Internet. I was forced to redo the line in question and copy my saved SpryEffects.js over to my working directory. This unlocked the file in Internet Explorer 7. Any suggestions on how to get the quicker response time in Internet Explorer 7?
Question 2:
In Firefox I get a border around the button that enacts the Spry Effect. I set the text decoration to "none" for both of the IDs for the images. This thin line does not appear in Internet Explorer 7 or Safari 4.0.3. My version of Firefox is version 3.5.3.
The file can be viewed here.
Thank you in advance.I have also found that the Spry works better in FireFox than
IE7, when it comes to video
http://www.catholicmemphis.com/catholicmensconference.html
Check out this page and you will see that the Spry tabbed
menu stops the video in FireFox but not in Explorer. I have seen
this type of problem in a few forums, but know one gives an answer
to those looking for solutions.... -
Hi
I just need to know how to change the height of my spry menu.
i did it once before but forgot how to. i think i've tried height
on every SpryMenuBarHorizontal.css that is there there...
ThanksGreat thank you very much, added the code and its working
now...
Just one more question, hope this makes sense: I want to put
the menu along a line that is the same color as the menu so i put
to menu into a table and used a color background, is this the best
way to do it? The problem i am having is that the table has this
padding that i can't get rid of, i want it the same size as the
menu, but i can make the table any smaller...
Appreciate the help -
Hi I'm creating a hobby-related website using Dreamweaver CS3, and I've got it set up to use a Spry menubar for navigation. The Spry menu itself works great-- I'm not having any issues with the actual formatting or functioning of the menu bar.
My question has to do with making changes to the menus and submenus. (I'm still not fully decided on the overall structure of the menu and I know I'll be expanding athe menu options even after the site goes public.) I know *how* to make those on a page by page basis-- either by using the menu bar panel or just editing the code directly. That's easy enough.
But here's the thing-- when I make a change to the text/structure/labels of on the menubar I want to change it sitewide, not just one individual page.
It's a pain to have to cut and paste that change I've just made onto every other page in the site (or even to use the search and replace function to do it.) It seems to me that there ought to be a way that I could have the menu code info that's currently indicated on each page (see below) stored in some external file rather than on each individual page, so that whenever I wanted to update the menubar sitewide, I only needed to make a change in *ONE* location .
That's got to be possible, right? But how do I do it?P.S.
Here's the menubar code info that currently appears on each individual page of the site-- and which currently has to be updated on every page, any time I make a change. There's surely got to be a way I can have this located in an external file, so that I can make changes in just one location rather than on each page?
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="intro_home.html" class="MenuBarItemSubmenu">Intro</a>
<ul>
<li><a href="intro_home.html">Intro / Home</a></li>
<li><a href="intro_bw.html">About BW</a> </li>
<li><a href="intro_harn.html">About Hârn</a></li>
<li><a href="intro_who_are_we.html">Who Are We?</a></li>
</ul>
</li>
<li><a href="general_overview.html" class="MenuBarItemSubmenu">General</a>
<ul>
<li><a href="general_overview.html">Overview</a></li>
<li><a href="general_traits_intro.html" class="MenuBarItemSubmenu">Traits</a>
<ul>
<li><a href="general_traits_intro.html">Intro</a></li>
<li><a href="general_traits_harnic.html">Hârnic</a></li>
<li><a href="general_traits_jarin_ivinian.html">Jarin & Ivinian</a></li>
<li><a href="general_traits_barbarians.html">Barbarian</a></li>
</ul>
</li>
<li><a href="general_affiliations.html">Affiliations</a></li>
<li><a href="general_skills.html">Skills</a></li>
<li><a href="general_prices.html">Prices</a></li>
</ul>
</li>
<li><a href="lifepaths_intro.html" class="MenuBarItemSubmenu">Lifepaths</a>
<ul>
<li><a href="lifepaths_intro.html">Overview</a></li>
<li><a href="lifepaths_guilds_intro.html" class="MenuBarItemSubmenu">Guilds</a>
<ul>
<li><a href="lifepaths_guilds_intro.html">Guilds Intro</a></li>
<li><a href="lifepaths_guilds_lps-by-guild.html">Guild LP List</a></li>
<li><a href="lifepaths_guilds_new-lps.html">New Lifepaths</a></li>
</ul>
</li>
<li><a href="lifepaths_churches.html">Churches</a> </li>
<li><a href="lifepaths_ivinian.html">Ivinian</a></li>
<li><a href="lifepaths_thardic.html">Thardic</a></li>
<li><a href="lifepaths_tribal.html">Tribal </a> </li>
<li><a href="lifepaths_non-human.html">Non-Human</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="magic_intro.html">Magic</a>
<ul>
<li><a href="magic_intro.html">Overview</a></li>
<li><a href="magic_shek-pvar.html">Shek-P'var</a> </li>
<li><a href="magic_alchemy.html">Alchemy</a></li>
<li><a href="magic_talents.html">Talents</a></li>
</ul>
</li>
<li><a href="religion_intro.html" class="MenuBarItemSubmenu">Religion</a>
<ul>
<li><a href="religion_intro.html">Overview</a></li>
<li><a href="religion_faith_general.html" class="MenuBarItemSubmenu">Faith</a>
<ul>
<li><a href="religion_faith_general.html">About Faith</a></li>
<li><a href="religion_the_gods.html">The Gods</a></li>
<li><a href="religion_faith_ritual_languages.html">Ritual Languages</a></li>
</ul>
</li>
<li><a href="religion_spirit_binding.html">Spirit Binding</a></li>
</ul>
</li>
<li><a href="bestiary_intro.html" class="MenuBarItemSubmenu">Bestiary</a>
<ul>
<li><a href="bestiary_intro.html">Overview</a></li>
<li><a href="bestiary_ivashu_general.html" class="MenuBarItemSubmenu">Ivashu</a>
<ul>
<li><a href="bestiary_ivashu_general.html">About Ivashu</a></li>
<li><a href="bestiary_ivashu_aklash.html">Aklash</a></li>
<li><a href="bestiary_ivashu_hru.html">Hru</a></li>
<li><a href="bestiary_ivashu_nolah.html">Nolah</a></li>
<li><a href="bestiary_ivashu_umbathri.html">Umbathri</a></li>
<li><a href="bestiary_ivashu_vlasta.html">Vlasta</a></li>
</ul>
</li>
<li><a href="bestiary_other_creatures.html">Other Creatures</a></li>
</ul>
</li>
<li><a href="other_index.html" class="MenuBarItemSubmenu">Other</a>
<ul>
<li><a href="other_earthmasters.html">Earthmasters</a></li>
</ul>
</li>
<li><a href="advice.html">Advice</a></li>
</ul> -
Newbie alert spry conditions question
I am trying to use an XML dataset to draw data for my
application pages. I have some XML fields, (in this case {helpurl}
and {moreinfo} ) which may or may not have a value assigned to them
in each record.
My question is simple, but I can't find the answer... where I
originally would write it this way in CF, what is the equivalent in
CS3/Spry?
<cfif (#helpurl# is not "")>
<a href="#helpurl#">HELP</a>
</cfif>
<cfif (#moreinfo# is not "")>
<a href="#moreinfo#">MORE INFORMATION</a>
Thanks so much!!You need to use Spry:if like below
<p> {Description} <a href="{Link}" target="_blank"
spry:if="'{Link}' != ''">MORE..</a></p>
Regards
Phil -
A simple Spry Accordion Question (I think)
Hi all:
I've searched but can't find, but I think this is a simple one.
I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
<!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>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
JAVASCRIPT
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.duration = 500;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = true;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
// Unfortunately in some browsers like Safari, the Stylesheets our
// page depends on may not have been loaded at the time we are called.
// This means we have to defer attaching our behaviors until after the
// onload event fires, since some of our behaviors rely on dimensions
// specified in the CSS.
if (Spry.Widget.Accordion.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.Accordion.loadQueue.push(this);
Spry.Widget.Accordion.onloadDidFire = false;
Spry.Widget.Accordion.loadQueue = [];
Spry.Widget.Accordion.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.Accordion.processLoadQueue = function(handler)
Spry.Widget.Accordion.onloadDidFire = true;
var q = Spry.Widget.Accordion.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
q[i].attachBehaviors();
Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
Spry.Widget.Accordion.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.Accordion.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Accordion.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(panel)
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
if (panel)
this.removeClassName(this.getPanelTab(panel), this.hoverClass);
Spry.Widget.Accordion.prototype.openPanel = function(panel)
var panelA = this.currentPanel;
var panelB = panel;
if (!panelB || panelA == panelB)
return;
var contentA;
if( panelA )
contentA = this.getPanelContent(panelA);
var contentB = this.getPanelContent(panelB);
if (! contentB)
return;
if (this.useFixedPanelHeights && !this.fixedPanelHeight)
this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
this.animator.start();
else
if(contentA)
contentA.style.height = "0px";
contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
if(panelA)
this.removeClassName(panelA, this.openClass);
this.addClassName(panelA, this.closedClass);
this.removeClassName(panelB, this.closedClass);
this.addClassName(panelB, this.openClass);
this.currentPanel = panelB;
Spry.Widget.Accordion.prototype.openNextPanel = function()
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
this.openPanel(panels[curPanelIndex+1]);
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
this.openPanel(panels[curPanelIndex-1]);
Spry.Widget.Accordion.prototype.openFirstPanel = function()
var panels = this.getPanels();
if( panels )
this.openPanel(panels[0]);
Spry.Widget.Accordion.prototype.openLastPanel = function()
var panels = this.getPanels();
if( panels )
this.openPanel(panels[panels.length-1]);
Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
// if (this.enableKeyboardNavigation)
// this.element.focus();
if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();
Spry.Widget.Accordion.prototype.onFocus = function(e)
// this.element.focus();
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.prototype.onBlur = function(e)
// this.element.blur();
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
Spry.Widget.Accordion.KEY_UP = 38;
Spry.Widget.Accordion.KEY_DOWN = 40;
Spry.Widget.Accordion.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var panels = this.getPanels();
if (!panels || panels.length < 1)
return false;
var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
while (nextPanel)
if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
break;
nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
if (nextPanel && currentPanel != nextPanel)
this.openPanel(nextPanel);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
if (!panel)
return;
var tab = this.getPanelTab(panel);
if (tab)
var self = this;
Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
Spry.Widget.Accordion.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) {}
Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault)
var content = this.getPanelContent(panel);
if (isDefault)
this.currentPanel = panel;
this.removeClassName(panel, this.closedClass);
this.addClassName(panel, this.openClass);
else
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
content.style.height = "0px";
this.attachPanelHandlers(panel);
Spry.Widget.Accordion.prototype.attachBehaviors = function()
var panels = this.getPanels();
for (var i = 0; i < panels.length; i++)
this.initPanel(panels[i], i == this.defaultPanel);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
// if (!tabIndexAttr) this.element.tabindex = 0;
if (tabIndexAttr)
var self = this;
Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.Accordion.prototype.getPanels = function()
return this.getElementChildren(this.element);
Spry.Widget.Accordion.prototype.getCurrentPanel = function()
return this.currentPanel;
Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
var panels = this.getPanels();
for( var i = 0 ; i < panels.length; i++ )
if( this.currentPanel == panels[i] )
return i;
return 0;
Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[0];
Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
if (!panel)
return null;
return this.getElementChildren(panel)[1];
Spry.Widget.Accordion.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.Accordion.prototype.focus = function()
if (this.element && this.element.focus)
this.element.focus();
Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
this.timer = null;
this.interval = 0;
this.stepCount = 0;
this.fps = 0;
this.steps = 10;
this.duration = 500;
this.onComplete = null;
this.panel = panel;
this.panelToOpen = accordion.getElement(panel);
this.panelData = [];
Spry.Widget.Accordion.setOptions(this, opts, true);
// If caller specified speed in terms of frames per second,
// convert them into steps.
if (this.fps > 0)
this.interval = Math.floor(1000 / this.fps);
this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
else if (this.steps > 0)
this.interval = this.duration / this.steps;
// Set up the array of panels we want to animate.
var panels = accordion.getPanels();
for (var i = 0; i < panels.length; i++)
var p = panels[i];
var c = accordion.getPanelContent(p);
if (c)
var h = c.offsetHeight;
if (h == undefined)
h = 0;
if (p == panel || h > 0)
var obj = new Object;
obj.panel = p;
obj.content = c;
obj.fromHeight = h;
obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
obj.overflow = c.style.overflow;
this.panelData.push(obj);
c.style.overflow = "hidden";
c.style.height = h + "px";
Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow
// properties on the panels we were animating!
if (this.stepCount < this.steps)
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
obj.content.style.overflow = obj.overflow;
this.timer = null;
Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
++this.stepCount;
this.animate();
if (this.stepCount < this.steps)
this.start();
else if (this.onComplete)
this.onComplete();
Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
var i, obj;
if (this.stepCount >= this.steps)
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
if (obj.panel != this.panel)
obj.content.style.height = "0px";
obj.content.style.overflow = obj.overflow;
obj.content.style.height = obj.toHeight + "px";
else
for (i = 0; i < this.panelData.length; i++)
obj = this.panelData[i];
obj.fromHeight += obj.increment;
obj.content.style.height = obj.fromHeight + "px";On the bottom of yourpage you have this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Change it to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
Ken Ford -
I am having CSS issues trying to center a basic horizontal spry menu inside a div tag.
To keep it simple:
I have a 990px wide x 40px high Div Tag for my mainNav menu.
I created a quick horizontal menu using the spry widget... with 7 boxes.
The menu of 7 boxes is currently left justified within the Div. I want it to auto center within the Div. I have tried changing almost every pre-CSS ID in the Spry horizontal menu using AUTO margins for the left and right and I can't get any of them to center then entire menu within the overall Div Tag.
Please help.
ul.MenuBarHorizontal.li is floated left so the boxes are side by side... but no matter which CSS ID I change the margins to auto on left and right nothing seems to work.
Do I need to create a new CSS rule targeting something different to get the entire menu to center properly?
Thanks for the help
TimAlter the spry css. If you declare a width of 700px and set margin: 0 auto; (as shown below) then each of your 7 links will be 100px wide and you'll have 145px either side. 990px - 700px = 290px /2 = 145px.
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 700px;
margin: 0 auto;
Updated: You should also set the below selector to 100px (or whatever you require. But obviously make sure the total width of all the links adds up to the width you set the above css selector to. In this case 700px). This determines the width of your links.
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 100px;
float: left; -
Hello....I've created a horizontal spry menu which seemed to
work fine until I saw it in an older version of Windows at a
friend's house. In that instance, the default link color of the
page, which is blue, crept into the spry menu link colors which are
white. The "visited" links in the spry menu are showing up blue.Is
there a way to define the visited/hover colors etc...in the spry
menu so it allstays white? This is the spry code I have now...
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
1.6 */
/* 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
width: 32.2em;
margin: auto;
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: 8.5pt;
position: relative;
text-align: center;
cursor: pointer;
width: 8m;
float: left;
font-family: "Trebuchet MS", Verdana, Arial;
color: #FFFFFF;
/* Submenus should appear below their parent (top: 0) with a
higher z-index, but they are initially off the left side of the
screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 1;
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: 32.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: default;
background-color: #D8161F;
color: #FFFFFF;
text-decoration: none;
padding-top: 0.2em;
padding-right: 0.7em;
padding-bottom: 0.2em;
padding-left: 0.7em;
/* Menu items that have mouse over or focus have a blue
background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FAFAFA;
/* 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: #e32032;
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;I can solve part of your problem. Check out The Essential
Guide to Dreamweaver CS3 by David Powers.
http://www.friendsofed.com/samples/1590598598.pdf.
All the other colors can be controlled by what is defined in David
Powers manual.
The problem that I have not been able to resolve is IE6 picks
up the colors, fonts, underline from a:active or the
default. -
Adjusting arrow in my spry menu question...
How do I adjust where my arrow is in the spry box? There are so many functions I'm just plain confused.
Have you tried here for info?
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
Brad Lawryk
Adobe Community Professional: Dreamweaver
Northern British Columbia Adobe Usergroup: Manager
Thompson Rivers University: Dreamweaver Instructor
My Adobe Blog: http://blog.lawryk.com -
I've been reading a lot about spam protection for contact forms and I have heard a lot of people talking about honeypots. They say just use a field that you tell people not to fill out and if it is field out when submitted ignore the message. My client is tired of the messages all together and wants them to stop. Is there a way to use the spry password validation with a universal password? Then next to the password field I can just say enter this password for spam protection. I’m not opposed to using a honeypot if someone can show me how to block the message altogether. I’m running a script through Godaddy and here is the contact page. Don’t be brutal I’m a noob and keep this in mind when responding. Thanks
Ok, here is what I found a YouTube video explaining how to use JQuery to submit a form on element change. View it here https://www.youtube.com/watch?v=pVnCkotKFLs
I just can't seem to get it to work and how would I get it to redirect to the thank page on submit? Here is what I have -
.js file
$(document).ready(function () {
$('#options').change(function() {
value = $(this).attr('value');
if (value !== 'default') {
$(this).parent().submit();
.html file
<!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>
<script type="text/javascript" src="js/java/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/spam.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="content">
<h1>Contact Us</h1>
<h3>Fields marked with * are required</h3>
<div id="contact-form">
<form action="/gdform.php" metod="post" name="form1" id="form">
<p>*NAME<br />
<input name="name" type="text" id="name" size="30" maxlength="40" />
</p>
<br />
<p>*EMAIL<br />
<input name="email" type="text" id="email" size="30" maxlength="40" />
</p>
<br />
<p>PHONE<br />
<input name="phone" type="text" size="30" maxlength="40" />
</p>
<p><br />
*Comments<br />
<textarea name="comments" cols="50" rows="10" id="comments"></textarea>
</p>
<select id="options">
<option value="default">Not Human</option>
<option value="opt1">I'm Human</option>
</select>
<br />
<br />
<br />
<br />
<input type="reset" name="button2" id="button2" value="Reset">
<input name="recipient" type="hidden" id="recipient" value="[email protected]">
<input name="redirect" type="hidd
en" id="redirect" value="thankyou.html">
<br />
<p>
</p>
</form>
</div>
</div><!-- end content -->
</body>
</html> -
I'm not sure this is the case but it seems to me there are
many more examples referenced than on the "samples" page??
I would like to propose (if not already asked) that we have
an area that all the Spry examples + some good users examples
posted with a small description on one page or location. Others may
have other ideas as well... It just makes it easier than searching
through the slow forum here.... :o)
Thanks, Matt MYou can find it here:
http://labs.adobe.com/technologies/spry/includes/SpryUtils.js
Rgds!
Maybe you are looking for
-
Combine PDF's and put filename in footer of each page
Hello, I've got about a 1000 individual pages to print, so I figured in order to avoid having to click each page open and print it, I can combine the documents into one document, and only launch the print command once, and then have a coffee until it
-
Hello, I have implemented this scenario : "Flat file ->mapping->BPM (for calling a bapi)->mapping->Flat file" and when i use the message monitoring sometimes end-to-end monitoring is available and sometimes not, Why ??? Is there a specific configurat
-
All possible Strings of 1 and 0
if i wanted to create all possible strings of n 1's and n 0's where there are never more 0's than 1's using 2 for loops and recursion how would i go about this? (the first for loop controlls how many 1's are in the string the second how many 0's up t
-
Visual Class: Set a label in main window from dialog box
Hi, Firstly my project is a visual project and at the time being has only 2 classes, both visual. One a main window and then one a dialog. The project is about a gym membership, and what i want it to do at the moment is to set the name text box i hav
-
I have deleted the music button/app from my phone. How do I get it back in my main settings?