• Locked
2 replies [Last post]
Sat, 2010-07-24 12:42
zerpex
zerpex's picture
User offline. Last seen 1 year 28 weeks ago. Offline
newbie
Timezone: GMT+2
Joined: 2010-07-24
Posts: 1
Points: 2

Hello, at the moment I'm creating a website where on the frontpage (index.php) there is 2 divs that contains first a monitor-image with 3 computer screens, and then a div, that set an overlay over 2 of the screens - the divs like this:

<div id="monitor_overlay"></div> //Contains the overlay
<div id="lastest"></div> //Contains the screens

The CSS is: 

#lastest {
	position:absolute;
	top:121px;
	width:960px;
	height:397px;
	background:url(../images/monitor_bg.png);
	z-index:-1;
}
 
#monitor_overlay {
	position:absolute;
	top:136px;
	margin-left:256px;
	width:443px;
	height:277px;
	background:url(../images/monitor_overlay.png) no-repeat;
	z-index:1;
}

Those screens are needed on the index.php only - other content will be shown on the other sites.

That I need is a javascript that does following:

When loading the site it will automaticly load index.php - aka it shows the divs.

Then when I press on the menu-button "Blog" or "Portfolio" it should hide the divs "monitor_overlay" and "lastest"

but then if I press on "Home" again - I want the divs to be shown - How do I do this?

and maybe also an expanded version:

That when comming from index.php and going to blog - hide divs.

But if coming from blog with hidden divs and go to portfolio - Do nothing

So it don't try to hide divs that already is hidden..

Any that can help? it would be so wonderful!

Thank you, best regards,

Lucas Kristensen

Top
Tags:
Mon, 2010-08-23 12:50
#1
dboppana
dboppana's picture
User offline. Last seen 1 year 23 weeks ago. Offline
newbie
Timezone: GMT+5.5
Joined: 2010-08-23
Posts: 2
Points: 2

use below solution

One solution, the most simple, use display block/none styles and relative positioning.

Start from something like:

<html>
<head>
<script>
function show(target){
document.getElementById(target).style.display = 'block';
}
function hide(target){
document.getElementById(target).style.display = 'none';
}
 
 
</script>
</head>
<body><div style="position:absolute">
<a href="#" onclick="show('lastest')">show one div</a><br>
<a href="#" onclick="show('lastest'); show('monitor_overlay')">show 2 divs</a><br>
<a href="#" onclick="hide('lastest'); hide('monitor_overlay')">hide 2 divs</a><br>
 
</div> 
 
<div id="lastest" style='display:block'>content1</div>
<div id="monitor_overlay" style='display:block'>content2</div>
 
</body>
</html>

use the following code above.

Thanks,
Dharmendra,
www.cssdog.com

Top
Mon, 2010-08-23 12:46
#2
dboppana
dboppana's picture
User offline. Last seen 1 year 23 weeks ago. Offline
newbie
Timezone: GMT+5.5
Joined: 2010-08-23
Posts: 2
Points: 2

use below solution

One solution, the most simple, use display block/none styles and relative positioning.

Start from something like:

<html>
<head>
<script>
function show(target){
document.getElementById(target).style.display = 'block';
}
function hide(target){
document.getElementById(target).style.display = 'none';
}
 
 
</script>
</head>
<body><div style="position:absolute">
<a href="#" onclick="show('lastest')">show one div</a><br>
<a href="#" onclick="show('lastest'); show('monitor_overlay')">show 2 divs</a><br>
<a href="#" onclick="hide('lastest'); hide('monitor_overlay')">hide 2 divs</a><br>
 
</div> 
 
<div id="lastest"></div>
<div id="monitor_overlay"></div>
 
</body>
</html>

use the following code above.

Thanks,
Dharmendra,
www.cssdog.com

Top
  • Locked