<div id="tabs"> <ul> <li><a href="#tab1">Tab A</a></li> <li><a href="#tab2">Tab B</a></li> <li><a onclick="$('#tabs div').slideToggle()">Collapse Content</a></li> </ul>
<div id="tab1">Stuff A</div> <div id="tab2"> stuff B</div> </div>
Note: You will need the following jQuery pieces to get Tabs working:
<div id="content"> Stuff... </div>
Next, on your navigation pane, simply create onclick functions that call a javascript function that does the following:
<script type="text/javascript"> function articleLinkClick() { $('#content').load('article.html'); } </script>
This will make an ajax call and load article.html inside your content div. You can do the same with .php documents, and the serverside code will run as normal.
<div style="border:solid 1px #000000; width:500px; height:50px; overflow:auto;"> <p>Paragraph 1</p> <p>paragraph 2</p> </div>
Test it out on http://jsbin.com/#source -- Make sure you include jquery to see the fade stuff !<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var fade = false; $(document).ready(function(){ $("div").click(function(){ if(!fade) { $("div").fadeTo("slow",0.25); fade = true; } else { $("div").fadeTo("slow",1); fade = false; } }); }); $(document).ready(function(){ $("#close").click(function(){ $("div").fadeOut(1000); }); }); </script> </head> <body> <div style="background:yellow;width:300px;height:300px"> <button>Click to Fade</button> <span align="right"> <button style="float:right;" id="close">X</button></span> </div> </body> </html>
<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
//-->
</SCRIPT>
onKeyPressonKeyPress<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST> U.S. ZIP Code: <INPUT NAME="dollar" SIZE=5 MAXLENGTH=5 onKeyPress="return numbersonly(this, event)"> <INPUT TYPE=SUBMIT VALUE="go"> </FORM>
target="_top"
Failed to load resource: the server responded with a status of 403 (Forbidden)I found that the problem was using the incorrect slashes for the image directory.
"images\main\ico.png"The Right Way
"images/main/ico.png"Hope this helps. Didn't find any solutions online for the problem, but used some common sense to figure it out.
