Applying Spry Style Effect to Class

Trying to get the highlight effect to apply to all members of
the CSS class "highlight". What am I doing wrong???
<html>
<head>
<script src="SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">
Spry.$$(".highlight").forEach(function(n) {
window[n.id] = new Spry.Effect.Highlight(n, {duration: 1000,
from:'#CCCCCC', to:'#FFCC33', restoreColor: '#FFCC33', toggle:
true});
</script>
<style type="text/css">
.highlight {
background-color: #CC5512;
cursor: pointer;
</style>
</head>
<body>
<div id="div_1" class="highlight"
onMouseOver="div_1.start();" onMouseOut="div_1.start();">
My first DIV
</div>
<div id="div_2" class="highlight"
onMouseOver="div_2.start();" onMouseOut="div_2.start();">
My first DIV
</div>
</body>
</html>

VL Branko wrote:
How do you enable this option? I can’t find horizontal on options panel. There is only "up" or "down."
That option doesn't appear in the Slide effect panel. You need to edit the code inserted by Dreamweaver. Change this:
function MM_effectSlide(targetElement, duration, from, to, toggle)
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
to this:
function MM_effectSlide(targetElement, duration, from, to, toggle)
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle, horizontal: true});
Dreamweaver doesn't show all the options available for Spry. You often need to tweak the code manually.

Similar Messages

Trouble applying Spry slide effect option

I am trying to use the SPRY Slide effect. According the Adobe documentation on the
Dreamweaver stuff/Spry_1_6_1_022408/samples/effects/slide_sample.html that I downloaded it says:
“The Slide was designed to animate the element vertically or horizontally. By enabling the horizontal option the element will dissapear [sic] to its left.”
How do you enable this option? I can’t find horizontal on options panel. There is only "up" or "down."

VL Branko wrote:
How do you enable this option? I can’t find horizontal on options panel. There is only "up" or "down."
That option doesn't appear in the Slide effect panel. You need to edit the code inserted by Dreamweaver. Change this:
function MM_effectSlide(targetElement, duration, from, to, toggle)
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
to this:
function MM_effectSlide(targetElement, duration, from, to, toggle)
Spry.Effect.DoSlide(targetElement, {duration: duration, from: from, to: to, toggle: toggle, horizontal: true});
Dreamweaver doesn't show all the options available for Spry. You often need to tweak the code manually.

Problem with applying Spry "Slide Effect"

I am having problems attaching the slide effect on image. Below is the code for the test page I am working on to learn how to use this effect (most of which came from Adobe):
<!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 type="text/javascript" src="../SpryAssets/SpryEffects.js"></script>
</head>
<body>
<p> </p>
<p> </p>
<style type="text/css">
#content{ visibility: hidden;}
</style>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus
interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus
vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat,
odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla
tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum
facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus
sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.
</div>
<p> </p>
<p> </p>
<div id="chakra">
<p><img src="../images/chakra_yantra_200px.jpg" alt="chakra" width="200" height="201" /></p>
</div>
</body>
</html>
The idea is that there is an image called "chakra", and when the mouse goes over the image then the text is suposed to slide out as a caption.
When I attempt to attach the effect after selecting the image I am asked to ***Select Target Element ID*** of which there are two options
div "content"
and
div "chakra"
I choose -- div "content"
I then get an error message that says:
“To get this behavior to work properly, you must select the container tag you want to slide. (For example, if you want to slide an <image> tag that is wrapped with the <div> tag, select the container <div> tag. The container tag must have a unique ID.)
Please select a container tag as your target element , or cancel the behavior, wrap your target element with a div tag, assign the new div tag a unique ID, and reapply the behavior. When you reapply the behavior, select the new div tag as your target element.
The action will not be added to your document.”
What am I doing wrong?
I have spent hours on this but not getting anywhere. Are there any good visual tutorials to explain this? I have read everything that Adobe has provided but I am still not getting it, but I am getting a head ache. )-:
I'm using DW CS5 on a Mac, OS X 10.6.6

