...

View Full Version : New layer in a <div>



temptraq
05-30-2004, 09:37 AM
Hi!

I have a JavaScript code that should hide everything in a div after x seconds.
I´t works as it is but when i add it to my site nothing happens.
I think it has something to do with the fact that i made classes and id´s in my .css.
Anybody who can work this out to function?

This is the working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="stylesheet" HREF="testet.css" TYPE="text/css">
<title>Fada div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function doFade(obj, color) {
var theDiv = document.getElementById(obj);
theDiv.style.background = color;
theDiv.innerHTML = '';
}
</script>
</head>

<body onload="setTimeout('doFade(\'holder\', \'yellow\');', 1000)">
<div id="holder">
Den som gapar efter galen fågel ser inte skogen för alla ben.
</div>
</body>
</html>

And here are the css...


#menucontainer {
position:absolute;
top:100px;
left:20px;
width:150px;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #menucontainer{
width: 172px;
w\idth: 150px;
}
/* End hide from IE5/mac */

.menu {
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
width:150px;
font-family:verdana, arial, helvetica, sans-serif;
font-size:11px;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #menu{
width: 172px;
w\idth: 150px;
}
/* End hide from IE5/mac */


.action {
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
width:150px;
font-family:verdana, arial, helvetica, sans-serif;
font-size:11px;
margin-top: 20px;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #action{
width: 172px;
w\idth: 150px;
}
/* End hide from IE5/mac */

If needed i can show html-code as well...

Thanks.

temptraq
05-30-2004, 09:44 AM
Well, thought that you should see the html (or php).



<? session_start(); // Alltid överst på sidan
// Kolla om inloggad = sessionen satt
if (!isset($_SESSION['sess_user'])){
header("Location: index.php");
exit;
}
else {
include "anslut.php";
$sql = mysql_query("SELECT COUNT(*) FROM kandidat") or die(mysql_error());
$antal=mysql_fetch_row ($sql);
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!-- <html>-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK REL="stylesheet" HREF="nystyle.css" TYPE="text/css">
<title>RAFF Start</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript"> <?//JAVASCRIPT THAT DO NOT WORK?>
function doFade(obj, color) {
var theDiv = document.getElementById(obj);
theDiv.style.background = color;
theDiv.innerHTML = '';
}
</script>
</head>
<body onload="setTimeout('doFade(\'action\', \'yellow\');', 1000)"> <?//ONLOAD JAVASCRIPT?><div id="header"> &nbsp;</div>
<div id="content">
<h1>Välkommen till RAFF!</h1>
<p>RAFF består av Kontaktpersoner, Beställningar och Kandidater. I menyn till vänster väljer du vad du vill arbeta med.</p>
<p>Lite statistik:
<? echo ($antal[0].' Kandidater är registrerade.');?>
</p>
</div>
<div id="menucontainer">
<div class="menu">
<script type="text/javascript">
function meny(objId)
{
var o1 = (document.all) ? document.all[objId] : document.getElementById(objId);
var image = document.images[objId+'_img'];

if( o1.style.display == 'block' )
{
o1.style.display = 'none';
image.src = 'plus.jpg';
}
else if( o1.style.display == 'none' )
{
o1.style.display = 'block';
image.src = 'minus.jpg';
}
}

window.onload = function() {
var loaded = new Image();
loaded.src = 'minus.jpg';
}
</script>
<div><a href="javascript:void(0)" onclick="meny('M1'); this.blur()"><img id="M1_img" src="plus.jpg" border="0" alt="" /> SÖK</a></div>
<div id="M1" style="display: none">
<div>Kontaktperson</div>
<div>Beställning</div>
<div>Kandidat</div>
</div>

<div><a href="javascript:void(0)" onclick="meny('M2'); this.blur()"><img id="M2_img" src="plus.jpg" border="0" alt="" /> Kontaktperson</a></div>
<div id="M2" style="display: none">
<div>Ny</div>
<div>Sök</div>
</div>

<div><a href="javascript:void(0)" onclick="meny('M3'); this.blur()"><img id="M3_img" src="plus.jpg" border="0" alt="" /> Beställning</a></div>
<div id="M3" style="display: none">
<div>Ny</div>
<div>Sök</div>
</div>

<div><a href="javascript:void(0)" onclick="meny('M4'); this.blur()"><img id="M4_img" src="plus.jpg" border="0" alt="" /> Kandidat</a></div>
<div id="M4" style="display: none">
<div>Ny</div>
<div>Sök</div>
</div>

<div><? // Om nivån på användaren är =>1 visa ADMINmenyn
if ($_SESSION['sess_niva']>=1)
echo '<a href="admin.php">Admin</a>';
?>
</div>

<div>
<?// Om inloggad visa logga ut länk annars inte
if (isset($_SESSION['sess_user']))
echo "<a href=\"index.php?logout=\">Logga ut</a>\n";
?>
</div>
</div>
<div id="action" class="action"> <?//JAVASCRIPT DIV THAT SHOULD BE OVERWRITTEN?>
<img src="stop.gif" alt="">
<br>
En fågel i handen är bättre
</div>
</body>
</html>

glenngv
05-31-2004, 02:22 AM
You have 2 onloads.


<body onload="setTimeout('doFade(\'holder\', \'yellow\');', 1000)">
...
window.onload = function() {
var loaded = new Image();
loaded.src = 'minus.jpg';
}

You need to combine them into one.


window.onload = function() {
setTimeout("doFade('holder', 'yellow')", 1000);
var loaded = new Image();
loaded.src = 'minus.jpg';
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum