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.
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
thanksalancymru 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 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">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</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 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,
CarlaSorry, it was the Appear/Slide Effect
-
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 -
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 -
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.
> -
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!
- cpmorganI 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 ==-- -
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">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</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!
-CameronYou 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 -
Colour problem with Spry Accordion
Hi, I'm trying to create a website with a spry accordion. I've had some trouble with it (as I'm not good at CSS, it's new to me) and I've solved them all except for one: a problem with the colour of the bar when the section is open.
This is my website: http://s313354774.mialojamiento.es/saibe/design3/Publish/INICI.html
When the menu is closed everything is ok, but when you open it then the colour changes, making a gradation between the new colour and the original one. I've checked the stylesheet and there the original colour doesn't appear anywhere, so it's wierd to me.
Does anyone know why is it happenning? If i'ts because something stupid forgive me, as I told you this is quite new to me and I'm trying to learn day by day.
SergiSegi,
This one has got me stumped. If I copy your SpryAccordion.css and apply my copy to the document, there is no problem. Have a look here http://pleysier.com.au/sergi/
I know this will not help except to say, that if you change
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
to
<link href="http://pleysier.com.au/SpryAccordion.css" rel="stylesheet" type="text/css" />
see what happens.
Gramps -
How do I make my Spry Accordion menu scroll *with* my webpage?
Afternoon,
I'm a newbie designer, just helping a friend build a website that will incorporate her blog and other stuff, but what I'm trying to do is set up my Spry Menu (set as a vertical accordion style) to scroll with the page.
I want it to scroll within the confines on my div class="contentright"
CSS for div class:
.contentright {
padding-top: 410px;
float: left;
width: 210px;
HTML of same div class:
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
My webpage has a set width and is set to expand based on what I have in my main content area. I'm just not sure what to code and where to code it (in my HTML or in the CSS), to set my Spry to scroll. I'm assuming it's something with a .float functionality, maybe? I just need it to stay beneath my top padding so that it doesn't get overlapped by my main header logo that I had to set to position: absolute;
Any ideas?Here is my HTML Coding
<html>
<head>
<title>BetsyMarvin.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="SpryAssets/SpryAccordion.js"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="bannerArea">
<div class="bannernav"><a href="#" >Privacy Policy</a> | <a href="mailto:[email protected]" >Contact Us</a> | <a href="#" >Site Map</a></div>
<span class="toplogo"></span>
<div class="toplogo"><a href="#"><img src="images/3 Words Buildup without BG.png" width="550" height="565" align="right" /></a></div>
</div>
<div class="contentArea">
<ul class="leftnavigation">
<li><a href="theme_02_design.html">Home Page</a></li>
<li><a href="blog_design.html">Blog</a></li>
<li><a href="lessons_design.html">Lessons</a></li>
</ul>
<div class="content">
<div class="contentleft">
<h1>Welcome to my Website</h1>
<img class="imageright" src="images/faith reason.jpg" border="0" />
<p>text</p>
</div>
<div class="contentright">
<div id="SpryAccordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab tabTop">
<div class="accordion_340_tab">CONTACT ME</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p> <a href "mailto:[email protected]"> Email</a></p>
<p> <a href="http://www.cornerstonemi.org">Church Website</a></p>
<p> <a href="http://www.facebook.com/betsy.marvin.32">Facebook</a></p>
<p> <a href "www.twitter.com/betsymarvin"> Twitter</a></p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">ABOUT ME</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<p>text</p>
</div>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab middleTab">
<div class="accordion_340_tab">PASSIONS</div>
</div>
<div class="AccordionPanelContent">
<div class="acontent">
<img class ="imageright" src="images/love.jpg" width="130" height="64" />
<p>text</p>
</div>
</div>
</div>
</div>
<div class="AccordionBottom"></div>
</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="footerArea">
<div class="copyright">© 2013 Betsymarvin.com | All rights reserved.</div>
</div>
</div>
<script type="text/javascript">
<!--
var SpryAccordion1 = new Spry.Widget.Accordion("SpryAccordion1", {useFixedPanelHeights:false, defaultPanel:2});
//-->
</script>
</body>
CSS Style Sheet
body {
margin: 0px;
color: #666;
font-size: 12px;
font-family: Arial;
font-family: Arial, Verdana, Univers;
background-color: #545454;
background-image: url(images/page_bkgd.jpg);
background-repeat: repeat-x;
h1 {
color: #4F6179;
font-size: 24px;
font-weight: normal;
margin: 3px 0px 25px 0px;
h2 { color: #333333; font-size: 14px; font-weight: normal; margin: 0px 0px 15px 0px; }
a { color: #ba7007; }
a:visited { color: #ba7007; }
a:hover { color: black; }
.container {
width: 980px;
margin-left: auto;
margin-right: auto;
background-image: url(images/content_bkgd_tile.jpg);
background-repeat: repeat-y;
/* BANNER AREA */
.bannerArea {
width: 980px;height: 145px;
background-color: #4971a2;
background-image: url(images/banner_bkgd.jpg);
background-repeat: no-repeat;
.bannernav {
padding-top: 10px;
padding-left: 10px;
float: left;
color: white;
font-size: 10px;
font-family: Arial, Helvetica, Verdana, sans-serif;
.bannernav a {
color: white;
text-decoration: none;
.bannernav a:visited {
color: white;
.bannernav a:hover {
color: #ECBB7B;
.toplogo {
position: absolute;
z-index: 100;
padding-right: 0px;
float: right; margin-left: 675px;
padding-top: 10px;
.content {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 10px;
background-image: url(images/content_bkgd.jpg);
background-repeat: no-repeat;
z-index: 100;
/* LEFT NAVIGATION */
.leftnavigation {
width: 192px;
margin: 70px 0px 0px 0px;
padding-left: 8px;
float: left;
list-style-type: none;
.leftnavigation a{
margin-left: 0px;
width: 156px;
padding-left: 15px;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
float: left;
color: #CCA72F;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background-image: url(images/nav_normal.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
border-bottom: 1px solid #999;
.leftnavigation a:visited{
color: #5C4C17;
.leftnavigation a:hover{
color: #ffffff;
background-image: url(images/nav_down.jpg);
/* CONTENT AREA */
.contentleft {
width: 400px;
padding-left: 30px;
padding-right: 20px;
float: left;
.contentright {
padding-top: 410px;
float: left;
width: 210px;
.imageright {
margin-top: 10px;
margin-left: 10px;
float: right;
.imageleft {
margin-right: 10px;
float: left;
/* FOOTER AREA */
.footerArea {
width: 980px;height: 88px;
background-color: #cfcfcf;
background-image: url(images/footer_bkgd.jpg);
background-repeat: no-repeat;
.copyright {
border-top: solid;
border-color: #737a90;
border-width: 2px;
margin-left: 240px;
margin-right: 30px;
padding-top: 12px;
color: #666666;
font-size: 10px;
font-family: Verdana,Arial, Helvetica, sans-serif;
CSS for the SPRY Accordion
.Accordion {
overflow: hidden;
width: 255px;
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
color: #CCA72F;
margin: 0px;
cursor: pointer;
padding: 10px 30px 10px 20px;
font-weight: bold;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
background-image: url(../images/accordion_255_tab_normal.gif);
.AccordionPanelContent {
overflow: auto;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(../images/accordion_255_tile.gif);
.AccordionPanelOpen .AccordionPanelTab {
color: #d88a37;
background-image: url(../images/accordion_255_tab_down.gif);
.AccordionPanelTabHover {
background-image: url(../images/accordion_255_tab_over.gif);
.AccordionFocused .AccordionPanelTab {
background-color: #000000;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
background-color: #000000;
/* Custom AUC classes */
#accordion_255 {
background-image: url(../images/accordion_255_tile.gif);
background-repeat: repeat-y;
background-position: 0px 0px;
.tabTop {
background-position: 0px 0px;
padding-top: 15px;
.middleTab {
background-position: 0px -151px;
.accordion_255_tab {
margin: 0px;
font-weight: bold;
.acontent {
height:200px;
width:220px;
overflow: auto;
padding: 5px 10px 10px 20px;
useFixedPanelHeights = null;
.AccordionBottom {
width: 255px;
height: 33px;
background-repeat: no-repeat;
background-position: 0px bottom;
background-image: url(../images/accordion_255_bottom.gif); -
Spry accordion panel not lining up with top of viewport in FF3.5
I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
**UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
Please feel free to check out the code here:
http://www.pjamedia.com/?page=modeladvice
Any help would be very much appreciated.
Thanks, Paul Aso take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
<script type="text/javascript">
function goToAnchor() {
location.href = "#unilist";
</script>
paste this script in <head> tag.
<a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
<div class="AccordionPanelContent">content</div></div>
<div class="AccordionPanel">
<div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
<div class="AccordionPanelContent">content</div></div>
</div>
Maybe you are looking for
-
How to keep view column in a table
Hi, I have two table and one view(I have same data in any other schema so I don't want to keep same data in both schema) I want to make primary key in first table based on one column from 2nd table and one column from view, but it's not looking possi
-
How to retrive delta changes in Infotype
Dear All I am working on development of New Interface program from SAP to 3rd party application and this will run on daily. I want to retrive <b>delta changes</b> record alone in 10 infotype tables. I checked the Tech.setting of these 10 infotype tab
-
How to initialize Object Array Data Provider (OADP)with data from txt file
Hi, I want to show in a table some columnar data from a txt file. I ran the creator demo application on OADP successfully. http://blogs.sun.com/divas/entry/using_the_object_array_data I created a javabean class to read a txt file.However, I am stuck
-
SAP MM Functional Specs -Help Required
Gurus , I am newly taking assignment for SAP MM functional .I request any one from this forum to help me in sending a sample Functional spec for SAP MM /SAP MM customization .It will be a great help for me as I am new in this area and just got traine
-
Merge to pdf gone from Word 2013
I have been making a lot of use of the merge to pdf function of Acrobat X standard but this has disappeared from the Word mailings options since I installed Office 2013. I have tried repairing the installation but this does not bring it back. This