onresize and Firefox

fomalhaut

Member
Messages
107
Reaction score
0
Points
16
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:
<?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 &eacute;v&egrave;nements</b>&nbsp;
    <input type="submit" name="raffrListe" id="raffrListe" value="Raffra&icirc;chir la liste" style="background-color:cyan" />
   </form>
   </caption>
   <tr><th>Date</th><th>S&eacute;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&eacute;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.
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
Why not simply make a headr div with position: fixed; pinned to the top of the browser and scroll the rest of the page? All CSS; no JavaScript needed.
 

fomalhaut

Member
Messages
107
Reaction score
0
Points
16
Thank you, Essellar, for that very simple, but very good idea ! I've changed my page as you said. It works fine, and it seems the same I wanted !

But the "onresize" that don't works with Firefox is a problem I'd like to resolve... one of these days !

thanks again.
 
Top