Tabindex question

How do you make the tabindex work on menu/list form items?  When I tab through the form it skips the
menu/list questions and goes to the next form field.

I have just tested the following form in Firefox and IE8:
<form id="form1" name="form1" method="post" action="">
  <p>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" tabindex="10" />
  </p>
  <p>
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" tabindex="20" />
  </p>
  <p>
    <label for="state">State:</label>
    <select name="state" id="state" tabindex="30">
      <?php
do { 
?>
      <option value="<?php echo $row_getStates['abbreviation']?>"><?php echo $row_getStates['state_name']?></option>
      <?php
} while ($row_getStates = mysql_fetch_assoc($getStates));
  $rows = mysql_num_rows($getStates);
  if($rows > 0) {
      mysql_data_seek($getStates, 0);
       $row_getStates = mysql_fetch_assoc($getStates);
?>
    </select>
  </p>
  <p>
    <input type="submit" name="send" id="send" value="Submit" tabindex="40" />
  </p>
</form>
Tabbing through the form takes you to Name, Address, and then State. When you hit State, the down arrow key iterates through the states.
It certainly works in those two browsers on Windows. Perhaps your problem is with a different browser.

Similar Messages

  • Question about Spry Collapsible Panel

    Hey guys my question is that I have a PSD sliced and imported into Dreamweaver and I was wondering if it was possible to have a Spry Collapsible Panel drop down from a button I designed in Photoshop and brought into dreamweaver? Basically I want a content area to drop down when that button is clicked and I figured a Spry Collapsible Panel might be able to accomplish that. I hope I'm explaining this clearly enough, I'm not very experienced with Dreamweaver. Thanks!

    Definitely possible.
    You should first import the image into DW.
    Insert > Spry > Spry Collapsible Panel
    It'll insert a demo panel.
    You'll then have to move your image <img src..> into the default first div under spry collapsible as follows:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
      <div class="CollapsiblePanelContent">Content</div>
    </div>
    You'll basically be removing 'TAB' from here to replace it with your img src tag.
    Your HTML should look like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collapsible Test</title>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
      <div class="CollapsiblePanelContent">Content</div>
    </div>
    <script type="text/javascript">
    <!--
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    //-->
    </script>
    </body>
    </html>
    Do note that you'll have to copy the supporting spry files to your server for this to work. By default, DW will place them into your project folder once you insert the spry collapsible panel.

  • Spry Accordian Tabs Question

    Hi
    I'm trying to create a spry accordian menu for a navbar and am having some trouble.
    This is the first time I've tried it so I would appreciate any help.
    The Client would like the tabs to be:
    Home
    Students
       High School Students
       College Students
    Professionals
    Parents/Educators
    Seminars
    Bio
    Q  & A Blog
    Testimonials
    So all they would like High School Students and College Students to be child tabs underneath the parent tabs and all other tabs to be parent tabs.
    They asked for a spry accordian.
    They want the nav bar to be on the left.
    Here is the link to the website online:
    http://www.elynncohen.com/index2spry2.html#
    and here are my questions:
    1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
    2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
    3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
    4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
    Any help would be much appreciated!
    Thanks!!!
    Here is my code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Your Career Direction Career and College Counseling</title>
    <meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
    <meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
    "In-transition and considering new opportunities"
    "Seeking to make a significant and meaningful career change"  />
    <meta name="Publisher" content="Your Career Direction, LLC" />
    <meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
    <meta name="Author" content="Lisa Mark" />
    <meta name="Language" content="en-US" />
    <meta name="distribution" content="global" />
    <meta name="revisit-after" content="10 days" />
    <meta name="Robots" content="All" />
    <link rel="Index" href="index.html" />
    <link rel="Site Map" href="sitemap.html" />
    <script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 0;
        color: #000;
        font-size: 100%;
        line-height: 1.4;
        background-image: url(images/background.gif);
        background-repeat: repeat;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px;
    .container .sidebar1 h3 {
        padding-left: 0px;
        color: #C60651;
        font-size: x-large;
    h1 strong {
        color: #C60651;
        font-size: 90%;
        font-family: "Binary ITC Bold";
    h1 strong em {
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color:#414958;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #4E5869;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
        width: 80%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
        margin-left: auto;
        border-right-width: thick;
        border-left-width: thick;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #C60651;
        border-left-color: #C60651;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        padding-top: 40px;
    #Quote {
        float: right;
        clear: left;
        margin-right: 1%;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 15%;
        padding-bottom: 10px;
        margin-top: 40px;
        margin-left: 25px;
        background-color: #FFF;
        font-family: museo-sans;
    arial;
        max-width: 200px;
        min-width: 180px;
    .content {
        float: left;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10;
        font-family: museo-sans;
    arial;
        margin-top: 40px;
        padding-right: 10px;
        width: 50px;
        font-size: large;
    .container .content p {
        padding-top: 0px;
    .sidebar2 {
        float: left;
        width: 20%;
        background-color: #D3CCB2;
        margin-top: 40px;
        padding-top: 10px;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-bottom-color: #FFF;
        border-left-color: #FFF;
        border-right-width: 5px;
        font-family: museo-sans;
    arial;
        font-size: 90%;
        right: 12%;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding-top: 0px;
        padding-right: 25px;
        padding-bottom: 15px;
        padding-left: 40px;
        font-family: museo-sans; arial;
        font-size: 100%;
        color: #666;
    .container .content p {
        font-family: museo-sans;
    arial;
        padding-top: 0px;
        padding-left: 17px;
        padding-bottom: 0px;
    #Quote {
        float: right;
        clear: both;
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this creates the space between the navigation on the content below */
        font-family:museo-sans; arial;
        line-height: 250%;
    .nav {
        font-family: museo-sans;
    arial;
        padding-left: 0px;
    ul.nav li {
        font-family: museo-sans; arial;
        padding-bottom: 10px;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        text-decoration: none;
        color: #333333;
        background-color: #FFF;
        font-family: museo-sans; arial;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 15px;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        color: #C60651;
        font-family:museo-sans; arial;
        background-color: #FFF;
        background-image: url(images/navbar2.gif);
        padding-bottom: 10px;
    .content img {
    /* ~~The footer ~~ */
    .footer {
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 10px;
    /* ~~miscellaneous float/clear classes~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .content {
        width: 50%;
        font-size: large;
        font-family: museo-sans; arial;
    #footer {    width: 100%;
        background-color: #FFF;
    .container .sidebar2 h4 img {
        padding-left: 20px;
        padding-top: 0px;
    .sidebar2 p img {
        border: medium solid #C60651;
    #Insert_logo2 {
        border-top-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 4px;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #fff;
    .container .content p .content strong {
        font-family: museo-sans; arial;
    .container .content .content {
        font-family: museo-sans; arial;
    .container .content ul li strong {
        font-family: museo-sans;
    arial;
        font-size: 95%;
        line-height: 150%;
        list-style-type: disc;
    .container .content ul {
    test {
        font-family: "Binary ITC Bold";
    .container .sidebar2 p img {
        margin-right: auto;
        margin-left: auto;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-top-color: #C60651;
        border-right-color: #C60651;
        border-bottom-color: #C60651;
        border-left-color: #C60651;
    li strong {
        line-height: 130%;
        list-style-type: circle;
        color: #978980;
    .container .content ul {
    .container .sidebar1 .nav {
        margin-top: 10px;
        margin-bottom: 10px;
    .sidebar1 .nav li {
        padding-bottom: 10%;
    .nav li a {
        background-image: url(images/navbar2.gif);
        background-repeat: no-repeat;
        background-position: right center;
        left: auto;
        right: auto;
        clip: rect(auto,auto,auto,auto);
    .container .sidebar1 .nav li a {
    .container .sidebar1 h6 {
        padding: 0px;
        color: #000000;
    #footer h3 strong {
        font-size: 60%;
        color: #978980;
    .container .content p {
        padding-right: 0%;
        padding-left: 0%;
        font-size: 85%;
    .container .sidebar2 p {
        padding-right: 8%;
        padding-left: 8%;
        padding-top: 5px;
    #Insert_logo2 #Insert_logo2 {
        padding-left: 15px;
    .container .content ul {
        color: #C60651;
    h6 {
        color: #978980;
        font-family: museo-sans;
    arial;
        font-size: 82%;
        padding-left: 20%;
        text-align: left;
        text-indent: 8px;
    .nav li a {
        padding-bottom: 10px;
    h8 {
        font-family: museo-sans; arial;
        font-size: 100%;
    h4 {
        font-family: museo-sans;
    arial;
        font-size: 100%;
        color: #C60651;
        padding-left: 17px;
        padding-top: 5px;
        padding-bottom: 0px;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
    .sidebar1 h8 strong {
        font-size: 80%;
        font-family:museo-sans; arial;
    .container .sidebar1 h7 {
        font-size: 40%;
        color: #978980;
    h7 {
        font-family: museo-sans; arial;
        font-size: 15%;
    .container .sidebar1 h8 {
        font-family: museo-sans; arial;
    .sidebar2 p img {
            max-width: 100%;
    .container .content img {
        padding-left: 3%;
    img {
        position: static;
        text-align: left;
    body,td,th {
        font-family: museo-sans; arial;
    h5 {
        font-size: 150%;
        color: #C60651;
        padding-left: 0px;
        font-family:museo-sans; arial;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
        font-size: 87%;
    .container .sidebar2 p {
        font-size: 90%;
    .container .sidebar1 .nav li {
        font-family: museo-sans;
    arial;
    .container .sidebar1 .nav li a {
        padding-left: 0px;
        margin-bottom: 0px;
        height: 30px;
    li a {
        padding-left: 2px;
    -->
    </style><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    </head>
    <body><script type="text/javascript">
    function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
    function pageHeight() {
    return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
    </script>
    <div class="container">
      <div class="header"><!-- end .header -->
        <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
        ; display:block;" /></a></p>
        <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
        <p class="clearfloat"> </p>
    </div>
      <div class="sidebar1">
        <ul class="nav">
          <li>
            <div id="Accordion1" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Home</a></div>
                <div class="AccordionPanelContent">Content 1</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Students</a></div>
                <div class="AccordionPanelContent"><a href="#">High School</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Professional</a></div>
                <div class="AccordionPanelContent">Content 3</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
                <div class="AccordionPanelContent">Content 4</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
                <div class="AccordionPanelContent">Content 5</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Bio</a></div>
                <div class="AccordionPanelContent">Content 6</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Q &amp; A Blog</a></div>
                <div class="AccordionPanelContent">Content 7</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
                <div class="AccordionPanelContent">Content 8</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="content">
    <p>Given today's competitive job market, global economy, and changed corporate culture,
    we can no longer depend upon others to ensure our professional futures. Choosing or
    changing your career direction requires self-reflection, career education and an action plan.</p>
    <img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
    <ul>
          <br><br><li><strong>Considering your college choices &amp; career options</strong></li>
          <li><strong>Preparing for the world of work after college</strong></li>
          <li><strong>Seeking a new position to further your career</strong></li>
          <li><strong>In-transition and considering new opportunities</strong></li>
          <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
        </ul>
    <img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
    <br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
    <p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
    <img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
      <div class="sidebar2">
        <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
        <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
         <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
         <p>We provide step by step guidance to ensure your success during the college application, job interview
    and decision making process.
    </p>
    </div>
      <div class="footer">
        <div id="footer">
          <h6 align="left"> Your Career Direction, LLC •  96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
        </div>
        <p> </p>
      <!-- end .footer --></div>
    <!-- end .container --></div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>

    1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
    2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
    3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
    4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
    1. Line 454
    <div id="Accordion1" class="Accordion" tabindex="0" style="outline: none;">
    2 & 3. Change your code from Line 455 - 491:
    <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Home</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Students</a></div>
                <div class="AccordionPanelContent"><a href="#">High School</a><br/><a href="#" style="margin-top: -30px;">College</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Professional</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Bio</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Q &amp; A Blog</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    4. Append your HTML for child tabs like this:
    <div class="AccordionPanelContent" id="submenu"><a href="#">High School</a></div>
    Create a new #submenu css rule in your CSS document and set styling the way you want it.

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

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

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

  • Spry tabbed panels - question about hover

    Hello, I am relatively new to Dreamweaver and Spry, but have made a website using vertical Tabbed Panels that finally looks ALMOST like I want it. I am sure that I have done some things that could be much simpler though…
    http://web.me.com/marinka9170/JL_test/JL_test.html
    My problem is that I would like the tabs to stay in their hover state (so coloured and wider) when you navigate to the content panel (until you hover over the next tab of course), instead of going back to their standard grey. How do I do that?
    And my other question is: in the content panels I have used custom bullets. Is there a way to assign a different custom bullet for each content panel? Do I number the content panels, like I have done with the tabs?
    Any hints, tips, solutions are appreciated!
    Thanks,
    Marinka

    I indeed see that your example works, but I think in my code there is some sort of conflict going on
    I have copied the Source Code and the SpryTabbedPanels.ccs below and 'bolded' the parts where I think the problem is. It is probably in splitting the different tabs in 5, right?
    I am sorry for asking these stupid questions. It's all quite new to me, but I've ordered a book to study more. It's just not in yet
    Thanks again for your help! Really appreciate it!
    Marinka
    <!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" />
    <meta name="description" content="description goes here">
    <meta name="keywords" content="">
    <meta name="author" content="metatags generator">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="3 month">
    <title>JL_test</title>
    <style type="text/css">
    <!--
    body {
    font: 12px/17px Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    color: #000;
    .TabbedPanelsTab1:hover {
    background-color: #15375E
    .TabbedPanelsTab2:hover {
    background-color: #016596
    .TabbedPanelsTab3:hover {
    background-color: #00A0AF
    .TabbedPanelsTab4:hover {
    background-color: #679145
    .TabbedPanelsTab5:hover {
    background-color: #B4D88B
    .TabbedPanelsContent ul#tab1 {
    list-style-image: url(Website_03-web-images/bullet1.png)
    .TabbedPanelsContent ul#tab2 {
         list-style-image: url(Website_03-web-images/bullet2.png)
    .TabbedPanelsContent ul#tab3 {
         list-style-image: url(Website_03-web-images/bullet3.png)
    .TabbedPanelsContent ul#tab4 {
         list-style-image: url(Website_03-web-images/bullet4.png)
    .TabbedPanelsContent ul#tab5 {
         list-style-image: url(Website_03-web-images/bullet5.png)
    ul {
    padding: 0;
    margin: 0;
    ol, dl, ul {
    padding-right: 15px;
    padding-left: 5px;
    margin: 0 0 0 15px;
    list-style-type: none;
    list-style-position: outside;
    text-indent: 0px;
    h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 17px;
    p {
    margin: 0;
    line-height: 17px;
    padding-right: 15px;
    a img {
    border: none;
    a:link {
    color: #b4d88b;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:hover, a:active, a:focus {
    text-decoration: none;
    color: #016596;
    .container {
    width: 1024px;
    background: #FFFFFF;
    margin: 0 auto;
    .content {
    background: #FFFFFF;
    clear: both;
    height: 200px;
    margin-top: 50px;
    .header {
    background: #FFF;
    width: 1024px;
    height: 120px;
    .column1 {
    float: left;
    width: 338px;
    background: #15375E;
    height: 20px;
    .column2 {
    width: 348px;
    float: left;
    background: #016596;
    height: 20px;
    .column3 {
    float: left;
    width: 338px;
    background: #679245;
    height: 20px;
    .placeholder {
    width: 1024px;
    height: 400px;
    clear: both;
    .footer {
    padding: 0px;
    background: #FFF;
    position: relative;
    clear: both;
    width: 280px;
    text-align: right;
    .fltrt {
    float: right;
    margin-left: 8px;
    .fltlft {
    float: left;
    margin-right: 8px;
    .clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
    -->
    </style>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    </script>
    <style type="text/css">
    h1,h2,h3,h4,h5,h6 {
    h1 {
    font-family: Verdana, Geneva, sans-serif;
    color: #15375e;
    font-weight: bold;
    font-size: 14px;
    h2 {
    font-family: Verdana, Geneva, sans-serif;
    color: #016596;
    font-weight: bold;
    font-size: 14px;
    h3 {
    color: #00A0AF;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    h4 {
    color: #679145;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    h5 {
    color: #B4D88b;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    .container .content #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent table tr {
    vertical-align: top;
    .container .footer copyright {
    </style>
    <div class="container">
      <div class="header"><!-- end .header --><img name="" src="" width="1024"
      " height="120" alt="logo" style="background-color: #FFFFFF" align="right" /></div>
      <div class="column1"></div>
      <div class="column2"></div>
      <div class="column3"><!-- end .column3 --></div>
      <div class="placeholder"><img src="Website_03-web-images/JL_ice.jpg" width="1024" height="400" alt="" /></div>
       <div class="content">
        <div id="TabbedPanels1" class="VTabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab1" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">home</li>
            <li class="TabbedPanelsTab2" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">who are we?</li>
            <li class="TabbedPanelsTab3" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">our services</li>
            <li class="TabbedPanelsTab4" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">sectors of activity</li>
            <li class="TabbedPanelsTab5" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">contact</li>
          </ul>
         <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
    <table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                    <home>
                      <h1>news</h1>
                    </home>
                    <p>News items can go here. Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                      Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                      Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
    </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                    <h1> </h1>
                    <p>Dandem quamendit as pelendae placiamus adipiet, voluptur minctis ad qui sinctur repercia dolorerum aceatiis est aut erchil maio qui nobis accupta.<br />
                      ssimpe qui omniscid quunt id molupti orrorpor res estrumquae lab ipician debitaq uature, optate nobis ut illaborrum diae placit id moloreribus doluptatur, unt rehent laborent rempori tassed ma non ne id qui rem voluptatur mos.<br />
                      Apist rem fugit et, corepuda con reperum auts esendip.</p>
                  </div></td>
                </tr>
              </table>
            </div>
        <div class="TabbedPanelsContent">
         <table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                    <h2>who are we?</h2>
                    <p>Who are we? Why are we here? What do we do? Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                      Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                      Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
    </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                    <h3><img src="" alt="Photo" width="338" height="200" hspace="0" vspace="0" align="texttop" /></h3>
                  </div></td>
                </tr>
              </table></div>
        <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h3>our services</h3>
          <ul id="tab3">
            <li>Service 1 - description of the type of service goes here with a possible hyperlink or something</li>
            <li>Service 2</li>
            <li>Service 3</li>
          </ul>
        </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
    </div></td>
                </tr>
              </table></div>
            <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h4>sectors of activity</h4>
          <ul id="tab4">
            <li>Sector 1 - description of the sector of activity goes here with a possible hyperlink or something</li>
            <li>Sector 2</li>
            <li>Sector 3</li>
            </ul>
        </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
    </div></td>
                </tr>
              </table></div>
         <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h5>contact</h5>
                    <p>Name</p>
                    <p>Telephone number: +12 3456 7890</p>
                    <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
                  </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                  </div></td>
                </tr>
              </table></div>
          </div>
        </div>
      <!-- end .content --></div>
      <div class="footer">
        <copyright>©2011  <!-- end .footer --></copyright>
      </div>
    <!-- end .container --></div>
    <script type="text/javascript">
    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.
    /* 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: 338px;
    height: 30px; /* 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;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375e;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab1 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab2 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab3 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab4 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab5 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    /* 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 {
    color: #fff;
    height: 30px;
    width: 300px;
    /* 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 {
    height: 30px;
    width: 300px;
    /* 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 {
    /* 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: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    background-color: #FFF;
    /* 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: 0px 0px 0px 0px;
    list-style-image: url(file:///Macintosh%20HD/Users/marinka/Desktop/JL/optencia_website/images/bullet.png);
    /* 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 {
    padding-right: 10px;
    /* 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;
    /* 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: 338px;
    height: 240px;
    position: relative;
    overflow: hidden;
    /* 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 .TabbedPanelsTab1 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab2 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab3 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab4 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab5 {
    float: left;
    overflow: hidden;
    /* 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 {
    text-decoration:none;
    overflow: hidden;
    /* 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: 686px;
    height: 240px;
    background-color: #fff;
    /* 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:both !important;

  • Tabindex + highlight

    Hi there.
    I actually have two questions:
    tabIndex is based on what? See this code
    counter++;
    var cre = _root.attachMovie("creditos", "creditos", counter);
    counter++;
    var sai = _root.attachMovie("sair", "sair", counter);
    counter++;
    var jog = _root.attachMovie("jogar", "jogar", counter);
    jog.tabIndex=0
    cre.tabIndex=1
    sai.tabIndex=2
    But it always start from "cre" button.
    can I highlight a button? i want to start the swf with that button on the "over" state, so if the user presses enter it would trigger its click function. PS. I set the focusrect to false.
    Thanks in advance

    I have several input textfields that are TAB-enabled. The problem I'm having is that when TAB is pressed, it highlights the textfield with an obnoxious yellow/green border. Does anybody know how to get rid of this? My AS is below:
    //enable tabbing
    user_input.tabEnabled = true;
    pword_input.tabEnabled = true;
    pword_confirm.tabEnabled = true;
    user_input.tabIndex = 1;
    pword_input.tabIndex = 2;
    pword_confirm.tabIndex = 3;
    //disable rect
    user_input._focusrect = false;
    pword_input._focusrect = false;
    pword_confirm._focusrect = false;
    Thanks in advance for any help/hints you can give me
    ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــــــــــــــــــــــــــــــــــ
    mtv50

  • Simple collapsible panels question...

    (Thought I'd give this forum a try. The other discussion
    category gets no traffic! It seems this is where the action is.)
    I'm putting collapsible panels on the left side of web page
    to be used as a sort of menu list that links to the rest of the
    website. Some "tab" sections will have stuff in its associated
    "content" section, namely some text that will link to other parts
    of the website. Other "tab" sections will have nothing in its
    "content" section, but I want to use the text in these tabs to be a
    link. In other words, I have no use of the content section for
    these tabs. I did a quick test and made the text in a tab to link
    to another page, but it didn't do anything (though the "content"
    section links of other tabs worked fine). Should I simply delete
    this part: <div class="CollapsiblePanelContent"></div>
    Here's an example of the web page, though it is still very
    much under construction, and no links put in place yet in any of
    the "tab" sections of the collapsible panels:
    http://www.freywine.com/NewSiteExamples/index4.html
    (I just want you to see how I'm using the collapsible panels, and
    how the "Home" and "Order Here," for example, will have no text in
    their "content" sections of the collapsible panels. Naturally, the
    parts with the downward pointing triangle will have text with links
    in their "content" sections.)
    Basically, the question is: what's the best way to have the
    tab section be just a link and the content section to not be there
    at all. I suppose I could simply not use collapsible panel code,
    but then I would have to figure out how to fit a non-collapsible
    panel div to fit right snug between all the collapsible panels (I'm
    still very much a newbie with CSS).
    Any simple way to deal with this?
    I've attached the complete collapsible panel code for the one
    which has the tab text as a link and nothing in the content area.
    Thanks for the help!
    <div id="CollapsiblePanel2" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0"><a
    href="
    http://freywine.stores.yahoo.net/">Order
    Here</a></div>
    <div class="CollapsiblePanelContent"></div>
    </div>

    Youre on the right lines. Just rip all of the collapsible
    stuff out
    which surrounds the actual link, as shown in the code below.
    The code shows the 'Home' and the 'Order Here' <divs>
    as your code
    should be, plus the opening collapsible <div> of the
    'Wine' tab.
    Note the 'combined' css classes 'CollapsiblePaneltab' and
    'CollapsiblePanel'(leave a gap between them as shown) The
    reason for
    this is the brown bar to the left of the tab takes its
    properties from
    the 'CollapsiblePanelTab' css PLUS you need to add some
    inline left
    padding to get the link to line up under one another.
    <div id="sidebar1">
    <div class="CollapsiblePanelTab CollapsiblePanel"
    style="padding-left: 7px"><a href="
    http://www.bbc.co.uk">Home</a></div>
    <div class="CollapsiblePanelTab CollapsiblePanel"
    style="padding-left: 7px"><a href="
    http://www.bbc.co.uk">Order
    Here</a></div>
    <div id="CollapsiblePanel3" class="CollapsiblePanel">
    brainfillet wrote:
    > (Thought I'd give this forum a try. The other discussion
    category gets no
    > traffic! It seems this is where the action is.)
    >
    > I'm putting collapsible panels on the left side of web
    page to be used as a
    > sort of menu list that links to the rest of the website.
    Some "tab" sections
    > will have stuff in its associated "content" section,
    namely some text that will
    > link to other parts of the website. Other "tab" sections
    will have nothing in
    > its "content" section, but I want to use the text in
    these tabs to be a link.
    > In other words, I have no use of the content section for
    these tabs. I did a
    > quick test and made the text in a tab to link to another
    page, but it didn't do
    > anything (though the "content" section links of other
    tabs worked fine). Should
    > I simply delete this part: <div
    class="CollapsiblePanelContent"></div> ?
    >
    > Here's an example of the web page, though it is still
    very much under
    > construction, and no links put in place yet in any of
    the "tab" sections of the
    > collapsible panels:
    http://www.freywine.com/NewSiteExamples/index4.html
    (I just
    > want you to see how I'm using the collapsible panels,
    and how the "Home" and
    > "Order Here," for example, will have no text in their
    "content" sections of the
    > collapsible panels. Naturally, the parts with the
    downward pointing triangle
    > will have text with links in their "content" sections.)
    >
    > Basically, the question is: what's the best way to have
    the tab section be
    > just a link and the content section to not be there at
    all. I suppose I could
    > simply not use collapsible panel code, but then I would
    have to figure out how
    > to fit a non-collapsible panel div to fit right snug
    between all the
    > collapsible panels (I'm still very much a newbie with
    CSS).
    > Any simple way to deal with this?
    >
    > I've attached the complete collapsible panel code for
    the one which has the
    > tab text as a link and nothing in the content area.
    Thanks for the help!
    >
    > <div id="CollapsiblePanel2"
    class="CollapsiblePanel">
    > <div class="CollapsiblePanelTab"
    tabindex="0"><a
    > href="
    http://freywine.stores.yahoo.net/">Order
    Here</a></div>
    > <div class="CollapsiblePanelContent"></div>
    > </div>
    >

  • How to give tabindex to FLVplayback?

    how to give tabindex to FLVplayback?

    You can put a fixed user in a connection string in app.config no problem.
    From here https://www.connectionstrings.com/mysql/
    The pattern used for a connection string:
    Server=myServerAddress;Database=myDataBase;Uid=myUsername;Pwd=myPassword;
    The username and password aren't your problem.
    The serveraddress will be.
    You may well need a mechanism to ask where the database is and save that into the connection string.
    Unless it's always on the same machine or something.
    Please don't forget to upvote posts which you like and mark those which answer your question.
    My latest Technet article - Dynamic XAML

  • Questions on Print Quote report

    Hi,
    I'm fairly new to Oracle Quoting and trying to get familiar with it. I have a few questions and would appreciate if anyone answers them
    1) We have a requirement to customize the Print Quote report. I searched these forums and found that this report can be defined either as a XML Publisher report or an Oracle Reports report depending on a profile option. Can you please let me know what the name of the profile option is?
    2) When I select the 'Print Quote' option from the Actions drop down in the quoting page and click Submit I get the report printed and see the following URL in my browser.
    http://<host>:<port>/dev60cgi/rwcgi60?PROJ03_APPS+report=/proj3/app/appltop/aso/11.5.0/reports/US/ASOPQTEL.rdf+DESTYPE=CACHE+P_TCK_ID=23731428+P_EXECUTABLE=N+P_SHOW_CHARGES=N+P_SHOW_CATG_TOT=N+P_SHOW_PRICE_ADJ=Y+P_SESSION_ID=c-RAuP8LOvdnv30grRzKqUQs:S+P_SHOW_HDR_ATTACH=N+P_SHOW_LINE_ATTACH=N+P_SHOW_HDR_SALESUPP=N+P_SHOW_LN_SALESUPP=N+TOLERANCE=0+DESFORMAT=RTF+DESNAME=Quote.rtf
    Does it mean that the profile in our case is set to call the rdf since it has reference to ASOPQTEL.rdf in the above url?
    3) When you click on submit button do we have something like this in the jsp code: On click call ASOPQTEL.rdf. Is the report called using a concurrent program? I want to know how the report is getting invoked?
    4) If we want to customize the jsp pages can you please let me know the steps involved in making the customizations and testing them.
    Thanks and Appreciate your patience
    -PC

    1) We have a requirement to customize the Print Quote report. I searched these forums and found that this report can be defined either as a XML Publisher report or an Oracle Reports report depending on a profile option. Can you please let me know what the name of the profile option is?
    I think I posted it in one of the threads2) When I select the 'Print Quote' option from the Actions drop down in the quoting page and click Submit I get the report printed and see the following URL in my browser.
    http://<host>:<port>/dev60cgi/rwcgi60?PROJ03_APPS+report=/proj3/app/appltop/aso/11.5.0/reports/US/ASOPQTEL.rdf+DESTYPE=CACHE+P_TCK_ID=23731428+P_EXECUTABLE=N+P_SHOW_CHARGES=N+P_SHOW_CATG_TOT=N+P_SHOW_PRICE_ADJ=Y+P_SESSION_ID=c-RAuP8LOvdnv30grRzKqUQs:S+P_SHOW_HDR_ATTACH=N+P_SHOW_LINE_ATTACH=N+P_SHOW_HDR_SALESUPP=N+P_SHOW_LN_SALESUPP=N+TOLERANCE=0+DESFORMAT=RTF+DESNAME=Quote.rtf
    Does it mean that the profile in our case is set to call the rdf since it has reference to ASOPQTEL.rdf in the above url?
    Yes, your understanding is correct.3) When you click on submit button do we have something like this in the jsp code: On click call ASOPQTEL.rdf. Is the report called using a concurrent program? I want to know how the report is getting invoked?
    No, there is no conc program getting called, you can directly call a report in a browser window, Oracle reports server will execute the report and send the HTTP response to the browser.4) If we want to customize the jsp pages can you please let me know the steps involved in making the customizations and testing them.
    This is detailed in many threads.Thanks
    Tapash

  • Satellite P300D-10v - Question about warranty

    HI EVERYBODY
    I have these overheating problems with my laptop Satellite P300D-10v.
    I did everything I could do to fix it without any success..
    I get the latest update of the bios from Toshiba. I cleaned my lap with compressed air first and then disassembled it all and cleaned it better.(it was really clean insight though...)
    BUT unfortunately the problem still exists...
    So i made a research on the internet and I found out that most of Toshiba owners have the same exactly problem with their laptop.
    Well i guess this is a Toshiba bug for many years now.
    Its a really nice lap, cool sound (the best in laptop ever) BUT......
    So I wanted to make a question. As i am still under warranty, can i return this laptop and get my money back or change it with a different one????
    If any body knows PLS let me know.
    chears
    Thanks in advance

    Hi
    I have already found you other threads.
    Regarding the warranty question;
    If there is something wrong with the hardware then the ASP in your country should be able to help you.
    The warranty should cover every reparation or replacement.
    But I read that you have disasembled the laptop at your own hand... hmmm if you have disasembled the notebook then your warrany is not valid anymore :(
    I think this should be clear for you that you can lose the warrany if you disasemble the laptop!
    By the way: you have to speak with the notebook dealer where you have purchased this notebook if you want to return the notebook
    The Toshiba ASP can repair and fix the notebook but you will not get money from ASP.
    Greets

  • Question regarding NULL and forms

    Hi all, i have a survey that im working on that will be sent via email.
    I'm having an issue though. if i have a multiple choice question, and the user only selects one of the choices, all the unselected choices return as NULL. is there a way i can filter out anytihng that says "NULL" so it only shows the selected options?
    thanks.
    here is the page that retrieves all the data. thanks
    <body>
    <p>1) Is this your first visit to xxxxxxx? <b><%=request.getParameter("stepone") %></b>
    </p>
    <p> </p>
    <p>2) How did You Learn About xxxxxxx?</p>
    <p><b><%=request.getParameter("steptwoOne") %></b>
      <br>
        <b><%=request.getParameter("steptwoTwo") %></b>
      <br>
        <b><%=request.getParameter("steptwoThree") %></b>
      <br>
        <b><%=request.getParameter("steptwoFour") %></b>
      <br>
        <b><%=request.getParameter("steptwoOther") %></b>
    </p>
    <p> </p>
    <p>3) What was your main reason for visiting xxxxx?</p>
    <p><b><%=request.getParameter("stepthreeOne") %></b>
        <br>
          <b><%=request.getParameter("stepthreeTwo") %></b>
        <br>
          <b><%=request.getParameter("stepthreeThree") %></b>
        <br>
          <b><%=request.getParameter("stepthreeFour") %></b>
        <br>
          <b><%=request.getParameter("stepthreeOther") %></b>
    </p>
    <p>4) did you find the information you were looking for on this site?</p>
    <p><b><%=request.getParameter("stepfour") %>
    <br>
    <b><%=request.getParameter("stepfourOther") %></b>
    </b></p>
    <p>5) Do you plan on using this website in the future?</p>
    <p><b><%=request.getParameter("stepfive") %></b></p>
    <p>6) What is your gender</p>
    <p><b><%=request.getParameter("stepsix") %></b></p>
    <p>7) What is your age group</p>
    <p><b><%=request.getParameter("stepseven") %></b></p>
    8) Would you like to take a moment and tell us how we can improve your experience on xxxxxxxxxx?
    <p><b><%=request.getParameter("stepeightFeedback") %></b></p>

    i was messing around and came up with this. it doesnt remove the null, but if it is null it adds ABC beside it. so i think i might be getting close. i just need to figure out how to replace the null.
    code]
    <b><%=request.getParameter("steptwoFour") %></b>
         <% if (request.getParameter("steptwoFour") == null ) {
         %>
         <% out.print("abc"); %>
         <% }
         %>

  • Anyone know how to remove Overdrive books from my iphone that have been transferred from my computer? They do not show up on itunes. I see a lot of answers to this question but they all are based on being able to see the books in iTunes.

    How do I remove Overdrive books from the library that were downloaded onto my computer then transferred to my iphone? The problem is that they do not show up in iTunes.
    I see this question asked a lot when I google, but they always give answers that assumes you can find the books in iTunes either under the books tab, or the audio books tab or in the music. They do not show up anywhere for me. They do not remove from the app like the ones I downloaded directly onto my iphone.the related archived article does not answer it either.  I even asked a guy working at an apple store and he could not help either.   Anybody...?
    Thanks!

    there is an app called daisydisk on mac app store which will help you see exactly where the memory is focused and consumed try using that app and see which folders are using more memory

  • Basic question

    Hello, i have a basic question. if i have defined 2 fields in a cube or a dso:
    Name Quantity
    and from the external flat file i get some characters for my quantity field. would my load fail?  for standard dso and for write optimized?
    NOTE: quantity field is a keyfigure defined as numeric.
    and the load coming in has "VIKPATEL" for Quantity field and not numbers.
    thanks

    Hi Vik,
    Yes, the load will fail.
    May be you coud first load this data into BW (into PSA) and set both fields as characters fields. Then you can create DSO, do transformation from this PSA to the DSO, and put your logic as to what do you want to do with those Quantity that is not number (e.g. convert to 0, or 'Not assgined', etc).
    You can use transfer rule, or a clean up ABAP code in the start routine.
    Hope this helps.

  • Mid 2010 15" i5 Battery Calibration Questions

    Hi, I have a mid 2010 15" MacBook Pro 2.4GHz i5.
    Question 1: I didn't calibrate my battery when I first got my MacBook Pro (it didn't say in the manual that I had to). I've had it for about a month and am doing a calibration today, is that okay? I hope I haven't damaged my battery? The calibration is only to help the battery meter provide an accurate reading of how much life it has remaining, right?
    Question 2: After reading Apple's calibration guide, I decided to set the MacBook Pro to never go to sleep (in Energy Saver System Preference) and leave it on overnight so it would run out of power and go to sleep, then I'd leave it in that state for at least 5 hours before charging it. When I woke up, the light on the front wasn't illuminated. It usually pulsates when in Sleep. Expectedly, it wouldn't wake when pressing buttons on the keyboard. So, what's happened? Is this Safe Sleep? I didn't see any "Your Mac is on reserve battery and will shut down" dialogues or anything similar, as I was asleep! I've left it in this state while I'm at work and will charge it this afternoon. Was my described method okay for calibration or should I have done something different?
    Question 3: Does it matter how quickly you drain your battery when doing a calibration? i.e is it okay to drain it quickly (by running HD video, Photo Booth with effects etc) or slowly (by leaving it idle or running light apps)?
    Thanks.
    Message was edited by: Fresh J

    Fresh J:
    A1. You're fine calibrating the battery now. You might have gotten more accurate readings during the first month if you'd done it sooner, but no harm has been done.
    A2. Your machine has NOT shut down; it has done exactly what it was supposed to do. When the power became critically low, it first wrote the contents of RAM to the hard drive, then went to sleep. When the battery was completely drained some time later, the MBP went into hibernation and the slepp light stopped pulsing and turned off. In that state the machine was using no power at all, but the contents of your RAM were still saved. Once the AC adapter was connected, a press of the power button would cause those contents to be reloaded, and the machine would pick up again exactly where you left off. It is not necessary to wait for the battery to be fully charged before using the machine on AC power, but do leave the AC adapter connected for at least two hours after the battery is fully charged. Nothing that you say you've done was wrong, and nothing that you say has happened was wrong.
    A3. No, it does not matter.

  • Jabber/WebEx Connect SSO Questions

    I've got a few questions around exactly what needs to be done to get SAML working for our Connect accounts to successfully authenticate from Jabber for Windows, Mac, iPhone, and Android.
    We have both a Meeting Center and Connect account under WebEx using Loose Coupled Integration. Just this past week I enabled SAML for our Meeting Center accounts which went off without a hitch with the exception of Meeting Center integration with Jabber, which is now broken with a message about SSO enabled Meeting Sites not being supported (I think this would maybe be fixed if we had Tight Coupled Integration with our two account?).
    Anyway, my questions are...
    For Windows, I understand all clients will need to be reinstalled with the MSI argument for the SSO_ORG_DOMAIN switch I've read about, is that correct? Are there any other switches needed for the reinstall? 
    How will this work with the Mac and mobile clients? There's obviously no command line options to specify for the installations here, will they just know to kick over to my IdP for authentication once they see an email address that falls under an org with SSO enabled? If so, why does the Windows client need to be completely reinstalled and not just know to find the IdP from the Cloud Connect service like Meeting Center does with the Productivity Tools?
    We're just doing this for our Connect Web IM accounts, not attempting any sort of SSO with the phone accounts/UC integration yet.
    Any ideas on getting the Meeting Center integration into Jabber working again?

    I'd suggest posting your question over on the Jabber Pilot forum, as this forum is specific to Jabber Guest questions:
    https://supportforums.cisco.com/community/4551/jabber-pilot-support
    -jim

Maybe you are looking for