javascript calling function help!

This site is best viewed in a modern browser with JavaScript enabled.

ballball

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

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;

}

bionoid

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.

ballball

@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.

bionoid

Well, lets try and sort out the resizing part first.
I tried this as a test and got what I think you're expecting:

<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>

ballball

@bionoid i still get the same output..

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>

ballball

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

bionoid

Ok, here is my shot in the dark:

<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>

ballball

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?

ballball

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

i just added location.reload() in this line

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