Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS change tabs Problem.

    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;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    He also can't spell:
    Code:
    document.getElementById("bodyInactieve")....
    versus
    Code:
    <div id="bodyInactive">
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    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;
    }
    Next:
    Code:
    #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.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    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>

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •