CODEWITHSUNDEEP
jquerytabs
PrplNinja
PrplNinja

Reputation: 135

HTML/jQuery Tabs Fail

I have an HTML code of tabs that I'm using. In each tab, I want an iFrame with a few buttons and a text box. The tabs don't switch to each iframes, instead, nothing happens. In my second code, the content of the tabs are all seen at the same time on top of each other. This is what I tried, but it didn't work: 

    <html>
    <head>
      <title> iFrame Browser</title>
      <script language="javascript"> 
       function LoadPage(){ 
         var objFrame=document.getElementById("myIframe"); 
         objFrame.src=document.getElementById("URL").value;
        }
     </script>
    <script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>   
    <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />


    <style>
    /* tab pane styling */
    .panes div {
    display:none;       
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    height:100px;
    font-size:14px;
    background-color:#fff;
    }

        </style>
    </head>

    <ul class="tabs">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>
    <div class="panes">
        <div>
      <div style="Clear:both;"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back"  onClick="myIframe.history.back()"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward"  onClick="myIframe.history.forward()"> 
     <input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
     <input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
     <input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
    </div>
    <iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div>
    <div style="Clear:both;"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back"  onClick="myIframe.history.back()"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward"  onClick="myIframe.history.forward()"> 
     <input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
     <input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
     <input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
    </div>
<iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div>
    <div style="Clear:both;"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40226-1/arrow-blue-rounded-left.jpg" height="15" width="15" VALUE="Back"  onClick="myIframe.history.back()"> 
     <input type="image" src="http://www.freeclipartnow.com/d/40228-1/arrow-blue-rounded-right.jpg" height="15" width="15" VALUE="Forward"  onClick="myIframe.history.forward()"> 
     <input type="text" style="width:1000px" value="http://" class="frmUrlVal" ID="URL">
     <input type="image" src="http://polaris.umuc.edu/~mahearn/images/arrowbutton.png" height="20" width="20" class="frmSubmit" value="Go" onclick="LoadPage()">
     <input type="button" value="Reload" onclick="document.frames['myIframe'].location.reload(true)">
    </div>
    <iframe align="center" width="100%" height="90%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
        $(function() {
    $("ul.tabs").tabs("div.panes > div");
    });
    </script>

    </body>

    </html>

Another fail:

    <html>
<head>
  <title> iFrame </title>
  <script language="javascript"> 
   function LoadPage(){ 
     var objFrame=document.getElementById("myIframe"); 
     objFrame.src=document.getElementById("URL").value;
    }
  </script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
<script>
    $(function() {
        $( "#tabs" ).tabs({
            cookie: {
                // store cookie for a day, without, it would be a session cookie
                expires: 999
            }
        });
    });
    </script>
</head>
<body>

<div class="demo">

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        <div style="Clear:both;"> 
 <input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="myIframe.history.back()"> 
 <input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="myIframe.history.forward()"> 
<div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div id="tabs-2">
        <div style="Clear:both;"> 
 <input type="text" value="http://" class="frmUrlVal" ID="URL">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="myIframe.history.back()"> 
 <input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="myIframe.history.forward()"> 
<div>
<iframe align="center" width="100%" height="90%" src="http://facebook.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
    <div id="tabs-3">
        <div style="Clear:both;"> 
 <input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
 <input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
 <input type="button" VALUE="&lt; &lt; &nbsp; Back &nbsp;"  onClick="myIframe.history.back()"> 
 <input type="button" VALUE="Forward &nbsp; &gt; &gt;"  onClick="myIframe.history.forward()"> 
<div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
    </div>
</div>

</div>
</body>
</html>

What did I do wrong?

Upvotes: 2

Views: 582

Answers (1)

benni_mac_b
benni_mac_b

Reputation: 8877

I've added example with some working tabs at the following URL. It may need a little more work but should get you on your way.

http://benjaminhopkins.co.uk/stackoverflow/Iframewithtabs.html

Upvotes: 1

Related Questions