tags:

views:

819

answers:

2
+1  Q: 

Jquery flowplayer - tabs - content inside div tags not displaying

Hey guys, I'm looking for a simple example of JQuery tabs in which I am planning to show two different forms.

I came across this example http://flowplayer.org/tools/demos/tabs/index.htm which is perfect for my needs.

So I implemented the simple example. The code in question is:

<div class="panes"> 
    <div>First tab content. Tab contents are called "panes"</div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

Now my content for the first tab is a form which has several of its own div tags - when I put that form with div tags as the content for the first tab - nothing appears.

So I made a simple change and added another div tag to the content of the first tab as shown below and still nothing appears:

<div class="panes"> 
    <div><div>First tab content. Tab contents are called "panes"</div></div> 
    <div>Second tab content</div> 
    <div>Third tab content</div> 
</div>

Is there a simple way to fix this. This is the content that I want to display in my first tab - Thanks for your help

<div id="formbox" class="formbox">    
<form id="shopping_form" method="post">

   <div id="3" style="width:520px;" >                      
        <textarea id="message" name="message" rows="3" cols="50"></textarea>
   </div> 

   <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b>
       <input type="text" id="store" name="store" class="required" size="20" />
       <input type="hidden" id="store_id"/>                 
   </div>
   <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b>
    <input type="text" id="city" name="city" size="15"/>
   </div>                   
   <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;">
    <input class="find_address" id="findaddress" type="button" value="Find Store"/>
   </div>

   <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;">
      <b>Select Store</b><select id="google_stores" name="google_stores"></select>
      <input type="hidden" id="google_address"/>                
   </div>

   <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div>
   <div id="locationrow" style="float:left;padding-bottom:10px;display:none;">
      <b>Address/Country</b>                 
      <input type="text" id="address" name="address" size="20" />
      <input type="text" id="country" name="country" size="20"/>
   </div>

   <div style="width:520px;float:left;padding-bottom:10px;" >
      <b>Price   
      <input type="text" id="price" name="price" size="20" />    
   </div>    

   <div id="buttonrow" style="width:200px;float:right;display:none;" >  
      <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>            
   </div>

</form>
</div>
+1  A:  
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
  <style>
  .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
  .clearfix {display:block;}
  </style>  
  </head>

  <body>
    <script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    </script>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">First Tab (Form)</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
        <li><a href="#tabs-3">Third Tab</a></li>
      </ul>
      <div id="tabs-1" class="clearfix">
        <div>
          <div id="formbox" class="formbox">    
          <form id="shopping_form" method="post">
             <div id="3" style="width:520px;" >                      
                  <textarea id="message" name="message" rows="3" cols="50"></textarea>
             </div> 
             <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b>
                 <input type="text" id="store" name="store" class="required" size="20" />
                 <input type="hidden" id="store_id"/>                 
             </div>
             <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b>
              <input type="text" id="city" name="city" size="15"/>
             </div>                   
             <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;">
              <input class="find_address" id="findaddress" type="button" value="Find Store"/>
             </div>
             <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;">
                <b>Select Store</b><select id="google_stores" name="google_stores"></select>
                <input type="hidden" id="google_address"/>                
             </div>
             <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div>
             <div id="locationrow" style="float:left;padding-bottom:10px;display:none;">
                <b>Address/Country</b>                 
                <input type="text" id="address" name="address" size="20" />
                <input type="text" id="country" name="country" size="20"/>
             </div>
             <div style="width:520px;float:left;padding-bottom:10px;" >
                <b>Price   
                <input type="text" id="price" name="price" size="20" />    
             </div>    
             <div id="buttonrow" style="width:200px;float:right;display:none;" >  
                <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>            
             </div>
          </form>
          </div>
        </div>
      </div>
      <div id="tabs-2">
        <p>Second Tab Content</p>
      </div>
      <div id="tabs-3">
        <p>Third Tab Content</p>
      </div>
  </body>
</html>
Andrew Kennedy  2010-06-19 07:28:58
Thanks Andrew - I have looked at this example as well - this is from the Jquery official website right - http://docs.jquery.com/UI/Tabs#source - Yeah this one does work but I was trying to figure out how to make the flowplayer one work
Gublooo  2010-06-19 07:56:47
+2  A: 

