Spry accordion with effect appear/fade

Hi,
I'm looking for a solution with the effect appear/fade which I've putten on an image.
http://www.home-maastricht.nl/signage.html
When I open the tab the content image is bright and the tab is dark (this is ok).
The image from the tab must lighten up when I close the content tab.
The content tab can be close by clicking on the tab image and also by clicking on the content image.
Can you follow me?
And the most important, can you help me?
Thanks al lot !!
Regards,
Carla

Sorry, it was the Appear/Slide Effect

Similar Messages

Spry accordion with nested accordions

I'm building an FAQ list with topics and sub topics, using a
containing Spry accordion with multiple children, though just the
one extra level deep. The nested accordions won't expand the full
list. Instead, the div height remains fixed, and I get a scroll
bar. Any ideas what part of the javascript to tweak to open up this
functionality?
Here's the page:
http://www.pixmission.net/dev/tex/faqs.htm
thanks

alancymru escribió:
> I'm building an FAQ list with topics and sub topics,
using a containing Spry
> accordion with multiple children, though just the one
extra level deep. The
> nested accordions won't expand the full list. Instead,
the div height remains
> fixed, and I get a scroll bar. Any ideas what part of
the javascript to tweak
> to open up this functionality?
>
> Here's the page:
>
http://www.pixmission.net/dev/tex/faqs.htm
>
> thanks
>
Sure! It has to be done in two parts. First part from your
SpryAccordion.css file and the second it is adding a new
property to the
Accordion object when its initialized.
First part:
Select .AccordionPanelContent class
Delete Height property
Change the value of overflow from auto to hidden;
Second part:
In the constructor function at the bottom of your faqs.htm
file, amend
this code:
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var Accordion9 = new Spry.Widget.Accordion("Accordion9");
to this:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{useFixedPanelHeights:false});
var Accordion9 = new Spry.Widget.Accordion("Accordion9",
{useFixedPanelHeights:false});
Hope this helps.

Spry Accordion with custom scrollbar

I'm trying to find a Spry Accordion with a custom scrollbar.
There are other accordion scripts out there but I am most
comfortable working with the Spry script. I cant seem to find any
of these with a custom scrollbar. Can someone here help?

Mr. Andersson wrote:
> I'm trying to find a Spry Accordion with a custom
scrollbar. There are other
> accordion scripts out there but I am most comfortable
working with the Spry
> script. I cant seem to find any of these with a custom
scrollbar. Can someone
> here help?
Spry has no custom scroll bars. Currently Spry (as of 1.6.1)
doesn't have drag and drop which would be required for a custom
scroll bar. Best you might be able to do would be to try to style
the browser provided scroll bars, but that's not valid CSS, and I
know that Firefox doesn't show the styled scrollbars (IE does).
Take a look at this page in IE:
http://www.iconico.com/CSSScrollbar/
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry effect Appear/Fade don't toggle

Ok.
I have applied a simple, basic, no more basic then this
cannot be possible, Appear/Fade using the effects behaviors menu in
DW.
I have turn on the Toggle option and I said: "appear from 0
to 100".
Well the result is this:
http://www.cantinho.org/admin/cantinho/showhide.php
Note: I can make a CSS to make the element disapear at the
beginning, but why should I need that if I have configured to show
from 0 to 100% ?
What I'm missing here?
Thanks.

I have been having a similar problem, and I thought your fix
might help my problem, but after downloading and running it, I'm
still getting the same thing. I'm trying to use effectAppearFade to
make a target link appear when another link is clicked. In order
for it to appear, I evidently need to not hide it in CSS Styles,
but then when the page first opens, the target link is visible. I
can almost make it work by fading it from 100 to 0 in an onload
operation on the body of the page. The appear logic then works fine
and even toggles okay if I turn that on, but, when the page first
loads, the link that I'm hiding flashes briefly before it
disappears. I've also tried using changeProp in the body's onload
code to hide the target link, but it seems that whatever I have set
the property to in CSS Styles overrides whatever I do in the
onload. I've also tried controlling its visibility with the display
property with the same result. So far, I haven't found a way to
hide the target link before the page has loaded and then fade it to
0 before making it visible or in any other way to start the target
link hidden and have it appear when I click the link with the
AppearFade effect for it. Do you know what I'm doing wrong?
Thanks for any help you can give me.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Home</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
</head>
<body
onload="/*MM_changeProp('#ArtLinks','','visibility','hidden','DIV');*/
MM_effectAppearFade('#ArtLinks', 0, 100, 0, false)/*;
MM_changeProp('#ArtLinks','','visibility','visible','DIV')*/">
<div>
<table width="100%" height="477" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="22%" valign="top"> </td>
<td width="56%" valign="top"><p align="center"
class="style1"> </p>
<p align="center" class="style1"><a
href="TechnologyMainFrame.html" title="Technology" class="style1"
accesskey="t">The Promise of
<u>T</u>echnology</a></p>
<p align="center" class="style1">and</p>
<p align="center"><strong><span
class="style4"><a href="javascript:;" title="Art"
class="style4" accesskey="a"
onclick="MM_effectAppearFade('#ArtLinks', 1000, 0, 100,
true)">The <u>A</u>rt of Life</a></span>
</strong></p></td>
<td width="22%" valign="top"><p
align="center"> </p>
<div class="style5" id="#ArtLinks">
<p align="center" class="style5"><em><a
href="Poems.php"><u>P</u>oems</a></em></p>
<p align="center" class="style5"><em><a
href="Story.php"><u>S</u>tory</a></em></p>
</div></td>
</tr>
</table>
</div>
</body>
</html>

