Question from Spry.widget in IE

Hello

Pls take a look on http [dot] aeonit [dot] name/audi_youtube/index php

I used the tabs on the left side, but I also used scroll for the content of the tab bar. So I added an ID to li as follows:

< ul class = "TabbedPanelsTabGroup" >
< class li = "TabbedPanelsTab" tabindex = "0" > < span id = "first_tab" > all </span > < /li >
< class li = "TabbedPanelsTab" tabindex = "0" > < span id = "second_tab" > official </span > < /li >
< class li = "TabbedPanelsTab" tabindex = "0" > < span id = "third_tab" > Fans </span > < /li >
< /ul >

and the js is

< script type = "text/javascript" >
var TabbedPanels1 = new Spry.Widget.TabbedPanels ("TabbedPanels1");
$(document) .ready (function () {}
first tab
$("#first_tab").click (function () {}
$('#scrollbar_comment').tinyscrollbar ();
Alert ('hi');
});
second tab
$("#second_tab").click (function () {}
$('#scrollbar_comment1').tinyscrollbar ();
Alert ('hi');
});
third tab
$("#third_tab").click (function () {}
$('#scrollbar_comment2').tinyscrollbar ();
Alert ('hi');
});
})
< /script >

Thus, the function is work perfect in all browsers except IE (double-click on there). So can I add function in a spry widget when the tab is clicked?

Thnx...

Version js spry, by the way the problem has been resolved by me yest, it took me all day to solved, dat was the issue of the conflict of js event, there is spent two onclick event on a button or a tag, so I opened spry js and replace "click on" events tab for 'mousedown' as shown below

Spry.Widget.TabbedPanels.addEventListener (tab, 'mousedown', function {return self.onTabClick (e, tab);}, false);

Also replace window.onload instead of document.ready it is important

Thnx...

Tags: Dreamweaver

Similar Questions