I am still partial to jquery ui tabs, but here is how to make it work with flowplayer:

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Tools standalone demo</title>
    <!-- include the Tools -->
    <script src="http://flowplayer.org/tools/download/combine/1.2.3/jquery.tools.min.js?select=full&amp;debug=true"&gt;&lt;/script&gt;
    <!-- standalone page styling (can be removed) -->
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/&gt;   
    <!-- tab styling -->
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
    <!-- tab pane styling -->
    <style>
    div.wrap {
      width:700px;
      margin-bottom:40px;
    }
    .wrap .pane  {  
      background:#fff url(http://static.flowplayer.org/img/global/gradient/h150.png) repeat-x 0 20px;
      display:none;     
      padding:20px;
      border:1px solid #999;
      border-top:0;
      font-size:14px;    
      font-size:18px;
      color:#456;   

      _background-image:none;
    }
    .wrap .pane p {
      font-size:38px;   
      margin:-10px 0 -20px 0;   
      text-align:center;
      color:#578;
    }
    .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
    .clearfix {display:block;}
    </style>
  </head>
  <body>
  <div class="wrap">
    <!-- the tabs -->
    <ul class="tabs">
      <li><a href="#">Form</a></li>
      <li><a href="#">Tab 2</a></li>
      <li><a href="#">Tab 3</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="pane clearfix">
      <div id="formbox" class="formbox">    
      <form id="shopping_form" method="post">
         <div id="3" style="width:520px;" >                      
              <textarea id="message" name="message" rows="3" cols="50"></textarea>
         </div> 
         <div id="store_row" style="width:220px;float:left;padding-bottom:10px;"><b>Store</b>
             <input type="text" id="store" name="store" class="required" size="20" />
             <input type="hidden" id="store_id"/>                 
         </div>
         <div id="city_column" style="width:200px;float:left;padding-bottom:10px;"><b>City</b>
          <input type="text" id="city" name="city" size="15"/>
         </div>                   
         <div id="findbutton_column" style="vertical-align:top;width:80px;float:left;">
          <input class="find_address" id="findaddress" type="button" value="Find Store"/>
         </div>
         <div id="googlerow" style="width:120px;float:left;padding-bottom:10px;">
            <b>Select Store</b><select id="google_stores" name="google_stores"></select>
            <input type="hidden" id="google_address"/>                
         </div>
         <div id="google_message" style="float:left;padding-bottom:10px;display:none;"></div>
         <div id="locationrow" style="float:left;padding-bottom:10px;display:none;">
            <b>Address/Country</b>                 
            <input type="text" id="address" name="address" size="20" />
            <input type="text" id="country" name="country" size="20"/>
         </div>
         <div style="width:520px;float:left;padding-bottom:10px;" >
            <b>Price   
            <input type="text" id="price" name="price" size="20" />    
         </div>    
         <div id="buttonrow" style="width:200px;float:right;display:none;" >  
            <input id="it" type="image" src="http://images.pe.com.s3.amazonaws.com/it.png" height="35px"/>            
         </div>
      </form>
      </div>    
    </div> 
    <div class="pane">
      <p>#2</p>
    </div>
    <div class="pane">
      <p>#3 </p>
    </div>
  </div>
  <!-- This JavaScript snippet activates those tabs -->
  <script>
  // perform JavaScript after the document is scriptable.
  $(function() {
    $("ul.tabs").tabs("> .pane");
  });
  </script>
  </body>
</html>
Andrew Kennedy  2010-06-19 17:43:08
I will note that this works perfectly in FF, but you may need to tweak the css for Safari and chrome to get tabs 2 and 3 working right.Didn't test with IE.Look at how flowplayer does the multiple nested tabs. Instead of the second set of tabs you would have your form. Just remember you will need that clearfix class to wrap up your form. Here is flowplayers example: http://flowplayer.org/tools/demos/tabs/multiple-tabs.htm
Andrew Kennedy  2010-06-19 17:47:33
Thanks for taking the time man - appreciate it.
Gublooo  2010-06-19 18:52:16

related questions

Communicating between websites (using Javascript or ?)
Javascript Unit-testing?
How can I return a variable from a $.getJSON function
Is there an "exists" function for jQuery
Why do I receive a q[num] error when aborting a jQuery queue pipeline?
How do I fire an event when a iframe has finished loading in jQuery?
How to compare html entity with JQuery
Problems while submitting a UTF-8 form textarea with JQuery/AJAX
How do I get the coordinates of the caret in text boxes?
SimpleModal breaks ASP.Net Postbacks
How would you handle errors when using jQuery.ajax() ?
Where is the best jQuery "plugins" library on the web?
Where can I learn jQuery? Is it worth it?
Keeping key value pairs together in HTML <select/> with JQuery?
How to set encoding in .getJSON JQuery
What is a selector engine?
Escaping HTML strings with jQuery
jQuery AJAX vs. UpdatePanel
What's the best way to code a desktop application-like menu bar in Javascript?
Dynamic Alphabetical Navigation
Scrolling Overflowed DIVs with JavaScript
How do I add a pre tag inside a code tag with jQuery?
Graph visualization code in javascript?
Wrapping lists into columns
Interview Questions for an Intern