Accordion menu problem

Dear all,
I have a website, i want to place a image right side of accordion menu how can i do it (RED AREA)
WebLink

Firstly, please accept my apologies, I did not study the problem to the extent that the solution I gave solved the problem.
Please undo the changes above and add a new column that spans the height of the tabel as per
<tr>
<td width="33%"><b>Your Name*:</b></td>
<td width="3%"> </td>
<td width="4096" colspan="2"><input type="text" name="yourname" /></td>
<td rowspan="17"><img style="margin-left: 50px;" name="" src="http://www.newtonclients.com/sky3/images/bo.png" width="210" height="275" alt="" /></td>
</tr>
Gramps

Similar Messages

Accordion menu problem. Doesn't move.

Hello!
Here are files I've modified.
http://failiem.lv/u/jhqapxy
I was making an accordion menu after this tutorial.
http://www.thetechlabs.com/xml/build-a-dynamic-accordion-menu-in-flash-cs4-with-actionscri pt-30-and-xml/
In basic tutorial there is extra part of button where you add menu name "home, about us" etc.
But I don't need this. I needed more simplier. From xml file I load an image or swf. And then you just mouse over it and it moves and it clicks. No extra 30 pixels for button space.
If i change AS line
ldr.x=0
to ldr.x=27
then it moves, but there is extra unnecessary empty space between content things. I don't need it. What should I do?
I'm total beginer at these things, but I really need this thing.

You need to find where the space between is being added. If you include the relevant code in your posting you are more likely to get help. Also, probiding screenshots to show the problem you want to solve can be helpful.
People are generally not too keen about chancing downloading files and researching tutorials or other external information when trying to help in forums.

Jquery Accordion menu problem

I have create jquery accordian menu as per Patrick Wolf post. I have following setup for the accordion menu (page template body region position 3, column 1):
MENU 1
¦_ Link to report 1
¦_ Link to report 2
MENU 2
¦_ Link to report 3
¦_ Link to report 4
At initial page loading, MENU 1 is expanded and MENU to is collapse...this is OK.
Then user clicks on the MENU 2, immediately the MENU 1 collapsed and MENU 2 expanded and shown the "Link to report 3" and "Link to report 4".
But when user clicks on the "Link to report 3", the page is refresh / submitted and the Jquery tab on column 2 showing the correct report but the accordion MENU 1 is expanded and MENU 2 is collapsed.
How can I make: when user clicks on menu item (Link to report 3 or Link to report 4) of MENU 2, the MENU 2 still expanded and MENU 1 is still collapsed?

Hello,
You can programitacally open the right tab. Here is the code I use on http://anychart.apex-evangelists.com (the menu on the left is an accordion)
<script type="text/javascript">
$(function() {
    $('#accordion').accordion({
      header: 'h3',
      active: '.selected',
      selectedClass: 'active'
</script>Regards,
Dimitri
http://dgielis.blogspot.com/
http://www.apex-evangelists.com/

Accordion menu problem xcelsius 2008 SP3

Hi all
When i try and use the accordion menu in xcelsius 2008 SP3 i get the following screen and unable to edit any of details in the normal way.
[http://img251.imageshack.us/img251/7374/acct.jpg]
can anyone help with this issue??
thanks,
Lee

Hi Lee
Do you have any Add-Ons installed which could be conflicting with the accordion menu?
Thanks
Charles

Jquery Accordion as menu problem

I implemented Jquery accordion as a menu. I have following setup for the accordion menu (page template body region position 3, column 1):
MENU 1
¦_ Link to report 1
¦_ Link to report 2
MENU 2
¦_ Link to report 3
¦_ Link to report 4
On page template body region position 3, column 2 .... I have the Jquery Tab to shows the selected report according to the accordion menu selection.
At initial page loading, MENU 1 is expanded and MENU to is collapse...this is OK.
Then user clicks on the MENU 2, immediately the MENU 1 collapsed and MENU 2 expanded and shown the "Link to report 3" and "Link to report 4".
But when user clicks on the "Link to report 3", the page is refresh / submitted and the Jquery tab on column 2 showing the correct report but the accordion MENU 1 is expanded and MENU 2 is collapsed.
How can I make: when user clicks on menu item (Link to report 3 or Link to report 4) of MENU 2, the MENU 2 still expanded and MENU 1 is still collapsed?

Hello,
You can programitacally open the right tab. Here is the code I use on http://anychart.apex-evangelists.com (the menu on the left is an accordion)
<script type="text/javascript">
$(function() {
    $('#accordion').accordion({
      header: 'h3',
      active: '.selected',
      selectedClass: 'active'
</script>Regards,
Dimitri
http://dgielis.blogspot.com/
http://www.apex-evangelists.com/

Spry Accordion Menu Tab Link css - totally confused

Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Photo Gallery</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="PhotoGallery.html">Gallery 1</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Unit Newsletters</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="Newsletter.html">February 2010</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Forms</div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="">Joining Instructions</a></li>
    <li><a href="">Enrolment</a></li>
    <li><a href="">Next of Kin</a></li>
    <li><a href="">Volunteer Blue Card</a></li>
    </ul>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
    <div class="AccordionPanelContent">
    <ul>
    <li><a href="WhatsOn.html">Whats On</a></li>
    <li><a href="PSG.html">Parent Support Group</a></li>
    </ul>
    </div>
    </div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;

Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;

Accordion Menu to display image

Hey guys,
I am in desperate need of some knowledgeable direction. Many thanks up front for any help!!!!!
Situation: I am designing my company's resume page: 3 or 4 names within 6 different departments in an accordion menu.
Currently: I have a two level accordion menu on the left (department and then names within the department.) and a anchored DIV tag on the right.
Goal: When the user clicks on "Bob Example" text link in the "Engineering" department tab (accordion menu), I would like for it to open a picture of "Bob Example" on the right hand side.
Problem: I've named the anchor DIV tag, "biopic" and targeted the link the same name, however, when I click on the "Bob Example" text link - it opens the picture in a separate window. I have played around with targeting so much my brain is now mush.
Can anybody shed some light on why the "Bob Example" pic won't open on the right hand side?

That link isn't much help.
All the assets are pointing to files on your local Z drive instead of the site folder.
<script src="file:///Z|/Desktop/NEW WEBSITE/SpryAssets
/SpryAccordion.js" type="text/javascript"></script>
If your site is properly defined in DW, that shouldn't happen.
Setting Up Local & Remote site folders in DW
http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a60097e0f131686fa2b4-7ff e.html
Nancy O.

Accordion Menu - Submenu position issue

Hello,
I've created an accordion menu that resides in the top right corner of my website. I seem to be getting various undesired results when previewing the site.
Desired layout: Build mode
Undesired Result: Page Preview
Undesired Result: Site Preview
The top level sites work fine but when I move the submenu to the left of the menu using the X position, then preview the page or site, the submenus show up either right over the menu or way off to the left of the site, almost completely off the page. I have no idea why, please help.
Jeff

Hi Sanjit, thank you for your reply.
The first image is a from the Design View, the second is a page preview in browser and the final image is a site preview in browser. My default browser is Safari (also testing in Chrome however).
If I leave the menu with default settings, the submenus appear off the site's live area and when I preview they do not show up at all. Presumabley they are off to the right side of the site.
The menu is and has been set to "All Pages" and not manually throught my build. Other than plaving the vertical menu widget within the accordion widget, it is more or less default with exeption of some styling.
I will try to rebuild the menu and see if the problem is still occuring. If you have any further sugestions I would be happy to hear them.
Thnaks again

Accordion Menu - need to control which panel opens

I have an accordion menu that works fine but when I put it
into action
on the site, I realized that I needed the accordion to open
up a
different section on each new page.
Since I have the accordion menu in an SSI (server side
include) I don't
want to have a different spry asset for each page. However, I
think
setting a session variable would work to control which
section is opened.
Anyone done this? What would it look like?

quote:
Danilo Celic wrote:
Try this page:
http://foundationphp.com/tutorials/spry_url_utils.php
Thanks a lot. This web page gave some answers, but now I have
a new problem:
When I test my accordion menu in a normal html page
everything works fine. When I put this accordion menu to my DW
template it stops working. The result is that every accordion's
panels are open!
Why? Can you assist me?
In template head I have this code:
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
And in template end just before </body> tag I have this
code:
<script type="text/javascript">

</script>

Accordion Menu & Firefox

I am using Dreamweaver CS3 along with Spry 1.6.1
I am using an accordion menu with 4 tabs and they transition
fine in IE7 but in Firefox there is a problem. The menu works fine
but it expands the site as if all 4 panels are open at one time.
Then when I click on the accordion menu the site collapses back
together.
If I change the height under the .AccordionPanelContent class
in the CSS file it helps but that affects the menu in IE if I do it
that way.
Any ideas why it would cause the web page to spread apart
when first loaded up in Firefox?
Thanks!

Do you have a sample URL that demonstrates the problem?
--== Kin ==--

Links inside an accordion menu

Hello, im almost done with my site, but i have encounterd a problem, I did an accordion menu for the main design, works perfectly, but inside one of the menus i have a gallery, ive tried diferent options, but my main problem is that every time i click any of the different button options ive created all my page scrolls to the top. Its like everything inside the accordion menu is making the page scroll back to the top! how can i disable that for the buttons inside the main accordion menu. Thank you.

Hello, the problem im having is in the mobile site. here are the two versions, english and spanish. You will ser the problem in the portfolio section under recent projects. The two versions have a diferente type of galery bit both have the same issue. Once you click any buttons under projects the page automatically scrolls up.
http://www.katapix.com/phone/
http://www.katapix.com/phone/inicio.html
im sorry for my bad english. I hope i made my point clear. Thank you for the help!

Wobbling image under accordion menu

So the saga continues :)
I am using an accordion menu (about 150px x 300px) on the
right hand side of my page. It has three items when each one opens
downward they contain separate links within. Directly beneath this
accordion menu is a simple jpeg image. The problem is when I use
the accordion menu the image underneath it (not a background image,
it's positioned under the menu) wobbles as the accordion effect
animation of opening takes place. It looks almost as though the
accordion effect is coming out from the top of the image (which it
is not because the image is placed some distant from the bottom of
the menu.
Is there a way I can prevent this from happening?

Well it seems this anomaly only occurs in Safari. What I have
noticed in Firefox though is a white dotted border goes around the
spry accordion menu after it's been activated, presumably because
it's Ajax. I'm not sure how to prevent that from happening.
So far I'm not terribly satisfied with this spry
widgets.

Child items in Accordion menu

I need to be able to display 3-4 levels (children,
grandchildren, etc.) within the Accordion menu. Is there a way to
do this?

Hi Michael,
Welcome to Apple Discussions.
Have you run a permissions repair with Disk Utility in your utilities folder in Applications? A permissions problem in your Library could do this. As you probably know, a permissions repair is standard 'house keeping' on a Mac.
If this doesn't help, I would drag 'com.apple.systempreferences.plist' to your desktop (it is found in your Preferences folder in your Library, in your home folder) go into your System preferences, change something, change it back and then re-start to find out if it is fixed.
Hope this helps,
Karn.

Accordion Jitter Problem

An Accordion menu I'm building exhimits a lot of jitter
during animation. It occurs in Safar, Firefox and Camino on a Mac.
(Have't tested yet on Windows.)
I added extra content in an adjacent column, as I saw
suggested elsewhere here, but it didn't work. My DOCTYPE is
correct. I'm using 1.5.
Is there a fix for this?

Hi, Kin. Thanks for the tips.
Unfortunately, neither solved my jitter problem totally.
First, I set the Accordion element with a height, as you
suggested. While this seemingly diminished the jitter, it did not
eliminate it. (I did away with the rules on the Tab elements to
make sure my height count was simple and accurate: 10 tabs at 30
pixels, one open panel at 400 pixels = 700 pixels.)
Then I followed your second suggestion, calling the
SpryEffects.js file and adding code for that. It had a small effect
as well: the Accordion's jitter was diminished, and that of the
adjacent column disappeared. (The Accordion's jitter was mostly
eliminated, except when the cursor was dragged over several tabs
quickly. Also, various tabs would cause a jitter at seemingly
random points.
As a test, I thought perhaps the mouseover code I added was
having an unintended effect, so I cut that. But that only increased
the jitter on both columns.
I've never liked flyout/dropdown menus, and the Accordion
seems a fine alternative for space saving.
I used v1.5 on all tests. I could return to v1.4, but that
causes those temporary sliders to appear in the tab content area,
at least in Safari. Is there a way to fix the slider problem in
1.4?

UITableView accordion menu

i want to make an accordion menu with UITableView. i achieved a little but my tableView's background is transparent. so when the cell is tapped i expand it but the cell's expanded part is still transparent. my problem is how i can make a accordion menu with UItableView ? and is it possible to make it with transparent tableView ?

quote:
Danilo Celic wrote:
Try this page:
http://foundationphp.com/tutorials/spry_url_utils.php
Thanks a lot. This web page gave some answers, but now I have
a new problem:
When I test my accordion menu in a normal html page
everything works fine. When I put this accordion menu to my DW
template it stops working. The result is that every accordion's
panels are open!
Why? Can you assist me?
In template head I have this code:
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
And in template end just before </body> tag I have this
code:
<script type="text/javascript">

</script>

Accordion menu problem

Similar Messages

Maybe you are looking for