JavaScript - Javascript Tabs Trouble Shooting. Content Not Showing On 2nd And 3rd Tabs.

Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once.

Does anyone know how to do this please?

Thanks so much for your help.

I have an javascript coding issue with regards to a tabbed menu.

The code is supposed to hide the unselected divs and show the selected div, but all divs are showing and no tab is selected when the page initialises.

The source code is viewable he http://www.kenaani.co.uk

I was following this tutorial: http://www.elated.com/articles/javascript-tabs/

Which works fine in this example: http://www.elated.com/res/File/artic...ript-tabs.html

I have tried commenting out the other scripts, and the divs still show on the page, so I don't think its a conflicting issue.

Am hoping that someone can spot whatever is going wrong.

I am currently designing a website for our public library. I have added a card catalog search bar on the side of every page. Our catalog software company has supplied the code. After embedding it, I previewed each page to make sure it was working properly. At the time, it worked fine.

Since then, I have added other elements to the homepage such as a Twitter feed and a Flickr slideshow. Now, when I attempt to search in the catalog search bar on the homepage, it opens two tabs, but only in Firefox.

Our IT person from the software company suggested I make a copy of the page and strip the code down to see what the problem is. After doing this, I have made no headway. Even with the catalog as the only code left on the page, other than text, it still opens two tabs.

The following is the code embedded on the homepage:

Code:

 <div>
		<script type='text/javascript'> 
        function gotoserver() {
                sn = document.getElementById('server').value;
                redirecturl = 'http://webopac.infovisionsoftware.com/stephenville/default.aspx?Title='+sn;
                window.open(redirecturl)
                //document.location.href=redirecturl;
        }
        

</script>
 
<input type='text' name='server' id='server' />
<input type='submit' id='mySearch' value='Go' onclick='javascript:gotoserver();' />
		</div>

I would appreciate any advice given. Thank you for your time.

Hey guys, No clue what the code is for this. I did try creating one but it dramaticly failed. Just wondering what is the code for a box with tabs where if you click the tabs it provides information i the box below. and does not link you to a site. And i need 6 tabs on it. Thanks for people that can provide.

Dear friends,

I use this script wich works fine in FF, Opera and Chrome but not in IE!

Code:

<script type="text/javascript">
function DoAllThese() {
window.open('http://google.com', 'One','_blank');
window.open('http://www.yahoo.com','Two','_blank');
}
</script>

Code:

<button onClick="DoAllThese();">Open</button>

Is it possible to do it in IE?

I am having a problem with a page I am building using jquery tabs. I have basically put a set of tabs within another set. The top level of tab navigation works fine, but then you click on the tabs navigation within the first tab it doesnt work.

http://dl.dropbox.com/u/14080718/Final/TabsInTabs.html

I cant get it to work and not sure why. I am still learning web design and I am not sure if this is a html/css or jquery problem. I would appreciate any help anyone wants to give.

Thanks,

Good Afternoon,

I am new to coding and I am needing help coding a form. I need javascript coding that will give me tabs. I also need the tabs to be greyed out for the users who should not see those tabs. So if i have an analyst, section chief and division chief. I need three tabs. when the analyst is logged in filling out their questions on the form i want the sections cheif and division chief tabs to be greyed out. Can anyone help me with this!

Lizz





Reply With Quote




12-17-2014, 07:34 PM #2
Dormilich View Profile View Forum Posts

Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts

what do you have so far?

hi i try this code it not working beacause its open after one second open new tab javascript query
but i have also use php redirect url also . i want javascript new tab url open new tab before page redriect
here is code

Code:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    setTimeout(function() {
            window.open(
               'https://google.com',
           '_blank' 
        );
     
      }, 2000);
});
</script>
<?php
$url='http://yahoo.com';

echo header ('Location:'.$url);
?>

in above code i want page redirect to yahoo.com before open new tab of google.com how to set it please help me

Hi,

I have a problem with my script displaying tabs (jquery tabs) in frames. When the scripts (not in frames) are viewed in the browser, the tabs are displayed correctly.
I created a script containing frames for existing scripts to be displayed in certain frames. Some scripts display fine in the frames, even some of those that contain tabs. While some may display correctly, I still get some scripts when viewed in the frames script that are not displaying the tabs correctly.
Can anyone please give me a solution to this problem.

Thank you.

I have a script that brings up an overlay box onclick that needs to be on top of everything else on page, however I can't get it to show on top of the navigation tabs. I tried calling the overlay script at the very beginning of the head section as well as tried to call it at the end but it doesn't seem to matter.

Is there something I can add to the script to force it on top of every other object on the page?

I am using a script I found and trying to make some changes.
It is a avatar creating script that will put a face together. The tabs are different parts of the face.
The problem is I don't want all the different hair colors and styles to show and in the color tab when you click a color it will bring up the hair styles in that color only in the next tab.

I have tried
if(isset($_GET['color'])) {
but this is only showing the first color style cant it to work. So then tried to use switch like this
PHP Code:
<p>
<span name="color">
<img src="herotmb/color0.png" alt="" /><input name="avatar[color]" type="radio" value="black" id="black" onclick="swapImage(this);" />
<img src="herotmb/color1.png" alt="" /><input name="avatar[color]" type="radio" value="brown" id="brown" onclick="swapImage(this);" />
<img src="herotmb/color2.png" alt="" /><input name="avatar[color]" type="radio" value="darkbrown" id="darkbrown" onclick="swapImage(this);" />
<img src="herotmb/color3.png" alt="" /><input name="avatar[color]" type="radio" value="yellow" id="red" onclick="swapImage(this);" />
<img src="herotmb/color4.png" alt="" /><input name="avatar[color]" type="radio" value="red" id="yellow" onclick="swapImage(this);" />
</span>
</p>




                
<?php



    switch(id){
              case 'BLACK':
            echo '
                <p>
                <img src="heroimg/hair0-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-black" />
                <img src="herotmb/hair1-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-black" />
                <img src="herotmb/hair2-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-black" />
                <img src="herotmb/hair3-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-black" />
                <img src="herotmb/hair4-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-black" />
                <img src="herotmb/hairNone-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'BROWN':
            echo '
                <p>
                <img src="herotmb/hair0-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-brown" />
                <img src="herotmb/hair1-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-brown" />
                <img src="herotmb/hair2-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-brown" />
                <img src="herotmb/hair3-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-brown" />
                <img src="herotmb/hair4-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-brown" />
                <img src="herotmb/hairNone-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'DARKBROWN':
            echo '
                <p>
                <img src="herotmb/hair0-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-darkbrown" />
                <img src="herotmb/hair1-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-darkbrown" />
                <img src="herotmb/hair2-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-darkbrown" />
                <img src="herotmb/hair3-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-darkbrown" />
                <img src="herotmb/hair4-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-darkbrown" />
                <img src="herotmb/hairNone-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'RED':
            echo '
                <p>
                <img src="herotmb/hair0-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-red" />
                <img src="herotmb/hair1-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-red" />
                <img src="herotmb/hair2-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-red" />
                <img src="herotmb/hair3-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-red" />
                <img src="herotmb/hair4-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-red" />
                <img src="herotmb/hairNone-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

        break;
        case 'YELLOW':
            echo '
                <p>
                <img src="herotmb/hair0-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-yellow" />
                <img src="herotmb/hair1-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-yellow" />
                <img src="herotmb/hair2-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-yellow" />
                <img src="herotmb/hair3-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-yellow" />
                <img src="herotmb/hair4-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-yellow" />
                <img src="herotmb/hairNone-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" />
                </p>';

}
?>


nothing shows up.
I have searched and found this and tried it but get more errors because I'm not just using images
Code:

http://www.codingforums.com/showthread.php?t=205694

How can I get this to work ?

I am having some problems with some JS code that does not work cross browsers

Here is my code

Code:

<html>
<head>
	<link rel="STYLESHEET" type="text/css" href="../../include/css/tab.css">
	<script src="../../include/js/tabpane.js" type="text/javascript"></script>
</head>
<body>
<div name="objBody">
	<div id="tabpane">
		<div>
			<h2>Contact</h2>
			<div>
				<br>THIS IS CONTACTS TEXT
			</div>
		</div>
		<div>
			<h2>Contact2</h2>
			<div>
				<br>THIS IS CONTACTS TEXT2222
			</div>
		</div>
	</div>
</div>
	<script type="text/javascript">
		var tp = new TabPane(document.getElementById("tabpane"));
	</script>

</body>
</html>

CSS
Code:

.tab_pane_holder {
	width: 100%;
	background-color: #336699;
	font-family: verdana;
	font-size: 8pt;
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-top: 1px solid black;
}
.tab_normal {
	border-right: 1px solid black;
	border-left: 1px solid white;
	border-bottom: 1px solid black;
	border-top: 1px solid white;
	padding: 5px;
	background-color: #5a7edc;
	text-align: center;
	/*width: 100px;*/
	height: 10px;
	color: white;
}
.tab_active {
	border-right: 1px solid black;
	border-left: 1px solid black;
	border-top: 1px solid black;
	background-color: white;
	padding: 5px;
	text-align: center;
	/*width: 100px;*/
	height: 10px;
	color: black;
}
.tab_after_active {
	border-right: 1px solid black;
	border-left: 0px solid black;
	border-top: 1px solid white;
	border-bottom: 1px solid black;
	background-color: #5a7edc;
	padding: 5px;
	text-align: center;
	/*width: 100px;*/
	height: 10px;
	color: white;
}
.tab_before_active {
	border-left: 1px solid white;
	border-bottom: 1px solid black;
	background-color: #5a7edc;
	border-top: 1px solid white;
	text-align: center;
	padding: 5px;
	/*width: 100px;*/
	height: 10px;
	color: white;
}

JS
Code:

function TabPane(el)
{

	var tmp = this;
	this.element = el;
	this.tabs = new Array();
	this.divs = new Array();
	this.selected = null;
	for(var i = 0; i < el.childNodes.length; i++)
	{
		this.tabs[i] = this.element.childNodes[i].childNodes[0].innerHTML;
	}
	for(var i = 0; i < this.element.childNodes.length; i++)
	{
		this.divs[i] = this.element.childNodes[i];
	}
	for(var i = 0; i < this.element.childNodes.length; i++)
	{
		this.element.childNodes[i].removeChild(this.element.childNodes[i].childNodes[0]);
	}
	this.tabPane = document.createElement("div");
	this.element.insertBefore(this.tabPane,this.element.childNodes[0]);
	this.tabPane.className = "tab_pane_holder";
	for(var i = 0; i < this.tabs.length; i++)
	{
		var x = this.tabs[i];
		this.tabs[i] = document.createElement("span");
		this.tabPane.appendChild(this.tabs[i]);
		this.tabs[i].innerHTML = x;
		this.tabs[i].className = "tab_normal";
		this.tabs[i].style.cursor = "hand";
		this.tabs[i].onselectstart = function()
		{
			return false;
		}
		this.tabs[i].onclick = function()
		{
			tmp.showPage(this);
		}
	}
	for(var i = 0; i < this.divs.length; i++)
	{
		this.divs[i].style.display = "none";
		this.divs[i].style.width = this.element.style.width;
		this.divs[i].style.height = this.element.style.height;
		this.divs[i].style.overflow = "auto";
		this.divs[i].style.borderRight = "1px solid black";
		this.divs[i].style.borderBottom = "1px solid black";
		this.divs[i].style.borderLeft = "1px solid black";
	}
	this.showPage = function(el)
	{
		var x,y;
		for(var i = 0; i < this.tabs.length; i++)
		{
			if(el == this.tabs[i])
			{
				x = i;
			}
		}
		y = ((x-1) < 0)?0:(x-1);
		for(var i = 0; i < this.tabs.length; i++)
		{
			this.tabs[i].className = "tab_normal";
		}
		this.tabs[y].className = (y == x)?"tab_active":"tab_before_active";
		if(this.tabs[y+1])
		{
			this.tabs[y+1].className = (y == x)?"tab_after_active":"tab_active";
		}
		if(this.tabs[y+2])
		{
			this.tabs[y+2].className = (y == x)?this.tabs[y+2].className:"tab_after_active";
		}
		if(x == 0)
		{
			this.tabs[x].style.borderLeft = "0px solid black";
		}
		for(var i = 0; i < this.divs.length; i++)
		{
			var show = (i == x)?"block":"none";
			this.divs[i].style.display = show;
		}
	}
	this.showPage(this.tabs[0])
}

hi experts,
I need to open same url (flash streaming site) on multiple tabs (min 100 tabs) without crashing my browser or drinking all my cpu usage.
Pls dont ask me why i need to open like that. The question is can it be done.

Thanks

I have an ajax tabbed site which loads the content in the div below it.

I made a drop down link so that the user could select one of 3 on one tab but this is outside of the script.js. I'm wondering if there's a way to get the target of these drop down links to open in the div below instead of a new tab?

http://voiceprocess.net/script.js

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home Improvement Survey Process</title>
<link href="../../../voiceprocess.ico" rel="shortcut Icon">
<link rel="stylesheet" type="text/css" href="../styles.css" />
<link href="../dropdown.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

</head>

<body>

<div id="main" style="float:left">

<table width="991" border="0" cellpadding="0">
<tr>
<td width="649"><ul class="tabContainer">
<!-- The jQuery generated tabs go here -->
</ul></td>
<td width="75" style="padding-bottom:43px"> <div id="centeredmenu" style=" width:0px; height:0px"> <ul > <li style="padding-left:0px"><span class="sears"><a href="#')">&nbsp;</a></span>
<ul style="padding-top:2px"> <span class="space"></span><span class="space"></span>
<li><a href="pages/sears_refacing.html" target="_self">Cabinets Refacing</a> <div>
<li><a href="pages/sears_hvac.html">HVAC </a></li>
<li><a href="pages/sears_windows.html"></a>New Windows </a></li>
</ul>
</li>
</div></td>
<td width="241"><a href="upsell.php" target="_blank"><img src="../u.png" alt="" width="26" height="37" border="0" style="padding-bottom:5px"/></a>&nbsp;<a href="../data.html" target="_blank"><img src="../s.png" alt="" width="29" height="37" border="0" style="padding-bottom:5px"/></a><img src="../../../images/logosm.png" alt="" width="158" height="42" hspace="10" /> </td>
</tr>
</table>
<div id="tabContent">
<div id="contentHolder">
<!-- The AJAX fetched content goes here -->
</div>
</div>
</body>
</html>