DW tutorial Question (accordion, Spry Widget) beginner... :-(

Hi, I have just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html), but have a problem with my Spry Accordion Widget, when I saw the my footer site moves when I select a different panels in the widget, I read back and checked code/css but I still can't extra outside (don't laugh if it's something obvious!) Please can someone help me? I copied the code/CSS below.
THANK YOU IN ADVANCE!
INDEX OF...
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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 > The Yacht Club < /title >
< link hand. CSS"rel ="stylesheet"type =" text/css"/ >
<!-[if IE 5] >
< style type = "text/css" >
/ * Place corrections for IE 5 css box model * in this conditional comment * /.
#sidebar1 {width: 230px ;}}
< / style >
<! [endif]--> <!-[if IE] >
< style type = "text/css" >
/ * place patches css for all versions of Internet Explorer in this conditional comment * /.
#sidebar1 {padding-top: 30px ;}}
#mainContent {zoom: 1 ;}}
/ * the owner above zoom gives IE the hasLayout property, avoid several bugs * /.
< / style >
<! [endif]-->
< script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" / > "
< / head >
< body >
< div id = "container" >
< div id = "header" > < img src = "images/thanks" width = "290" height = "144" / > "
<!-end #header->
< / div >
< div id = "sidebar1″" >
Welcome < h3 > < / h3 >
< ul id = "nav" > < li > < a href = "" javascript:; "> home < /a > < /li > < li > < a href =" "javascript:;" > about us < /a > < /li > < li > < a href = "" javascript:; "> membership < /a > < /li > < li > < a href =" "javascript:;" > our boats < /a > < /li > < li > < a href = "javascript" "" " : ; "> course races < /a > < /li > < li > < a href =" "javascript:;" > contact us < /a > < /li > "
< /ul >
< div id = "Accordion1" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Atlantic ocean < / div >
< div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Pacific ocean < / div >
< div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Indian ocean < / div >
< div class = "AccordionPanelContent" > Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < / div >
< / div >
< / div >
< p > < / p >
<!-end # sidebar1″--> < / div >
< div id = "mainContent" >
Luxury yachts < h1 > < / h1 >
< p > < img src = "images/sailboat.jpg" alt = "Sailboat" width = "136" height "310" = class = "fltrt" / > Lorem ipsum dolor sit amet, adipiscing elit our. " Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. Donec and ipsum and vehicula nonummy sapien. Suspendisse potentialit. Surpassing varius urna id quam. SED neque mi, varius eget, tincidunt nec, so id, libero. In eget purus. Vestibule ut nisl. Donec EU mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus and fermentum ut, sapien. Surpassing metus mi, eleifend sollicitudin molestie id, varius, and nibh. Donec nec libero. < /p >
< h2 > sailing to the Bahamas < / h2 >
< p > Lorem ipsum dolor sit amet, adipiscing elit our. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Amongst ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean restore. Etiam leo queer, venenatis lectus tristique in, fitness at, odio. < /p >
<!-end #mainContent--> < / div >
<!-this element of compensation should immediately follow the #mainContent div in order to force the #container div to contain all the child floats--> < br class = 'clearfloat' / >
< div id = "footer" >
< p > & copy; Luxury yachts 2009 - bring a cup for the rescue plan < /p >
<!-end #footer--> < / div >
<!-end #container--> < / div >
< script type = "text/javascript" >
<!--
var Accordion1 = new Spry.Widget.Accordion ("Accordion1");
->
< /script >
< / body >
< / html >
CSS HAND...
@charset "UTF-8";
{body
margin: 0; / * It is advisable to zero, the margin and the filling of the body to hold element has a different default browser * /.
padding: 0;
text-align: center; / * This centers the container in IE 5 * browsers. The text is then set left aligned by default in the #container selector * /.
color: #000000;
are-family: Verdana, Arial, Helvetica, without serif.
are-size: 100%;
background-color: #FDFDFD;
background-image: url(images/body_BG.jpg);
background-repeat: repeat-x;
}
H1, h2, h3 {}
make-weight: normal;
color: #00583F;
}
H1 {}
-font size: 140%;
}
H2 {}
are-size: 130%;
}
H3 {}
are-size: 120%;
}
#container {}
width: 780px;
margin: 0 auto;
text-align: left;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/container_bg.gif);
background-repeat: repeat-y;
}
#header {}
background-color: #DDDDDD;
background-image: url(images/headerBG.jpg);
background-repeat: no-repeat;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 0px;
}
{#sidebar1}
float: left; / * because this element is floating, it takes a width * /.
width: 200px; / * the background color will be displayed for the length of the content of the column, but no further * /.
padding: 15px 15px 20px 10px;
}
ul #nav {}
background-image: url(images/buoy.jpg);
background-repeat: no-repeat;
background-position: left down.
margin-top: 0px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 153px;
padding-left: 0px;
list-style-type: none;
}
#nav li a {}
are-size: 90%;
color: #FFF;
text-decoration: none;
background-color: #09553F;
display: block;
padding: 4px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3574A 7;
}
#nav li a: hover, #nav li a: active, #nav li a: {emphasis
color: #123464;
background-color: #B7DAD8;
}
#mainContent {}
margin: 0 0 0 250px; / on this div element left margin creates the column on the left side of the page - no matter how content div the sidebar1″ contains, the space of the columns will remain. You can remove this line if you want the #mainContent div text to fill the space of #sidebar1 when the #sidebar1 content ends
. */
padding: 20px 0; / * Remember that the fill is space inside the box of div and margin is the space outside the div box * /.
}
#mainContent p, #sidebar1 p, #footer p {}
are-size: 85%;
line-height: 1.4;
}
#footer {}
background-color: #00593D;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 270px;
}
#footer p {}
margin: 0; / * zero setting the margins of the first element in the footer will avoid the possibility of the collapse of the margin - a space between the div tags * /.
padding: 10px 0; / * padding on that element will create space, just as it would the margin, free margin collapse question * /.
color: #FFF;
}
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
margin left: 8px;
}
.fltlft {/ * this class can be used to float an element on your page to the left * /}
float: left;
right margin: 8px;
}
.clearfloat {/ * this class must be placed on an element div or break and should be the last item before closing a container should completely contain a float * /}
clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
SPRY CSS...
@charset "UTF-8";
/ * SpryAccordion.css - version 0.4 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of the accordion. For our style by default.
* draw us left, right and bottom borders. The upper edge of the accordion
* is made by the first AccordionPanelTab which never moves.
*
* If you want to limit the width of the Accordion widget, set a width
* the accordion container. By default, our accordion expands horizontally to fill
* a space available.
*
* The name of the class ("accordion") used in this switch is not necessary
* make the widget function. You can use any class name you want to style the
* Accordion container.
*/
. Accordion {}
overflow: hidden;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: # 7-9297;
border-bottom-color: # 7-9297;
border-left-color: # 7-9297;
}
/ * This is the selector for the AccordionPanel container which houses the
* tab panel and panel content area. It is not make it visually, but we
* ensure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of accordion panel.
*/
. {AccordionPanel}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the AccordionPanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this switch is not necessary
* do the function widget
. You can use any class name you want to style a
the container of Accordion Panel tab.
*
* NOTE:
* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
* the user to select the text in the AccordionPanelTab. Here is the browser owner
properties that only work in Mozilla browsers (such as FireFox) and KHTML
* browsers (such as Safari), so they will not pass the W3C validation
. If you want your documents to
* validate and don't care if the user can select text in an AccordionPanelTab.
* You can remove these properties without affecting the functionality of the widget.
*/
. {AccordionPanelTab}
background-color: #00583F;
margin: 0px;
padding: 2px;
cursor: point;
-moz-user-select: none;
-khtml-user-select: none;
color: #FFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-bottom-color: # 7-9297;
border-bottom-color: # 7-9297;
}
/ * This is the selector for the content area of a Panel. It is important to note that
* You should never put any padding on the content area of the group if you plan to
* use the animations of accordion panel. Place padding non-zero on the content
* area can cause accordion suddenly increase in height, while signs alive.
*
* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of the accordion panel content.
*/
. {AccordionPanelContent}
overflow: auto;
margin: 0px;
height: 200px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "AccordionPanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs in the accordion.
*/
. AccordionPanelOpen. {AccordionPanelTab}
background-color: #FFF;
color: #005b3E;
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves the tab container.
*/
. {AccordionPanelTabHover}
color: #AAC7CE;
}
. AccordionPanelOpen. {AccordionPanelTabHover}
color: #555555;
}
/ * This is an example of how to change the appearance of all the Panel tabs when the
* Accordion has focus. The class "AccordionFocused" is programmatically added and removed
* whenever the accordion wins or loses the keyboard focus.
*/
. AccordionFocused. {AccordionPanelTab}
background-color: #00583F;
color: #FFF;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open when the accordion is in focus.
*/
. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
background-color: #FFF;
color: #00583F;
}
My apologies in advance if I ask a stupid question!
!

