JS change tabs Problem.

joet · 02-22-2013, 05:31 PM

Hello everyone

I have some problems with changing my tabs on my website.

http://websiteedinger.webatu.com/Apps/portal/

The idea is when I click on the tab "Portfolio" the image portfolio changes to another image which has another color and the textpage also changes to another image wich has another color..

I hope i have gave you enough information here is my code:

My JS code

Code:

 
function wijzigTabPortfolio()
{
	document.getElementById("Portfolio").style.backgroundImage = "url('portfolioActive.jpg')";
	document.getElementById("bodyInactieve").style.backgroundImage="url('Body-backgroundActive.jpg')";
}

My HTML

Code:

<!DOCTYPE html>
<html>
		<head>
			<title>Test HTML5</title>
			<link href="../common/style.css" type="text/css" rel="stylesheet"> </link>
			<link href="style_portal.css" type="text/css" rel="stylesheet"> </link>
			<script type="text/javascript" src="../comon/Script1.js"> </script> 
	
		<head>
	
	<body id="container" >


			<div id="header">
		
			</div>
		
			<div id="menu">
				<div id="Portfolio" onclick="wijzigTabPortfolio()">
					
				</div>
				<div id="Contact" onclick="wijzigTabContact()">
					
				</div>
				<div id="OverMij" onclick="wijzigTabOverMij()">
					
				</div>
				<div id="Projecten" onclick="wijzigTabProjecten()">
					
			</div>
			
		
			<div id="bodyInactive">
			
			</div>
		
			<div id="footer">
			
			</div>
	
	</body>
</html>

My CCS

Code:

#container	
{ 
	margin: 0px auto;
	width: 1000px;
	height: 400px;
	right: 50px;
	text-align: left;
	background-color:white;
	background-image:url('../common/images/background1.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}



.h1
{
	text-align: center;
	color: red;
	font-size:big;
	font-family:"Bodoni MT Black";
}

#header
{
	position:absolute;
	margin: 0px auto;
	width: 1000px;
	height: 100px;
	top: 0px;
	background-color:transparent;
	background-image:url('../common/images/Header1.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#menu
{
	position:absolute;
	margin:0px auto;
	width: 1000px;
	height: 50px;
	top:	100px;
	background-color:transparent;
	background-image:url('../common/images/Menu1.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#bodyInactive
{
	
	position:absolute;
	margin:0px;
	opacity: 0.5;
	width: 1000px;
	height: 450px;
	top: 150px;
	background-color:black;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#Portfolio
{
	top:100px;
	width:249px;
	height:47px;
	opacity:0.5;
	background-color:black;
	background-image:url('../common/images/Portfolio.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#Contact
{
	left:249px;
	top:100px;
	width:251px;
	height:50px;
	opacity:0.5;
}

#OverMij
{
	left:500px;
	top:100px;
	width:241px;
	height:50px;
	opacity:0.5;
}

#Projecten
{
	left:741px;
	top:100px;
	width:259px;
	height:50px;
	opacity:0.5;
}

#footer
{
	position:absolute;
	margin:0px;
	background-color:yellow;
	width:1000px;
	height:67px;
	top:600px;
}

sunfighter · 02-23-2013, 12:44 AM

You never asked a question. So I'll just correct the mistakes I find. Lets start with the html file.
First I get rid of the empty lines and move the </div> tags up to live with the start tag on the same line.
Then:

Code:

<link href="../common/style.css" type="text/css" rel="stylesheet"> </link>
<link href="style_portal.css" type="text/css" rel="stylesheet"> </link>

</link> not correct way to close. Well in my editor anyway. (been told it didn't matter, but I don't like it.)
<head> needs a close tag you have <head> not </head>.
<body id="container" > Body does not need an ID. We could use a container for the divs that appear inside of the body so lets get rid of this id and make a container div to enclose everything.
<div id="menu"> has no close tag so lets give it one. For instructional purposes we leave it like that and comment out the menu choices:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Test HTML5</title>
<link href="../common/style.css" type="text/css" rel="stylesheet">
<link href="style_portal.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../comon/Script1.js"></script>
</head>
<body id="container" >
<div id="header"></div>
<div id="menu"></div>
<div id="bodyInactive"></div>
<div id="footer"></div>
</body>
</html>

And then we'll add the css.

Old Pedant · 02-23-2013, 12:48 AM

He also can't spell:

Code:

document.getElementById("bodyInactieve")....

versus

Code:

<div id="bodyInactive">

sunfighter · 02-23-2013, 01:02 AM

Every programmer should learn css at catholic school. He would have to stand in front of the class with his hands out stretched while a nun stood over him hitting his knuckles with a ruler saying "Do not use position:absolute;. Do not use position:relative;". Every time we see it in your css along with top: bottom: left: and/or right: we will comment it out Or better yet, just delete it. We will use the normal order of things to design the web site.

First we will do a simple reset. Sometimes it's needed sometimes not:

Code:

body{
	margin: 0;
	padding: 0;
	border: 0;
}

The next has explanations:

Code:

#container
{
	margin: 0px auto;
	width: 1000px;
//height: 400px;  LET THE CONTENTS DICTATE THE HEIGHT
//right: 50px;
	text-align: left;
	background-color: white;  
	background-image:url('../common/images/background1.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
/* REMOVE THE DOT WE DON'T WANT TO MAKE THIS A CLASS */
h1
{
	text-align: center;
	color: red;
	font-size:big;
	font-family:"Bodoni MT Black";
}
#header
{
//position:absolute;
	margin: 0px auto;
	width: 1000px;
	height: 100px;
//top: 0px;
	background-color: pink;// transparent;   // We use a different color here to see how things work
	background-image:url('../common/images/Header1.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#menu
{
//position:absolute;
	margin:0px auto;
	width: 1000px;
	height: 50px;
//top:	100px;
	background-color: transparent;
	background-image:url('../common/images/Menu1.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#bodyInactive
{
//position:absolute;
	margin:0px;
	opacity: 0.5;
	width: 1000px;
	height: 450px;
//top: 150px;
	background-color:black;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#footer
{
//position:absolute;
	margin:0px;
	background-color:yellow;
	width:1000px;
	height:67px;
//top:600px;
}

Look at this. No position use everything flows into it's correct place.

sunfighter · 02-23-2013, 01:14 AM

Now we add the menu choices. They have to appear in the space we set aside for the menu. In other words inside the menu div. text indented to see what's inside of what:

Code:

<body>
<div id="container">
	<div id="header"><h1>I am here</h1></div>
	<div id="menu">
		<div id="Portfolio" onclick="wijzigTabPortfolio()"></div>
		<div id="Contact" onclick="wijzigTabContact()"></div>
		<div id="OverMij" onclick="wijzigTabOverMij()"></div>
		<div id="Projecten" onclick="wijzigTabProjecten()"></div>
	</div>
	<div id="bodyInactive"></div>
	<div id="footer"></div>
</div>
</body>

Here is the styling for it. I took out the top's and left's I added background color so we can see them (I don't have your images) and a float:left; to each for positioning. You can take the background-color out after you see where things are. Maybe the images will work for you better then color...
css file:

Code:

#Portfolio
{
//top:100px;
	width:249px;
	height:50px;
float:left;
	opacity:0.5;
	background-color: green;//black;
	background-image:url('../common/images/Portfolio.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#Contact
{
//left:249px;
//top:100px;
	width:251px;
	height:50px;
float:left;
	opacity:0.5;
background-color: silver;
}
#OverMij
{
//left:500px;
//top:100px;
	width:241px;
	height:50px;
float:left;
background-color: purple;
	opacity:0.5;
}

#Projecten
{
//left:741px;
//top:100px;
	width:259px;
	height:50px;
float:left;
background-color: red;
	opacity:0.5;
}

Lastly add the javascript. Again I used color to show what was going on. Remove it and let the images work for you. PS. remember to fix the spelling mistake:

Code:

<script type="text/javascript">
function wijzigTabPortfolio()
{
	document.getElementById("Portfolio").style.backgroundColor = "pink";//Image = "url('portfolioActive.jpg')";
	document.getElementById("bodyInactive").style.backgroundColor = "pink";//Image="url('Body-backgroundActive.jpg')";
}
</script>

sunfighter · 02-23-2013, 01:14 AM

And all together:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Test HTML5</title>
<style type="text/css">
body{
	margin: 0;
	padding: 0;
	border: 0;
}
#container
{
	margin: 0px auto;
	width: 1000px;
//height: 400px;  LET THE CONTENTS DICTATE THE HEIGHT
//right: 50px;
	text-align: left;
	background-color: white;
	background-image:url('../common/images/background1.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
/* REMOVE THE DOT WE DON'T WANT TO MAKE THIS A CLASS */
h1
{
	text-align: center;
	color: red;
	font-size:big;
	font-family:"Bodoni MT Black";
}
#header
{
//position:absolute;
	margin: 0px auto;
	width: 1000px;
	height: 100px;
//top: 0px;
	background-color: pink;// transparent;   // We use a different color here to see how things work
	background-image:url('../common/images/Header1.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#menu
{
//position:absolute;
	margin:0px auto;
	width: 1000px;
	height: 50px;
//top:	100px;
	background-color: transparent;
	background-image:url('../common/images/Menu1.png');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#bodyInactive
{
//position:absolute;
	margin:0px;
	opacity: 0.5;
	width: 1000px;
	height: 450px;
//top: 150px;
	background-color:black;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#Portfolio
{
//top:100px;
	width:249px;
	height:50px;
float:left;
	opacity:0.5;
	background-color: green;//black;
	background-image:url('../common/images/Portfolio.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
#Contact
{
//left:249px;
//top:100px;
	width:251px;
	height:50px;
float:left;
	opacity:0.5;
background-color: silver;
}
#OverMij
{
//left:500px;
//top:100px;
	width:241px;
	height:50px;
float:left;
background-color: purple;
	opacity:0.5;
}

#Projecten
{
//left:741px;
//top:100px;
	width:259px;
	height:50px;
float:left;
background-color: red;
	opacity:0.5;
}
#footer
{
//position:absolute;
	margin:0px;
	background-color:yellow;
	width:1000px;
	height:67px;
//top:600px;
}
</style>
<!--<link type="text/css"  href="../common/style.css" rel="stylesheet">
<link type="text/css"  href="style_portal.css" rel="stylesheet">
<script type="text/javascript" src="../comon/Script1.js"> </script>-->
</head>

<body>
<div id="container">
	<div id="header"><h1>I am here</h1></div>
	<div id="menu">
		<div id="Portfolio" onclick="wijzigTabPortfolio()"></div>
		<div id="Contact" onclick="wijzigTabContact()"></div>
		<div id="OverMij" onclick="wijzigTabOverMij()"></div>
		<div id="Projecten" onclick="wijzigTabProjecten()"></div>
	</div>
	<div id="bodyInactive"></div>
	<div id="footer"></div>
</div>

<script type="text/javascript">
function wijzigTabPortfolio()
{
	document.getElementById("Portfolio").style.backgroundColor = "pink";//Image = "url('portfolioActive.jpg')";
	document.getElementById("bodyInactive").style.backgroundColor = "pink";//Image="url('Body-backgroundActive.jpg')";
}
</script>
</body>
</html>