Accordion Content
I'm moving from Go Live to Dreamweaver, and need to add text
to contents panel. I found that you can't do it within the panel
because of transparency, but can't see where and how to create and
name and store text files to place the filenames inside the
contents .... thanks
With regards to the content, it has worked for me by creating
include files in Dreamweaver and linking to them insode each
panel.
Similar Messages
-
Is there a way to autoscroll the current accordion content to top of browser window?
So this is a topic I have seen brought up but never solved….
I have an accordion on my site which displays content larger than the browser window, so when you scroll down to the bottom of the content box and get to the next accordion topic and click on it stays in the same place in the broswer window however since the prior accordion content closes it leaves you scrolled half way down on the current content.
So is there a way to bind an action where it autoscrolls and brings the browser to the top of the clicked accordion content?
here you see the window scrolled to the bottom of the first accordion content and the second showing its hover state…. when you click on the "So i made.." content it leaves you with this...
the middle of the second accordion content, causing you to have to scroll up to the top of it to continue reading….
I found this jquery scrpit which supposedly would do it. However since Muse exports is scripts differently it doesnt apply.
$('.ui-accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery object, activated header
ui.oldHeader // jQuery object, previous header
ui.newContent // jQuery object, activated content
ui.oldContent // jQuery object, previous content
$('html, body').animate({scrollTop: $(ui.newHeader).offset().top}, 1);
So now I need some help...
Thx
-EricHello,
You can achieve this using the Anchors feature of Muse. Please follow the steps below :
- Click on Anchor option in the toolbar as shown in the image :
- Now click on the location on the webpage which you want to be the top of the page when click on Accordian panel triggers.
- It will place the Anchor on that location. Now it will ask you to rename the anchor. Please rename the anchor to something convenient.
- Now click on the first Accordian trigger and in the "Hyperlink" option in the toolbar at the top, from the dropdown select the Anchor which you have added.
- Do same for all the Accordian triggers.
Now preview in a browser to see the results. Whenever you click on the Accordian trigger it will move to the location on the page where you have placed the anchor.
Note : There is a known issue with the Anchors feature not working with Safari 6 (The latest version of Safari). It is a known bug and is likely to get fixed in future versions. You can test it using other Browsers.
Hope this helps.
Regards,
Sachin -
Combining image and text in accordion content panel
Hello,
I'm having difficulty displaying image and text together within an accordion content panel. What I need is a thumbnail photo of a staff member plus a short bio. I've put a panel together so it displays as needed in Live View, but not in IE8, Foxfire8, or Chrome. I'm using Dreamweaver 5.5, Spry 1.6.1, Windows 7.
Here's the code for the panel that includes an image not displaying:
<div class="AccordionPanel">
<div class="AccordionPanelTab">Stan Swiercz, Training Manager</div>
<div class="AccordionPanelContent">
<div class = "PanelImage"> <img src="/images/StanSwiercz.jpg"/></div>
Bio text goes here</div>
</div>
Here's a link to a test page (ignore funky color variations, still settling those). The panel that is set to open should display an image floating left with text wrapping, as it does in Live View.
http://cet-training.org/Test%20folder/people.html
I''ve double-checked documentation, help, and done searches, but can't find any information about what should be an easy thing to do. Any help out there?
Thank you very much,
GeorgeThe location of the image is http://cet-training.org/Test%20folder/images/StanSwiercz.jpg (click the link to see the image)
This is the markup from your document <img src="/images/StanSwiercz.jpg"/> which means that the image is located in the images folder which is located in the root directory.
Hence the image cannot be found by your document.
The following are possible solutions, please choose one only
change the location of the images folder to reside in the root directory
delete the leading slash from the link as in <img src="images/StanSwiercz.jpg"/>
change the link to an absolute value as in <img src="http://cet-training.org/Test%20folder/images/StanSwiercz.jpg"/>
Gramps -
How to set a hover for Accordion content?
Hello,
I'm trying to figure out how to make a vertical side navigation using the accordion feature.
I've got it all working for what I want to do except for a hover on content.
I have it set for hover on the labels so it shows the blue bar and yellow text on hover or open like I want.
What I'd like now is to have a background on each content line when I hover on it (and when selected it stays the background shown on hover).
I've got a background image for the yellow gradient highlight shown below, but can't figure out how to set the Content for hover like I did the Top Level Tab.
I'm attaching a couple of files for demonstration in case the above is not clear.
thanks!
kimUse the css :hover..
http://www.daniweb.com/forums/thread109916.html# -
Accordion content panels open on IE
I am using Spry 1.6.1. The Accordion works as advertised on Safari and Firefox. On IE all content panels are open. Clicking on them has no effect. A height value is specified in .AccordionPanelContent:
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-color: #FFFFCC;
In trying to make this work I have added arguments to the Accordion object constructor call as well:
var rssAccordion = new Spry.Widget.Accordion("rssAccordion",
{useFixedPanelHeights: true, enableAnimation: true, defaultPanel: 0});
I would appreciate any help.
AlanI have the same problem but I, as far as I can tell, do not have any fatal errors (like open tags) anywhere.
http://www.radioimaging101.com
If ANYONE sees why IE is doing this please let me know... I have tested in Chrome (which I hear behaves a lot like Safari) and in Firefox... they both display it perfectly. I'm using IE 8, btw.
Please help!! Gracias! -
Spry Accordion Content not expanding fully
Hi,
I am trying to add some nice user friendly stuff to my site. I've created a Spry Accordion in which the content is images that I have created in photoshop. Some of the content is longer than 200px and will not show up in IE. When viewed in IE it only shows the 200px even though I have set a script that says fixed panel heights = false. I've updated everything to the updated spry...I'm going to attach all of the files that go with the dreamweaver file.
Please help me!
You can view the page at http://www.hofchurch.com/updated_site2/about_hof.php
CayleYou are using Spry 1.4, the latest version is 1.6.1, consider upgrading to the latest version.
-
I am using accordion menus in my site( DWCS3) and have links in the content panel area. I would just like the the corresponding panel to stay open when clicking on the links contained within the content. Does anyone know how to achieve this? Thanks much!!
Have a look here http://foundationphp.com/tutorials/spry_url_utils.php
Also have a look here where accordions have been used for the menu http://backyardfurniture.com.au/
Gramps -
Apply mailto: link in accordion content tab
I would like to create a special "mailto:" link in the email
section of the accordion on the page listed below.
I want it to mail to the email address listed in the XML data
record AS WELL AS to a second address. (I don't want the second
address displayed in the content panel)
I'm new at this but I've gotten pretty good at just copying
and pasting code into my files, so long as I know WHICH FILE and
WHERE to paste it. I think I need to add another line in each XML
record and then add some kind of an "a href=" type code somewhere
in my HTML file. I've pasted the first bit of my XML file below.
My attempts resulted in making ALL of my content panels link
to the content email address selected (I've since fixed it and put
it back to normal - without any link). I would really appreciate it
if someone could layout the specifics of what I need to do and
where. Thank you so much.
BTW, You might notice that I dealt with the IE li ul list
problem (in the upper menu) by just "designing" the menu to look
like the ugly IE version because I couldn't figure out how to make
it look half-way decent in IE when it was designed to look nice in
Safari and Firefox! Grrr.
XML FILE:
<?xml version="1.0" encoding="UTF-8"?>
<coaches>
<coach id="00">
<coach_image>../competitive_dw/coaches_pics/select_a_coach.jpg</coach_image>
<team></team>
<fname></fname>
<lname></lname>
<email></email>
<phone></phone>
<license></license>
<wp_since></wp_since>
<also></also>
<achievmts></achievmts>
</coach>
<coach id="01">
<coach_image>../competitive_dw/coaches_pics/ph_cmg_soon.jpg</coach_image>
<team>Boys Academy U09 Trainer/Director</team>
<fname>Sam</fname>
<lname>Koleduk</lname>
<email>[email protected]</email>
<phone>727-389-7850</phone>
<license></license>
<wp_since>2008</wp_since>
<also></also>
<achievmts></achievmts>
</coach>
<coach id="02">
<coach_image>../competitive_dw/coaches_pics/ph_cmg_soon.jpg</coach_image>
<team>Boys Academy U09</team>
<fname>Ron</fname>
<lname>Moon</lname>
<email>[email protected]</email>
<phone>727-505-1607</phone>
<license>NSCAA Advanced Regional</license>
<wp_since>1990 when we were called "Spirit" and again
in 2008</wp_since>
<also></also>
<achievmts>Played in college at St. Leo from 1992-94.
Captain-National Champion AAU 1987 Pasco Blast</achievmts>
</coach>
THE HTML PAGE:
http://www.westpascofc.com/competitive_dw/cp_coaches_dw.htmlMrs. Dollywobbler,
THANK YOU! It took me a LOT of tries and variations but I did
it, thanks to your model. It's interesting to note that with all of
these experts in this forum answering VERY complex questions, it
was only another newbie that took the time to help me. Again, thank
you!
Now, I'd like to find out how to make it send an email to one
recipient and also send to a BLIND COPY recipient. I'll work on it.
Here's the code I ended up using in case someone else needs
it.
IN THE XML FILE:
<coach id="01">
<coach_image>../competitive_dw/coaches_pics/ph_cmg_soon.jpg</coach_image>
<team>Boys Academy U09 Trainer/Director</team>
<fname>Sam</fname>
<lname>Koleduk</lname>
<email><![CDATA[<a
href="mailto:[email protected],[email protected]">[email protected]</a >]]></email>
<phone>727-389-7850</phone>
<license></license>
<wp_since>2008</wp_since>
<also></also>
<achievmts></achievmts>
</coach>
IN THE HTML FILE: (including the code around the part I
added...so you can see where it goes in the file)
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("coach_data_set.xml",
"coaches/coach",{sortOnLoad:"team",sortOrderOnLoad:"ascending",distinctOnLoad:true});
ds1.setColumnType("email", "html")
//-->
</script>
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #CC0000} -
How to make Spry Accordion Content Panel with a variable content fit
I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 1</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Label 2</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps -
Tweaking how accordion content panels opens
Referencing the accordion at www.Greensboro101.com.
I have an accordion of fixed height. The panels are not fixed height and open at varying heights based on content.
PROBLEM: When a panel tab near the bottom of the visible accorion is clicked, the tab remains staionary while the content panel opens downward, leaving the content panel partially hidden or completely hidden and requiring the user to scroll down in the accordion to see the conent.
DESIRED SOLUTION: I would like to make the tab and associated conent panel, when opened, slide up so that the tab panel is at the very top of the accordion. Is that possible?Have a look here http://foundationphp.com/tutorials/spry_url_utils.php
Also have a look here where accordions have been used for the menu http://backyardfurniture.com.au/
Gramps -
Setting accordion content panel height with hidden content
Following previous instructions, I set
<!--
var acc7 = new Spry.Widget.Accordion("Acc7", {
useFixedPanelHeights: false });
//-->
at the bottom of the content page. However, some of the
accordion panel content is hidden until the user selects a radio
button. The panel height is not dynamically adjusted to the
content. FYI, the content is hidden using
style.visibility = 'hidden
In SpryAccordion.css, I commented out the height attribute.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
/* height: 200px; */
It appears to me that the panel height is still fixed, but by
what I am not sure. Any clues would be appreciated. Here's the demo
page:
http://www.phelpstek.com/cr/wildflower_wedding_favors/index.html
Thanks for any input/ideas.
Brian Phelps
www.phelpstek.comgraylensman wrote:
|| I'm working on a website with two column layout. The left
column
|| contains a list of site navigation links, the right column
contains
|| actual content for any given page. I'm using CSS to set a
left-hand
|| rule that runs the height of the right-hand column. On
some pages,
|| there's a lot of content; on others, very little. When
there's
|| little content, my rule doesn't run as long as the links
list,
|| because the rule is applied to the right column.
||
|| So, I want this rule to run at least as long as that left
column,
|| but run as long as the content in the right column when
needed. Here
|| are links to a couple of pages, so you can see what's
going on:
||
|| Good:
||
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
||
|| Not so good:
||
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
||
||
|| Thanks for your help, in advance!
hello,
apply this to your right column div and change 430px to
whatever you want
min-height: 430px;
height:auto;
_height: 430px;
regards
bretz -
Padding anyone? ... for accordion content
Hi all, this may be simple but I'm just not seeing it (it's
late and I'm out of espresso).... does anyone know how to add
padding to the content area of an accordion? I see the warning in
the CSS file, but there must be another way? Right now, adding
padding makes the gaps between the tabs grow and shows the scroll
bars... little ugly :-)
Anyone?
Thanks a million
NelsonHi Nelson,
The warning is in the CSS file because some browsers will
still apply padding when the height of the contentarea is zero.
This sometimes causes a jiggle or abrupt resize during animation.
To do what you want, put another div *inside* the content
area, and give that div padding. This allows the animation to
remain smooth and clip out the content without abrupt sizing.
--== Kin ==-- -
Spry accordion content not hiding in IE
Hi all,
I threw together a page using accordion menus (
http://www.riverviewbiblecamp.com/menu.php),
it works fine in Firefox, Safari, and Opera, but in Internet
Explorer the conent doesn't hide in the 'closed' panels. The panels
move when you click, making me think it's a CSS issue?
Thanks a lot,
RoryHi:
Have you tried updating Spry library files to the latest
version (1.6)?
From your source, I can see that you are using 1.4
Regards,
Andres Cayon
Spain Adobe Dreamweaver User Group
http://www.dwug.es
"country.hacker" <[email protected]>
escribió en el mensaje de
noticias news:fte4jc$qgg$[email protected]..
> Hi all,
>
> I threw together a page using accordion menus
> (
http://www.riverviewbiblecamp.com/menu.php),
it works fine in Firefox,
> Safari,
> and Opera, but in Internet Explorer the conent doesn't
hide in the
> 'closed'
> panels. The panels move when you click, making me think
it's a CSS issue?
>
> Thanks a lot,
> Rory
> -
Programmatic openPanels and Dynamic Accordion Content
I have been trying to add links to programmatically open
panels in my accordion, which is successfully populated with an XML
dataset. It doesn't seem to work, (tried using both "simple
navigation" and "panel index" links).
This does work when the data in the accordion is hard-coded.
I created a test page directly from the AccordionSample2 page
in the samples with Spry 1.5 (all of my files are 1.5).
I added the programmatic links to open each of the 2 methods
of populating the accordion on that page, and they don't seem to
work, either.
Test Page is here:
www.imagicdigital.com/spry/AccordionSample2test.html
I thought perhaps the dynamically created accordion is using
a different id, so that's why the programmatic linking doesn't
work, but when I viewed the generated markup with the debugger, it
appears to use the given id.
Any thoughts or help? Thanks in advance.http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
that might help u out. the bottom example is a tabbed widget
that gets activated by clicking a link.
and this;
http://labs.adobe.com/technologies/spry/articles/data_api/apis/collapsible_panel.html#meth ods
might help u out to.
also, u might want to add the
<script type="text/javascript">
var a1 = new Spry.Widget.Accordion("Acc2");
</script>
part, becouse that is missing, and its giving errors. and if
u have firebug installed u will see those errors on firefox.
getfirefox.com <-- firefox
getfirebug.com <-- firebug -
Spry accordion - content must close on click
Hi,
I was looking for my answer on the forum but still had answers. I gave a reply but I don't know if someone wil read this (sorry if I'm incorrect).
http://forums.adobe.com/message/2154232#2154232
The question is:
In my test site http://www.home-maastricht.nl/parkeren.html I have almost only accordion tabs.
They all need to close when I click on the picture from de accordionPanelContent.
Where/which/How do I have to put the command to close these. Is it possible that I only do this on one place in de accordion css?
If you click on the last accordeon Tab you see more pictures (a small dataset). This is only visible in IE but not in FF.
Also does the page jump to the top. Any idee what I can do? I work with CS4.
Al lot of questions but they are the finishing touch of the site!!
Thanks a lot for your help!
CarlaHi Arnout,
First thank you for your reply. I use Mozilla Firefox 3.6.3
But I'm happy it works in your version so I only have to wait that everybody uses the newer version?
Do I have tot give onclick="Accordion1.closePanel()" to every single image?
Like:
!images/12-keukeninterieur/websiteformaat/12-01-maesen-keuken.JPG|height=933|alt=Maesen Munstergeleen|width=700|onclick=Accordion1.closePanel()|src=images/12-keukeninterieur/web siteformaat/12-01-maesen-keuken.JPG!
Ofcourse I’m going to reed the link below, but just for this moment.
Do you have also a solution for the jumping when I’m on the last tab (the window jumps up).
Thanks a lot for helping me !!
Carla Leliveld -
Accordion content: can it be an external file?
Is there a way for an external file - e.g., Word or text file
- to feed the content? It would also be nice if the panel tab can
come from a file as well, instead of hardcoded. Thanks in
advance!With regards to the content, it has worked for me by creating
include files in Dreamweaver and linking to them insode each
panel.
Maybe you are looking for
-
ITunes 7.6 Bug: Does not play music from Intelligent Playlists
Since I upgraded to iTunes 7.6 I can no longer play music from my intelligent playlists. Whenever I try it will remove the song from the playlist instead of playing it. Has anybody else experienced this and maybe found a solution? And if not, how can
-
Using WebLogic Integrate to Pull data from a remote location
How do we use components of weblogic integrate for the following 1. Extract data from applications located in remote place. The applications were developed using sql server, foxpro, access and excel. 2.Use the extracted data for business process mana
-
Hi Gurus, If I have reversed an FI invoice with TC OB08, I cannot print it. I have tried to print with the same correspondence type as the invoice and also the correspondence type for credit memo, but get the error. No relevant item in document xxx;
-
How to use ADF Faces with struts1.3.8
Hi Can anybody guide us how to use ADF faces with Struts 1.3.8. Your help will be appreciated. Thanks Chetan
-
How many ARD licenses do I need?
I have a simple objective: I want to use ARD to control my mother's computer remotely. Obviously, I need a $79.99 license for my computer. Do I need a second license for my mother's computer?