Your footer is designed to move down account for the extra space created when you activate the menu accordion naviation. The turtorial example shows not happening? I can't find a link for the complete example on the page you mentioned to the check.

Another question from Spry vs IE (question)

While building a web site using a Spry (vertical) menu bar, I discovered it worked fine in all browsers except IE (forgive me, I'm new). I came on this forum for a few ideas and noticed several posts with IE compatibility issues. I went to my IE browser and "on" everything I could find on ActiveX and scripts in the tools without help sections. I decided to go back to the beginning. I created a blank HTML page in Dreamweaver. I added a line of text "123456789", then added a Spry menu bar using the toolbar DW (just the basic structure of the menu without doing anything to it). I recorded and then watched with Firefox, then IE and it works in Firefox, but the submenus do not appear (as they do in Firefox). Very disappointing.
My question is - where to start. I guess we know where the problem is - but is the solution in the Spry CSS or Javascript Spry code code?
I realize that what I have described here is very simplistic compared to more detailed positions, but maybe I'm making something very base - wrong. Many of you seem to agree with the very well IE, so I want to learn your secret. Any thoughts?
RM

rockytoprm wrote:

I understand your point to look at a complex issue in context. (At least at this point), my question is why, given a Basic Spry added to an HTML page menu bar empty, registered, and then observed in Firefox and IE, behave differently? As I hover over the buttons - in Firefox - void menu buttons appear and disappear when and where they should - but not in IE.

I do not have available for testing IE6, but a Spry menu in a blank page works identically for me in Firefox and IE8 IE8 in compatibility mode.

Question of Spry Accordion Hover/active

I developed a widget spry Accordion for a page in the FAQ and in Dreamweaver CS6, it is fully functional. The color I chose does not occur with a hover or active tab once EVERYTHING is transferred. Here's a direct link to the page of problem, my CSS Spry and CSS layout as well as a screenshot of the correct functionality that occur in Dreamweaver. Thoughts?
The problem page:
http://pauldhart.com/RideTTF_website/FAQ.html
Spry CSS
@charset "UTF-8";
/ * SpryAccordion.css - version 0.5 - Pre - Release Spry 1.6.1 * /.
/ * Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/ * This is the selector for the main container of the accordion. For our style by default.
* draw us left, right and bottom borders. The upper edge of the accordion
* is made by the first AccordionPanelTab which never moves.
*
* If you want to limit the width of the Accordion widget, set a width
* the accordion container. By default, our accordion expands horizontally to fill
* a space available.
*
* The name of the class ("accordion") used in this switch is not necessary
* make the widget function. You can use any class name you want to style the
* Accordion container.
*/
. Accordion {}
overflow: hidden;
}
/ * This is the selector for the AccordionPanel container which houses the
* tab panel and panel content area. It is not make it visually, but we
* ensure that it has zero margin and padding.
*
* The name of the class ("AccordionPanel") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of accordion panel.
*/
. {AccordionPanel}
margin: 0px;
padding: 0px;
}
/ * This is the selector for the AccordionPanelTab. This container houses
the Panel personnel. It is also the container where the user clicks
* to open a specific panel.
*
* The name of the class ("AccordionPanelTab") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of Accordion Panel tab.
*
* NOTE:
* This rule uses the - moz-user-select and - khtml-user-select properties to prevent the
* the user to select the text in the AccordionPanelTab. Here is the browser owner
properties that only work in Mozilla browsers (such as FireFox) and KHTML
* browsers (such as Safari), so they will not pass the W3C validation. If you want your documents to
* validate and don't care if the user can select text in an AccordionPanelTab.
* You can remove these properties without affecting the functionality of the widget.
*/
. {AccordionPanelTab}
border-top: 1px solid black;
border-bottom: 1px solid gray;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(/content-opaque.png);
background-attachment: fixed;
background-repeat: repeat;
do-family: Verdana, Geneva, without serif.
color: #FFF;
background-color: #300;
do-size: 12px;
}
/ * This is the selector for the content area of a Panel. It is important to note that
* You should never put any padding on the content area of the group if you plan to
* use the animations of accordion panel. Place padding non-zero on the content
* area can cause accordion suddenly increase in height, while signs alive.
*
* Anyone who styles an accordion * MUST * specify a height on the Accordion Panel
* Content container.
*
* The name of the class ("AccordionPanelContent") used in this switch is not necessary
* make the widget function. You can use any class name you want to style a
the container of the accordion panel content.
*/
. {AccordionPanelContent}
margin: 0px;
padding: 2px;
background-image: url (.. / infobkgd.png);
background-attachment: fixed;
background-repeat: repeat;
do-family: Verdana, Geneva, without serif.
do-size: 12px;
color: #FFF;
overflow: hidden;
height: 40
XxX
height: 100%;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open. The "AccordionPanelOpen" class is added and removed programmatically
* to panels as long as the user clicks on the tabs in the accordion.
*/
. AccordionPanelOpen. {AccordionPanelTab}
background-color: #000033;
}
/ * This is an example of how to change the appearance of the tab of the Panel as the
* mouse passes over it. The "AccordionPanelTabHover" class is added programmatically
* and removed containers tab panel as the mouse enters and leaves the tab container.
*/
. {AccordionPanelTabHover}
color: #FFFFFF;
background-color: #003;
}
. AccordionPanelOpen. {AccordionPanelTabHover}
color: #FFFFFF;
}
/ * This is an example of how to change the appearance of all the Panel tabs when the
* Accordion has focus. The class "AccordionFocused" is programmatically added and removed
* whenever the accordion wins or loses the keyboard focus.
*/
. AccordionFocused. {AccordionPanelTab}
background-color: #003;
}
/ * This is an example of how to change the appearance of the tab of the Panel which is
* currently open when the accordion is in focus.
*/
. AccordionFocused. AccordionPanelOpen. {AccordionPanelTab}
background-color: #000033;
}
/ * Printing rules * /.
@media print {}
. Accordion {}
overflow: visible! important;
}
. {AccordionPanelContent}
display: block! important;
overflow: visible! important;
height: auto! important;
}
}
CSS layout
<! doctype html >
<!-[if lt IE 7] > < class = "oldie ie6" html > <! [endif]-->
<!-[if IE 7] > < class = "ie7 oldie" html > <! [endif]-->
<!-[if IE 8] > < class = "ie8 oldie" html > <! [endif]-->
<!-[if gt IE 8] > 
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width = device-width, original scale = 1" >
< title > donate today! < /title >
< link href = "boilerplate.css" rel = "stylesheet" type = "text/css" > "
< link href = "_css/donatepage.css" rel = "stylesheet" type = "text/css" > "
< link href = "SpryAssets/SpryMenuBarDonate.css" rel = "stylesheet" type = "text/css" > "
< link href = "SpryAssets/SpryAccordion.css" rel = "stylesheet" type = "text/css" > "

