HTML - Dhtml Tabs, Within A Page...
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 Similar TutorialsI am trying to make a page that has a DTML (dynamic expanding links), and a right hand column - Below is my code. I want to make the right hand colunm (most common questions grey area) a fixed height. It seems to be the length of the page as if all the menus are clicked on and opened even if they are closed. How can I make it a fixed height regardless of how many links (dhtml) are opned or not so that most common questions are no longer than say 500 pixles. Any suggestions would be handy. I can send code / page as its to long to paste here! Thanks, Ryan 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 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 My page loads correctly, but when I open a new tab in IE7 so the tab bar appears, my page shifts to the left, and the menu overlaps/ obscures parts of the images. I can't find a reason why this happens, can anyone help? A screenshot of the error can be found below: http://www.onetopsoccer.com/error.jpg The page itself is at http://www.onetopsoccer.com/index.shtml Hello, I'm looking for a script for a DHTML object. I don't know what the object is called nor do I have an example to link you to (sorry), but I'll do my best to describe it. It consists of a row of objects, usually images (particularly thumbs made into hyperlinks), that you can scroll through (horizontally) simply by hovering the mouse cursor over the left or right sides. I'm open to variants of this (hovering, for example, isn't necessary; dragging will work as well). Does anyone know what I'm talking about? Dear friend, What is the difference between HTML & DHTML?give me some explanation about it. Thanks in advance I'm trying to make a site where people can post information. Similar to something like facebook where people enter in fields and then those fields instantly become a profile. I can figure out how to write the form etc., but what I need help on is how to get it to open into a new page. Is this DHTML? If not, can anyone tell me the formal name, so I can try to find it and learn it? Or if someone could just tell me how, that would be great too. Thanks! What's up all, I just downloaded the Suckerfish HoverLightbox Redux DHTML drop down menu files and I am not sure where to put them or how to edit them? I am an ecommerce guy and while a do know a tiny bit of html code you could say I am html challenged. I really need to get this menu up and running. If someone could help me figure out how to configure these files I would really appreciate it. Thanks, J Lets say I create a DHTML menu in a third party app and applied it to about 10 pages (htm)... Lets say I want to change the menu, such as the color and also add to the submenu... Will it apply to every page? How is this possible? Thanks a LOT. Hello, I'm looking for a DHTML script that will combine a floating menu with a slide in menu. Here's an example of a floating menu: http://www.dynamicdrive.com/dynamici...staticmenu.htm Here's an example of a slide in menu: http://www.dynamicdrive.com/dynamici...lideinmenu.htm Does anybody know where I can get a menu that combines these features? I have been trying to piece something together with a traditional DHTML show hide, but i cannot get it to work properly, so i trashed it. What I'm trying to do seems very simple. I have 2 videos I want to have on 1 page. I don't want to stack them, I just want to give the user a text link choice on which to choose. So the page would load with a generic looking video player. Which would switch out once you picked a video. HTML Code: <strong>Select: </strong><a href="#">video 1</a> | <a href="#">video 2</a> <div id="generic">generic page</div> <div id="video1">vid1</div> <div id="video2">vid2</div> I kinda got it to work in an earlier version, but it wasn't perfect. It would end up showing video1 properly, but when you clicked on video 2 it would show both. It wouldn't hide video 1. any help would be much apprecaited. I have a general question about something I'm trying to incorporate into a site. I don't have a link to show since I haven't figured out a good way to do this yet. I have a page (page.html) with a button. The button brings up a layer with j01.html in it. I want to be able to click "next" in j01.html and have it call up j02.html in the same window. A next button in j03.html will bring up j04.html and so on, for about 15-20 pages. A "back" button will go backwards through the same sequence, and an "index" button will bring up an index of those pages within that popin. Basically, it will be like a minisite within the grander site for that little area. What's a good way to do this? I'm hoping there's an easy way to code the link so that j02.html will replace j01.html in the same layer and so forth, leaving the page.html alone and that it won't require some super huge scary amount of scripting. This is the first time I'm trying to figure any of this out and it makes my head hurt. Thanks in advance for your replies. -dd Hey guys I am build ing a site and wanted to no the best solution for a drop down menu system. I read somewhere that 10% of people of javascript disabled so they would not be able to use the javascript dropdown. Is the best option to use dhtml for this so it will work in all browsers old and new. Matt Hello everyone. I have a web page that contains a long form. One of the fields, "Show Date", has a <button> that triggers a DHTML Date Selector widget I downloaded. However, the formatting on the selector is not as desired--I recently placed the following line of CSS code in my shared CSS file: Code: div { background-repeat: no-repeat; position: absolute; visibility: visible; } I know for a fact that this line is responsible for the formatting bug, but since I have hundreds of div's that I need formatted with the no-repeat, absolute positioning, and visible attributes, this messes up my date selector (just the absolute). So basically my question is this: Is it possible to keep my single line of super-formatting all my DIVs while retaining the desired look for the Date Selector? (Possibly a line of CSS for the selector??) Any help would be greatly appreciated. Thanks! Hi, I created a new website that works great in Internet Explorer. When I tried it in Firefox I had a few problems: my layer widths appeared differently and I was unable to click on any links on the page. I was able to fix the widths of the layers by using conditional comments, however I am unable to fix the problem with the hyperlinks. I think the problem is caused by the DHTML vertical dropdown menu covering up the other layers--because when I hide the menu layer and test it in firefox I am able to click on the hyperlinks and use my overflow scrollbars, etc. If I move the menu behind the other layers, the menu becomes hidden. Is there a solution to this problem that will allow me to keep the DHTML menu without covering up the other layers on the page? All help is appreciated. Thanks, James HELLO ALL! I'm new here. Thank you in advanced. I have a dthml menu on my main page. I would like to apply this same menu to all my other web pages with making one update. Currently I have the same code pasted and and script on all my product pages. If I have any changes to make to the menu I have to go and update all 20+ pages with the changes of the drop down menu. on each of my product pages is there any way to reference this one dthml menu to use...I'm hoping this is making sense? I'm using dreamweaver CS3 and I used Sothink's DHTML MENU creator. I'd like it that when I make a change to the dhtml menu it would apply to all my product pages. Thank you Chris I have been considering using some DHTML to make an expandable/collapsable block of text.. see:: http://kilbad.com/DEVELOPMENT/expand.php This page does validate at the w3c, when set to strict, as xhtml strict (I think the code has transitional right now), which I am happy about. However, what percentage of browsers will support this feature? I don't know much about dhtml. How do you xhtml purists feel about this code in general?? Thank you so much in advance!! Brendan I have this menu to rollover... and I cant seem to get the positioning correct. All I want to do is shift it to the right about 100px so that it doesnt cover up the rest of the menu items. I will paste the CSS, javascript, and html code here... I have tried positioning it via CSS and thats not working :/ Is there a way to do it in the java code? Or if you want you can say how you would do it in CSS... maybe I just was doing it wrong. CSS Code: #dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; } #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; } #dropmenudiv a:hover{ color:#000000; background-color: #cc0000; } JAVA Code: <script type="text/javascript"> var menu1=new Array() menu1[0]='<a href="group.html">About (group)</a>' menu1[1]='<a href="officers.html">Current Officers</a>' menu1[2]='<a href="officerjoin.html">Become an Officer</a>' var menu2=new Array() menu2[0]='<a href="meetings.html">Meetings</a>' menu2[1]='<a href="alumniday.html">Alumni Day</a>' menu2[2]='<a href="industryday.html">Industry Day</a>' var menuwidth='165px' var menubgcolor='lightyellow' var disappeardelay=50 var hidemenu_onclick="yes" var ie4=document.all var ns6=document.getElementById&&!document.all if (ie4||ns6) document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>') function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function showhide(obj, e, visible, hidden, menuwidth){ if (ie4||ns6) dropmenuobj.style.left=dropmenuobj.style.top="-500px" if (menuwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=menuwidth } if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") obj.visibility=visible else if (e.type=="click") obj.visibility=hidden } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=0 if (whichedge=="rightedge"){ var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth } else{ var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up? edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge } } return edgeoffset } function populatemenu(what){ if (ie4||ns6) dropmenuobj.innerHTML=what.join("") } function dropdownmenu(obj, e, menucontents, menuwidth){ if (window.event) event.cancelBubble=true else if (e.stopPropagation) e.stopPropagation() clearhidemenu() dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv populatemenu(menucontents) if (ie4||ns6){ showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth) dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px" } return clickreturnvalue() } function clickreturnvalue(){ if (ie4||ns6) return false else return true } function contains_ns6(a, b) { while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function dynamichide(e){ if (ie4&&!dropmenuobj.contains(e.toElement)) delayhidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) delayhidemenu() } function hidemenu(e){ if (typeof dropmenuobj!="undefined"){ if (ie4||ns6) dropmenuobj.style.visibility="hidden" } } function delayhidemenu(){ if (ie4||ns6) delayhide=setTimeout("hidemenu()",disappeardelay) } function clearhidemenu(){ if (typeof delayhide!="undefined") clearTimeout(delayhide) } if (hidemenu_onclick=="yes") document.onclick=hidemenu </script> HTML Code: <li><a href="events.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Events</a> </li> Any help would be appreciated! Thanks! 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 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 |