Text Shift Uncontrollably Inside Accordion Widget

Guys hi! I've been crashing my head for two days with this. Hope you will provide some help!
I have an Accordion Widget with a very long text block inside one of the boxes (a list with over 80 lines). On the background to each second line I put a grey rectange shape just to give some contrast to the lines in the list. In the project all the rectangles are prefectly aligned to be right behind the lines. But when I publish the site I definately see that the rectangles shift up or down.
Is it a bug and the widget simply cannon handle correctly so many elements insie the feiled or am i missing something here?
Many thanks in advance for your advice!! You might be saving me from insanity here;)
UPDATE!! It was not the shapes but the text that was shifting. I fave some items on the list that consists of two lines. That's where I changed the leading betwin those two lines from 200% (for separate items in the list) to 146% between two lines (for the items that cosist of two lines of the text). That somehow couses the text to shift in the preview mode xompared to the design mode. When I make the leading unilateral throghout the entire textbox everything stands in place.
Still the problem remains unsolved.

Zak. thank you very much!
And sorry for coming back so late on this.
You solution perfectly solved the problem.
On the downside,) I did have to change the layout and reformat the site to submit it to the client because the deadline came before I got your reply.
Perhaps the "Round Leading to a Whole Number" setting should be checked by default to avoid this kind of problems for other users in the future.
Anyway, a million thanks!