< script src = "respond.min.js" > < / script >
< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< script src = "SpryAssets/SpryAccordion.js" type = "text/javascript" > < / script > "
< / head >
< body >
< div class = "gridContainer clearfix" >
< div id = "header" > < img src = "RTTF - features ' alt = ' Ride to the flags VI" > < / div >
< div id = "navigation" >
< ul id = "donatemenu" class = "MenuBarHorizontal" >
< li > < a href = "profile.html" > home < /a > < /li >
< li > < a href = "theride.html" > the path < /a > < /li >
< li > < a href = "donate.html" > donate < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > Gallery < /a >
< ul >
< li > < a href = "photo - gallery.html" > photo < /a > < /li >
< li > < a href = "gallery.html" - video > video < /a > < /li >
< /ul >
< /li >
< li > < a href = "faq.html" > FAQS < /a > < /li > ""
< li > < a href = "contact.html" > contact < /a > < /li >
< /ul >
< / div >
< span class = "AccordionPanel" >
< div class = "AccordionPanelTab" > < / div >
</span >
< div id = "faq-content" >
< div id = "faq-accordion" class = "Accordion" tabindex = "0" >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: is this still ongoing? < / div >
< div class = "AccordionPanelContent" > a: Yes < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is the date for this year's race? < / div >
< div class = "AccordionPanelContent" > Saturday, September 7 A:. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what time is the check-in/registration open? < / div >
< div class = "AccordionPanelContent" > was: online registration will begin in May. Check-in at 08:00 on 7 September. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: where is here? < / div >
< div class = "AccordionPanelContent" > has: Check-in will be just south of PCH on Las Posas Rd (just before the Gate 3 of the Naval Base). < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: the course will be the same? < / div >
< div class = "AccordionPanelContent" > was: we changed the road this year a few a few reasons. You can visit the roadmap to see. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: we do not race but we would like to come out and watch the bikes as they drive by. What time you will be on our street? < / div >
< div class = "AccordionPanelContent" > A: given our 10:30 departure, us will be sent the following streets in these moments here: < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is the minimum amount to give up in this ride? < / div >
< div class = "AccordionPanelContent" > A: $20 to $35 per driver/passenger < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what does that give me? < / div >
< div class = "AccordionPanelContent" > was: Patch, ticket for the food and drink ticket < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: why do we need to raise/give a minimum this year? < / div >
< div class = "AccordionPanelContent" > r: as you know, during the first five years, the trip to the flags ran on a basis of everything-don-goes. However, as we got the biggest, costs related to reconstitute the journey grew enormously. The minimum donation allows for the costs for the ride. However, we do our best to bring about the authors as much as possible to help cover our costs so that we can ensure that your donation goes to good use. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: if I can give more money than the registration fee? < / div >
< div class = "AccordionPanelContent" > r: of course. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what happens if we raise a lot of money for the cause? < / div >
< div class = "AccordionPanelContent" > was: The White Heart Foundation is to give some small prizes for our major donors. Those who will be announced at a later date. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: arrival how will be different now that he is pre-registration? < / div >
< div class = "AccordionPanelContent" > was: there will be a pre-registered registration line and another line for those who seek to introduce yourself the day of. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what types of payments are accepted? < / div >
< div class = "AccordionPanelContent" > was: we prefer you use our fundraising Razoo.com online application that you will find on this site for your pre-registration. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: I ride a trike, can I participate? < / div >
< div class = "AccordionPanelContent" > a: Yes < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: are authorized scooters? < / div >
< div class = "AccordionPanelContent" > was: well, sure, why not? < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be present celebrities? < / div >
< div class = "AccordionPanelContent" > was: probably. We don't usually know advance appearance. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: are you tired of all my questions? < / div >
< div class = "AccordionPanelContent" > A: a little < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what is happening on the basis, now that the celebration of freedom is at the end of the race? < / div >
< div class = "AccordionPanelContent" > A: memorial service and wreath laying and perhaps a special guest. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be concerts at the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > A: There will. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I do not ride a motorcycle but I can still come to the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > A: Yes. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what's my price? < / div >
< div class = "AccordionPanelContent" > A: General Public $40. Student $20. Bikers the day of $40. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: if I go for the ride and decided to simply come to the celebration of freedom at the end of the race, will I get my free patch, ticket to food and drink ticket? < / div >
< div class = "AccordionPanelContent" > a: No. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: what are the costs of food & Drinks tickets? < / div >
< div class = "AccordionPanelContent" > was: food - $5 drink - $2, $5 beer - < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: WAIT? IT'S GOING TO BE BEER? < / div >
< div class = "AccordionPanelContent" > A: Yes. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: it's great. I love you. < / div >
< div class = "AccordionPanelContent" > A: control yourself. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: will there be sellers during the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > was: Yes! For the first time, we give you... bike sellers. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I am a vendor, how do I book a place? < / div >
< div class = "AccordionPanelContent" > was: click here and fill out our application. It is much easier to take the S.A.T. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can I sponsor the celebration of freedom? < / div >
< div class = "AccordionPanelContent" > a: certainly! Click here to see our sponsorship package. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can you my hiking club together? < / div >
< div class = "AccordionPanelContent" > was: If you come together, connect together, hold hands. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: are we make large flags from the start this year? < / div >
< div class = "AccordionPanelContent" > was: Yup < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: last year, the riders will split, how do you set this year? < / div >
< div class = "AccordionPanelContent" > A: we deposit certain permits and pay astronomical fees to stop traffic for 30 minutes Saturday while we do not get split up. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: last year the race ended up being really slow, it will slow down this year? < / div >
< div class = "AccordionPanelContent" > A: we admit it was slow. We know, we know. Now that we close the roads that we all pass, we will be able to pick up the pace a little. The new route allows also go faster through town. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I'm a policeman will be conducted as a civilian. Can I bring my firearm on base? < / div >
< div class = "AccordionPanelContent" > A: base won't allow that. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I want to create a team donation, where should I start? < / div >
< div class = "AccordionPanelContent" > 34 content < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: can I start a team making a donation for my group of motorcycle cover all our registration fees? < / div >
< div class = "AccordionPanelContent" > was: Negatory. Each individual is his own team. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > q: I don't have a motorcycle, can I still attend? < / div >
< div class = "AccordionPanelContent" > r: Yes, you can attend two event at the Naval Base and the celebration of freedom in Malibu. < / div >
< / div >
< div class = "AccordionPanel" >
< div class = "AccordionPanelTab" > Q: what is the WHF? < / div >
< div class = "AccordionPanelContent" > was: The White Heart Foundation was created to help support our military community, police and firefighters. < / div >
< / div >
< / div >
< / div >
< div id = "footer" > This is the content of the div layout 'footer' < / div >
< / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("donatemenu", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
var Accordion1 = new Spry.Widget.Accordion ("faq-accordion");
< /script >
< / body >
< / html >
Screenshot of how it looks locally in Dreamweaver:

SpryAccordion.css

You have an error that kills the rest of your code below in red. Remove it.

. {AccordionPanelContent}

margin: 0px;

padding: 2px; / * suggest using 12px or more * /.

background-image: url (.. / infobkgd.png);

background-attachment: fixed;

background-repeat: repeat;

do-family: Verdana, Geneva, without serif.

do-size: 12px; / * suggest using 16px or more * /.

color: #FFF;

overflow: hidden;

height: 40

[x;

height: 100%;

}

Nancy O.

Menu Bar Spry Widget 2.0 with several background images.

Hello
I am quite new to HTML & CSS. I designed a navigation system using Dreamweaver built in the Spry menu bar. When I discovered that it did not work on the mobile platform iOS (iPad), I rebuilt using the 2.0 Bar Menu Spry Widget. After going through the tutorial of David Powers on the subject (here: http://www.adobe.com/devnet/dreamweaver/articles/spry_menu_bar.html ) and tweaking the CSS by trial and error that I'm going to look very nice, but is not quite where I want it to be, and I need help. It is a question of the 3 part (well okay, it's three different questions).
Here are two links to the work in progress (note: all site links, see the pages still using the older menus built-in spry bar - please ignore them). CSS for the menu is contained in these documents. Each maintains a drop-down list in a slightly different way. Both versions are relevant to questions 2 and 3.
http://www.mentalwarddesign.NET/Dynamech/about/index.html
http://www.mentalwarddesign.NET/Dynamech/about/indexV2.html
1. when a link is set to a menu item that contains a submenu, the submenu drop-down does not work on iOS touchscreen devices (ie the iPad). Main menu link must be removed so that it works correctly. I want a user to be able to click (or tap) on the main menu item and be taken directly to the first page in the submenu. Is there a solution for this?
2. the first version (/ index.html) has a submenu with a border and demarcation lines. The second version (/ indexV2.html) has no borders/lines, but a RADIUS on the corners. I try to combine these to have the RADIUS and the lines. The borders are controlled by #MenuBar. SubMenu.MenuItem RADIUS is controlled by #MenuBar.SubMenuVisble and #MenuBar.MenuLevel1.SubmenuVisible. The problem I get when you combine the two effects is that borders extend beyond the RADIUS. I tried ' overflow: hidden ' on any combination of the foregoing ID's and the only thing that made him the flyout of sub-sub to appear is prevented. Any thoughts on how I might accomplish this?
3 here is what is referenced in the subject. The Menu bar is in a div tag called navMain. The background image in this div is made unique navigation bar image to look like seven tabs. If you look at the indexV2.html link above and go to the 'about' tab you'll see what I'm doing. I need to use a different background image for each tab for consulted/assets /. And of course I don't want the images repeat in the submenus as they do here. But wait, there is more! I also want to create a State "chosen" so that the image on hover shows from any page you are visiting currently - IE if you look at any page in the 'Drawings' submenu (of lets say that you are on the "miscellaneous" page) then the stationary image for "Drawings" is displayed. And if possible, he would suffer to the question I posed in the #1?
Thanks in advance for helping this newbie. The responces are greatly appreciated.
Ed

If the markup of my menu bar is the following
- Homepage
- Entertainment
- Policy
- Sports
so I can style each button as follows

#MenuBar .home. MenuItem, #MenuBar .home. MenuItem. {MenuItemLabel}

background-color: orange;

}

#MenuBar .entertainment. MenuItem, .entertainment #MenuBar. MenuItem. {MenuItemLabel}

background-color: red;

}

