Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2015
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    my code stuck at for loop

    Hi,
    I am basically trying to make a fade in div by div.
    But it stuck at the for loop. I don't understand why?
    The console.log does not give anything.
    Someone knows what's wrong with this ?

    Code:
    <body>
    		<div class="container">	
    			<div id="zone_flex">
                     <div class="element">a</div>
                     <div class="element">b</div>	
                     <div class="element">c</div>
                     <div class="element">d</div>	
                     <div class="element">e</div>
                     <div class="element">f</div> 			        
    			</div>
    		</div><!-- /container -->
    		<script src="js/js.js"></script>
    		<script> loadDivs();</script>
    	</body>
    Code:
    function loadDivs() {
    	document.getElementById('zone_flex').style.display = "flex";
    
    	var elems = document.getElementsByClassName("element");
    	console.log(elems);        // ok
    	console.log(elems.length);        // 6
    	for(var i = 0; i<elems.lenght; i++){
    		console.log(elems[i].innerHTML);    // nothing is showing
    		window.setTimeout(function(){
    			elems[i].style.transition="opacity 1s";
    			elems[i].style.opacity=1;
    			}
    		,100);
    	}
    }
    Code:
    #zone_flex{
    	display:none;	
    	justify-content: space-around;
    	flex-wrap: wrap;
    	margin:3%;
    	width:100%;
    	}
    
    .element{
    	opacity: 0;
    	border: solid 1px red;
    	margin-bottom:10px;
    	width: 120px; 
    	height:120px;
    	background-color: green;
    }

  2. #2
    Regular Coder
    Join Date
    Sep 2014
    Posts
    199
    Thanks
    0
    Thanked 35 Times in 33 Posts
    In the js loadDivs(), change

    Code:
    for(var i = 0; i<elems.lenght; i++){
    to

    Code:
    for(var i = 0; i<elems.length; i++){
    wrong spelling of length

  3. Users who have thanked josephm for this post:

    BenoHiT (08-30-2017)

  4. #3
    New Coder
    Join Date
    Oct 2015
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    omfg, I am so blind sometimes, thank you
    Well, it's not working like I want.
    Only the last element is doing the opacity effect. I want it one by one. Any idea ?
    function loadDivs() {
    document.getElementById('zone_flex').style.display = "flex";

    var elems = document.getElementsByClassName("element");
    for(var i = 0; i < elems.length; i++){
    var elem = elems[i];
    window.setTimeout(function(){
    elem.style.transition="opacity 1s";
    elem.style.opacity=1;
    }
    ,100);
    }
    }

  5. #4
    New Coder
    Join Date
    Oct 2015
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts

    loop happening only on the last element

    Well, it's not working like I want.
    Only the last element is doing the opacity effect. I want it all, one by one. Any idea ?

    Code:
    function loadDivs() {
    	var elems = document.getElementsByClassName("element");
    	for(var i = 0; i < elems.length; i++){
    		var elem = elems[i];
    		window.setTimeout(function(){
    			elem.style.transition="opacity 1s";
    			elem.style.opacity=1;
    			}
    		,100);
    	}
    }

  6. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,303
    Thanks
    31
    Thanked 989 Times in 986 Posts
    Code:
    function loadDivs() {
    You never call this in the code you give so it never works Period.
    Code:
    document.getElementById('zone_flex').style.display = "flex";
    Don't do this in JS. Just set style in your CSS,
    Code:
    #zone_flex{
    	//display:none;	
    	display: flex;
    .....
    still not how you want it, but closer:
    Code:
    <script>
    	var elems = document.getElementsByClassName("element");
    	myvar = setTimeout(show,10);
    	
    	function show(){
    		for(var i = 0; i<elems.length; i++){  //lenght
    			elems[i].style.transition="opacity 10s";
    			elems[i].style.opacity=1;
    		}
    	}
    </script>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  7. #6
    New Coder
    Join Date
    Oct 2015
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    what is 'myvar' ?
    Well I have tried, but all divs appear in once.
    My goal is to make them appear one by one. With an interval of a 0.5sec between each other.
    Is it possible at least ?

  8. #7
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,303
    Thanks
    31
    Thanked 989 Times in 986 Posts
    I am going to explain things as clearly as I can in the hope that Deathshadow will show me where my plexiglass should be installed at.

    First I did everything I am talking about in Firefox and then in Chrome. Forget the rest, if it don't work in one of these the others have no chance of succeeding.

    OPACITY don't work with more then one element. Just placing 6 DIVs with class="element" and styling them with opacity=0.2 don't work.
    You can get results by doing this to the parent container, but you can not control the individual DIVs.
    So I used background: rgba(0, 225, 0, 0.1); and put the transition in the CSS where it should be and not in JS.
    Code:
    .element {
    	background: rgba(0, 225, 0, 0.1);
    	border: solid 1px red;
    	margin-bottom: 10px;
    	width: 120px;
    	height: 120px;
    	margin: 10px;
    	float: left;
    	transition: background 5s;
    }
    .element:hover {
    	background: rgba(0, 225, 0, 0.9);
    }
    This does work. Try it by removing the javascript section or commenting it out, but I know of no way you can trigger a hover event from JS. so on to the next.

    My thoughts, and you'll see it in action, were to use a for loop inside of a for loop. The outer loop would select which DIV we applied the inner loop to. And that loop would slowly(and that word may be a misnomer) increase the alpha channel til full opacity was reached.

    You will see my attempt at a delay
    Code:
    setTimeout(function () {var dummy=2+2;}, 300000000000);
    in both loops.
    When run it looks like all DIV jump up to full opacity instantly. WHY??? We need a pulling hair out emoji on this site!

    In the following code I inserted an alert to slow things down so you can see that the logic does work.
    Let the DIV fill up and then click the alert off.
    Then remove the alert from the code and watch.
    Code:
    <!DOCTYPE html>
    <html><head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
    #zone_flex{
    	display: flex;
    	justify-content: space-around;
    	flex-wrap: wrap;
    	//display: inline-block;
    	margin:3%;
    	width:100%;
    	}
    
    .element {
    	background: rgba(0, 225, 0, 0.1);
    	border: solid 1px red;
    	margin-bottom: 10px;
    	width: 120px;
    	height: 120px;
    	margin: 10px;
    	float: left;
    	transition: background 5s;
    }
    .element:hover {
    	background: rgba(0, 225, 0, 0.9);
    }
    </style>
    </head>
    
    <body style="background-image: url('images/BGdrag.jpg')">
    	<div class="element">a</div>
    	<div class="element">b</div>	
    	<div class="element">c</div>
    	<div class="element">d</div>	
    	<div class="element">e</div>
    	<div class="element">f</div> 
    <script>
    myvar = setTimeout(show, 10);
    	
    function show(){
    	var elems = document.getElementsByClassName("element");
    	for(var i = 0; i<elems.length; i++){
    		var myfake = justBecause(elems, i);
    		setTimeout(function () {var dummy=2+2;}, 300000000000);
    		alert("Sleep");
    	}
    }
    
    function justBecause(elems, i){
    	for(y=0.2; y<1.1; y += 0.2){
    		z = Number(y).toFixed(1);
    		elems[i].style.background = 'rgba(0, 225, 0, '+z+')';
    		setTimeout(function () {var dummy=2+2;}, 300000000000);
    	}
    	return;
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  9. #8
    New Coder
    Join Date
    Oct 2015
    Posts
    15
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Well it was simple:

    var elems = document.getElementsByClassName("element");
    for(var i = 0; i < elems.length; i++){
    setTimeout(callback_generator(elems[i]),500*i);
    }

    function callback_generator(elem){
    return function(){
    elem.style.transition="opacity 1s";
    elem.style.opacity=1;
    }
    }

  10. #9
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,246
    Thanks
    2
    Thanked 327 Times in 317 Posts
    Meanwhile I'm just wondering why you don't just use .element {} in the CSS instead of the JavaScript.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

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