Similar Messages

  • Why is my text in one of my text blocks in my accordion widget going vertical?

    I need a break!  Now, in my accordion widget one of the text blocks are vertical.  Or what I should say is the text looks correct but the T tool is showing that it is vertical and the menu at the top of my screen shows it's vertical.  I was trying to get rid of extra space after my wording and noticed that the vertical tool shows.  I have tried everything to get it to go back to normal text.  As soon as I click back into the text frame it reverts back to vertical.  I have wasted so much time with problems with widgets today I'm ready to give up.  Anyone know the answer?

    I was so frustrated I decided to try to delete the text box for that accordion section and start over.  It seemed to be ok now.  Now I'm having problems with anchors.  It's always something when I am working with deadlines.  Could you look at my site?  I still have a lot to do but the business catalyst site is opitsourcebook01.businesscatalyst.com.  If you go to the accordion widget on the left under "Associations and Organizations and click "Click this link" at the beginning of the paragraph it will take you to the page.  Again, very frustrated but in the menu bar with "Physicians - Pharmacists - Nurses - General" I removed all but one anchor because they would not line up.  If you click on "General" it doesn't go to where the anchor is farther down the page just right above "General Listings".  I have spent all day reviewing tutorials and I can't seem to see what I have done wrong.  Going for a run to rethink.  Thanks for your help.

  • Problem with Accordion Widget INSIDE Sliding Panel Widget

    Hello,
    perhaps I should not do this, but I nested an Accordion
    Widget inside a Sliding Panels Widget:
    - There are eight Panels.
    - Each one contains a complete Accordion.
    The sliding works fine, and so does the Accordion animation,
    but the text inside the Accordion Panel Tabs won't move along, when
    a tab is activated. I need to hover the mouse over the accordion to
    make the panel texts appear again.
    Of course, when I un-nest the widgets and move the Accordion
    widget out of the Sliding Panel widget, everything is fine.
    My question is:
    - am I demanding "too much" by nesting the widgets?
    - or should this basically work, and the problem arises from
    rivalling scripts?
    Here is a link:
    Nested
    widgets Test
    The horizontal top menu will activate the sliding panels, but
    as of now only the leftmost menu item contains an Accordion (I know
    the CSS does not look nice yet).
    Is there anything I can optimise to get this to work?
    Thank you so much,
    Greetings, Jensen
    Edit: The problem does NOT occur in Firefox, but in
    Safari.

    Hi John,
    That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
    Regards,
    Aish

  • YouTube widget making text shift

    I have a very simple page with a text box that has words and links and I often like to add a youtube video above one of the links. When I do this, the text shifts up in the browser when it loads despite it looking fine in iWeb. Is there a way to prevent this from happening? If I rarely had to do this, I would adjust accordingly and move on, but I do this quite often and it takes a lot of unnecessary time to keep moving the widget and uploading multiple times until it looks right in the major browsers.
    Chrome & Safari seem to shift the text an equal amount. Firefox is slightly different.
    Is there a way to put the youtube widget inside the text box instead of on top of it?
    Message was edited by: mnbinth

    You can turn the text box into an image by adding a drop shadow with 5% opacity. That shouldn't shift with the widget. But the text won't be available to search engines.
    Click to view full size
    OT

  • Widget Text Shifted Up

    Hello,
    The text of my widgets, the date in calendar for example, are now shifted up a bit. They can still be read, but they are too high. Other widgets are similarly affected. Anyone else see this or have a solution?
    Thanks,
    MIchael Morrison

    Just would like to say, thanks to this forum and to everyone who has been helpful to others here. I had a similar problem with my Dashboard after an Onyx Cleanup of my system and noticed my Dashboard apps with text shifted up off the baseline and made everything into outline type.
    I was about to reinstall the Dashboard until I found this thread and thanks that I did. I did turn on Helvetica Neue in the system just before the Onyx cleanup for a project so I definitely knew this thread helped me solve my issues!
    Thanks again to fellow mac users!

  • What happened to Accordion widget 'shifting' content downwards?

    With the new CC Muse upgrade, did the feature where the accordion content area would "shift" the entire contents underneath downward disappear? I see now that it only overlays any content on the page... am I missing something?

    Hello,
    Please check in Accordion Widget properties if the "Overlap Items below" option is checked or not?
    If it is checked, please uncheck it and it should  resolve the issue.
    Screenshot : http://trainingwebcom.worldsecuresystems.com/SachinFTP/2013-06-20_2130.png
    Regards,
    Sachin

  • Id like to be able to place an anchor inside the accordion widget that opens the accordion to that anchor .

    i have created a page with a very long accordion widget over 70 entries! its a staff list and the accordion rivals each persons bio. but what I need is when some clicks on a link  person name on another page I want it to go to that accordion tab and open the accordion to rival the bio

    Hi Jryan !
    If you wire a 2D array to the input of a "replace element" function, you will see that the function expand to display an additionnal index. The one you are looking for !!
    Chilly Charly    (aka CC)
             E-List Master - Kudos glutton - Press the yellow button on the left...        

  • DW Tutorial Question (Spry Accordion Widget) Beginner... :-(

    Hi, I've just finished this tutorial (http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt2.html) but have a problem with my Spry Accordion Widget, when I preview the site my footer moves when I select a different panels in the widget, I've read back and checked code/css but I still can't sus it out (Don't laugh if it's something obvious!) Please can anyone help me? I've copied code/CSS below.
    A BIG THANKS IN ADVANCE!!
    INDEX...
    <!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>The Yacht Club</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <!--[if IE 5]>
    <style type="text/css">
    /* place css box model fixes for IE 5* in this conditional comment */
    #sidebar1 { width: 230px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css">
    /* place css fixes for all versions of IE in this conditional comment */
    #sidebar1 { padding-top: 30px; }
    #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
      <div id="header"><img src="images/logo.jpg" width="290" height="144" />
        <!-- end #header -->
      </div>
      <div id="sidebar1">
        <h3>Welcome</h3>
        <ul id="nav"><li><a href="javascript:;">Home</a></li><li><a href="javascript:;">About Us</a></li><li><a href="javascript:;">Membership</a></li><li><a href="javascript:;">Our Boats</a></li><li><a href="javascript:;">Current Races</a></li><li><a href="javascript:;">Contact Us</a></li>
        </ul>
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Atlantic Ocean</div>
            <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
          </div>
    <div class="AccordionPanel">
            <div class="AccordionPanelTab">Pacific Ocean</div>
            <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab">Indian Ocean</div>
            <div class="AccordionPanelContent">Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</div>
          </div>
        </div>
        <p> </p>
      <!-- end #sidebar1 --></div>
      <div id="mainContent">
        <h1> Luxury Yachts</h1>
        <p><img src="images/sailboat.jpg" alt="Sailboat" width="136" height="310" class="fltrt" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
        <h2>Sail to the Bahamas </h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <!-- end #mainContent --></div>
    <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p>&copy; 2009 Luxury Yachts – bring a cup for the bailout</p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    MAIN CSS...
    @charset "UTF-8";
    body  {
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #FDFDFD;
    background-image: url(images/body_BG.jpg);
    background-repeat: repeat-x;
    h1, h2, h3 {
    font-weight: normal;
    color: #00583F;
    h1 {
    font-size: 140%;
    h2 {
    font-size: 130%;
    h3 {
    font-size: 120%;
    #container {
    width: 780px;
    margin: 0 auto;
    text-align: left;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-image: url(images/container_bg.gif);
    background-repeat: repeat-y;
    #header {
    background-color: #DDDDDD;
    background-image: url(images/headerBG.jpg);
    background-repeat: no-repeat;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 0px;
    #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 200px; /* the background color will be displayed for the length of the content in the column, but no further */
    padding: 15px 10px 15px 20px;
    ul#nav {
    background-image: url(images/buoy.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 153px;
    padding-left: 0px;
    list-style-type: none;
    #nav li a {
    font-size: 90%;
    color: #FFF;
    text-decoration: none;
    background-color: #09553F;
    display: block;
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #3574A7;
    #nav li a:hover, #nav li a:active, #nav li a:focus {
    color: #123464;
    background-color: #B7DAD8;
    #mainContent {
    margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    #mainContent p, #sidebar1 p, #footer p {
    font-size: 85%;
    line-height: 1.4;
    #footer {
    background-color: #00593D;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 270px;
    #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    color: #FFF;
    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    SPRY CSS...
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
    overflow: hidden;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #7C9297;
    border-bottom-color: #7C9297;
    border-left-color: #7C9297;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
    background-color: #00583F;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    color: #FFF;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #7C9297;
    border-bottom-color: #7C9297;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    height: 200px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
    background-color: #FFF;
    color: #005b3E;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    color: #AAC7CE;
    .AccordionPanelOpen .AccordionPanelTabHover {
    color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
    background-color: #00583F;
    color: #FFF;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
    background-color: #FFF;
    color: #00583F;
    Apologies in advance if I'm asking a daft question!!

    Hi,
    using your source code, I couldn't find a really inserted "Spry Accordion". If I do that (translated from german DW) > Insert > Spry > Spry Accordion, I'll find in my DW source code something like that:
      <div id="Accordion1" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Bezeichnung 1</div>
          <div class="AccordionPanelContent">Inhalt 1</div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">Bezeichnung 2</div>
          <div class="AccordionPanelContent">Inhalt 2</div>
        </div>
      </div>
    and in design view:
    Please control your DW-entries.
    Hans-G.

  • Spry Accordion Widget hiccups and more

    Hi, I am using the Spry Accordion Widget on my website and have the following problems:
    1. Is there a way for the accordion movement not to affect the images that are placed below it. For example, I have the accordion placed on top of 3 different logos. Whenever, the accordion panels move up and down (in use) all the contents (below the accordion) moves with it. I don't want the logos to move up and down whenever someone clicks on the panels. How do I make the logos stationary so its placements won't change?
    I don't want to use an ap div tag because that would force my website to be in a fix position on a page. All I have been using to position my graphics are div tags and floats; no ap div tags. If you resize the browser window you will see that my website is somewhat elastic. Meaning, the graphics are always in the center of the page regardless of the size of the browser window—this is something I want to keep.
    Please go here for better understanding: http://meinaco.net/tblLists.html
    2. When one of the accordion tab is clicked there seems to be some kind of hiccup/jump/jerky (up and down movement) before it settles/stops. Is there a way to fix that? I noticed the accordion moves up and down smoothly prior to my inserting the images into the tab panels. To be clear, the images I am referring to are the brown horizontal lines with white words on a green background. Do these images have anything to do with this problem?
    3. When the 1st tab (the restaurant panel) is open and another tab is selected, the restaurant panel displays large incorrectly styled text for a brief second as it closes to allow the other panel to open. I know it has something to do with my style sheet but I can't figure out what is causing it. I checked my css files and it seems they all have the correct size. To see this problem reoccur please do the following:
    Make sure the restaurant panel is open then click on another panel (one of the 3 panels). As you click on the second panel pay attention to the text that sits inside the restaurant panel. You will see that large minus leading text will appear for a split second.
    4. When I run my webpage (url mentioned above) on Safari 4.0.3 there seems to be a blue line outlining the whole accordion widget. This outline doesn't exist on Firefox nor on Opera. Please see attached image for clarity.
    Any suggestions or help on any of these problems is greatly appreciated! Thank you in advance.
    Meina
    I hope someone can help me resolve or give me suggestions for the 1st and 2nd problems at the very least.

    <div class="AccordionPanelContent">Castaway the: Restaurant<br />
                  1250 Harvard Rd.<br />
                  Burbank, CA 91501<br />
                  - www.castawayrestaurant.com - (818) 848-6691</p>
    Oops!
    Missing the opening <p>
    I didn't find it, the validator did.
    Martin

  • Prevent lower text from moving when accordion panels open

    I tried out the Accordion Panel from Project Seven which is
    really nice and works well. My only issue right now is that I would
    like to prevent the rest of the text outside and below this widget
    within the same column from moving. When any panel opens it causes
    the contents of the entire column to shift down thus causing the
    page to shift down as well.
    I have tried using a new div for the content below the panels
    and also a new table below but can't seem to figure out how to keep
    the content from shifting. Curently I have a table cell nested and
    have tried with CSS to keep it from moving but that is not working
    either.
    Thanks in advance for any help with this.
    Here is the code for the column in question:

    no takers on this one? Does anyone know how I could fix this
    with divs? Is it possible to put this accordion into a separate div
    and create another below it that would not move? Like on the new
    apple site...They have some really awesome accordion style navs on
    the sides that do not throw the rest of the page off when they open
    or close.
    Thanks.

  • Can you make a composition widget act like an accordion widget?

    Is it possible to make a composition widget act like an accordion widget? The reason I ask is because the styling that I can do inside of a composition widget is much more than that of a accordion widget which is just a simple text frame, makes it impossible to add images/icons where I would like to. The only work around to this is to make a .psd file with my states already predefined in it, however If I have to resize the widget for any reason I then have to go and edit the psd file vs just simple moving the items in muse.

    Hi
    How exactly you are trying to style the text or image ?
    You can insert any object or widget in accordion , add image or draw a rectangle with different states defined. You can resize while placing the image etc.
    If this is not you are looking for , then please elaborate as what specific changes you are looking for the object in accordion.
    Composition and Accordion , both are different and works differently but you can use accordion itself and make the changes to text or image anything inserted in the container.
    Thanks,
    Sanjit

  • Image Gallery with Accordion Widget.

    I have an accordion widget with link image thumbnails inside. I want to have them enlarge outside, and next to, the accordion when clicked (or hovered). I did this years ago with GoLive and can't remember how, and it's very frustrating searching the web all day when I don't know what terms to use.
    Anyone know of a simple tutorial, extension, or anything? I think I used to use a simple show/hide of layers... but it's been so long.
    Thanks.

    Hi SRK,
    Try saving following page as .html file and run it (but making certain changes to it before that)...Hope that is what you are looking at.
    1. use images and image path based on your settings
    2. I have inline style at places but that is just a short cut right now. You use external css or styles in the page <Head> only.
    3. Modify javascript to suit your behavior.
    4. Make sure your reference for Spry files (JS and CSS) are also in sync with where you save this code.
    4. Do go through the complete code to understand what is happening - In brieft here is a DIV with id ''right" used to capture the bigger images when you mouseover a thumbnail in accrodion panel. Similarly on mouseout the main image disappears (you may not need this).
    <!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>
    <style type="text/css">
    div#right {
    display:none;
    </style>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    <!--
    function showImage(obj) { //v2.0
    //alert(obj);
    document.getElementById(obj).style.display='block';
    //  return eval(obj)
    function hideImage(obj) { //v2.0
    //alert(obj);
    document.getElementById(obj).style.display='none';
    //  return eval(obj)
    //-->
    </script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <!--This DIV will contain the bigger images that keep on updating when you mouseover on thumbnails-->
    <div id="right" style="float:right;width:200px;"><img src="images/gwt.jpg" width="180" height="273" alt="large" /></div>
    <!--This is your according containing the thuumbnails-->
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent"><img src="images/logo.gif" alt="image1" width="57" height="228" style="cursor:pointer;" onmouseover="showImage('right');" onmouseout="hideImage('right');" /></div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent"><img src="images/SNT.jpg" alt="image2" width="180" height="275" style="cursor:pointer;" onmouseover="showImage('right');" onmouseout="hideImage('right');" /></div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    Regards,
    Vinay

  • HTML inserted into a MUSE accordion widget issue

    In Adobe MUSE 2014.3.1.44, I have inserted an HTML snippet into a MUSE accordion widget:
    <script type=”text/javascript” src=”https://burkeauto.workstiming.com/external/next_available_time.js”></script>
    When published all I see is the clock numbers to the top left corner of the page—no other page content and no accordion—just the unformatted clock at the top left corner.
    The snippet works fine outside the accordion widget.
    When not inside the accordion the HTML frame is normal, but as soon as I insert it into the accordion it adopts the attributes like other widgets, with the round blue icon on the top right corner of the frame and a stripped down context menu.
    Adobe chat support has duplicated this on their end and suggested that I post the issue in the forum.
    Any thoughts?

    Brad,
    Thanks for helping think this through!
    First, yes, that is the whole script. There are actually two scripts (clocks) I want on a single page:
    <script type="text/javascript" src="https://burkeauto.workstiming.com/external/next_available_time.js"></script>
    <script type="text/javascript" src="https://burkeautomall.workstiming.com/external/next_available_time.js"></script>
    They can be seen properly functioning together here:  http://www.burkeauto.com/starttimes.html
    I have been requested to put the page content from the above link in an accordion widget seen here:  http://www.burkeauto.com/genuine.html
    Click on the Light Maintenance Service tab. This is where the two scripts (clocks) are to go. Currently by clicking "CLICK HERE FOR NEXT AVAILABLE START" I am linking to page with the scripts/clocks outside the accordion.
    I tried the script/clock in the accordion and publishing the site with the Light Maintenance Service tab open—still does not work.
    As mentioned in the original post, Adobe could replicate the issue, but did not offer any resolution, and the forum has been quite on my post.
    Any other thoughts?

  • Accordion widget not pushing content down

    I followed the instructions for putting the menu inside the accordion widget. It has worked great for me in the past. But now, the menu just shows up behind the content. I've looked at several discussions, and I have everything set up correctly. No scroll effects, etc. I followed the step-by-step instructions on Lynda.com and in an earlier version of Muse it was perfect. Now it isn't. Here is the business catalyst site URL.  pitv.businesscatalyst.com. Appreciate your help.
    Carole

    Hi,
    Coud you please try the suggestion provided in the following thread
    Re: Accordion Widget is Not Moving Other Page Items Down When Expanded
    Do let me know if you have any question.

  • Accordion Widget functionality

    Hello. I need the accordion widget to activate on mouse over instead of mouse click. Is this possible? If not, is this a feature that will be added in the future?

    Thanks for the response Kin!
    I am setting up the links like you suggested, placing the
    link inside the AccordionPanelTab, however, the problem isn't
    getting the link to intercept the clicks, it's getting the link to
    perform their default action. In the SpryAccordion.js file, on line
    223, the default action of the tab's contents is being disabled.
    This means that, regardless of whether or not there is a link
    inside the tab, it will still act only as a tab (unless I'm missing
    something). The code looks like this:
    if (e.preventDefault) e.preventDefault();
    If one adds:
    e.preventDefault = false;
    before the code on line 223, the problem is solved. The
    problem with that solution is, if I go in and add that line of
    code, I have to remember that change and where it was for all
    future updates of the Spry widgets. So my question is, is there a
    way to disable preventDefault so that default actions of, in this
    case, links are enabled? Can this be done without editing the
    Accordion Widget's Javascript file?

Maybe you are looking for

  • 10.4.11 to 10.5 without a disk drive

    i have an old ppc g5 dual 1.8 that i have been using ProTolls 6.9.2 on. Been using it for years. The cd/dvd drive on this machine is no working so i created a disk image of the leopard CD and transferred it thru gigabyte ethernet cable on to the PPC'

  • My changes made in "Organize Bookmarks" used to be automatically saved, now they are NEVER saved, and not button to specify "save"

    It used to be that i could make changes such as sorting of folder bookmark listings in "organize bookmarks" and they would occur immediately in my Firefox browser. Now, for some reason, every time i make these changes in the Organize Bookmarks screen

  • Help With Netweaver Developer Studio Version

    Hi everyone I have a problem, I am doing some examples to programmer Web dynpro using netweaver developer studio, How can I know what is my Netweaver Developer Studio version? Because I have a trial version and I dont know if my version is compatible

  • 2-D Barcodes in Oracle Reports

    Hi All, I am trying to implement 2-D Barcodes on a text field in Oracle Reports 10G. Can someone please let me know how this can be acieved ? Thanks Fm

  • Leopard drivers for R2400?

    I'm wondering if anyone here knows when Epson USA plans to release an OS X 10.5 driver for the R2400? I downloaded the European version (6.1.2) from the Epson UK site, but I am not having success with it. ABW prints are darker than what I see on my c