#MenuBar .politics. MenuItem, #MenuBar .politics. MenuItem. {MenuItemLabel}

background-color: white;

}

#MenuBar .sports. MenuItem, .sports #MenuBar. MenuItem. {MenuItemLabel}

background-color: blue;

color: white;

}

GRAMPS

Question of SPRY accordion

Sorry, it's well buried in him is no longer supported SPRY forum 2 months so I'm reposting here.
I'm trying to ensure that the Panel at the bottom (last) is opened by default when the page is loaded. Please see my notes below. Thanks in advance!
----------------------------------------
I know that I can put the Panel open by default either by editing the SpryAccordian.js file as follows:
this.defaultPanel = 0;
Or by using the script like this:
< script type = "text/javascript" >
var acc8 = new Spry.Widget.Accordion ("Accordion8", {defaultPanel: 2});
< /script >
I also know that I can open the panels programmically like this:
< input type = "button" onclick = "acc10.openLastPanel ()" > open the last Panel < / input > "
< script type = "text/javascript" >
The problem with the first option is that I have dynamically add panels using a repeat so that the number of panels varies. I can't very well use a number here because it is not the last Panel or the number may be too high if it is not enough signs to all be closed. I tried to use 99 knowing that I will never have that many panels and of course all the panels are closed which is not desired.
I've failed with the onclick method to be able to play with him, I think that the openLastPanel is what I need. However, I do not want a button/link that must be clicked in order for this place. I guess I can use it instead of onload sort.
I hope someone could provide me with the code and the location to where you want to insert so that when the page opens, the last Panel is opened rather than the top.
Here is a link if you need to see it in action.
http://www.onlinetoyshow.com/figure_lines_Detail.php?Line_Id=30 (a result of the research shows 4 panels - this example is not really a problem)
This is another result of the research which has two panels.
http://www.onlinetoyshow.com/figure_lines_Detail.php?Line_Id=31 (this is where it would be nice to have the last Panel open instead of the first. The first Panel has only one point in it, but the height is set so that the next panel is easy to miss and all the way down)
I hope that all makes sense. Thanks in advance.

