JavaScript - Tabs Don't Display Content

I know that when you "display: none" with CSS it will not show the div content in the browser, but will still show the div and content in page source.

Is there a way (via javascript or anything else) to also remove the content from page source at the same time?

Thanks.

Hey guys.
I'm currently paying for a web service on a hosted platform. Basically, I'm unable to edit any raw content, however I am able to do things like add JS/HTML to the header or footer of a page, which will in turn be displayed on every page of this platform. My dilemma is, I only want content being showed on a single page of the platform. Specifically, I want a window.alert being displayed on the "/signup" page, but all I have to work with is JS in a global footer.

Is there some way I can use window.location to achieve this?

Hi all,
this is the code I'm using in order to display the contents of an xml file into a page. It's working fine with IE but with Firefox.

I have searched over intrenet and have applied all suggestions I've found about this issue. Unfortunately it's still not working. Can you please help me???


Code:

function importXML()
{
	if (document.implementation && document.implementation.createDocument)
	{
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.onload = createTable;
	}
	else if (window.ActiveXObject)
	{
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.onreadystatechange = function () {
			if (xmlDoc.readyState == 4) createTable()
		};
 	}
	else
	{
		alert('Your browser can\'t handle this script');
		return;
	}
	xmlDoc.load("news.xml");
}

function createTable()
{
	var x = xmlDoc.getElementsByTagName('event');
	var newEl = document.createElement('table');
	newEl.style.width = '100%';
	newEl.setAttribute('cellPadding',0);
		newEl.setAttribute('cellspacing',0);
	var tmp = document.createElement('TBODY');
	newEl.appendChild(tmp);
	for (i=0;i<x.length;i++)
	{
			var row = document.createElement('TR');
			if (x[i].childNodes[0].nodeType != 1) continue;
			var container = document.createElement('<TD style="padding-left:3px; font-weight:bold;">');
			var theData = document.createTextNode(x[i].childNodes[0].firstChild.nodeValue);
			container.appendChild(theData);
			row.appendChild(container);
			tmp.appendChild(row);
			row = document.createElement('TR');
			if (x[i].childNodes[1].nodeType != 1) continue;
			var container = document.createElement('<TD  class="box_2">');
			var theData = document.createTextNode(x[i].childNodes[1].firstChild.nodeValue);
			container.appendChild(theData);
			row.appendChild(container);
			tmp.appendChild(row);
		
	}
	document.getElementById('writeroot').appendChild(newEl);
}

Hi, all!
I'm a "fresh" newbie, JS self-taught from the great resources provided in this forum. I want to better currently working page but lack enough knowledge atm. The situation is this:
* Multimedia database - audio clips and corresponding video clips to some of the audio ones.
* Dynamic content page showing the latest (by date) 5 or 10 clips with their info from db.
* Links provided for each clip, both to listen in a new popup window and to download the clip.

Accomplished so far: everything of the above *only* for the audio clips (and video ones but separately on a different page).
Every record in the data base has an audio clip and some of them, not all, have a video clip. E.g. there are records only with audio clips and there are records both with audio and video clips.
My question is is it possible wherever there's a video clip in the db in an already displayed db-record on the page to display 'watch' and 'download' icon for it together with already shown audio icons ('listen' and 'download')? Conditional displaying.
I read about combination between JS and CSS in almost similar situation but don't know how to apply it in my situation due to my little knowledge base at this moment. So, any help will be highly appreciated and useful as it will push me forward in learning JS. I'm almost sure this is possible as it's not a complicated issue.
I can post my so far working code, if requested. If not provided enough info on the issue, let me know.
Thank you in advance!

Hi,

I am Aditya. I am explaining below the exact scenario where I need the help:

I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text.
Now, I need help for the below issues:
1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages.
2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page.

I am new to web development, so may be that these questions are too simple.
But, I need some help from you.

Waiting for your reply,

Thanks,
Aditya

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.

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?

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,

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 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,

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.

hie everyone plz i want to know how to make tabs using javascript....


i want to make tabs like this website

http://traveline.idea-sys.net/CSP/Default.aspx?A=2&P=50 --> (M/S Darakum - Description / GalleryDeck / Plan)

can anyone help me plz?