|
HTML - Href And Working With Tabs On The Page
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 Similar TutorialsSo, 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 Well, this is my page. Next time I will use div, but for now this is what I'v got. http://grimstad.uia.no/nokomdet/bile...ikk/index.html For some reason, when using firefox, all the hyperlinks that is not text (menu, and other parts of the site) will not be made as buttons, only the smapp space is linkable. If you understand. In IE and Opera however, it works smooth. Any idea why? Or how to fix this? deadline was 2 hours ago, but I might have the time to fix it, if I can have your help.. 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 have an issue where I have two web pages generated from Java servlets in NetBeans 5.5. The first of these pages requires some user input and when the page's form is submitted, this input is sent to the server. The server processes the input to generate a text file which is used by a graphing tool to plot a graph as a 'png' file. This text file and graph are then displayed in the HTML generated for the second page using 'href's in a table. This works perfectly well but if the user wants to alter the graph, they have to go back to page one and change the options and resubmit the form. This is where the problem occurs; in Firefox all is well but in Internet Explorer and Opera, when they resubmit the form, page two displays the original graph rather than the changed one. A hard 'refresh' is required via F5 to force the displaying of the new text file and graph. I have tried various of the HTML: meta http-equiv=\"refresh\" content=\"0\"> alternatives and forcinf reload upon loading the second page but the graph and text file still show original data. Is there a way to force the browser to 'pick up' the new text and graph generated so that the page display is correct? I see this more as an HTML issue rather than a servlets one hence its inclusion in this forum. Thanks Martin O'Shea. Hello I have a problem. <a href="...">...</a> isn't working in IE, so noone using IE can see my page. My page only uses html and basic CSS (it is a simple page). Here is a link to my page if anyone can help... http://ahat.pef.uni-lj.si/po0910/Sku...r/fizika1.html So I'm making a very simple client side gallery using some xml and javascript. The page works fine in Firefox, Safari and Chrome. However it does not work at all in IE8, in either standard or compat mode. The page is at: http://elfguy.net/gallerytest.html?2 In IE the two big issues are that the images just don't load half the time, and that's really puzzling. The first image never loads when the page is loaded, and then when you hover over the images they sometimes load, and sometimes don't, for no apparent reason. The relevant code is: Code: parent.document.getElementById("gal_img").src = item[which].getElementsByTagName("url")[0].childNodes[0].nodeValue;
The second issue is the left iframe does not scale to 95% of the height of the table after an image loads, as it should be, and I've tried adding height settings for every parent element, margin 0, padding 0, with no success. The relevant code is: Code: <table align="center" bgcolor="#B5B5BF" style="border: 2px black solid; vertical-align: middle;height: 95%;" width="95%"> <tr><td align="right" width="210" style="height: 95%;"> <iframe id="gal_frame" frameborder="0" scrolling="auto" width="200" style="height: 95%;"><a href="galleryparsetest.html?1">Click here for the thumbnail list</a></iframe> </td><td> I know the code is a not easy to read and I'm using tables but the page validates and works fine in every other browser. Anyone feels like tackling this I'd appreciate. I really don't know much about html and I could use some help here. http://www.hazlethawks.com/hawks/cheer_news.asp there should be a link on the left menu that says "loud and proud" but it doesn't show up in firefox. IE works fine. Any thoughts? Thanks in advance i dont know why the page called index doesnt work.. here is the code Code: <HTML> <HEAD> <TITLE>INDEX</TITLE> </HEAD> <FRAMESET ROWS = "120,500,70"border="0" framespacing="0" frameborder="0"> <FRAME NAME="BANNER" SCROLLING ="no" SRC ="http://ectwebdevelopment.webng.com/banner.html"> <FRAMESET COLS ="110,500"border="0" framespacing="0" frameborder="0"> <FRAME NAME="NAV" SCROLLING ="no" SRC ="http://ectwebdevelopment.webng.com/nav.html"> <FRAME NAME="home" SCROLLING ="yes" SRC ="http://ectwebdevelopment.webng.com/home.html"> </FRAMESET> <FRAME NAME="FOOTER" SCROLLING ="no" SRC ="http://ectwebdevelopment.webng.com/footer.html"> </HTML> can someone plz help me and tell me what to do to solve this problem? the site I'm new to forms and am trying to learn how to make a multiple page one. What I've made so far is very basic, but I figure I shouldn't make a pretty and complex one until I master the simple. I've made three separate pages: page a has the first part of the form and when you click 'continue' it should save the information and move you onto page b where you fill in another form. Then you move onto page c where the information you entered is displayed for you to review, then you press send. That's when it's sent to my e-mail. There are two problems with my code: when you click 'continue' on page A it automatically sends the info to my e-mail and I don't want it to. I want it to go to page b. It also displays the information entered on page a, but also shows a bunch of the code that should be hidden. I don't know why. And it's driving me nuts. I'd appreciate any help! Here's the code: <html> <head> <title>Sample Multiple Page Form</title> </head> <body bgcolor="white" text="#000000" link="#0000CC" vlink="#0000CC" alink="#0000CC" marginwidth=0 marginheight=15 topmargin=15 leftmargin=0> <form action="http://www.bluehost.com/bluemail" enctype="multipart/form-data" method="POST"> <input type="hidden" name="sendtoemail" value="contact@mywebsite.com"> <input type=hidden name="next_page" value="Multiple_Page_b"> <input type=hidden name="required" value="name:Name Required,email:e-Mail Address Required"> <input type=hidden name="current_page" value="Multiple_Page_a"> <input type=hidden name="form" value="2"> <input type=hidden name="start" value="1"> <center> <table width=450 cellpadding=4> <tr> <td colspan=2> <font size=2 face="arial" color=red> </td> </tr> <tr><td><font face="arial" size=2> Your Name: </td><td><input type=text name="name" value="" size=30> </td></tr> <tr><td><font face="arial" size=2> Email Address:</td><td><input type=text name="email" value="" size=30></td></tr> <tr><td colspan=2><br><input type="submit" name="next" value="Continue >>"></td></tr> </table> </form> </body> </html> And here's the message displayed when clicking continue: Thank you for completing our form. The following info was sent to contact@mywebsite.com: Field Value next_page Multiple_Page_b required name:Name Required,email:e-Mail Address Required current_page Multiple_Page_a form 2 start 1 name Jess email contact@myemail.com next Continue >> Hi Guys, Newbie on the forum - so cheers in advance www.cheesenugget.com/lifecoaching/index1.html i have tried everything and it does not display on IE 6,7 or 8 It shows fine on Firefox. Can anyone please shed some light on the issue - i have not added any strange script on it For the life of me I can't seem to figure out why this page jump isn't working. http://www.thegoheens.com/resources/test.html Any help is greatly appreciated. Thanks! 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. 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. 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 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 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 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> I used dis below script,which wil ask my visitor his name,n den wil display it in the corresponding page.But i dont know,where i went wrong,n its not working in my html page. Someone please rectify it n give me its working script for an html page. Please... Ok here is the script.. IN HEAD TAG, <script language=JavaScript> <!-- script supplied free by hypergurl.com http://www.hypergurl.com --> <!--- start of javascript hide var Firstname=prompt("Enter your Firstname :","Firstname"); // unhide ---> </script> IN BODY TAG, <script language=JavaScript> <!--- start of javascript hide document.write("<center><h1>Welcome" + " "); document.write(Firstname + " "); document.write("</h1></center>"); //unhide ---> </script> Hello all, I am trying to copy a page over to my domain (with permission) and even though it looks ok, the submit buttons / field areas are not working properly. Here is the page I am trying to get working. http://www.ldodds.com/foaf/foaf-a-matic I have grabbed the appropriate .js files and everything in MY header is fine, but like I said.. I can not get the buttons to actually take the data from the fields and spit out the code in the box provided. Any help would be great, thanks! |
|||||||