There are various samples on behalf of Git from Adobe, now that Spry is is longer supported directly.

You might want to take a look at a few examples given here to see if one of them works for you: http://adobe.github.com/Spry/samples/ - click "Widgets" on the top and you will see the various sets of examples of the accordion.

Why does the drop with a Spry Widget 2.0 last two taps to turn on iPad?

I have the 2.0 Menu pretty well composed Spry in the way I want it. When the user clicks on the menu item from an iPad or iPhone also, however, press the drop-down menu twice to make it work. All the menu items work very well on the first tap except those that have a menu drop-down. Is there a way to get the drop of pop and work on the first valve of an iPad? Here is the code of this aid.
< ul id = "MenuBarUpgradeAugust2012" >
< li > < a href = "default.html" > home < /a > < /li >
< li > < a href = "apps4kids.html" > on < /a > < /li >
< li > < a class = "MenuBarItemSubmenu" > our < /a > Apps
< ul >
< li > < a href = "Rhyme-N-SystemRoot\Cluster\Reports\Validation" > rhyme-N-time < /a > < /li >
< li > < a href = "Free-The - Bee.html" > Free The Bee < /a > < /li >
< li > < a href = "Trojan horse - Math.html" > Trojan Math < /a > < /li >
< li > < a href = "Help - Santa.html" > Santa help < /a > < /li >
< /ul >
< /li >
< li > < a href = "chip - apps.html" > Contact < /a > < /li >
< /ul >
Thank you
Scott

Well, I was able to find a work around for a post in the forum a similar problem. Here's what they have posted and it worked for me. I just hope this does not break anything else.

Change the lines above the lines on the bottom.

I was able to actually understand the other night. I needed to change that:

var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
widgetID: "Menu bar",
widgetClass: 'MenuBarRightShrink the menu bar. "
insertMenuBarBreak: false,
mainMenuShowDelay: 100,.
mainMenuHideDelay: 200,.
subMenuShowDelay: 100,.
subMenuHideDelay: 200
});

TO:

var MenuBar = new Spry.Widget.MenuBar2 ("#MenuBar", {}
widgetClass: 'menu bar MenuBarRightShrink '.
});

I hope that doesn't ' t mess up anything else, but no problems so far.

To access the Spry Widgets I just added with Adobe Widget Browser