Add a div element as follows
<div id="content">
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus
interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus
vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat,
odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla
tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum
facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus
sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus.</div>
</div>
Gramps

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
          margin: 0px;
          padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
          background-color: #CCCCCC;
          border-top: solid 1px black;
          border-bottom: solid 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
          overflow: auto;
          margin: 0px;
          padding: 0px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
          background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
          color: #555555;
.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 "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
          background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
          background-color: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

How to apply different styles to multiple spry collapsible panels?

Hello every.
I would really appreciate some help with this problem I am coming up against.
I am creating a website which has multiple Spry collapsible panels in it. I applied the styles I wanted for the first Spry collapsible panel I did in the styles panel with no problems what so ever.
However when I go to apply the styles I want for my second and every other Spry collapsible panel, when I applied the style I wanted it changed the first panel I did. I’ve tried giving all my collapsible panels different Div ID’s but no luck. I just can’t seem to apply different styles to each of my collapsible panels.
Can someone please advise me how to do this?
Thank you in advance for your help.
Kind regards
Elliot

I've figured the most of it out.
By giving the Spry Collapsible Panel that you want to style differently a separate ID and class and then duplicating the original Spry Collapsible Panel style in the CSS style panel on the right and renaming them the same name as the panel you want to style differently it will allow you to style it differently to all the other panels apart from the Hover.
I've tried everything! Below is the code I'm using for the two Collapsible Panels I want to style Differently.
I only want to have different Tab backgrounds and Hover backgrounds
1st Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
CSS Style
.CollapsiblePanelTab
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
2nd Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanel2Tab" tabindex="0">Tab</div>
<div class="CollapsiblePanel2Content">Content</div>
</div>
.CollapsiblePanel2Tab
.CollapsiblePanel2TabHover, .CollapsiblePanelOpen .CollapsiblePanel2TabHover
As I said the Tab works both I have two seperate background images for the Tabs but I can only seem to have one background for the hover.
Has anyone any ideas on how to get around this?
Kind regards
Elliot

Applying a style wont add an effect

Hello,
usign FW8, if I create a style from an shape that has a
shadow effect on it then applying that style to a new shape, the
new shape will only render the fill and stroke colors and not any
effects although the effect was marked and is displayed in the
thumbnail under the styles pallet.
is this how it should work?
thanks,
Mic

migo33 wrote:
> Hello,
>
> usign FW8, if I create a style from an shape that has a
shadow effect on it
> then applying that style to a new shape, the new shape
will only render the
> fill and stroke colors and not any effects although the
effect was marked and
> is displayed in the thumbnail under the styles pallet.
It should render the shadow as well. Can you post your PNG
file so we
can have a look?
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/

Adding spry fade effect to thumbnail gallery??

Hi,
I have a gallery page with a set of thumbnail images each linking to a main image.
I would like to add a simple javascript fade in for each main image. So when the user clicks on the thumbnail, the main image will fade in.
I took a look at the spry effects page (http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html) but this uses an onclick event and my code already has some onclick events:
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" title=\"$imgTITLE\">
...so i'm not sure if i can add the onclick events for the fade which is:
onclick="firstFade.start();"
Any ideas how i can get this to work?
Thanks for any help
B

hi, thanks for the reply.
This just applies a fade to whatever is being clicked i.e. i add this to the div container where my big image will appear and when I click on this image the main image fades out. However i want the big image to fade in when the thumbnails are clicked.
Here's the html:
<div id="left">
                <img src="images/jpg25.jpg" title="kawasakigreen">
</div>
<div id="right-gallery">
                    <div class="gallery">
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_1.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_2.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_3.jpg" alt=""/>
</a>
<a onclick=\"document.images.galPic.src='$imgSRC'; document.getElementById('$captionDIV').innerHTML='$imgTITLE';return false;\" >
<img src="/images/gallery/thumb_4.jpg" alt=""/>
</a>
                 </div>
</div>
So each thumbnail references a bigger image dynamically. I think i may need to add an onclick event to the thumbnail but I don't know how.
Is there any other way to achieve a fade in on the bigger image when a thumbnail is clicked?
Thanks
B

