Hello.
I've a problem with onresize on the Firefox browser: I've a list in a table. This table is defined in a "div" tag. Depending on the height of my window, I want only the "div" to be scrollable, not the whole document, because in fact, there will be other elements above it:
PHP Code:
<?php session_start();
include ('../inc/functions.php');
include ('../inc/DB_Connect.inc'); // with $dbh
require ('../inc/gesJardin_insert.inc');
?>
<html><head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<title>Gestion du site jardin</title>
<script type="text/javascript" src="../Jardin.js"></script>
<link rel=stylesheet href="../jardin.css" type="text/css">
</head>
<body id="body">
<div class="flot"><center>
<a name="liste"></a>
<div id="lstEven" style="overflow:auto;" onresize="visibleHeight()">
<script type="text/javascript">
visibleHeight();
</script>
<table style="text-align:center;" border='1'><caption>
<form action="gesJardin.php#liste" id="liste" method="post"> <!-- Raffraichissement de la liste des évènements -->
<b>Liste des évènements</b>
<input type="submit" name="raffrListe" id="raffrListe" value="Raffraîchir la liste" style="background-color:cyan" />
</form>
</caption>
<tr><th>Date</th><th>Séq</th><th>Titre</th><th>Nom fichier photo</th></tr> <!-- le commentaire sera dessous avec un aperçu photo -->
<?php
require ('../inc/evenements_liste.inc');
?>
</table>
</div>
</center>
</div>
<br /><a href="../index.php" style="position:relative; z-index:+999">Retour au menu</a><br /><br />
<!--<input type="button" onclick="deconnect()" class="deconnect" value="déconnexion" />
<br />-->
<?php
include('../inc/gesJardin.inc'); //that's code for take data from DBase mySQL
?>
<br />
</body>
</html>
Code:
function visibleHeight(id) {
if (!id) {id = "lstEven";}
var top = document.getElementById(id).offsetTop;
var winH = window.document.body.clientHeight;
var hauteurLibre = winH - top - 15; //205 / 74;
document.getElementById(id).style.height = hauteurLibre;
//alert('id='+id+' top='+top+' winH='+winH+' hauteurLibre='+hauteurLibre+' '+id+'.height='+document.getElementById(id).style.height+' //');
}
When the document loads, no problem, the visibleHeight function works fine. But on resize, it does nothing. I've tried the "onresize" condition on the "body" tag, it's the same. I've tried a first script with
Code:
window.onresize = visibleHeight();
it's the same! And if I add a "setTimeout" before the function, it works only one time, at the document load! I've tried replace onresize condition by other too, such onscroll, or onmouseover, and in these cases, all works fine !
I don't know what to do for onresize !
thank you for help.
---------- Post added at 06:39 AM ---------- Previous post was at 06:36 AM ----------
... and naturely, when I clic the "raffrListe" input button, making a "reload" it works too.
LinkBack URL
About LinkBacks
Reply With Quote