Spry accordion with php mysql as data

Hello
I`m trying to create a spry accordion where the Labels are pulled from a mysql database table and the Content of that label is pulled from data in the same database. I tried adding first the spry accordion and then created 1 recordset for the labels and a second recordset for the content , then I added a repeat region for the labels DIV and inside this div I added a repeat region for the content.
Unfortunatly when viewed in the browsers the accordion doesn`t work.
Can anyone look at the code and tell me where is the mistake.
Thanks
<?php require_once('Connections/log.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
return $theValue;
mysql_select_db($database_log, $log);
$query_log_year = "SELECT DISTINCT Year(`23849`.acoff) AS yy FROM `23849` ORDER BY Year(`23849`.acoff)";
$log_year = mysql_query($query_log_year, $log) or die(mysql_error());
$row_log_year = mysql_fetch_assoc($log_year);
$totalRows_log_year = mysql_num_rows($log_year);mysql_select_db($database_log, $log);
$query_log_year = "SELECT DISTINCT Year(`23849`.acoff) AS yy FROM `23849` ORDER BY Year(`23849`.acoff)";
$log_year = mysql_query($query_log_year, $log) or die(mysql_error());
$row_log_year = mysql_fetch_assoc($log_year);
$totalRows_log_year = mysql_num_rows($log_year);
$mhour_log_mon = "0";
if (isset($row_log_year['yy'])) {
$mhour_log_mon = $row_log_year['yy'];
mysql_select_db($database_log, $log);
$query_log_mon = sprintf("SELECT DISTINCT DATE_FORMAT(`23849`.acoff, '%%M') AS mon , DATE_FORMAT(`23849`.acoff, '%%m') AS m , sum(`23849`.ablock) as toth FROM `23849` WHERE YEAR(`23849`.acoff) = %s GROUP BY m ORDER BY m ", GetSQLValueString($mhour_log_mon, "int"));
$log_mon = mysql_query($query_log_mon, $log) or die(mysql_error());
$row_log_mon = mysql_fetch_assoc($log_mon);
$totalRows_log_mon = mysql_num_rows($log_mon);
?>
<!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>testing ajax php mysql</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <?php do { ?>
      <div class="AccordionPanelTab"><?php echo $row_log_year['yy']; ?></div>
      <?php } while ($row_log_year = mysql_fetch_assoc($log_year)); ?>
<div class="AccordionPanelContent">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
    <?php do { ?>
      <tr>
        <td><?php echo $row_log_mon['mon']; ?></td>
        <td><?php echo $row_log_mon['toth']; ?></td>
      </tr>
      <?php } while ($row_log_mon = mysql_fetch_assoc($log_mon)); ?>
</table>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
<?php
mysql_free_result($log_year);
mysql_free_result($log_mon);
?>

You only have 1 "AccordianPanel" which contains a list of "AccordianPanelTab" elements, then a list of "AccordianPanelContent" elements.
You need to have a list of "AccordianPanel" elements, each containing a pair or "AccordianPanelTab" and "AccordianPanelContent" elements.
HTH,
Randy

Spry Accordion with Image Icons

I've created a Spry Accordion here:
http://www.holidaycardsunlimited.com/tips-advice/business-use/Business-Holiday-Cards.html
The client would like to have images (arrows or plus/minus) when the accordion expands or collapses.
Any ideas how to implement this?
Thanks in advance!

finally this css markup worked very fine for me
@charset "UTF-8";
.Accordion {
border: none;
outline:none;
overflow: hidden;
-moz-outline: none;
height:700px;
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab{
-moz-user-select: none;
-khtml-user-select: none;
background-color: #003266;
border-top: solid 1px white;
padding-top: 6px;
padding-bottom:6px;
padding-left: 24px; /* this created space for the images on the left*/
margin: 0px;
color: white;
font-weight: bold;
cursor: pointer;
background-image: url(../wm2010/img/gif/plus.gif);
background-repeat:no-repeat;
background-position: 0px;
.AccordionPanelContent{
background-color: #f6f6f6;
overflow: auto;
margin: 0px;
padding: 0px;
height:500px;
.AccordionPanelTab a{
color: black;
text-decoration: none;
// this is most important for IE
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: orange;
background-image: url(../wm2010/img/gif/minus.gif);
background-repeat:no-repeat;
background-position: 0px;
// this is the firefox guarantee
.AccordionPanelOpen .AccordionPanelTab{
color: orange;
background-image: url(../wm2010/img/gif/minus.gif);
background-repeat:no-repeat;
background-position: 0px;
.AccordionPanelTabHover {
color: orange;
background-image: url(../wm2010/img/gif/arrow.gif);
background-repeat:no-repeat;
background-position: 0px;

Spry Accordion with iFrames

I have a Spry Accordion which I'm using on the same page as an iFrame setup. I want to link the AccordionPanelTab to an iFrame link.
In order to get the iFrame to work I need to link like this:
<a href="iframepage.php" onclick="return changeIframeSrc('iframe', this.href);" target="iframe">
This works for links within AccordionPanelContent but not if I link the AccordionPanelTab.
I can get the AccordionPanelTab to link by
<a href="iframepage.php" onclick="window.location=this.href;return false;">
but not within the iFrame. Is there a way of combining these two to make them work or another way of making the AccordionPanelTab link?
Many thanks.

Have a look at the following
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<p>Open by Panel Index:
<a href="#" onclick="Accordion1.openPanel(0); return false;">0</a> |
<a href="#" onclick="Accordion1.openPanel(1); return false;">1</a> |
<a href="#" onclick="Accordion1.openPanel(2); return false;">2</a> |
<a href="#" onclick="Accordion1.openPanel(3); return false;">3</a>
</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 3</div>
    <div class="AccordionPanelContent">Content 3</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 4</div>
    <div class="AccordionPanelContent">Content 4</div>
</div>
</div>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Copy and paste into a test document making sure that the links are correct. Test in your favourite browser.

Spry Effects (appear/fade with menubar)

Hello,
I am trying to implement a spry menu effect that only targets
the drop down, submenu item list of my horizontal menu bar. When I
hover over the main category or list item, the javascript is set to
delay the appearance of the corresponding submenu items. What I
like to have happen if for the submenu items to fade in (or
"appear" in spry effect terminology) during this timed delay
(onmouseover), and fade out during the timed delay that occurs
onmouseout. I was unable to get the desired effect using the spry
menu effects in the main HTML file. I am thinking this change would
require altering the the sprymenu.js file becuase that is where the
underlying spry menu behavior that I am trying to target lives.
Any ideas? Or should I abandon this idea?

Hello,
I am trying to implement a spry menu effect that only targets
the drop down, submenu item list of my horizontal menu bar. When I
hover over the main category or list item, the javascript is set to
delay the appearance of the corresponding submenu items. What I
like to have happen if for the submenu items to fade in (or
"appear" in spry effect terminology) during this timed delay
(onmouseover), and fade out during the timed delay that occurs
onmouseout. I was unable to get the desired effect using the spry
menu effects in the main HTML file. I am thinking this change would
require altering the the sprymenu.js file becuase that is where the
underlying spry menu behavior that I am trying to target lives.
Any ideas? Or should I abandon this idea?

How do I make type with effects appear the same in a .pdf as it does in the native InDesign file?

The type I am referring to is the words "What to do next" above.
On the left is what they look like in the native InDesign CS5 file they were created in. This is how I would like them to appear.
On the right is how they appear when I try to save the brochue as a .pdf.
My question is how can I get the words "What to do Next" to appear the same in the .pdf as they do in the native InDesign file?
Thanks for your help!
SM66

Effects are usually using some type of blending mode - you should preview your InDesign file using View>Overprint Preview
That will show you what they look like when they blend with the background.

Accordion with spry data on IE8

Hi,
I have an accordion with spry data and everything works fine on IE8 and FF, but on IE8 when i click on a accordion tab it doesnt focus on that open panel. It takes me at the very top of where my accordion begins. I notice the same thing happens to the accordion with spry data site. It's a problem for me because my page has a long accordion and our users have small laptop screens. Does anyone know how this can be fixed in IE8?
Sorry i dont have a sample link or code, because it's on our company intranet. but i used the exact same method on the spry accordion with data page.
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
thanks!

Good. I am sure you can figure it out.
http://labs.adobe.com/technologies/spry/articles/pager/index.html
Let us know.
Donald Booth
Adobe Spry Team

Sorting Spry Accordion panels?- Repost

I posted this question on 5/20 but did not get any replies,
so I am reposting in hopes that someone might have an answer.
Can Spry accordion panels be dynamically sorted the same way
that regular Spry tables can? I created a Spry Accordion with a
book title on each panel. When you click on a panel, a table
appears (dynamically generated from an XML database using a Perl
script) showing author name, publisher, date of publication, etc.
I'd like users to be able to alphabetize the book titles in case
they're not already in alphabetical order. I'd also like to add a
link on (or near) the panels to sort them by date of publication,
even though the date field is not visible when the panels are
closed.
Thanks!
- cpmorgan

I couldn't tell from your post if you were generating the
markup for your Accordion using regions and data sets. If you are,
then you are probably doing something similar to:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample2.html
In which case, you can cause the panels to sort by simply
sorting the data set:
<a href="#" onclick="dsEmployees.sort('firstname'); return
false;">Sort by FirstName</a>
<a href="#" onclick="dsEmployees.sort('lastname'); return
false;">Sort by Last Name</a>
--== Kin ==--

How to make no panels on Spry accordion open by default?

I have a Spry Accordion with several panels. I want the default behavior for none of the panels to be opened until one is clicked. Currently the default behavior is for the first panel to be automatically expanded when the page is first visited. How do I correct this?

It's here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Under the sub heading "starting with all panels closed".
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Martin

SPRY Accordion Linking

I want to link certain text from a homepage to a second page
that contains a SPRY Accordion with three panels. But I want to
link to the second panel open, even though this is not the default
open panel if you load that page independantly. Is there a way of
telling the widget to open a specific panel through the link code
on the homepage? I am trying to avoid the visitor having to click
the panel for the selected topic on the homepage.

We have that feature built into our widgets, which are much
different than
spry:
http://www.projectseven.com/products/tools/accordion/tweaks/params/
If you don't have a development budget for add-ons, you can
look through the
spry docs:
http://labs.adobe.com/technologies/spry/docs.html
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"RGracia" <[email protected]> wrote in
message
news:fn55pk$htn$[email protected]..
>I want to link certain text from a homepage to a second
page that contains
>a
> SPRY Accordion with three panels. But I want to link to
the second panel
> open,
> even though this is not the default open panel if you
load that page
> independantly. Is there a way of telling the widget to
open a specific
> panel
> through the link code on the homepage? I am trying to
avoid the visitor
> having
> to click the panel for the selected topic on the
homepage.
>

Inserting a Spry Accordion on top of a background image?

I created an 800 x 600 pixel graphic image in Adobe Photoshop CS4 to be used as an overall background image for a webpage. I also created a few navigation links from the image Layers using the Slice Select Tool, then optimized and saved the image as an html file using the Save for Web & Devices command in Photoshop. Next, I opened the html file in Dreamweaver CS4.
Is it possible to insert a Spry Accordion with a clear (transparent) background anywhere on top of that background image in Dreamweaver CS4 so that I can see the background image behind the text content of the Spry Accordion? I use Windows Vista.

Hi,
Yes, as is shown by the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body style="background: url(images/detail/cd1.jpg) no-repeat center;"> //use your own location and file
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Accordion Menu - Content Height

Hey everyone,
I have a (hopefully simple) problem. I have a spry accordion with 3 tabs. Two of them have the same number of lines in them, but the "what" tab only has 2 lines so there's a lot of white space underneath it. I've tried changing
this.useFixedPanelHeights to false in the spry java script... and it does resize the content area properly, but the open and close on mouseover gets really messed up. Things don't open when they should, and close randomly. It makes it impossible to navigate. I've tried several other things as well, but nothing seems to fix the problem
The website:
http://jmb2-arch.com
Thanks in advance for any help!
-Cameron

You might try playing with the height specification as stated in the Spry CSS:
.AccordionPanelTab { -moz-user-select: none; -khtml-user-select: none; height: 76px; border: 2px solid #027dc3; width: 76px; color: #027dc3;
Setting a height is usually not necessary, unless there is a specific design reason (as there is here, with the main tabs and the sub tab area apparently intended to be identically sized).
Chris

Spry accordion with effect appear/fade

Similar Messages

Maybe you are looking for