www.webdeveloper.com
Results 1 to 9 of 9

Thread: javascript calling function help!

  1. #1
    Join Date
    Apr 2011
    Posts
    67

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

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    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.
    Last edited by bionoid; 01-28-2013 at 04:56 AM.
    JavaScript: Learn | Validate | Compact

  3. #3
    Join Date
    Apr 2011
    Posts
    67
    @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.

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    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>
    JavaScript: Learn | Validate | Compact

  5. #5
    Join Date
    Apr 2011
    Posts
    67
    @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>

  6. #6
    Join Date
    Apr 2011
    Posts
    67
    its still getting the functions from 768 even though switched from different width

  7. #7
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    792
    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>
    JavaScript: Learn | Validate | Compact

  8. #8
    Join Date
    Apr 2011
    Posts
    67
    <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?

  9. #9
    Join Date
    Apr 2011
    Posts
    67
    @bionoid thank you vry much! i got the output..

    i just added location.reload() in this line

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles