Seting up listener (using setTimeout) 1

[hablablow]

Hi users,

I am building a script that checks every n interval (1 second for example) the offsetHeight of two layers. If this value changes it updates margin-top value for another layer. Here is below the basic structure i set up:

function screen()
var screenSize = screen.offsetWidth;
screenSize = w

function checker()
var timer = setTimeout: count from nTime to n+1Time // defines a period of 1 second
timer = t

var listener = ( check for w < or > than w ) inside t // if the user resizes his window

if

inside t, w changes
document.getElementById('article').style.marginTop = 'n';
n = (firstDiv.offsetHeight + secondDiv.offsetHeight) + "px";

else

var firstDiv = document.getElementById("FirstOne");
var secondDiv = document.getElementById("SecondOne");
var artDiv = document.getElementById("Article");

artDiv.style.marginTop = (firstDiv.offsetHeight + secondDiv.offsetHeight) + "px";

Could someone help me to build this up.
I am also wondering if this script would not have a bad impact on browser responsiveness.
Thanks

 

[sirlojik]

This is off the top of my head and not tested but should do the trick, hopefully. enjoy!

var firstDiv  = document.getElementById("FirstOne");
var secondDiv = document.getElementById("SecondOne");
var artDiv    = document.getElementById("Article");

var lastHeight1 = firstDiv.offsetHeight;
var lastHeight2 = secondDiv.offsetHeight;

DetectChange = function ()
     {
     var height1 = parseInt(firstDiv.offsetHeight),
         height2 = parseInt(secondDiv.offsetHeight);
     if (height1!=lastHeight1)
        {
        return true;
        } else
     if (height2!=lastHeight2)
        {
        return true;
        }
     lastHeight1 = height1;
     lastHeight2 = height2;
     return false; 
     }

doMargin = function ()
     {
     var ret = DetectChange();
     if (ret)
         {
         artDiv.style.marginTop = (firstDiv.offsetHeight + secondDiv.offsetHeight) + "px";
         }
      setTimeOut(doMargin,1000);
      }

setTimeOut(doMargin,1000);

---------------------------
ServerOp: LogicSoft

http://logicsoft.pcplayground.com

 

[hablablow]

Thanks a lot for your reply...
I wasn't expecting an answer anymore...
Your script is clean and may do the trick...
Thanks a lot !

 

[sirlojik]

THIS HAS BEEN SOLIDIFIED TO WORK BETTER...ENJOY!!!


DetectChange = function ()
{
var height1 = parseInt(firstDiv.offsetHeight),
height2 = parseInt(secondDiv.offsetHeight);
if (height1!=lastHeight1)
{
lastHeight1 = height1;
lastHeight2 = height2;
return true;
} else
if (height2!=lastHeight2)
{
lastHeight1 = height1;
lastHeight2 = height2;
return true;
}
lastHeight1 = height1;
lastHeight2 = height2;
return false;
}



---------------------------
ServerOp: LogicSoft

http://logicsoft.pcplayground.com

 

[hablablow]

Thanks sirlojik.
One last remark:
is it possible to add a simple routine that will execute the script if css is enabled, such as:

if document.getElementById = true; // > execute the script
else = void; // do not move any margin, do not perform the
// DetectChange();

SCRIPT CONTENT


Is it possible to turn it this way ?

Thanks

 

[sirlojik]

if (document.getElementById) //DOM
    {
    var firstDiv  = document.getElementById("FirstOne");
    var secondDiv = document.getElementById("SecondOne");
    var artDiv    = document.getElementById("Article");

    var lastHeight1 = firstDiv.offsetHeight;
    var lastHeight2 = secondDiv.offsetHeight;

    DetectChange = function ()
        {
        var height1 = parseInt(firstDiv.offsetHeight),
            height2 = parseInt(secondDiv.offsetHeight);
        var ret = false;
     if (height1!=lastHeight1){ret=true;} else
     if (height2!=lastHeight2){ret=true;}
     lastHeight1 = height1;
     lastHeight2 = height2;
     return ret; 
     }

doMargin = function ()
     {
     var ret = DetectChange();
     if (ret)
         {
         artDiv.style.marginTop = (firstDiv.offsetHeight + secondDiv.offsetHeight) + "px";
         }
      setTimeOut(doMargin,1000);
      }

setTimeOut(doMargin,1000);    
}

---------------------------
ServerOp: LogicSoft

http://logicsoft.pcplayground.com

 

[hablablow]

Thanks sirlojik,
but...
Seems it's not working:
Here my issue: I disable css, and the script remains activated. It adds a big white space between the 2 layers ( the margin-top value is still calculated )... And if i disable Js and css then i have regular plain text ( no more white space ) without styles.

if (document.getElementById)

checks if user a css enabled or if his browser supports the dom ?...
The second case is the worst for me as it doesn't filter the Js when people have css turned off. What i actually want is to avoid is when accessing on the site with some vireless device ( pda, new cellulars etc... ) people will have a big blank white space to scroll...
So is there another method to perform the check ?

Thanks

 

[sirlojik]

I dnt know to be honest with you, and would like to know.....hello!!! can u people help me and hablablow out?
is there a way of css detection using javascript?

---------------------------
ServerOp: LogicSoft

http://logicsoft.pcplayground.com

 

[tsuji]

There seems to have a couple of devices of some sophistication being vested into the construction. But, care should be taken to test out the idea first by dismentaling it to its bare form otherwise you create unnecessary cloud to make debugging more difficult.

In the meantime, change this?

[tt]>setTimeOut(doMargin,1000);
setTime[red]o[/red]ut([red]"[/red]doMargin[red]()"[/red],1000);
[/tt]

 

[tsuji]

Further notes:

After looking at the code more closely, maybe have to put it without the parentheses.
[tt]>setTimeOut(doMargin,1000);
setTime[red]o[/red]ut([red]"[/red]doMargin[red]"[/red],1000);[/tt]
Not really quite sure.

In any case, I try to dismantle it like this and also get rid of dom testing.
[tt]
<script language="javascript">
var lastHeight1;
var lastHeight2;
//initialize
function doit() {
var firstDiv = document.getElementById("FirstOne");
var secondDiv = document.getElementById("SecondOne");
var artDiv = document.getElementById("Article");
lastHeight1 = firstDiv.offsetHeight;
lastHeight2 = secondDiv.offsetHeight;
doMargin();
}
function DetectChange () {
var firstDiv = document.getElementById("FirstOne");
var secondDiv = document.getElementById("SecondOne");
var artDiv = document.getElementById("Article");
var height1 = parseInt(firstDiv.offsetHeight,10);
var height2 = parseInt(secondDiv.offsetHeight,10);
var ret = false;
if (height1!=lastHeight1){
ret=true;
} else if (height2!=lastHeight2){
ret=true;
}
lastHeight1 = height1;
lastHeight2 = height2;
return ret;
}
function doMargin () {
var firstDiv = document.getElementById("FirstOne");
var secondDiv = document.getElementById("SecondOne");
var artDiv = document.getElementById("Article");
var ret=DetectChange();
if (ret) {
artDiv.style.marginTop = (firstDiv.offsetHeight + secondDiv.offsetHeight) + "px";
}
setTimeout("doMargin()",1000);
}
window.onload=doit;
</script>
[/tt]
- tsuji