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:
<div id="demo"></div>
<div id="demo2"></div>
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([COLOR="#FF0000"]lower1[/COLOR], 10000);
}
function lower1()
{
//lower1
document.getElementById("demo2").innerHTML="10 sec interval //lower1";
setTimeout([COLOR="#FF0000"]lower2[/COLOR], 10000);
}
function lower2()
{
//lower2
document.getElementById("demo2").innerHTML="10 sec interval //lower2";
setTimeout([COLOR="#FF0000"]highest[/COLOR], 10000);
}
[COLOR="#FF0000"]highest();[/COLOR]
}
else if(w > 768){
//function 768 lower1
}
else if(w > 640){
//function 640 lower2
}
document.getElementById("demo").innerHTML = txt;
}
[COLOR="#FF0000"]myFunction();[/COLOR]
The html must obviously exist before the script gets executed. Let me know if I'm not understanding something.