javascript calling function help!

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>

---

@bionoid i still get the same output..

<div style="font-size: large; text-align: center; font-weight: bold;" id="text"></div>
<div style="font-size: large; text-align: center; font-weight: bold;" id="demo2"></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';
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 > 640) {t.innerHTML = 'GREATER THAN 640';} else
{t.innerHTML = 'GREATER THAN 000';}

}
myFunction();

window.onresize = function() {myFunction();};

</script>

its still getting the functions from 768 even though switched from different width

Ok, here is my shot in the dark:

Code:

---

<div style="font-size: large; text-align: center; font-weight: bold;" id="text"></div>
<div style="font-size: large; text-align: center; font-weight: bold;" id="demo2"></div>

<script type="text/javascript">

        var myFunction = (function()
        {
                var iid = 0;

                function highest()
                {
                        document.getElementById("demo2").innerHTML = "10 sec interval //highest";
                }
                function lower1()
                {
                        document.getElementById("demo2").innerHTML = "10 sec interval //lower1";
                }
                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>

---

<div style="font-size: large; text-align: center; font-weight: bold;" id="text"></div>
<div style="font-size: large; text-align: center; font-weight: bold;" id="demo2"></div>

<script type="text/javascript">

var myFunction = (function()
{
var iid = 0;

function highest()
{
function highest1(){
document.getElementById("demo2").innerHTML = "10 sec interval //highest1";
setInterval(highest2, 5000);
}

function highest2(){
document.getElementById("demo2").innerHTML = "10 sec interval //highest2";
setInterval(highest3, 5000);
}

function highest3(){
document.getElementById("demo2").innerHTML = "10 sec interval //highest3";
setInterval(highest1, 5000);
}
return highest1();
}


function lower1()
{

document.getElementById("demo2").innerHTML = "10 sec interval //lower1";

}


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?

@bionoid thank you vry much! i got the output..

i just added location.reload() in this line

window.onresize = function() {myFunction();};