Just added a few new spry widgets to "My Widgets" in Adobe Widget Browser. All the instructions say I should be able to access these new widgets by: Insert > Widget >... Problem is, there is no option 'widget' in my control panel "insert" CS4. Widgets only I have access are preloaded into the Insert toolbar.
If they are in "my widgets" in the Widget browser, then they should also be loaded into my Dreamweaver CS4, right? Where are they?

The button Widget is available at DWCS5.

But you can add the code manually. After getting the widget that interested in your collection of my Widget, click to preview. Now, click on the 'Save Widget Files' button (at the bottom of the view) to save the widget files to a folder on your site. One of the files that is stored in the file is a sample page that shows the widget working with the content of the sample. You can use this page as a starting point, or copy the code of the widget from this page into one of your existing pages.

Questions from the media on the report columns

Hello
I'm experimenting with questions from the media on the APEX components such as the columns on the report.
I have an example that works, but I wonder if it's the best way to go about it.
APEX media query example
I applied the following CSS
```
@media (orientation:portrait) {
  .landscape_only {display:none;}
}
@media (orientation:landscape) {
  .portrait_only {display:none;}
}
```
For components such as regions, buttons etc - I can apply "CSS Classes" attribute class to the component level.
for example: I have applied the .portrait_only in the area of 'Code' in my example
but for the columns in a report, I had to apply this jQuery on the page loading.
```
$('th#HIREDATE, td[headers=HIREDATE]').addClass("landscape_only");
```
If I applied to the class in the detail of the column that the data has been hidden when Guide to portrait - not the entire column.
Are there more effective methods of enforcement of the class to the column?
Reading articles like this lead me to think that way, but I don't know if APEX could be other solutions.
5 tips for better jQuery selectors - SitePoint
It becomes a little pain if I wanted to list a number of columns.
I look forward to jQuery gurus ;-)
Scott

Rather than specify the classes at the level of the components and using jQuery when running, why not simply specify the items directly in the stylesheet?
```
@media (orientation:portrait) {
  #P2_BUTTON2,
  th#HIREDATE, td[headers=HIREDATE]  {display: none;}
}
@media (orientation:landscape) {
  #P2_BUTTON1 {display: none;}
}
```
This seems to be a more effective approach that all orientation-based rules are easily visible and easy to manage in one place, rather than be dispersed through the definitions component and dynamic action.

Three Questions from beginner to Captivate 3

Adobe Captivate 3.
I have three questions from beginner to Adobe Captivate 3.
1. I noticed that CP3 only creates SWF files. Why not offer the possibility to create an FLV file in the final product? What is the difference between a SWF file and a FLV?
2. I want my finished product for a single slide with a picture in the background and some areas of reversal. It seems that no matter what I do, the blade is not fixed, but faints and disappears after the default time of 3.3 seconds. How can I achieve making the slide remains in place, not disappear, and behave as I want?
3. I want to do a slide that has a video autoplay Flash on it (this part I know how to do), but I want the slide to move to another slide specified when the video ends, without user action. How can I do?
Thanks to anyone who can help me on these issues.

Hello

Doug chaplain wrote:

Adobe Captivate 3.

I have three questions from beginner to Adobe Captivate 3.

1. I noticed that CP3 only creates SWF files. Why not offer the possibility to create an FLV file in the final product? What is the difference between a SWF file and a FLV?

CP3 does not FLV because it was not part of the specification for CP3. I don't know why it is like that. Maybe the Captivate development team knows for sure. In any case, Captivate 5 was recently released. If the point is little questionable, right?

Regarding the second part of this question, SWF can have interactivity such as bearings or clickable areas or buttons that perform different actions. FLV is usually just a video, just like a DVD movie that you watch passively, and you do not participate.

2. I want my finished product for a single slide with a picture in the background and some areas of reversal. It seems that no matter what I do, the blade is not fixed, but faints and disappears after the default time of 3.3 seconds. How can I achieve making the slide remains in place, not disappear, and behave as I want.

You can get there. Just insert a click box and time it so it suspends the slide at the right time.

3. I want to do a slide that has a video autoplay Flash on it (this part I know how to do), but I want the slide to move to another slide specified when the video ends, without user action. How can I do?

So now you change course on us? You said to question 2 you want the finished product is a single slide! This is perhaps another project, you're talking about.

If you examine the properties of the slide, you will discover a labeled area of Navigation. Using this box, you can choose to navigate to another slide when it finishes playing.

See you soon... Rick

Useful and practical links

Captivate wish form/Bug report form

Certified Adobe Captivate training

SorcererStone blog

Captivate eBooks

Remove the Focus in the Spry Widgets (I think)

I'm new to Spry widgets and noting that he is a boring (in Safari) highlight of selections to the accordion and the tab panels. I watched this and apparently she called Focus and accessibility (I think)?... but it's just horrible-looking and boring to me.
How can I remove this please?
Also... I have trouble finding the CSS rule to change the color of the tab selected in the TabPanel. It seems I have only an exit status and a stationary State, but not a State selected as with the accordion.
Thank you.

See if this thread is useful:

http://forums.Adobe.com/thread/468623

Why my Spry Widgets keep doing this? !!!

