|
HTML - Tabs - Information In Either Box Stays Up At All Times
Reference Link: {website taken off for personal reasons}
If you visit the link I posted, what I want to happen, is when you click on the tabs Home, Giving Programs, Leave A Legacy or Make a Gift, I want the content of them to appear in the green box that is below the tabs. When you click on the tabs to the right - Events, Home, Home, I want their content to appear in the box that is below those tabs. I have that much figured out - but my question is - when you click on the links on the left, or on the right, the information in the opposite box (from the previous link that was clicked) goes away. Is there anyway to keep the information up in both boxes at all times? Example: If you click on Make a Gift - Tab content 4 here Tab content 4 here shows up in the green box below the tabs. BUT... when you click on Events to the right - TOOOOOOOOOOLS shows up - but 'Tab content 4 here' goes away. PROBLEM - I want 'Tab content 4 here' to stay up. Thanks so much in advance!! Similar TutorialsWhat HTML code creates a bar that stays at the bottom of the screen, even when the paged is scrolled Like the Wibiya toolbar does http://wibiyareview.com/ Thanks James hello, everyone I know this is a pretty basic one on the account that it is currently everywhere on the internet now. But you know how you are on a page and you decide to click a link and the PAGE stays the same mean it doesn't reload but the content changes and loads... for example ... facebook... or http://diettogo.com/menu-nutrition/l...an-1600/week-4 when you click week one or week 2 the content changes but the entire layout doesn't reload... what is causing this.. how can I set my llinks up in this way.. is smooth and clean. This website has a skyscraper banner on the left that stays with you as you scroll down the page. http://www.vcdq.com Can this same effect be used on a skyscraper that's in a wordpress theme's sidebar.php? Hi I created two tabs form, my code is just on one page, my goal is to divide my page into two tabs, I created it using ASP web and it works just fine, my problem is when I change it to HTML. when I change everything to HTML and run it on I.E, everything appears on One Page not on two tabs as intended. Here is my code below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><link rel="shortcut icon" href="image/save.jpg" type="image/jpg" /><title> Home Page </title><link href="Styles/Site.css" rel="stylesheet" type="text/css" /> <title>EasyTabs Demo</title> <script src="../vendor/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="../vendor/jquery.hashchange.min.js" type="text/javascript"></script> <script src="../lib/jquery.easytabs.min.js" type="text/javascript"></script> <script type="text/javascript" src="thismust.js"></script> </script> </head> <body> <!--<form> --> <div id="tab-container" class='tab-container'> <ul class='etabs' style=""> <li class='tab'><a href="#CDD_page1">Page 1 of 2 Pages</a></li> <li class='tab'><a href="#CDD_page2">Page 2 of 2 Pages</a></li> </ul> <div class='panel-container'> <form name="form" method="post" action=""> <div id="CDD_page1"> <code> <fieldset><legend>DESCRIPTION OF CHANGE</legend> <table> <tr title="Brief Description of Change"><td class="style17"> Description of your Change Request <img src="req.gif" alt="Required" /> &nbs p; &n bsp; </td><!--<span title="Brief Description of Change">--> <td> <input name="BriefDescriptionofChange" type="text" id="MainContent_TextBox1" style="width:168px;" /> </td><!--</span>--></tr> <tr title="Change Reference Number And The Change Type"> <td class="style17"> Change Number <img src="req.gif" alt="Required" /> </td><!--<span title="Change Reference Number And The Change Type">--> <td class="style3"> <input name="ChangeNumberType" type="text" id="MainContent_TextBox3" value="" style="width:95px;" /> <select name="ChangeType" id="MainContent_DropDownList1" onchange="showEntry(this,this.value, 'Flare2')"> <option value="">-Select-</option> <option value="Flare">Flare</option> <option value="SR">SR</option> <option value="PAF">PAF</option> <option value="CR">CR</option> </select></td><!--</span>--></tr> <tr id="Flare" style="display: none;"> <td class="style17"> Hyperlink to Flare <img src="req.gif" alt="Required"/></td><td><input name="HyperlinktoFlare" type="text" id="MainContent_TextBox2" value="" style="width:168px;" /></td> </tr> <tr id="Flare2" style="display: none;"> <!--<span id="Flare2" style="display: none;">--> <td class="style17"> Flare Priority <img src="req.gif" alt="Required"/></td><td> <select name="FlarePriority" id="MainContent_DropDownList2" onchange="changePriority(this.selectedIndex)" style="width:168px;"> <option value="">-Select-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> <!--</span>--></tr><!--</span>--> <tr title="Dependency"> <td class="style17"> Dependency<img src="req.gif" alt="Required"/></td><td> <input name="Dependency" type="text" id="MainContent_TextBox4" value="" style="width:168px;" /> </td></tr> <tr title="Developer"> <td class="style17"> Developer <img src="req.gif" alt="Required" /> </td><!--<span title="Developer">--> <td> <input name="Developer" class="reqtext" type="text" id="Developer" value= "" style="width:168px;" /> </td><!--</span>--></tr> <tr title="Dependency"> <td class="style17"> Unit Tester <img src="req.gif" alt="Required" /> </td><!--span title="Dependency">--> <td> <input name="UnitTester" class="reqUnit" type="text" id="MainContent_TextBox6" value= "" style="width:168px;" /> </td><!--</span>--></tr> <tr title="Developer"> <td class="style17"> Project Manager <img src="req.gif" alt="Required" /> </td><!--<span title="Developer"> --> <td> <input name="ProjectManager" type="text" id="MainContent_TextBox7" value= "" style="width:168px;" /> </td><!--</span>--></tr> </div> <div id="CDD_page2"> <code> <fieldset><legend>TEST STATUS AND REQUIREMENT</legend> <table class="style6"> <tr title="Is the COMPILED CODE and SOURCE CODE correct?"> <td class="style9"> SIT Test Status <img src="req.gif" alt="Required"/> </td> <td class="style10"> <select name="SITStatus" id="DropDownSIT" onchange="showSITtxtField(this,this.value)" style="width:168px;"> <option value="">-Select-</option> <option value="Not Applicable">Not Applicable</option> <option value="In Progress">In Progress</option> <option value="On Hold">On Hold</option> <option value="Signed Off">Signed Off</option> </select> </td> </tr > <!-- <span id="SITN/A" style="display: none;">--> <tr title="Is the COMPILED CODE and SOURCE CODE correct?" id="SITN/A" style="display: none;"> <td class="style11"> What testing was done? <img src="req.gif" alt="Required"/></td> <td class="style4"> <input name="testingDone" id="Text13" type="text" value= "" style="width:168px;"/></td> </tr> <!-- </span> --> <span id="UAT" style="display: inline;"> <tr title="Is the COMPILED CODE and SOURCE CODE correct?"> <td class="style11"> UAT Test Status <img src="req.gif" alt="Required"/></td> <td class="style4"> <select name="UATTest" id="DropDownUAT" onchange="showUATtxtField(this,this.value)" style="width:168px;"> <option value="">-Select-</option> <option value="Not Applicable">Not Applicable</option> <option value="In Progress">In Progress</option> <option value="On Hold">On Hold</option> <option value="Signed Off">Signed Off</option> </select></td> </tr> </span> <tr > <td><a class="menuitem" href="#CDD_page1">Back</a></td><td><a class="menuitem" href="CDD_page1.aspx">Cancel</a> </td><td><input type="button" value="Submit" onclick="mySubmit();"/></td> </tr> </table> </code> </div> </form> </div> </div> </div> </div> </body> </html> Hi, i'm trying to design a page with tabs and i got it, but the problem is, i have menu on the top of the tabs and when the drop down menu comes it is been getting overlapped with the tabs. and how do i attache my html file in here. please any one help me. Hi, I am designing a website and i am trying to achieve the following text1 _________text2 ________________text3 only where the ____ are just white spaces is there any way of doing this without resorting to  's? CSS? Thanks Gary Ok here is my dilemma, I have these tabs which are made in javascript and they are used for the user to navigate pages. See the code. However what I want is in one tab area or lets call it tab 1, I want an anchor link that takes us to tab 2 which is in tab 1. So someone could click on a link in page 1 or tab 1 and it will take them to tab 2. To get a better understanding of what I am talking about I have put the code here for you guys to check out: HTML Code: <!-- $Id: example.html,v 1.4 2006/03/27 02:44:36 pat Exp $ -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="../tabber/tabber.js"></script>
<link rel="stylesheet" href="../tabber/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="../tabber/example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>
<style type="text/css">
<!--
.header { FONT-WEIGHT: bolder; FONT-SIZE: 20px; COLOR: #ff6603; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.smsubheader { FONT-WEIGHT: bolder; FONT-SIZE: 13px; COLOR: #ff6603; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.subheader { FONT-WEIGHT: bolder; FONT-SIZE: 16px; COLOR: #ff6603; LINE-HEIGHT: 22px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
.style48 {FONT-WEIGHT: bolder; FONT-SIZE: 20px; COLOR: #FF9933; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; }
.style50 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style54 {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.style56 {color: #000000}
.style58 {color: #333333}
.style65 {FONT-SIZE: 20px; COLOR: #666666; FONT-FAMILY: Arial, Helvetica, sans-serif; font-weight: bold;}
.style69 {FONT-WEIGHT: bolder; FONT-SIZE: 13px; COLOR: #FF9933; FONT-FAMILY: Arial, Helvetica, sans-serif; }
.style70 {color: #FF9933}
.style71 {
COLOR: #FF9933;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
}
.style73 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
.style74 {color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style75 {FONT-FAMILY: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 20px;}
.style76 {font-size: 14px}
.style77 {
color: #666666;
font-size: 18px;
}
.style80 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
}
-->
</style>
</head>
<body>
<h1>Tabber Example</h1>
<p>← <a href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p>
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<p><a href="#lala">make me</a></p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab"> <a name="lala"></a>
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
</body>
</html>
Is there anyway to make a tab system like that and have links within tab one which take you to areas in tab 2? thanks. Hi There all, I have been looking around for tabs on the search engines. unfortunately all I can find is tabs with tabs . Below is 3 examples that I made with photoshop to give you an idea of what I am looking for. A tab type format without the tabs. The selector looks like a normal text type link line on top and on bottom but when the selected text is clicked it displays the content of the selected below/above (within the div box I think) it. I know that possibly <div>'s are involved but I have been struggling to figure out how to do this without the tabs that I see on the internet, and failed to design it so it looks like the images below. Can someone help me figure this out? Can this be done with just css or do I also need javascript as well?. As always, Thank you in Advance This might not be html at all, but how do you get the little icon on the page tabs on people's browsers (like the lightbulb on this page) ? Can't find the info anywhere. Thanks. So, Im looking for some code that acts like dhtml tabs. I have a webpage that I want to add a column on the right that has like 5 tabs. Clicking on each tab you get different content without leaving the actual page. Like this I suppose: http://www.cnn.com/ In the "Watch Video" section. You can tab between Most Popular and Best Video. thats the idea. Any good solutions. The current solution I have works, but is sloppy. Im hoping for some better code. Any help would be appreciated. Thanks, Mac hello, I have a tabbed interface and I have four tabs. I only want one tab to show onload and then when the user clicks on a button, I want the other three tabs to show. Here's my code. I tried many things but it doesn't display right. HTML Code: <ul class="tabs">
<li><a href="#" title="content_1" class="tab">General</a></li>
<li><a href="#" title="content_2" class="tab">Functional</a></li>
<li><a href="#" title="content_3" class="tab">SLA</a></li>
<li><a href="#" title="content_4" class="tab">Pricing</a> </li>
</ul>
HTML Code: <a href="#" class="button"> <span>Click Here</span> </a> Hi guys, not much of a programmer and new here... but putting a site together for a friend. I have an swf file taking up the majority of a page. On the edges of are a couple of AP images (using dreamweaver). Looks great when all loaded up, but the images within HTML load well before the SWF (depending on connection speed) and it looks a bit goofy. Is there any kind of script that will hold back displaying these images until the flash is fully loaded? Many thanks for any and all advice!!! Hey, is there a way to have this tag: <meta http-equiv='refresh' content='0; URL=http://myspace.com/> And make another one: <meta http-equiv='refresh' content='1; URL=http://myspace.com/> And keep going and going? Or can I use some other method to keep redirecting the user to another site? I'm not sure if this is the right category because I have no idea what controls this. I have a frame with a bunch of pictures for easy updating on several pages. On a slower connection, the pictures load one by one. Is there any way to make the frame display only when all the pictures have been loaded? Thanks. jk111 im having a problem with a double login box showin up http://www.recon.wsnw.net My site uses several "tabs" on some pages to help the reader find information of interest. Tabs are working just fine, except for the behavior described below. They are HTML based - essentially anchors using the # sign, using CSS to be pretty and located properly, and are defined like this: <ul> <li><a href="#tab-1">Specs</a></li> <li><a href="#tab-2">Features</a></li> <li><a href="#tab-3">Documents</a></li> etc etc </ul> I have 7 tabs PROBLEM: In some cases, additional code includes an href to another tab on the SAME page, but clicking the link fails to refresh the page and show the new tab. Example: Assume current URL page is: "www.mydomain.com/product.php#tab-5" On this same page, within tab-5, I want to include a link that simply points at tab-6. So my URL link would simply be: ...<a href = "www.mydomain.com/product.php#tab-6">Jump to the next tab</a>... Note the only change in the URL is the '#tab-6' portion. Upon clicking this link: 1) The Browser URL address DOES change to 'www.mydomain.com/product.php#tab-6' 2) The page itself DOES NOT refresh - it stays on the #tab-5 page. Wierd, huh? 3) If I then click on the browser refresh button, the page refreshes properly and it will display tab 6 If the link were to point at a different page - say "www.mydomain.com/services.php#tab-6" - it would work just fine. It only fails to refresh when I am linking to the same, current URL, but different tab. A web developer I know thought he could build a "custom handler" (in Javascript, maybe?) that would solve this; it just seems to me it should work as is. I'm open to any suggestions. My initial thought is that I need the href AND a way to force a refresh in the same step, but maybe there is something more elegant or appropriate out there. Befuddled in CA, tc Hi All, I am trying to find out some links where a demo is shown for the navigation between different tabs in HTML using CSS. I am able to find some demos but I dont want to use any image nor I want to use any other Tools like MOO TOOLS. Please share if you have the code for the HTML CSS Tabs or the links where I can find this info. Thanks in Advance, Gagan Hello I am creating a table of contents using the <p> tag for each title. Each title is clickable and takes you to a section of the website relative to the title clicked. My problem is that I want everything to line up nicely and this is problematic using the <p> tag - for example: ARTICLE 1 - BLAH BLAH BLAH BLAH ARTICLE 10 - BLAH BLAH BLAH BLAH I want to look like this. (Actually scratch that this forum suffers the same problem I get when trying it on my own site, but you can comprehend what I'm talking about =] ). I realize there are cheap fixes such as just adding a bunch of spaces and what not but it still doesn't work. I could explain why but just trust me it doesn't work. My idea was to just use a table with 2 columns: 1 column = ARTICLE # - 2 column = BLAH BLAH BLAH however I can't extend a clickable title across 2 columns. Also I should note that I'm using DRUPAL. Thanks for your time. All, I hope I'm in the right forum. I had already downloaded some very simple example of creating web page tabs some time ago, and now CANNOT find it anywhere for the life of me. I don't remember exactly what code language it was, and I don't think it was java. Not even vbscribt /asp. No controls either. I think it was HTML (if possible), but basically it showed Tab1, Tab2, Tab3, with data that said "this is the first tab", "this is the second", etc... I really need to use this example now, but have lost the original, and no example on the internet quite matches it. Can someone provide a very simple method for creating tabs, or relevant link? Thank you so much! Regards, asp_jr |
|||||||