i don't know what to do... i want the output to display the function with the width that is greater than 970 but it doesn't show up.... and same goes with the other width declared i want to set a function inside them and show the function please help me
Code:
function myFunction()
{
var w=window.outerWidth;
var h=window.outerHeight;
var txt="Window size: width=" + w + ", height=" + h;
if(w>970){
function highest()
{
//higher
document.getElementById("demo2").innerHTML="10 sec interval //highest";
setTimeout("lower1()", 10000);
}
function lower1()
{
//lower1
document.getElementById("demo2").innerHTML="10 sec interval //lower1";
setTimeout("lower2()", 10000);
}
function lower2()
{
//lower2
document.getElementById("demo2").innerHTML="10 sec interval //lower2";
setTimeout("highest()", 10000);
}
}
else if(w>768){
//function 768 lower1
}
else if(w>640){
//function 640 lower2
}
document.getElementById("demo").innerHTML=txt;
}
I'm not completely sure of what is supposed to happen, but from what I can see you're declaring a set of functions if the width is greater than 970 pixels, but you do not execute any of them? Also, the setInterval functions you are passing are strings, so when executed the functions will be out of scope.
Changes are in red:
HTML Code:
<div id="demo"></div><div id="demo2"></div>
Code:
function myFunction()
{
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
if (w > 970) {
function highest()
{
//higher
document.getElementById("demo2").innerHTML="10 sec interval //highest";
setTimeout(lower1, 10000);
}
function lower1()
{
//lower1
document.getElementById("demo2").innerHTML="10 sec interval //lower1";
setTimeout(lower2, 10000);
}
function lower2()
{
//lower2
document.getElementById("demo2").innerHTML="10 sec interval //lower2";
setTimeout(highest, 10000);
}
highest();
}
else if(w > 768){
//function 768 lower1
}
else if(w > 640){
//function 640 lower2
}
document.getElementById("demo").innerHTML = txt;
}
myFunction();
The html must obviously exist before the script gets executed. Let me know if I'm not understanding something.
@bionoid thanks for the respond!
i didnt add the html because its too long, your right im trying to call a function from 970 and above... now what i want to do is, when the width goes 970 below it will call a new function from that value of width... for example the width went to 750,, inside of that an if condition will call the function inside of 750..
but the problem is... even i went to 750 and below it still call the function at the 970..
i tried your code and still has the same problem.
Well, lets try and sort out the resizing part first.
I tried this as a test and got what I think you're expecting:
Code:
<div style="font-size: large; text-align: center; font-weight: bold;" id="text"></div>
<script type="text/javascript">
function myFunction()
{
var
w = window.outerWidth,
t = document.getElementById('text');
if (w > 970) {t.innerHTML = 'GREATER THAN 970';} else
if (w > 768) {t.innerHTML = 'GREATER THAN 768';} else
if (w > 640) {t.innerHTML = 'GREATER THAN 640';} else
{t.innerHTML = 'GREATER THAN 000';}
}
myFunction();
window.onresize = function() {myFunction();};
</script>
function lower2()
{
document.getElementById("demo2").innerHTML = "10 sec interval //lower2";
}
function lowest()
{
document.getElementById("demo2").innerHTML = "//lowest";
}
return function()
{
var
w = window.outerWidth,
t = document.getElementById('text');
if (iid) {clearInterval(iid);}
if (w > 970)
{
t.innerHTML = 'GREATER THAN 970';
iid = setInterval(highest, 10000);
highest();
}
else if (w > 768)
{
t.innerHTML = 'GREATER THAN 768';
iid = setInterval(lower1, 10000);
lower1();
}
else if (w > 640)
{
t.innerHTML = 'GREATER THAN 640';
iid = setInterval(lower2, 10000);
lower2();
}
else
{
t.innerHTML = 'GREATER THAN 000';
iid = 0;
lowest();
}
};
}());
myFunction();
window.onresize = function() {myFunction();};
</script>
@bionoid
i almost got the ouput... because when it switched to 768 it displays the function for 768.. but it still calls the function for 970 after a seconds so how can i lock the function just for an specific width?
Reply With Quote
Bookmarks