How to apply multiple styles for nested tags in XML?

Say you import this XML into InDesign:
<Root>
<strong>
<em>Bolded and Italicized</em>
</strong>
</Root>
And you have two character styles, bold and italics, to map to strong and em tags respectively.
You will see that the text appears italicized not bolded and italicized as expected. Generally, only the innermost tag will get the style and will overwrite its parent styles.
Notice the XML is generated dynamically and tags order is not enforced. Also, there's an additional underline tag that can be nested with these two.
So far I have tried to use GREP styles (with paragraph styles), but these do not have effect in the XML tags.
Other possible options not tried yet:
Create new tags for every formatting combination. Not what I really want because I could en up with a lot of tags each one with a corresponding styles.
Create InDesign XML rules to apply character styles automatically based on the tags
Use character styles in the XML with the aid namespace referencing InDesign styles. Will this really work?
What do you suggest to go for? See any other option?
Thank you in advance.
Juan

I'd say that you should create tags not for appearances, but for semantic content. Specifying formatting styles in your XML betrays your lack of familiarity with the format, because the last thing you'd want to do would be to use HTML markup in the middle of your XML. If you have content that's supposed to be both bolface and oblique - say, a warning - then it's marked up as
<warning>Never refer directly to formatting in your XML markup, only to content types!</warning>
If I had a document that was written in the style you suggest - one with lots of overlapping local formatting - I'd look at developing a better style guide that told the writers that doing so would be bad form. Because, you know, many of the writers I deal with are addicted to forms of emphasis that do nothing useful whatsover for their readership - they only serve to overemphasize the authorial voice of the writers.
Maybe you could tell us why you need these overlapping forms of styling, and we could suggest other InDesign formatting tools (like line styles or nested styles) that would help you get the appearance you want without crowding styling markup into your XML - where, strictly speaking, it doesn't really belong.

Spry Slide Effect problem in IE 7 only

I am using the Spry Slide Effect as a way of initially hiding
a drop down menu:
Click on menu of products:
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
I use:
.hideInitially{
display: none;
as recommended here though there is no working example using
display: none; only visibility: hidden
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
Using initial state of dispay: none it displays NOTHING! Is
this a bug in IE 7?
Anyone come across this problem.
Anyone got a fix?
Thanks
Rich

High Rich,
You were on the right track with EPM. Here's how it works:
http://www.projectseven.com/testing/customers/pow32/
All you do is insert a single panel EPM inside TopMenuWrapper
set to have
all panels close and with gradual stop animation and using
the basic style
theme.
Then you set the trigger DIV to display: none !important; and
to remove all
borders.
.p7EPM05 .p7epm_trigs {
overflow: hidden;
margin-bottom: 12px;
display: none !important;
Then "un-style" the EPM content DIV so it picks up your
colors and
attributes:
.p7EPM05 .p7epm_content {
padding: 12px 24px;
line-height: 1.5em;
border: 0;
Then select your "Menu of Products" link and use the built-in
EPM control
behaviors (available GUI in behaviors panel) to assign an EPM
Trigger
Control to the link, which will then look like this:
<a href="#"
onclick="P7_EPMctl('p7EPMtrg1_1','trigger')">Menu of
Products</a>
That's it.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"RICH POW" <[email protected]> wrote in
message
news:gms1c0$rpj$[email protected]..
>I am using the Spry Slide Effect as a way of initially
hiding a drop down
>menu:
>
> Click on menu of products:
>
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
>
> I use:
> .hideInitially{
> display: none;
> }
> as recommended here though there is no working example
using display:
> none;
> only visibility: hidden
>
>
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
>
> Using initial state of dispay: none it displays NOTHING!
Is this a bug in
> IE
> 7?
> Anyone come across this problem.
>
> Anyone got a fix?
>
> Thanks
> Rich
>

Help, how to apply multiple style to a component

In HTML we can write class="styleA styleB" to apply multiple
style, but it's not allowed in flex3.
So is there a way to walk around? like
.styleB{
//include styleA
}

You have to combine all songs into one file by using software, for example Audacity.
PS: I owe this knowledge to a post by Victoria Bampton.

Applying css style in DW (design view) or CT

Hi Folks,
Here's a dumb question I can't figure out. In DW and CT, you
can apply a css style to a paragraph selecting p tag, right? You
get <p class="myclass"></p>
What I don't get is why the css style apply to an image for
exemple inside the paragraph and not to the paragraph itself?
Of course as you developp a website you certainly don't worry
about that since you handcode or you never apply a style to a
paragraph.
Let's say you need to define a css style saying:
.myclass {
margin: 0 0 20px 20px;
float:right;
so the paragraph containing an image align to right and have
proper margin. Why by default the css style apply to the image and
not to the paragraph? You end with this <p><img
src="myimage.jpg" class="myclass" /></p>
What's the logic behind this, this is very annoying, specialy
for CT users.
Richard

richsky wrote:
> Hi Folks,
> Here's a dumb question I can't figure out. In DW and CT,
you can apply a css
> style to a paragraph selecting p tag, right? You get
<p class="myclass"></p>
> What I don't get is why the css style apply to an image
for exemple inside the
> paragrph and not to the paragraph itself?
> Of course as you developp a website you certainly don't
worry about that since
> you handcode or you never apply a style to a paragraph.
> Let's say you need to define a css style saying:
> .myclass {
> margin: 0 0 20px 20px;
> float:right;
> }
> so the paragraph containing an image align to right and
have proper margin.
> Why by default the css style apply to the image and not
to the paragraph? You
> end with this <p><img src="myimage.jpg"
class="myclass" /></p>
> What's the logic behind this, this is very annoying,
specialy for CT users.
> Richard
>
> .myclass {
> margin: 0 0 20px 20px;
> float:right;
> }
>
> <p class="myclass"></p>
>
> <p><img src="myimage.jpg" class="myclass"
/></p>
>
You must be selecting the image?
Try this: select the <p> tag, located along the bottom
of the design
window (it will highlited when selected) then from the style
drop menu
in the properties inspector select 'myclass'
That should apply the class to only to the <p> tag?

DESPERATE HELP! I broke my spry slide effect

i can't add the effect anymore. everytime i tried, it kept
telling me that I need to have the target element inside a div...
which it is. every other effect works, such as fading or what not.
but the slide effect just gone dead.
also, i did have the effect workED in one of my other
webpage. if i go back to behavior panel and try to modify the
effect (such as changing duration), it won't let me save, but just
kept popping up the same error message as above(that i need to have
target element in a div)
i have no idea what happened. it just stopped working one day
all of a sudden, and becoming very frustrating. PLEASE SOME HELP!!!
(also, where can i get immediate like customer to customer
real time conversation help? i pay LOTS of money for this stuff,
should I expect to get some sort of customer service from them?
some number i can call, some chatroom i can go to?)
p.s. as with all my other silly questions that got answered,
i am sure I did something very beginner (since i am) to break
it.

"Bih Wang" <[email protected]> wrote in
message
news:[email protected]...
>i can't add the effect anymore. everytime i tried, it
kept telling
>me that I
> need to have the target element inside a div... which it
is. every
> other
> effect works, such as fading or what not. but the slide
effect just
> gone dead.
The Slide effect is the most difficult of the Spry effects to
use. You
cannot apply the Slide effect directly to the element you
want to
slide in and out. The target element must be a div wrapped
around it.
What makes it difficult is that the child element of the div
MUST be
one of the following: blockquote, center, dd, form, img, or
another
div. So, for example, this will work:
<div id="slidecontainer">
<img src="slideme.jpg" alt="Sliding image" />
</div>
However, this won't work:
<div id="slidecontainer">
<p><img src="slideme.jpg" alt="Sliding image"
/></p>
</div>
If you want the paragraph, you need to wrap it in another div
like
this:
<div id="slidecontainer">
<div>
<p><img src="slideme.jpg" alt="Sliding image"
/></p>
</div>
</div>
> (also, where can i get immediate like customer to
customer real time
> conversation help? i pay LOTS of money for this stuff,
should I
> expect to get
> some sort of customer service from them? some number i
can call,
> some chatroom
> i can go to?)
This is where you get free user-to-user help. By the way,
please don't
post the same question in multiple forums.
The money you paid for the software entitles you to free
support with
installation problems. You also get two free technical
support tickets
for an individual program. If you bought a suite, you get
four
tickets, and six tickets for the Master Collection. The
technical
support tickets expire 90 days after using the first one.
To get real-time help from Adobe support, you need to
purchase a
support plan, or pay for individual support incidents. In the
USA,
prices per incident range from US$29 to US$249.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

Spry slide effect problem

Hi
i have a div with the slide effect, it works but it start as
showing and i want it to be "shrinked" when the page is loading.
what should i do?
ron

High Rich,
You were on the right track with EPM. Here's how it works:
http://www.projectseven.com/testing/customers/pow32/
All you do is insert a single panel EPM inside TopMenuWrapper
set to have
all panels close and with gradual stop animation and using
the basic style
theme.
Then you set the trigger DIV to display: none !important; and
to remove all
borders.
.p7EPM05 .p7epm_trigs {
overflow: hidden;
margin-bottom: 12px;
display: none !important;
Then "un-style" the EPM content DIV so it picks up your
colors and
attributes:
.p7EPM05 .p7epm_content {
padding: 12px 24px;
line-height: 1.5em;
border: 0;
Then select your "Menu of Products" link and use the built-in
EPM control
behaviors (available GUI in behaviors panel) to assign an EPM
Trigger
Control to the link, which will then look like this:
<a href="#"
onclick="P7_EPMctl('p7EPMtrg1_1','trigger')">Menu of
Products</a>
That's it.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System
"RICH POW" <[email protected]> wrote in
message
news:gms1c0$rpj$[email protected]..
>I am using the Spry Slide Effect as a way of initially
hiding a drop down
>menu:
>
> Click on menu of products:
>
http://www.adelantedesign.co.uk/clients/showpiece/menu.asp
>
> I use:
> .hideInitially{
> display: none;
> }
> as recommended here though there is no working example
using display:
> none;
> only visibility: hidden
>
>
http://labs.adobe.com/technologies/spry/samples/effects/slide_sample.html
>
> Using initial state of dispay: none it displays NOTHING!
Is this a bug in
> IE
> 7?
> Anyone come across this problem.
>
> Anyone got a fix?
>
> Thanks
> Rich
>

Imovie style effects in FCP

how does one go about creating imovie style effects in FCP
like aged film, or rain, or film look
do i need to buy third party filters?

Graeme Nattress (www.nattress.com) has a very well regarded group of filters that will do "film look" as well as imitating aged film. Not sure what rain look is.
Or, edit your project in FCP, export a .dv file and run it through iMovie with whatever effect you'd like to apply.
x

Applying different style sheets

I'm not sure if this is possible, but I would like to apply
different style sheets to different outputs.
For example: (Both outputs use the same data)
Output to PDF = Style Sheet 1
Output to WebHelp = Style Sheet 2
Is there an easy way to do this?

It would be lovely to select a style sheet as you are
generating the output, wouldn't it? As far as I can see, however,
style sheets are assigned per topic thru a reference RH sticks in
the HTML header.
Which leaves you two options:
1) The simple but tedious way: In the Topics list (on the
right), select all the topics. Right-click and pick Properties.
When the Properties window opens, choose the stylesheet you want on
the Appearance tab. Click OK. You would need to do this each time
you switch from generating WebHelp to generating PDF.
2) The complex but cool if it works way: I don't use the PDF
plug-in - do you still generate PDF from the Printed Documentation
layout? If so, can you use the StyleMapping.dot template? (I seem
to remember that the PDF goes through a Word stage behind the
scenes.) You can open StyleMapping.dot in Word (be sure to use File
> Open so you get the .dot) and change the styles into what is
effectively a new style sheet. It may take some tweaking - I still
can't get my bulleted styles to come out quite right - but it's
great for global changes.
HTH,
Elisa

Applying Spry Style Effect to Class

Similar Messages

Maybe you are looking for