Whenever I try to insert a widget spry js and css source files are saved in a temporary file in my installation of DW? Has anyone else ever had this happen? Is there a reason?
"" < script src = "file:///C|/Users/Paul/AppData/Roaming/Adobe/Dreamweaver 9/Configuration/Temp/Assets/eamDA2A.tmp/SpryCollapsiblePanel.js" type = "text/javascript" > < / script >
"" < link href = "file:///C|/Users/Paul/AppData/Roaming/Adobe/Dreamweaver 9/Configuration/Temp/Assets/eamDA2A.tmp/SpryCollapsiblePanel.css" rel = "stylesheet" type = "text/css" / >
Moreover, everything I click on this bloody forum takes 2-3 seconds before there is a reaction. I HATE THE NEW DW FORUM!

Save the page before first insert a Spry widget.

Moreover, everything I click on this bloody forum takes 2-3 seconds before there is a reaction. I HATE THE NEW DW FORUM!

You're not the only one to be a frustration, but nobody here can do something. If you want to complain, go and join the crowd of malcontent in forum Forum comments.

FWIW, people responsible for negotiating with the company that provides the forum software are struggling with many issues; and nobody has a magic wand.

Dreamweaver CS4 errors, Spry widget does not. Help, please!

I remodel a website and downloaded the this contact page html file. I opened it in Dreamweaver and I started getting this error. I opened the html file has some JavaScripts inside and I think, the scripts had a conflict with Dreamweaver CS4. I already deleted these files, I tried to open it and I always meet these errors.
These are the errors I get:
1. when I open Dreamweaver, this pop-up message:
"While executing onLoad in RecordsetFind.htm, the following JavaScript error has occurred:
In the file "RecordsetFind".
findRs is not defined. »
2. I click OK. Then I get this message:
"While executing onLoad in design Notes_onOpen.htm, the following JavaScript error has occurred:
In the file "Notes_onOpen Design".
onOpen is undefined. »
3. I just click OK. When I open a html file to edit or create a new, this error pops up again:
"While executing onLoad in design Notes_onOpen.htm, the following JavaScript error has occurred:
In the file "Notes_onOpen Design".
onOpen is undefined. »
4. I shall yet once just click OK, then this error:
"The following translators were not loaded due to errors:
ColdFusion.htm: has configuration information that is invalid.
SpryWidget.htm: has configuration information that is invalid. »
5 then, I will just click OK again. Then, when I'm working with projects or create a new project with Spry, it does not work properly. I got the code and update the list Spry or content manually.
6. when I close Dreamweaver, I always have this error:
"While executing onLoad in TeamAdminTempDelete.html, the following JavaScript error has occurred:
In the file "TeamAdminTempDelete".
delTempFile is not defined.
I tried to uninstall the Dreamweaver and install again, but it did not work.
What should I do to make the spry works again and remove all those annoying errors? Furthermore, all my Spry widgets do not work and these errors I encounter in all the Sites that I'm trying. How can I make it work again? I tried the search problems in CS4, but I couldn't see one, only in CS3.
Help, please.

See if the following can help (found in the Dreamweaver FAQ)

JavaScript and other unexpected errors

--
Mark A. Boyd
Keep-on-Learnine :-)
This message was processed and published by Jive.
It will not be considered an accurate representation of my words.
She may not even have been designed as a response to your message.

Spry Widget Collapsible Panel / accordion make arrows
Using Spry widets, I've got a working Collapsible Panel that is doing very well. I would like to create an arrow down left a water main subject when the accordion / panel is open. I would like to have the arrow points to the right (not turned down) when the accordion / panel is closed. How do you do that? It is in the CSS? If so, create it as a background image? I can't understand how this is done. Video of the video workshop called using Spry Widgets shows thereby, but don't explain 'how'.

BTW: I looked over the spry widgets videos in the video workshop and went on the sample of the project, but still do not see how they have implemented the arrow pointing downwards in the CSS. It diesn appear as an image file in the images folder and it does not appear in the styles that I see. Is this really the example project used in the video? Could someone check this out to see if it is really the right project used in the example file. I get an undefined when XML tring to view the example page 06_spyr_widgets.htm (the one used in the demo), when you try to view in a browser. Is there a required server configuration, that you need to set? Import the site went smooth, but viewing the page in a browser throws errors not defined using IE 7.

Thank you!
Nadia,

Thanks for the example. I finally thought to it. I finally found the image in the tutorial too... it is not in the pictures folder... it is in a folder called 'i' (Yes, a letter). To the inside of this folder is a folder called "nav" and the image is there. There are two States for the arrow. Go to the file CSS Spry, I found two States for the arrow. The answer is that everything is done in CSS with a background image and swap the image in the background as I guessed. The main lines are:

background-image: url(path/image.gif);
background-repeat: no-repeat;
background-position: left 50%;

Thanks for your help.

help get rid of weird ground line around spry widgets
Hey everybody,

I was experimenting with the spry widgets, and I noticed that when you clicked on the widget, or it became active, he created a strange and rather annoying axes line around him. does anyone know how to get rid of this?

PS: an example of what I'm talking about you can be found here:
http://labs.Adobe.com/technologies/Spry/demos/products/index.html

Look at the Accordion widget on the right. When it is idle, it is superb and is pleasantly combined. Once you click on it, or start using it, it develops an odd line. How can I get rid of the ground line?
Which is caused by the tabIndex attribute. The goal is to define a tab
Stop to help navigate the page with the keyboard, so you lose some
feature if remove you it.

HTH,
Randy

> I was experimenting with the spry widgets and I noticed that when you click
> on the widget, or it becomes active, it created a strange and rather annoying axe
> line around him. does anyone know how to get rid of this?

Question from Spry.widget in IE

Similar Questions

Maybe you are looking for