Buttons in tabbed panels

EDIT: Nevermind, had to set flow layout for the inner panels. Thanks!
Hello, so I have an application using swing, and it has tabs that allow a user to move between different options that the program has... unfortunatly when I added the tabs and added the buttons to the tabbed pane, they are very tall, and stretched, impossible to use (if you like, I can post a pic)...
I believe I know whats wrong, and how to fix it, I just dont know how to go about doing it... am I correct in that I need to create a sub grid layout and attach that to the pane, then attach the buttons to that?
Heres the code that I believe is causing the problem...
                    JTabbedPane jtbExample = new JTabbedPane();
                    setLayout(new GridLayout(1, 1));
                  JPanel jplInnerPanel1 = createInnerPanel("Tab 1 Contains Tooltip and Icon");
                  jtbExample.addTab("One", jplInnerPanel1);
                  jtbExample.setSelectedIndex(0);
                  JPanel jplInnerPanel2 = createInnerPanel("Tab 2 Contains Icon only");
                  jtbExample.addTab("Two", jplInnerPanel2);
                  JPanel jplInnerPanel3  = createInnerPanel("Tab 3 Contains Tooltip and Icon");
                  jtbExample.addTab("Three", jplInnerPanel3);
                  JPanel jplInnerPanel4 = createInnerPanel("Tab 4 Contains Text only");
                  jtbExample.addTab("Four", jplInnerPanel4);
                  //Add the tabbed pane to this panel.
                  add(jtbExample);
          for(int x = 0; x < diceRollNumber; x++){
               dInput[x] = new JTextField(10);
               jplInnerPanel1.add(dInput[x]);
               dButton[x] = new JButton("Roll");
               dButton[x].setToolTipText("Click to roll. EX 1D4+2");
               dButton[x].addActionListener(this);
               dButton[x].setSize(10,10);
             jplInnerPanel1.add(dButton[x]);
             dOutput[x] = new JTextField(4);
             dOutput[x].setEditable(false);
             jplInnerPanel1.add(dOutput[x]);Message was edited by:
Evilsanta

Thanks for the responses. Later in the day, I found the
answer. It's an IE bug sometimes known as the guillotine bug. Guess
it's been around in IE6 for a while, but IE7 has problems with it
as well. It has to do with the float not taking up the right around
of space especially when using a hover behavior. There are some
workarounds, but the easiest was to add the following CSS to the
image tag:
position: relative
That took care of it. Don't know why, but hey, it works!
Thanks again for checking it out.
Karey Nickel
Imagine It
Digital

Similar Messages

  • Open previously viewed Tabbed Panel when using browser back button

    I have a page containing SPRY tabbed panels, and was wondering if there was a way that if a user navigates back to this page using the browser back button, the last panel viewed could remain open. Using hash tags in the URL works for Mozilla but not for IE8. Here is the sample page: http://www.davidkneale.com/wcusa/expedition_leader.html
    Does anyone know how I can get this to work in IE8?

    Perhaps you missed the announcement that Adobe is no longer investing in the development of Spry. See: http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l.
    There used to be a dedicated Spry forum, but it has been changed to read-only.
    Spry isn't exactly dead, but nor is it in the best of health. Add to that the fact that IE 8 doesn't support the HTML5 history management API, and the lack of replies isn't really surprising.

  • Switching tabbed panels on the button click

    I have a form where I am using spry tabbed panels. What I am
    trying to do is to switch to the panel 2 after I click on the next
    button of the panel 1

    The redirection works fine when I define the button as
    type=button" but what if I need the submit type. What I trying to
    od is to select value from the drop dowen and set the session
    variable and then redirect to a different tab so I can use that
    session variable

  • On a tabbed panel, I am trying to create a form, but...

    On a tabbed panel I am trying to create a form, but I am having a couple of issues.
    The coding on my form is yellow - I can't figure out what is wrong. Also, I can't see the tab on the browser, only in live view. I haven't loaded it to my site as I haven't finished it yet. I don't want to go any further, until I solve the issues I have now. Any ideas?
    thanks,
    deb
            <form id="registrationForm" name="registrationform" method="post" action="">
              <fieldset>
                <legend>Contact Information</legend>
                <span id="sprytextfield1">
                  <label>Name <span class="inforequired">*</span><br />
                    <input type="text" name="name" id="name" />
                    <br />
                  </label>
                  <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
                  <label for="businessname">(Business or Organization) Name<br />
                  </label>
                  <input type="text" name="businessname" id="businessname" />
                  <br />
                  <span class="textfieldRequiredMsg">value is required.</span></span> <span id="sprytextfield3">
                  <label for="address">Address <span class="inforequired">*</span><br />
                  </label>
                  <input type="text" name="address" id="address" />
                  <br />
                  <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield4">
                  <label for="email">City</label>
                  <span class="inforequired">*</span><br />
                  <input type="text" name="city id="city="city"" />
                  <br />
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield5">
                  <label for="province">Province</label>
                  <span class="inforequired">*</span><br />
                  <input type="text" name="province" id="province" />
                  <br />
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield6">
                  <label for="postalcode">Postal Code</label>
                  <span class="inforequired">*</span><br />
                  <input type="text" name="postalcode" id="postalcode" />
                  <br />
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield7">
                  <label for="phone">Phone Number (including area code) <span class="inforequired">*</span><br />
                  </label>
                  <input type="text" name="phone" id="phone" />
                  <br />
                  <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield8">
                  <label for="fax">Fax Number</label>
    (including area code) <br />
    <input type="text" name="fax" id="fax" />
    <br />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield9">
    <label for="email">Email Address <span class="inforequired">*</span><br />
    </label>
    <input type="text" name="email" id="email" />
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="spryconfirm1">
    <label for="emailconfirm"><br />
      Re-enter Email Address <span class="inforequired">*</span><br />
    </label>
    <input type="text" name="emailconfirm" id="emailconfirm" />
    <span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
    <p> My Interest in the Ability Axis Employment Expo is as a </p>
    <p><span id="spryradio1">
      <label>
        <input type="radio" name="RadioGroup1" value="business" id="RadioGroup1_0" />
        Business/Employer</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="nonprofit" id="RadioGroup1_1" />
        Non-Profit/Service Organizatin</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="jobseeker" id="RadioGroup1_2" />
        Job Seeker</label>
      <br />
      <label>
        <input type="radio" name="RadioGroup1" value="other)" id="RadioGroup1_3" />
        Other (please specify below)</label>
      <br />
      </span><br />
      <span id="sprytextarea1">
      <label for="contactcomments"> Comments or other information</label>
      <br />
      <textarea name="contactcomments" id="contactcomments" cols="45" rows="5"></textarea>
    </span> </p>
    </fieldset>
              <p></p>
              <fieldset>
                <legend>Booth Options</legend>
                <span id="spryselect1">
                  <label for="premierearlybird">Premiere (10 X 10)  until April 21 $375</label>
                  <span class="earlybirdpricing">Early Bird Pricing</span><br />
                  <select name="premierearlybird" id="premierearlybird">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">lease select an item.</span></span> <span id="spryselect2">
                  <label for="premierereg">Premiere (10 x 10) after April 21 $425</label>
                  <br />
                  <select name="premierereg" id="premierereg">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect3">
                  <label for="premierenpearlybird">Premiere Non-Profit (10 X 10) until April 21 $325 <span class="earlybirdpricing">Early Bird Pricing</span><br />
                  </label>
                  <select name="premierenpearlybird" id="premierenpearlybird">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect4">
                  <label for="premierenp">Premiere Non-Profit (10 X 10) after April 21 $375</label>
                  <br />
                  <select name="premierenp" id="premierenp">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect5">
                  <label for="standardregearlybird">Standard (8  X 10)  until April 21 $250 <span class="earlybirdpricing">Early Bird Pricing</span><br />
                  </label>
                  <select name="standardregearlybird" id="standardregearlybird">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect6">
                  <label for="standardreg">Standard (8 X 10)  after April 21 $300</label>
                  <br />
                  <select name="standardreg" id="standardreg">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect7">
                  <label for="standardnpearlybird">Standard Non-Profit (8 X 10)  until April 21 $200</label>
                  <span class="earlybirdpricing">Early Bird Pricing</span><br />
                  <select name="standardnpearlybird" id="standardnpearlybird">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect8">
                  <label for="standardnp">Standard Non-Profit (8 X 10) after April 21 $250<br />
                  </label>
                  <select name="standardnp" id="standardnp">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3 - please enter details in the comments box below</option>
                  </select>
                  <span class="selectRequiredMsg">Please select an item.</span></span>
    </fieldset>
              <br />
              <fieldset>
                <legend>Breakfast Tickets</legend>
                <span id="spryselect10">
                  <label for="breakfast1-5">Breakfast Tickets $40 each (up to 5 tickets)</label>
                  <br />
                  <select name="breakfast1-5" id="breakfast1-5">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect11">
                  <label for="breakfast+5">Breakfast Tickets $35.00 each (more than 5 tickets)</label>
                  <br />
                  <select name="breakfast+5" id="breakfast+5">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="10+">more than 10 (please comment below)</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect12">
                  <label for="breakfasttable">Breakfast Tickets $400 each (table of 8 plus two event hosts)<br />
                  </label>
                  <select name="breakfasttable" id="breakfasttable">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="3+">More than 3</option>
                  </select>
                  <br />
                  <br />
                  <span class="selectRequiredMsg">Please select an item.</span></span> <span id="sprytextarea2">
                  <label for="breakfastticketscomment">Additional Information about Breakfast Tickets</label>
                  <span class="textareaRequiredMsg">A value is required.</span></span>
    </fieldset>
              <br />
              <fieldset>
                <legend>Seminar Tickets</legend>
                <p>Shayn Anderson, author of Taking Pride in That Which Sets US Apart, will host a one hour seminar at 11:00 am. </p>
                <p>
                  <label for="shayn11amreg">Shayn Anderson Seminar tickets $40 each</label>
                  <br />
                  <select name="shayn11amreg" id="shayn11amreg">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="10+">more than 10</option>
                  </select>
                  <span class="selectRequiredMsg">Please select an item.</span></p>
                <p>
                  <label for="shayn11amnp">Shayn Anderson Seminar tickets (Non-Profit) $30 each</label>
                  <br />
                  <select name="shayn11amnp" id="shayn11amnp">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="10+">more than 10</option>
                  </select>
                  <span class="selectRequiredMsg">Please select an item.</span></p>
                <p>Denise Bissonnette will do a seminar presentation at 1:00 pm on the topic Being True to the Dream of Diversity. Denise's presentation will run approximately 1.5 hours. </p>
                <p>
                  <label for="denise1pmreg">Denise Bissonnette Seminar tickets $50</label>
                  each <br />
                  <select name="denise1pmreg" id="denise1pmreg">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="10+">more than 10</option>
                  </select>
                  <span class="selectRequiredMsg">Please select an item.</span></p>
                <p>
                  <label for="denise1pmnp">Denise Bissonnette Seminar tickets (Non-Profit) $40 each<br />
                  </label>
                  <select name="denise1pmnp" id="denise1pmnp">
                    <option value="0" selected="selected">Please Choose</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="10+">more than 10</option>
                  </select>
                  <span class="selectRequiredMsg">Please select an item.</span></p>
                <p><span id="sprytextarea3">
                  <label for="seminarcomments">Other Information About Seminar Tickets</label>
                  <textarea name="seminarcomments" id="seminarcomments" cols="45" rows="5"></textarea>
                </span></p>
    </fieldset>
              <br />
              <fieldset>
                <legend>Processing Information</legend>
                <span id="spryradio2">
                  <label>
                    <input type="radio" name="RadioGroup2" value="invoice" id="RadioGroup2_0" />
                    Please invoice me</label>
                  <br />
                  <label>
                    <input type="radio" name="RadioGroup2" value="printmail" id="RadioGroup2_1" />
                    I will print and mail my form with my payment</label>
                  <br />
                  <label>
                    <input type="radio" name="RadioGroup2" value="emailcreditcard" id="RadioGroup2_2" />
                    I will submit my information and provide my credit card information</label>
                  in the box below <br />
      <label>
        <input type="radio" name="RadioGroup2" value="other" id="RadioGroup2_3" />
        Other - I will provide full details below<br />
      </label>
                </span><span id="sprytextarea4"><span id="sprytextarea5">
                <label for="processingcomments"><br />
                  Further Information for Processing Registration</label>
                <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
                <span class="textareaRequiredMsg">A value is required.</span></span></span> <span id="sprytextarea6"> <span class="textareaRequiredMsg">A value is required.</span></span>
    </fieldset>
              <p>
                <input name="submit" type="submit" class="buttons" id="submit" value="Submit Information" />
                <input name="reset" type="reset" class="buttons" id="reset" value="Reset Form" />
              </p>
            </form>

    Gramps, you are always coming to my rescue.
    Okay, I loaded the page under a different name http://abilityaxis.com/test.html. Viewing the source code doesn't show the yellow.
    For demonstration purposes I copied a small amount of the text and changed the colour of what is yellow in Dreamweaver to this pinkish colour (I tried yellow but you couldn't read it)
              <form id="registrationForm" name="registrationForm1" method="post" action="">
                <fieldset>
                  <legend>Contact Information</legend>
                  <span id="sprytextfield1">
                    <label>Name <span class="inforequired">*</span><br />
                      <input type="text" name="name" id="name" />
                      <br />
                   </label>
                    <span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
                     <label for="businessname">(Business or Organization) Name<br />
                      </label>
                      <input type="text" name="businessname" id="businessname" />
    It basically goes all the way through the form.
    Any advice?
    thanks,
    deb

  • Spry Tab Panel is not working properly on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Hi
    Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
    The images have not been uploaded at all, the online CSS is the one without a link to the images
    Regards
    Adaan Pre-Media Services
    For more image editing services follow us @
    web designing services

  • Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

    Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
    Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
    And click on the "Using Spry.Utils.updateContent()"
    The 3rd example shows how to use a fade transition whenever the content changes.
    I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
    Tabs code;
    <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab">
                   <table class="Button"  >
                        <tr>
                        <td style="padding-right:0px" title ="Home">
                        <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                        </td>
                        </tr>
                   </table>
              </li>
    etc
    etc
    etc
    and the panel code:
    <div class="TabbedPanelsContent" id="Home">
         CONTENT
    </div>
    I hoped i can use the example code from the link into my tabbed panels.
    I thought this code:
    onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
    could be added to the tab code like this:
    <a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
    But the content doesnt fade...
    I know i need to change the header etc.
    The following is from the link:
    <!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" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aquo Events</title>
    <script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
    <script src="../../../includes/SpryData.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function FadeAndUpdateContent(ele, url)
    try {
         Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
              Spry.Utils.updateContent(ele, url, function() {
                        Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
    }catch(e){ alert(e); }
    -->
    </script>
    <style type="text/css">
    /* IE HACK to prevent bad rendering when fading. */
    #event { background-color: white; }
    </style>
    </head>
    So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
    Is there a way to keep my tabbed panel (or change as less as possible) and let
    A. The fade work
    B. The loading work.
    The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
    And the fading part is just because its nice...

    It doesnt show in the post but off course i changed this link;
    "data/AquoThonFrag.html"
    into;
    "javascript:TabbedPanels1.showPanel(1);"
    I must say i dont know if this even works...

  • Tabbed panels repeat region in cms displays 2nd item as a block of content

    Hi everyone, hope someone can help:
    I have a test page live
    http://aegmotorhomes.co.uk/usedtest1.php
    Problem is this-
    I have added a repeat region on my dreamweaver template
    I use Perch CMS as my management for staff to add new items for sale on this page
    I have built a tabbed panels to list the item
    On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
    My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
    I think it is to do with the ID and applies the java file only to item one, thats my guess.
    I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
    TEMPLATE
    <style type="text/css">
    #container1 {
              width: 700px;
              background-color: #E6E6E6;
              border: .1em solid #999;
              padding-top: 5px;
              padding-right: 5px;
              padding-left: 5px;
              height: auto;
              margin-bottom: 30px;
    #item_description {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.3em;
              color: #333;
              background-color: #FFF;
              height: 30px;
              border-bottom-width: .1em;
              border-bottom-style: dotted;
              border-bottom-color: #333;
              font-weight: bold;
              margin-bottom: 10px;
    #price {
              margin-top: 5px;
              float: right;
              width: 150px;
              background-color: #EAEAEA;
              border: 0.1em solid #CCC;
    .BOLDTEXT {
              font-weight: bold;
              text-align: center;
              color: #FFF;
    .BOLDTEXT_PRICE {
              color: #333;
    #engine_spec {
              float: left;
              width: 190px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: .75em;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
    #top_price {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.2em;
              color: #099;
              float: right;
              width: 150px;
              font-weight: bold;
              text-align: right;
    #top_price {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.4em;
              color: #099;
    #overview_picture {
              height: 150px;
              width: 200px;
              background-color: #CCC;
              float: left;
              margin-right: 10px;
              margin-top: 5px;
    .BOLDTEXT_blackprice {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.4em;
              color: #099;
    #smallprint {
              font-family: Arial, Helvetica, sans-serif;
              font-size: .5em;
              color: #666;
              margin-top: 2px;
    table tr td {
              font-size: 0.75em;
              font-family: Arial, Helvetica, sans-serif;
    .specwhite {
              color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1em;
              font-weight: bold;
    #reserve {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.2em;
              font-weight: bold;
              color: #FFF;
              background-color: #099;
              width: 140px;
              float: right;
              margin-top: 10px;
              padding: 5px;
              text-align: center;
              border: .1em solid #999;
    </style>
    <script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <div id="container1">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Overview</li>
          <li class="TabbedPanelsTab" tabindex="0">Description</li>
          <li class="TabbedPanelsTab" tabindex="0">Images</li>
          <li class="TabbedPanelsTab" tabindex="0">Specification</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <div id="item_description"><perch:content id="Title1" label="Title" type="text" />
              <div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
            </div>
            <div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
            <div class="engine_spec" id="engine_spec">
              <table width="100%" border="0" cellpadding="5" cellspacing="7">
                <tr>
                  <td width="35%" bgcolor="#EAEAEA">Year of Make</td>
                  <td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Current Miles</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Engine Size</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Body Colour</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Transmission</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
                </tr>
              </table>
            </div>
            <div id="price">
              <table width="150" border="0" cellspacing="9">
                <tr>
                  <td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
                  <td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
                </tr>
                <tr>
                  <td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
                  <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
                </tr>
                <tr>
                  <td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
                  <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
                </tr>
              </table>
            </div>
            <div id="reserve">Reserve Motorhome</div>
          </div>
          <div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
          <div class="TabbedPanelsContent"><table width="650" cellspacing="5">
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
    </table></div>
          <div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    .JS file
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
              this.element = this.getElement(element);
              this.defaultTab = 0; // Show the first panel by default.
              this.tabSelectedClass = "TabbedPanelsTabSelected";
              this.tabHoverClass = "TabbedPanelsTabHover";
              this.tabFocusedClass = "TabbedPanelsTabFocused";
              this.panelVisibleClass = "TabbedPanelsContentVisible";
              this.focusElement = null;
              this.hasFocus = false;
              this.currentTabIndex = 0;
              this.enableKeyboardNavigation = true;
              this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
              this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
              Spry.Widget.TabbedPanels.setOptions(this, opts);
              // If the defaultTab is expressed as a number/index, convert
              // it to an element.
              if (typeof (this.defaultTab) == "number")
                        if (this.defaultTab < 0)
                                  this.defaultTab = 0;
                        else
                                  var count = this.getTabbedPanelCount();
                                  if (this.defaultTab >= count)
                                            this.defaultTab = (count > 1) ? (count - 1) : 0;
                        this.defaultTab = this.getTabs()[this.defaultTab];
              // The defaultTab property is supposed to be the tab element for the tab content
              // to show by default. The caller is allowed to pass in the element itself or the
              // element's id, so we need to convert the current value to an element if necessary.
              if (this.defaultTab)
                        this.defaultTab = this.getElement(this.defaultTab);
              this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
              if (ele && typeof ele == "string")
                        return document.getElementById(ele);
              return ele;
    Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
              var children = [];
              var child = element.firstChild;
              while (child)
                        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                                  children.push(child);
                        child = child.nextSibling;
              return children;
    Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
                        return;
              ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
                        return;
              ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
              if (!optionsObj)
                        return;
              for (var optionName in optionsObj)
                        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                                  continue;
                        obj[optionName] = optionsObj[optionName];
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
              if (this.element)
                        var children = this.getElementChildren(this.element);
                        if (children.length)
                                  return children[0];
              return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
              var tabs = [];
              var tg = this.getTabGroup();
              if (tg)
                        tabs = this.getElementChildren(tg);
              return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
              if (this.element)
                        var children = this.getElementChildren(this.element);
                        if (children.length > 1)
                                  return children[1];
              return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
              var panels = [];
              var pg = this.getContentPanelGroup();
              if (pg)
                        panels = this.getElementChildren(pg);
              return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
              ele = this.getElement(ele);
              if (ele && arr && arr.length)
                        for (var i = 0; i < arr.length; i++)
                                  if (ele == arr[i])
                                            return i;
              return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
              var i = this.getIndex(ele, this.getTabs());
              if (i < 0)
                        i = this.getIndex(ele, this.getContentPanels());
              return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
              return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
              return Math.min(this.getTabs().length, this.getContentPanels().length);
    Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
              try
                        if (element.addEventListener)
                                  element.addEventListener(eventType, handler, capture);
                        else if (element.attachEvent)
                                  element.attachEvent("on" + eventType, handler);
              catch (e) {}
    Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
              if (e.preventDefault) e.preventDefault();
              else e.returnValue = false;
              if (e.stopPropagation) e.stopPropagation();
              else e.cancelBubble = true;
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
              this.showPanel(tab);
              return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
              this.addClassName(tab, this.tabHoverClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
              this.removeClassName(tab, this.tabHoverClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
              this.hasFocus = true;
              this.addClassName(tab, this.tabFocusedClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
              this.hasFocus = false;
              this.removeClassName(tab, this.tabFocusedClass);
              return false;
    Spry.Widget.TabbedPanels.KEY_UP = 38;
    Spry.Widget.TabbedPanels.KEY_DOWN = 40;
    Spry.Widget.TabbedPanels.KEY_LEFT = 37;
    Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
              var key = e.keyCode;
              if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
                        return true;
              var tabs = this.getTabs();
              for (var i =0; i < tabs.length; i++)
                        if (tabs[i] == tab)
                                  var el = false;
                                  if (key == this.previousPanelKeyCode && i > 0)
                                            el = tabs[i-1];
                                  else if (key == this.nextPanelKeyCode && i < tabs.length-1)
                                            el = tabs[i+1];
                                  if (el)
                                            this.showPanel(el);
                                            el.focus();
                                            break;
              return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
              var stopTraversal = false;
              if (root)
                        stopTraversal = func(root);
                        if (root.hasChildNodes())
                                  var child = root.firstChild;
                                  while (!stopTraversal && child)
                                            stopTraversal = this.preorderTraversal(child, func);
                                            try { child = child.nextSibling; } catch (e) { child = null; }
              return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
              var self = this;
              Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
              Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
              Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
              if (this.enableKeyboardNavigation)
                        // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
                        // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
                        // by default.
                        // Find the first element within the tab container that has a tabindex or the first
                        // anchor tag.
                        var tabIndexEle = null;
                        var tabAnchorEle = null;
                        this.preorderTraversal(tab, function(node) {
                                  if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
                                            var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
                                            if (tabIndexAttr)
                                                      tabIndexEle = node;
                                                      return true;
                                            if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
                                                      tabAnchorEle = node;
                                  return false;
                        if (tabIndexEle)
                                  this.focusElement = tabIndexEle;
                        else if (tabAnchorEle)
                                  this.focusElement = tabAnchorEle;
                        if (this.focusElement)
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
              var tpIndex = -1;
              if (typeof elementOrIndex == "number")
                        tpIndex = elementOrIndex;
              else // Must be the element for the tab or content panel.
                        tpIndex = this.getTabIndex(elementOrIndex);
              if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
                        return;
              var tabs = this.getTabs();
              var panels = this.getContentPanels();
              var numTabbedPanels = Math.max(tabs.length, panels.length);
              for (var i = 0; i < numTabbedPanels; i++)
                        if (i != tpIndex)
                                  if (tabs[i])
                                            this.removeClassName(tabs[i], this.tabSelectedClass);
                                  if (panels[i])
                                            this.removeClassName(panels[i], this.panelVisibleClass);
                                            panels[i].style.display = "none";
              this.addClassName(tabs[tpIndex], this.tabSelectedClass);
              this.addClassName(panels[tpIndex], this.panelVisibleClass);
              panels[tpIndex].style.display = "block";
              this.currentTabIndex = tpIndex;
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
              var tabs = this.getTabs();
              var panels = this.getContentPanels();
              var panelCount = this.getTabbedPanelCount();
              for (var i = 0; i < panelCount; i++)
                        this.addPanelEventListeners(tabs[i], panels[i]);
              this.showPanel(this.defaultTab);
    })(); // EndSpryComponent
    >CSS file
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
              position: relative;
              top: 1px;
              float: left;
              background-color: #DDD;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: sans-serif;
              font-size: small;
              font-weight: bold;
              margin-top: 0px;
              margin-right: 1px;
              margin-bottom: 0px;
              margin-left: 0px;
              padding-top: 4px;
              padding-right: 10px;
              padding-left: 10px;
              padding-bottom: 4px;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
              background-color: #CCC;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
              background-color: #FFF;
              color: #333;
              border-top-color: fff;
              border-right-color: fff;
              border-bottom-color: fff;
              border-left-color: fff;
              border-color: fff;
              outline-color: fff;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #F9F9F1;
              height: auto;
              margin-bottom: 3px;
              border: .1px solid #999;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
              overflow: hidden;
              padding: 4px;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
              background-color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 0.75em;
              color: #333;
              padding: 20px;
              clear: both;
              margin-bottom: 5px;
              height: auto;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              width: 10em;
              height: 20em;
              background-color: #EEE;
              position: relative;
              border-top: solid 1px #999;
              border-right: solid 1px #999;
              border-left: solid 1px #CCC;
              border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
              border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
              float: left;
              padding: 0px;
              width: 30em;
              height: 20em;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
    .TabbedPanelsContent {
              overflow: visible !important;
              display: block !important;
              clear:both !important;
    .TabbedPanelsTab {
              overflow: visible !important;
              display: block !important;
              clear:none !important;
              height: 100%;
    #TabbedPanels1 {
              height: auto;
              padding-top: 5px;
              background-color: #EAEAEA;
              width: 700px;
    I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
    Can anybody HELP PLEASE PLEASE

    I think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
    You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
    There are a couple of things that create the problem.
    There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
    There needs to be a constructor for each tabbed panels like
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
    var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
    Gramps

  • Spry tabbed panels, opening a tabbed panel,  problem with IE

    i've have made a site, with tabbed panels,
    all the pages are made of a template;
    everythings works fine; in Firefox and Opera,
    but only in IE when i open a tabbed panel from a menubar, the contents  is opened behind my header location;
    i've used spry 1.6.1 and spryUtils to open the tabbed panel.
    because there no other posibilty to open  a tabbed panel from my other page.
    i've tested the site on CSS and all, and i've don't get any errors.
    this site is only on our intranet, and DVD;
    so is not a online site
    i' dont have anything modified in the java script.
    just changed some minor adjustments to the CSS of the tabbed panels
    The page is containing a fixed footer and header, FOR all browsers therefore is the CSS IE hacks also.
    and all other functions work normal.
    i'm only a beginner at this
    CSS
    body,html {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    body{
        color: #000;
        background-attachment: fixed;
        background-image: url(../afbeeldingen/Sitepictures/HaupteingangPB.jpg);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 95%;
    #img2 {
        height: 2cm;
        width: 2cm;
        border:0;
    #img {
        margin-right: 10px;
        height: 3cm;
        width: 3cm;
        border:0;
    TD{
        font-family: Arial;
        font-size: 8pt;
        line-height: normal;
        vertical-align: top;
        text-align: left;
    #header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 5;
    #header-container {
        height: 120px;
        background-repeat: repeat-x;
        background-position: left bottom;
    #header {
        width: 1040px;
        margin: 0 auto;
        position: relative;
    #header-content{
        width: 1040px;
        position: relative;
        background-image: url(../afbeeldingen/Sitepictures/background.jpg);
        margin-top: 0;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
    #header ul li {
        float: left;
        margin-right: 2px;
    #container {
        width: 1040px;
        padding-top: 120px;
        padding-bottom:50px;
        background-color: #FFF;
        margin-bottom: 0px;
        left: auto;
        right: auto;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        height: auto;
        min-height:100%;
    #container a:link {
        color: #00C;
        text-decoration: none;
    #container a:visited {
        color: #F8495A;
        text-decoration: none;
    #container a:hover {
        color: #00C;
        text-decoration: underline;
    #container a:active {
        color: #00B004;
        text-decoration: none;
    #kolommaker
        width:1040px;
        background-color: #CEECAE;
        height: 100%;
        float: left;   
    #boven {
        width: 1040px;
        position: static;
        height: 180px;
        background-color: #FFF;
    #sitecontent {
        width: 1040px;
        background-color: #FFF;
        height: 100%;
    #TabbedPanels1 {
        width: 1040px;
        position: static;
        background-color: #FFF;
        height: 100%;
        float: left;
    .links, .rechts, .midden {
        height:100%;
        display: inline-table;
        background-color: #FFF;
    .links{
        float: left;
        width: 330px;
        font-size: 12px;
        padding-top: 5px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    .rechts{
        padding-top: 5px;
        float: right;
        width: 330px;
        text-align: left;
        font-size: 12px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;
    .midden{
        padding-top: 5px;
        width: 330px;
        text-align: left;
        font-size: 12px;
        margin-top: 0px;
        margin-right: auto;
        margin-left: auto;   
    #footer-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 5;
    #footer-container {
        height: 50px;
        background-image: url(../images/footer-bg.png);
        background-repeat: repeat-x;
        background-position: left bottom;
    #footer {
        width: 1040px;
        margin: 0 auto;
        position: relative;
        background: #FFF;
    #contentfooter {
        width: 1040px;
        margin-top: 0;
        margin-right: auto;
        position:relative;
        margin-bottom: 0;
        margin-left: auto;
        height:50px;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #F00;
        text-align: center;
    .leftfooter {
        float: left;
    .rightfooter {
        float: left;
    #iframe {
            height: 600px;
            min-height: 600px; }
    .result_title a:link {
        color: #00C;
        text-decoration: none;
    .result_title a:visited {
        color: #F8495A;
        text-decoration: none;
    .result_title a:hover {
        color: #00C;
        text-decoration: underline;
    .result_title a:active {
        color: #00B004;
        text-decoration: none;
    .description { font-size: 100%; color: #008000; }
    .docs {border:0;}
    .pdf {border:0;}
    .images {border:0;}
    .excell {border:0;}
    .exe {border:0;}
    .clock {
        text-align: center;
        background: #FFF;
        border: 1px solid #CCC;
        height: 20px;
        width: 175px;
        font-size: 12px;
    .clearfix {
        content:".";
        width:100%;
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    /* Hides from IE-mac \*/
    .clearfix {height: 1%;}  /* for IE/Mac */
    CSS IE hacks
    html{
        overflow: hidden;
    body{
        overflow: auto;
    #header-wrap, #footer-wrap {
        position: absolute;
    #header-container, #footer-container,{
    margin-right: 16px;
    #ie6-container-wrap {
        position: absolute;
        width: 100%;
        height:100%;
        overflow:auto;
    #TabbedPanels1 {
        position: absolute;
    .TabbedPanels {
        position: absolute;
    #boven {
        padding-top: 100px;
    #container {
        padding-top: 60px;
        height :100%;
    #sitecontent {
        height: 100%;
    #footer-wrap {
        bottom: -1px;
    #header img, #footer img
    display: block;
    Template
    <!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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Naamloos document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
    <script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
    <link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/stuHover.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
    <script type="text/javascript" src="../Scripts/paswoord.js"></script>
    <!--[if lt IE 7 ]>
    <link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <!--ZOOMSTOP-->
    <div id="header-wrap">
        <div id="header-container">
            <div id="header">
                    <div id="header-content">
                    <table width="890" border="0" cellspacing="1">
          <tr>
            <td width="100" height="50"><a href="../Sites/Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
            <td width="680">
         <span class="preload1"></span>
        <span class="preload2"></span>
            <ul id="nav">
                <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                    <ul class="sub">
                    <li><b>Alg. Procedure</b></li>
                    <li><a href="#nogo3" class="fly">Car Policy</a>
                        <ul>
                            <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                            <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Gsm Policy</a>
                        <ul>
                            <li><a href="#nogo8">Gsm Policy NL</a></li>
                            <li><a href="#nogo9">Gsm Policy FR</a></li>
                        </ul>
                    </li>
                    <li><b>Diversen</b></li>
                    <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                    <li><a href="../Sites/Verlof-Recup.html">Verlof</a></li>
                    <li><a href="../Sites/Verlof-Recup.html">Recup</a></li>
            </ul>
                </li>
                <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                    <ul class="sub">
                        <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                        <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                        <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                        <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                        <li><a href="#nogo7" class="fly">Onkostennota</a>
                        <ul>
                            <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                            <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                        </ul>
                        </li>
                        <li><a href="#nogo7" class="fly">Online Tools</a>
                        <ul>
                            <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                            <li><a href="../Sites/login.html">Online map</a></li>
                            <li><a href="../Sites/Fujitsu.html">Fujitsu Portal</a></li>
                        </ul>
                    </li>
                         <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                        <ul>
                            <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                            <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                        </ul>
                        </li>
            </ul>
        </li>
        <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
            <ul class="sub">
                <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
                <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
                <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
            <ul class="sub">
                <li><a href="../Sites/Aldi.html">Aldi</a></li>
                <li><a href="../Sites/Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
                <li><a href="../Sites/Bonita.html">Bonita</a></li>
                <li><a href="../Sites/Carrefour.html">Carrefour</a></li>
                <li><a href="../Sites/C&amp;A.html">C &amp; A</a></li>
                <li><a href="../Sites/Decathlon.html">Decathlon</a></li>
                <li><a href="../Sites/Delhaize.html">Delhaize</a></li>
                <li><a href="../Sites/Ici Paris XL.html">Ici Paris</a></li>
                <li><a href="../Sites/Ikea.html">Ikea</a></li>
                <li><a href="../Sites/Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
                <li><a href="../Sites/Kruidvat.html">Kruidvat</a></li>
                <li><a href="../Sites/Lidl.html">Lidl</a></li>
                <li><a href="../Sites/Living Tomorrow.html">Living Tomorrow</a></li>
                <li><a href="../Sites/Mediamarkt.html">Mediamarkt</a></li>
                <li><a href="../Sites/Scapino.html">Scapino</a></li>
                <li><a href="../Sites/Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
                <li><a href="../Sites/Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
            <ul class="sub">
                <li><a href="../Sites/third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
                <li><a href="../Sites/third party.html?tab=4#tabbedpanels1">HP</a></li>
                <li><a href="../Sites/third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
                <li><a href="../Sites/third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
                <li><a href="../Sites/third party.html?tab=1#tabbedpanels1">Scanners</a></li>
                <li><a href="../Sites/third party.html?tab=0#tabbedpanels1">Scales</a></li>
            </ul>
        </li>
        <li class="top"><a href="../Sites/Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
        <li class="top"><a href="../Sites/Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
    </ul>
            </td>
          </tr>
        </table>
      <table width="1038" border="0" cellspacing="1">
      <tr>
        <td><form method="get" action="../indexer/search.html">
    <input type="text" name="zoom_query" size="30" />
    <input type="submit" value="Search" />
    </form></td>
        <td> </td>
        <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
    </script></div>
    </td>
      </tr>
    </table>
             </div>
            </div>
        </div>
    </div>
    <!--ZOOMRESTART-->
    <div id="ie6-container-wrap" >
    <div id="container">   
            <!-- TemplateBeginEditable name="EditRegion1" -->
         <div id="boven">test<br />
           <br />
         </div> 
         <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Algemeen</li>
            <li class="TabbedPanelsTab" tabindex="0">Tools</li>
            <li class="TabbedPanelsTab" tabindex="0">Pc's</li>
            <li class="TabbedPanelsTab" tabindex="0">Kassa's</li>
            <li class="TabbedPanelsTab" tabindex="0">Selfscanning</li>
            <li class="TabbedPanelsTab" tabindex="0">Self Check Outs</li>
            <li class="TabbedPanelsTab" tabindex="0">EN andere</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven
                <p>Hier wordt de inhoud voor  id midden weergegeven</p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
                <p> </p>
              </div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links">Hier wordt de inhoud voor  id left weergegeven</div>
              <div class="rechts">Hier wordt de inhoud voor  id right weergegeven</div>
              <div class="midden">Hier wordt de inhoud voor  id midden weergegeven</div>
            </div>
          </div>
          <div class="clearfix:after"> </div>
    </div>
    <!-- TemplateEndEditable -->
        </div>
        <div class="clearfix:after"> </div>
      </div>
      <!--ZOOMSTOP-->
    <div id="footer-wrap">
        <div id="footer-container">
            <div id="footer">
             <div id="contentfooter"><div class="leftfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
           <div class="rightfooter"><a href="../Sites/Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    //-->
    </script>
    </body>
    </html>
    PAGE where i open the tabbed panels
    <!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"><!-- InstanceBegin template="/Templates/Naamloos-2.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Third Party</title>
    <!-- InstanceEndEditable -->
    <!-- InstanceBeginEditable name="head" -->
    <!-- InstanceEndEditable -->
    <link href="../Stijlbladen/main4.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../Stijlbladen/pro_dropdown_3.css"/>
    <script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">var params = Spry.Utils.getLocationParamsAsObject(); </script>
    <link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/stuHover.js" type="text/javascript"></script>
    <script type="text/javascript" src="../Scripts/percentageProgressBar.js"></script>
    <script type="text/javascript" src="../Scripts/paswoord.js"></script>
    <!--[if lt IE 7 ]>
    <link href="../Stijlbladen/ie6hacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <!--ZOOMSTOP-->
    <div id="header-wrap">
        <div id="header-container">
            <div id="header">
                    <div id="header-content">
                    <table width="890" border="0" cellspacing="1">
          <tr>
            <td width="100" height="50"><a href="Index.html"><img src="../afbeeldingen/Sitepictures/WN_OriginalImage.jpg" width="90" height="50"/></a></td>
            <td width="680">
         <span class="preload1"></span>
        <span class="preload2"></span>
            <ul id="nav">
                <li class="top"><a href="#nogo2" id="Algemeen" class="top_link"><span class="down">Algemeen</span></a>
                    <ul class="sub">
                    <li><b>Alg. Procedure</b></li>
                    <li><a href="#nogo3" class="fly">Car Policy</a>
                        <ul>
                            <li><a href="../Algemeen/CAR POLICY WN_dec2009.doc">Carpolicy NL</a></li>
                            <li><a href="../Algemeen/CAR POLICY WNdec2009FR.doc">Carpolicy FR</a></li>
                        </ul>
                    </li>
                    <li><a href="#nogo7" class="fly">Gsm Policy</a>
                        <ul>
                            <li><a href="#nogo8">Gsm Policy NL</a></li>
                            <li><a href="#nogo9">Gsm Policy FR</a></li>
                        </ul>
                    </li>
                    <li><b>Diversen</b></li>
                    <li><a href="../Algemeen/Skills.htm">Skills</a></li>
                    <li><a href="Verlof-Recup.html">Verlof</a></li>
                    <li><a href="Verlof-Recup.html">Recup</a></li>
            </ul>
                </li>
                <li class="top"><a href="#nogo2" id="Support" class="top_link"><span class="down">Support</span></a>
                    <ul class="sub">
                        <li><a href="../Algemeen/support/Artikellijst.xls">ArtikelLijst</a></li>
                        <li><a href="../Algemeen/support/Retail Algemeen.xls">Retail Algemeen</a></li>
                        <li><a href="../Algemeen/support/Barcodes v2-2.pdf">Barcode's ALL</a></li>
                        <li><a href="../Algemeen/support/CRM 2.2.pdf">CRM 2.2</a></li>
                        <li><a href="#nogo7" class="fly">Onkostennota</a>
                        <ul>
                            <li><a href="../Algemeen/dbourdon_1109.xls">Onkostennota NL</a></li>
                            <li><a href="../Algemeen/décompte de frais July 2009.xls">Onkostennota FR</a></li>
                        </ul>
                        </li>
                        <li><a href="#nogo7" class="fly">Online Tools</a>
                        <ul>
                            <li><a href="file://///Wincor-nixdorf/projects/BE/D34POOL/STOCK MAALBEEK/FIELD/PLOMPEN RETAIL LOC WB.xls">Stock E.Plompen</a></li>
                            <li><a href="login.html">Online map</a></li>
                            <li><a href="Fujitsu.html">Fujitsu Portal</a></li>
                        </ul>
                    </li>
                         <li><a href="#nogo7" class="fly">FAX Franchisé</a>
                        <ul>
                            <li><a href="../Algemeen/support/Fax franchisé NL4.doc">Franchisé NL</a></li>
                            <li><a href="../Algemeen/support/Fax franchisé FR4.doc">Franchisé FR</a></li>
                        </ul>
                        </li>
            </ul>
        </li>
        <li class="top"><a href="#nogo22" id="Contacts" class="top_link"><span class="down">Contacts</span></a>
            <ul class="sub">
                <li><a href="../Algemeen/contacts/technician.pdf">Retail Tech</a></li>
                <li><a href="../Algemeen/contacts/telretail.xls">Tel Ret/Helpdesk</a></li>
                <li><a href="../Algemeen/contacts/Telefoonlijst WN + WNS.xls">Tel WN/WNS</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo27" id="Klanten" class="top_link"><span class="down">Klanten</span></a>
            <ul class="sub">
                <li><a href="Aldi.html">Aldi</a></li>
                <li><a href="Little Customers.html?tab=0#tabbedpanels1">Belgique Loisirs</a></li>
                <li><a href="Bonita.html">Bonita</a></li>
                <li><a href="Carrefour.html">Carrefour</a></li>
                <li><a href="C&amp;A.html">C &amp; A</a></li>
                <li><a href="Decathlon.html">Decathlon</a></li>
                <li><a href="Delhaize.html">Delhaize</a></li>
                <li><a href="Ici Paris XL.html">Ici Paris</a></li>
                <li><a href="Ikea.html">Ikea</a></li>
                <li><a href="Little Customers.html?tab=3#tabbedpanels1">Koodza</a></li>
                <li><a href="Kruidvat.html">Kruidvat</a></li>
                <li><a href="Lidl.html">Lidl</a></li>
                <li><a href="Living Tomorrow.html">Living Tomorrow</a></li>
                <li><a href="Mediamarkt.html">Mediamarkt</a></li>
                <li><a href="Scapino.html">Scapino</a></li>
                <li><a href="Little Customers.html?tab=2#tabbedpanels1">Takko</a></li>
                <li><a href="Little Customers.html?tab=1#tabbedpanels1">Texto</a></li>
            </ul>
        </li>
        <li class="top"><a href="#nogo63" id="ThirdParty" class="top_link"><span class="down">3th Party</span></a>
            <ul class="sub">
                <li><a href="third party.html?tab=5#tabbedpanels1">Fujitsu Siemens</a></li>
                <li><a href="third party.html?tab=4#tabbedpanels1">HP</a></li>
                <li><a href="third party.html?tab=6#tabbedpanels1">Datalogic</a></li>
                <li><a href="third party.html?tab=7#tabbedpanels1">Vensafe</a></li>
                <li><a href="third party.html?tab=1#tabbedpanels1">Scanners</a></li>
                <li><a href="third party.html?tab=0#tabbedpanels1">Scales</a></li>
            </ul>
        </li>
        <li class="top"><a href="Wincor-Nixdorf materiaal.html" id="WN-Material" class="top_link"><span>WN-Material</span></a></li>
        <li class="top"><a href="Technician tools.html" id="Techtools" class="top_link"><span>Techtools</span></a></li>
    </ul>
            </td>
          </tr>
        </table>
      <table width="1038" border="0" cellspacing="1">
      <tr>
        <td><form method="get" action="../indexer/search.html">
    <input type="text" name="zoom_query" size="30" />
    <input type="submit" value="Search" />
    </form></td>
        <td> </td>
        <td><div class="clock"><script type="text/javascript" language="javascript" src="../Scripts/datetime.js">
    </script></div>
    </td>
      </tr>
    </table>
             </div>
            </div>
        </div>
    </div>
    <!--ZOOMRESTART-->
    <div id="ie6-container-wrap" >
    <div id="container">   
            <!-- InstanceBeginEditable name="EditRegion1" -->
    <div id="boven"><img src="../afbeeldingen/Sitepictures/Datalogic_logo.jpg" alt="Datalogic" name="img2" width="100" height="100" id="img2" /> <img src="../afbeeldingen/Sitepictures/PSC-Logo4C.jpg" alt="PSC" name="img2" width="450" height="160" id="img2" /> <img src="../afbeeldingen/Sitepictures/NCRlogo.jpg" alt="NCR" name="img2" width="116" height="116" id="img2" /> <img src="../afbeeldingen/Sitepictures/symbol-logo.jpg" alt="Symbol" name="img2" width="200" height="150" id="img2" /></div>
        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">kassascanners</li>
            <li class="TabbedPanelsTab" tabindex="0">Handscanners</li>
            <li class="TabbedPanelsTab" tabindex="0">Scales</li>
            <li class="TabbedPanelsTab" tabindex="0">Kassaprinters</li>
            <li class="TabbedPanelsTab" tabindex="0">HP</li>
            <li class="TabbedPanelsTab" tabindex="0">Fujitsu-Siemens</li>
            <li class="TabbedPanelsTab" tabindex="0">Datalogic</li>
            <li class="TabbedPanelsTab" tabindex="0">Vensafe</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
               <div class="links"></div>
              <div class="rechts"></div>
             <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
               <div class="rechts"></div>
              <div class="midden"></div>
            </div>
           <div class="TabbedPanelsContent">
              <div class="links"></div>
              <div class="rechts"></div>
              <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links"></div>
              <div class="rechts"></div>
              <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
              <div class="links"></div>
              <div class="rechts"></div>
              <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
             <div class="rechts"></div>
            <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
             <div class="rechts"></div>
            <div class="midden"></div>
            </div>
            <div class="TabbedPanelsContent">
             <div class="links"></div>
             <div class="rechts"></div>
            <div class="midden"></div>
            </div>
          </div>
           <div class="clearfix:after"> </div>
        </div>
    <!-- InstanceEndEditable -->
        </div>
        <div class="clearfix:after"> </div>
      </div>
      <!--ZOOMSTOP-->
    <div id="footer-wrap">
        <div id="footer-container">
            <div id="footer">
             <div id="contentfooter"><div class="leftfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/Homebutton.gif" width="40" height="40" border="none" /></a></div>
           <div class="rightfooter"><a href="Index.html"> <img src="../afbeeldingen/Sitepictures/mail_button.gif" border="none" /></a></div>RELEASE CANDITATE VERSIE 3 BUILD 27041002 </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    //-->
    </script>
    </body>
    <!-- InstanceEnd --></html>
    TABBED PANELS CSS
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
        width: 1040px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
        position: static;
        float: left;
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
        position: static;
        top: 1px;
        float: left;
        font: bold 0.7em sans-serif;
        background-color: #FF0033;
        list-style: none;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #999;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        -moz-user-select: none;
        -khtml-user-select: none;
        cursor: pointer;
        margin-top: 0px;
        margin-right: 1px;
        margin-bottom: 0px;
        margin-left: 0px;
        padding-top: 4px;
        padding-right: 5px;
        padding-bottom: 4px;
        padding-left: 5px;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
        background-color: #75A7D0;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
        border-bottom: 2px solid #EEE;
        color: #FFF;
        background-color: #000;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
        color: black;
        text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
        clear: both;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        float: left;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
        padding: 4px;
        height: 100%;
        width: 1032px;
        float: left;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
        background-color: #FFF;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
        float: left;
        width: 10em;
        height: 20em;
        background-color: #CCC;
        position: relative;
        border-top: solid 1px #999;
        border-right: solid 1px #999;
        border-left: solid 1px #CCC;
        border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
        float: none;
        margin: 0px;
        border-top: none;
        border-left: none;
        border-right: none;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
        background-color: #EEE;
        border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
        clear: none;
        float: left;
        padding: 0px;
        width: 30em;
        height: 20em;

    added also the css for the menubar
    pro_dropdown_3.css
    .preload1 {
        background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
    .preload2 {
        background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
    #nav {
        padding:0;
        margin:0;
        list-style:none;
        height:38px;
        position:relative;
        z-index:500;
        font-family:arial, verdana, sans-serif;
        background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
        background-repeat: repeat-x;
    #nav li.top {
        display:block;
        float:left;
        width: auto;
    #nav li a.top_link {
        display:block;
        float:left;
        height:35px;
        line-height:33px;
        color:#ccc;
        text-decoration:none;
        font-size:11px;
        font-weight:bold;
        cursor:pointer;
        background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
        width: 85px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 2px;
    #nav li a.top_link span {
        float:left;
        display:block;
        height:35px;
        background-image: url(../afbeeldingen/Sitepictures/three_0.gif);
        background-repeat: no-repeat;
        background-position: right top;
        width: 70px;
        padding-top: 0;
        padding-right: 10px;
        padding-bottom: 0;
        padding-left: 10px;
    #nav li a.top_link span.down {
        float:left;
        display:block;
        padding:0 10px 0 12px;
        height:35px;
        background-image: url(../afbeeldingen/Sitepictures/three_0a.gif);
        background-repeat: no-repeat;
        background-position: right top;
    #nav li:hover a.top_link {
        color:#fff;
        background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
        background-repeat: no-repeat;
    #nav li:hover a.top_link span {
        background-image: url(../afbeeldingen/Sitepictures/three_1.gif);
        background-repeat: no-repeat;
        background-position: right top;
    #nav li:hover a.top_link span.down {
        padding-bottom:3px;
        background-image: url(../afbeeldingen/Sitepictures/three_1a.gif);
        background-repeat: no-repeat;
        background-position: right top;
    /* Default list styling */
    #nav li:hover {position:relative; z-index:200;}
    #nav li:hover ul.sub
    {left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
    #nav li:hover ul.sub li
    {display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
    #nav li:hover ul.sub li a
    {display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
    #nav li ul.sub li a.fly
        background-color: #50b5d0;
        background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;
    #nav li:hover ul.sub li a:hover
    {background:#3f96a9; color:#fff; border-color:#fff;}
    #nav li:hover ul.sub li a.fly:hover
        color:#fff;
        background-color: #3f96a9;
        background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;
    #nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}
    #nav li:hover li:hover ul,
    #nav li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover ul,
    #nav li:hover li:hover li:hover li:hover li:hover ul
    {left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
    #nav ul,
    #nav li:hover ul ul,
    #nav li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover ul ul,
    #nav li:hover li:hover li:hover li:hover ul ul
    {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    #nav li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover a.fly,
    #nav li:hover li:hover li:hover li:hover li:hover a.fly
        color:#fff;
        border-color:#fff;
        background-color: #3f96a9;
        background-image: url(../afbeeldingen/Sitepictures/arrow_over.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;
    #nav li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li a.fly,
    #nav li:hover li:hover li:hover li:hover li a.fly
        color:#000;
        border-color:#50b5d0;
        background-color: #50b5d0;
        background-image: url(../afbeeldingen/Sitepictures/arrow.gif);
        background-repeat: no-repeat;
        background-position: 80px 6px;

  • Embedding more than one google map in a tabbed panel

    Hi, I wonder if anyone knows if this is possible.  I am building google maps in  business catalyst and what I want to do is add multiple maps into my muse site.  For example, restaurants on one map, coffee shops on another, local produce on another.  Does anyone know if this is possible? Each time I try and enter the snippet of code I get to add to muse from business catalyst it is fine if I just enter on blank page, but when I try and enter the html in the tabbed panel it doesnt work.  Does anyone know of a solution ? I would really appreciate any feedback, Michele

    Strange to be the first to reply to my own question but here goes, it may help someone with similar woes. I had been following the wiring colour code stringently. That being GREEN=FRONT, BLACK=REAR and ORANGE=SUBWOOF/CENTRE.
    After clicking the Universal audio jack button on the realtek sound manager C.P and manually setting the blue port to be rear I took the Jack for my rear channels that had been in the BLACK port, and plugged it to the BLUE. I then tested all the speakers and "VOILA" every speaker channel works.
    Im somewhere between NOOB and have to fix all my familys PC problems because they know even less than I do. Not sure what that makes me, a bit of a chancer probably, who gets lucky more than anything, anyway I can only guess that there is a problem with the onboard "BLACK" port. In saying that I have just came from a 2.1 setup for front and built in flat panel srs monitor speakers for rear, all this was setup as quadrophonic and as I recall the Black port worked fine whenever I used it as the rear channel. So anyway its working, Im not sweating too much about the whys and how comes. I am a little concerned about the 6700 reputation for a certain volume controller inner part burning out (TRANSISTOR)? I think is the culprit. Anyway I will deal with that if and when the time arises. Only 2 months left on my warranty and my speakers have been sat doing nothing for over 6 months maybe more so I should get some life out of them, fingers crossed.

  • Spry Validation in Tabbed Panel

    I've created a form that has a number of sections which I
    have separated out using a spry tabbed panel. So far, so good.
    On one of the panels, however, is a select box that is
    required, so I have used a spry validation widget to look after it.
    Now, if the select box hasn't been used then and the submit button
    is clicked while one of the other panels is open, because the
    validation widget halts the form it makes it look as though nothing
    has happened. The warning message is only visible when the correct
    panel is open.
    My question is this: how do I either (a) force the panel with
    the error on to reopen or (b) make the error message show up
    elsewhere on the page so that it is visible? I tried positioning it
    absolutely above the whole panel but it still only shows up when
    the relevant panel is oen.

    I have actually added multiple tabbed panels inside of tabbed
    panels as well as collapsible panels inside of tabbed panels and
    vise versa. This works across all browsers (IE 6 & 7, FF 2,
    Safari 2 & 3).
    The key for me was to use <div style="clear: both"> (I
    put a comment here to satisfy IE6) </div> at the bottom of
    the tab, before the closing of the tab since I was using a lot of
    floating within the tabbed panels.
    If you share some code, I'm sure someone could give you a
    more specific answer.

  • Using Srpy tabbed panels with slidding panels

    I am very new to spry and so I am still just figuring it all
    out. How I found it was I wanted a tabbed panel like the one on the
    IBM website. Anyway, I am trying to
    use the tabbed panels with the sliding panels and it just does not
    seem to be working. I found
    this
    tutorial and followed the codes but it still only works as just the
    tabbed panels - nothing has changed at all. Can someone tell me
    what I might be doing wrong? I am attaching both my html and css
    code for you to inspect.
    HTML 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="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
    type="text/javascript"></script>
    <link
    href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
    rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><a
    href=”#Tab1″>Tab 1</a></li>
    <li class="TabbedPanelsTab" tabindex="0"><a
    href=”#Tab1″>Tab 2</a></li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
    </script>
    </body>
    </html>
    css code to follow in post below - too many characters.

    and here is the css code
    CSS Code
    @charset "UTF-8";
    /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab
    buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container.
    For our
    * default style, this container does not contribute anything
    visually,
    * but it is floated left to make sure that any floating or
    clearing done
    * with any of its child elements are contained completely
    within the
    * TabbedPanels container, to minimize any impact or
    undesireable
    * interaction with other floated elements on the page that
    may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels
    widget, set a
    * width on the TabbedPanels container. By default, the
    TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this
    selector is not
    * necessary to make the widget function. You can use any
    class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded
    by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup
    container houses
    * all of the tab buttons for each tabbed panel in the
    widget. This container
    * does not contribute anything visually to the look of the
    widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in
    this selector is not
    * necessary to make the widget function. You can use any
    class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This
    container houses
    * the title for the panel. This is also the tab "button"
    that the user clicks
    * on to activate the corresponding content panel so that it
    appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1
    pixel down from
    * where it wold normally render. This allows each tab to
    overlap the content
    * panel that renders below it. Each tab is rendered with a 1
    pixel bottom
    * border that has a color that matches the top border of the
    current content
    * panel. This gives the appearance that the tab is being
    drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this
    selector is not
    * necessary to make the widget function. You can use any
    class name you want
    * to style this tab container.
    .TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    /* This selector is an example of how to change the appearnce
    of a tab button
    * container as the mouse enters it. The class
    "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as
    the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
    background-color: #CCC;
    /* This selector is an example of how to change the
    appearance of a tab button
    * container after the user has clicked on it to activate a
    content panel.
    * The class "TabbedPanelsTabSelected" is programatically
    added and removed
    * from the tab element as the user clicks on the tab button
    containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are
    positioned
    * 1 pixel down from where it would normally render. When the
    tab button is
    * selected, we change its bottom border to match the
    background color of the
    * content panel so that it looks like the tab is part of the
    content panel.
    .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: 1px solid #EEE;
    /* This selector is an example of how to make a link inside
    of a tab button
    * look like normal text. Users may want to use links inside
    of a tab button
    * so that when it gets focus, the text *inside* the tab
    button gets a focus
    * ring around it, instead of the focus ring around the
    entire tab.
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    /* This is the selector for the ContentGroup. The
    ContentGroup container houses
    * all of the content panels for each tabbed panel in the
    widget. For our
    * default style, this container provides the background
    color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in
    this selector is
    * not necessary to make the widget function. You can use any
    class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    background-color: #EEE;
    /* This is the selector for the Content panel. The Content
    panel holds the
    * content for a single tabbed panel. For our default style,
    this container
    * provides some padding, so that the content is not pushed
    up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this
    selector is
    * not necessary to make the widget function. You can use any
    class name you
    * want to style the Content container.
    .TabbedPanelsContent {
    padding: 4px;
    /* This selector is an example of how to change the appearnce
    of the currently
    * active container panel. The class
    "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element
    as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules
    above so that the
    * TabbedPanels widget renders with its tab buttons along the
    left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will
    have to be made
    * to switch a horizontal tabbed panels widget to a vertical
    tabbed panels
    * widget, is to use the "VTabbedPanels" class on the
    top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons
    it contains
    * render to the left of the active content panel. A border
    is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed
    on each tab button
    * by the default TabbedPanelsTab selector rule above. It
    also draws a bottom
    * border for the tab. The tab button will get its left and
    right border from
    * the TabGroup, and its top border from the TabGroup or tab
    button above it.
    .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    /* This selector disables the float property that is placed
    on each tab button
    * by the default TabbedPanelsTab selector rule above. It
    also draws a bottom
    * border for the tab. The tab button will get its left and
    right border from
    * the TabGroup, and its top border from the TabGroup or tab
    button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so
    that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
    /* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
    and CSS Sprites */
    /* Revision by Craig Malcolm Petrou of CPMMUG.com */
    .TabbedPanels {
    margin: 10px 0 5px 0;
    .TabbedPanelsTab {
    font-weight: bold;
    font-size: 100%;
    background-color: #FFF;
    border: solid 0 #FFF;
    .TabbedPanelsTabHover {
    background-color: #FFF;
    .TabbedPanelsTabSelected {
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
    position: relative;
    .TabbedPanelsContentGroup {
    background-color: #FFF;
    ul.TabbedPanelsTabGroup a {
    display: block;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
    background: url(/images/brown.png) no-repeat 0 0;
    margin: 0 0 0 -1px;
    padding: 0 0 0 10px;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
    background: url(/images/brown.png) no-repeat 100% 0;
    padding: 7px 10px 5px 0;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
    background: url(/images/brown.png) no-repeat 0 -41px;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
    background: url(/images/brown.png) no-repeat 100% -41px;
    /* END: Spry Horizontal Tabbed Panels meets Sliding Door and
    CSS Sprites */
    Also - is there a way to get rounded corners on the tabs in
    spry? Any good tutorials I can follow about spry - more
    specifically about using widgets and effects together.
    Thanks so much

  • Sliding panel inside tabbed panel - onclick both

    I have two tabbed panels, tab one has a sliding panel function in it with 5 panels. I am wondering that when you are in tab 2 that you can have a button that clicks to tab 1 AND to sliding panel 3 at the same time? I can make them work independently, but can't get it to accomplish both. I don't have a site that I can post but I could dummy one up if that would help.
    OK I have another scenario as well....
    You are on tab 1, sliding panel 4 and then go to tab 2. When you go back to tab 1 it holds the sliding panel 4 active. Is there a way that when you go back to tab 1 and it to default back to sliding panel 1? Basically I don't want it to hold the position of sliding panel 4 on tab 1.

    Try this and adapt to your needs:
    <!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>Document sans nom</title>
    <script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
    <script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
    <link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style>
    .SlidingPanels {
       position: relative;
       width: 200px;
       height: 200px;
       padding: 0px;
    .SlidingPanelsContentGroup {
       position: relative;
       height:600px;
       margin: 0px;
       padding: 0px;
    .SlidingPanelsContent {
       width: 100%;
       height: 400px;
       overflow: hidden;
       margin: 0px;
       padding: 0px;
    </style>
    </head>
    <body>
    <a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Contenu 1
          <a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
          <a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
          <a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
             <div id="slidingPanel_1" class="SlidingPanels">
                  <div class="SlidingPanelsContentGroup">
                     <div id="content1" class="SlidingPanelsContent">The Content 1</div>
                <div id="content2" class="SlidingPanelsContent">The Content 2</div>
                <div id="content3" class="SlidingPanelsContent">The Content 3</div>
            </div>
          </div>
        </div>
        <div class="TabbedPanelsContent">Contenu 2</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    Spry.Utils.addLoadListener(function() {
            Spry.$$("#trigger1").addEventListener('click', function() {
                TabbedPanels1.showPanel(0);
                sp1.showPanel(2);
            }, false);
            Spry.$$("#trigger2").addEventListener('click', function() {
                //TabbedPanels1.showPanel(0);
                sp1.showPanel(0);
            }, false);           
    </script>
    </body>
    </html>
    You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
    Xav

  • Tabbed Panels - Returning to last "active" tab?

    Let's say I have 4 tabbed panels and a user is currently on Tab 2.  Upon submitting a form (that spans all four panels), what's the best method to bring them back to the tab they were on when they clicked the submit button - in this case Tab 2?

    labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
    (see bottom example)
    and:
    http://foundationphp.com/tutorials/spry_url_utils.php

  • Tabbed Pannel inside a tabbed panel..

    Any one able to get this to work, it renders OK, but the tabbes are not clickcable...
    http://video360-node2.world-television.com/CCOH/concept_v2.html?siteID=SmWpHNYUbcA%3d&stor yID=129&Language=en-GB&Asset=2059#2044
    Click on the preview button on the assets below to see the red tabbed pannel not working..
    Please Help?
    Thanks

    I was working on a solution for your first post, then I saw your second post with a completely different tabbed panel.
    Because I wasn't sure which way you wanted to go, I thought I would continue with the second option.
    Try the following taking special not of the red coloured modifications
    <div id="TabbedPanels2">
      <h2>Tab 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. Phasellus blandit ullamcorper dignissim. In rutrum, ante non congue fermentum, metus odio bibendum elit, ut congue sapien arcu ac justo. Vivamus sit amet erat nibh, quis dignissim libero. Pellentesque in sapien felis, et volutpat eros. Maecenas adipiscing, eros sit amet placerat cursus, arcu lacus consectetur lectus, non ultricies neque urna laoreet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
      <h2>Tab 2</h2>
      <p>
      </p>
      <div id="TabbedPanels2_2">
        <h3>Tab 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. Phasellus blandit ullamcorper dignissim. In rutrum, ante non congue fermentum, metus odio bibendum elit, ut congue sapien arcu ac justo. Vivamus sit amet erat nibh, quis dignissim libero. Pellentesque in sapien felis, et volutpat eros. Maecenas adipiscing, eros sit amet placerat cursus, arcu lacus consectetur lectus, non ultricies neque urna laoreet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
        <h3>Tab 2</h3>
        <p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. Pellentesque quis libero nec orci porttitor faucibus vitae in velit. Pellentesque dignissim sem ut justo interdum id egestas tellus fringilla. Vestibulum tempor, turpis eget dignissim luctus, est erat ultricies turpis, non tempus massa elit in nulla. Sed eu arcu vel enim laoreet hendrerit at vel enim. Integer semper malesuada sem quis porttitor.</p>
        <h3>Tab 3</h3>
        <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. In accumsan consectetur ante a vestibulum. Phasellus eu nulla et lectus tincidunt porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mauris massa, venenatis ut fringilla interdum, imperdiet et neque. Sed ut risus metus.</p>
      </div>
      <script type="text/javascript">
    // BeginOAWidget_Instance_2138522: #TabbedPanels2_2
            var TabbedPanels2_2 = new Spry.Widget.TabbedPanels2("TabbedPanels2_2", {
                injectionType: "replace",
                widgetID: "TabbedPanels2_2",
                autoPlay: true,
                defaultTab: 0,
                tabSelector: "h3",
                enableKeyboardNavigation: true,
                hideHeader: true,
                tabsPosition: "top",
                event:"click",
                stopOnUserAction: true,
                displayInterval: 5000,
                minDuration: 300,
                maxDuration: 500,
                stoppedMinDuration: 100,
                stoppedMaxDuration: 200,
                plugIns:[]
    // EndOAWidget_Instance_2138522
      </script>
      <p></p>
      <h2>Tab 3</h2>
      <p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. In accumsan consectetur ante a vestibulum. Phasellus eu nulla et lectus tincidunt porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mauris massa, venenatis ut fringilla interdum, imperdiet et neque. Sed ut risus metus.</p>
    </div>
    <script type="text/javascript">
    // BeginOAWidget_Instance_2138522: #TabbedPanels2
            var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
                injectionType: "replace",
                widgetID: "TabbedPanels2",
                autoPlay: true,
                defaultTab: 0,
               tabSelector: "h2",
                enableKeyboardNavigation: true,
                hideHeader: true,
                tabsPosition: "top",
                event:"click",
                stopOnUserAction: true,
                displayInterval: 5000,
                minDuration: 300,
                maxDuration: 500,
                stoppedMinDuration: 100,
                stoppedMaxDuration: 200,
                plugIns:[]
    // EndOAWidget_Instance_2138522
    </script>
    I hope this helps.
    Ben

  • Google Analytics on Spry Tabbed Panels

    I have created a website where I am using a few main html pages and have vertical Spry Tabbed panels for sections of information within most of the pages.  I wish to track the clicks on the vertical Tabbed panels, but I am not having much luck implementing it.  I could probably figure it out if I saw an example somewhere.  I have also implemented a "back button" feature (thanks to Arnout Kazemier!) and clicking to go directly to a tab on a page using the SpryUtils into the default tab option for Spry Tabbed Panels.  The Google Analytics web pages have information on gadget tracking, and one on tracking AJAX,  and one on using the newer asynchronous tracking (which is supposed to be better for Ajax, etc).   I have tried to implement asynchronous tracking along with the "Tracking AJAX" recommendation by Google with no information being posted in a couple of days.
    My website page where I have tried to implement it is here:
    http://www.phostech.com/opt_con_v2.html
    I have also seen examples where a counter is used just to count, but I would like the information on which pages were clicked.
    I would rather not do this using the event tracking (but if that's the only way I'm OK), partly because the event tracking would be separate from the page tracking and the other features woudn't be as useful (exit page, sorting based on content, etc.).
    I am not a great programmer, but I could probably manage it I saw an example close enough to what I need.
    If anyone has any ideas, solutions, implemented examples that could help me, I would greatly appreciate it.
    Thanks!

    I have checked out your page using Firefox, firebug net panel that monitors requests from and to your page. And i do see a successful call to the google servers. But I also noticed a JavaScript error on your page caused by these lines of code:
      http_request.onreadystatechange = sendAlert;
           http_request.open('GET', url, true);
           http_request.send(null);
    You might want to remove those.

Maybe you are looking for

  • Problem of Updates with mac OS 10.9

    I bought the elearning suite less then 10 months ago and when I updated to Mac OS 10.9 (maverick), captivate stopped running.  When will the patch be ready?

  • Display bug

    the native resloution 1400x900 on my MBA 13' have disappear since i migrate to OSX LION. the max resolution avalaible is 1280 x 800 !

  • Cron job emCCR after installed OBI11.1.1.5.0

    OBIEE 11.1.1.5.0 on Rdhat 5.2. After installation saw a cron job created0,15,30,45 * * * * ORACLE_CONFIG_HOME=/u01/app/obi11115/instances/obi11_dev /u01/app/obi11115/Oracle_BI1/ccr/bin/emCCR -cron -silent start emCCR appears to be Configuration Manag

  • CS3 and CS5.5 side-by-side installation

    Hi there This question has probably been asked before, but I couldn't find it just now. I have been happy with PP3 for a long time. Considering upgrade to CS5.5 and downloading "try before you buy" - wondered if any conflicts would arise if I install

  • Moving Final Cut Studio to another computer

    I just got a new G5 and want to take my Final Cut Studio off my Power Book G4 and put it on the G5 and then instal Final Cut Express on the Power Book. Can I transfer the license to another computer and if so how is my question. Thank you for your ti