• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Create divs dynamically and add it to carousal

Scheduled Pinned Locked Moved Unsolved Troubleshooting
4 Posts 2 Posters 824 Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    sunnykeerthi
    last edited by Mar 7, 2019, 6:08 PM

    I’m trying to create a bunch of divs for magic mirror and then add them to another dynamic div created. Currently I’m able to create all the divs.

    Next I want to run a carousal/slideshow on these created divs.

    Below is my code.

    	// Override dom generator.
    	getDom: function () {
    		console.log('get dom');
    		var wrapperEl = document.createElement("div");
    		var container = document.createElement("div");
    		container.className = "slideshow-container";
    		wrapperEl.appendChild(container);
    
    		var div1 = document.createElement("div");
    		div1.className = "mySlides fade";
    		container.appendChild(div1);
    
    		var img1 = document.createElement("img");
    		img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg";
    		div1.appendChild(img1);
    
    		var div2 = document.createElement("div");
    		div2.className = "mySlides fade";
    		container.appendChild(div2);
    
    		var img2 = document.createElement("img");
    		img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg";
    		div2.appendChild(img2);
    		var div3 = document.createElement("div");
    		div3.className = "mySlides fade";
    		container.appendChild(div3);
    
    		var img3 = document.createElement("img");
    		img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
    		div3.appendChild(img3);
    
    		this.showSlides(container, 5);
    
    		Log.log("slide payload >> ");
    		return wrapperEl;
    	},
    
    
    
    	showSlides: function (container, counter) {
    		var i;
    		console.log(counter);
    		slideIndex = 0;
    		var slides = container.childNodes;
    		console.log("ClassName " + slides.length);
    		var dots = document.getElementsByClassName("dot");
    		for (i = 0; i < slides.length; i++) {
    			slides[i].style.display = "none";  
    		}
    		slideIndex++;
    		if (slideIndex > slides.length) { slideIndex = 1 }
    
    		slides[slideIndex - 1].style.display = "block";
    		counter = counter - 1;
    		if (counter != 0)
    			setTimeout(this.showSlides(container, counter), 2000); // Change image every 2 seconds
    
    	},
    

    Here only one image shows up and the carousal doesn’t roll.

    please let me know on where am I going wrong and how Can I fix this.

    Thanks

    S 1 Reply Last reply Mar 7, 2019, 6:46 PM Reply Quote 0
    • S Offline
      sdetweil @sunnykeerthi
      last edited by Mar 7, 2019, 6:46 PM

      @sunnykeerthi said in Create divs dynamically and add it to carousal:

        var div3 = document.createElement("div");
        div3.className = "mySlides fade";
        container.appendChild(div3);
      
        var img3 = document.createElement("img");
        img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
        div3.appendChild(img3);
      

      you should complete the data in the div, before appending it

      		var div3 = document.createElement("div");
      
      		div3.className = "mySlides fade";
      
      		var img3 = document.createElement("img");
      		img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
      		div3.appendChild(img3);
      
      		container.appendChild(div3);
      
      
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • S Offline
        sunnykeerthi
        last edited by Mar 8, 2019, 6:25 AM

        Hey @sdetweil ,

        Tried it. But it doesn’t seem working.

        Thanks!!!

        S 1 Reply Last reply Mar 8, 2019, 12:57 PM Reply Quote 0
        • S Offline
          sdetweil @sunnykeerthi
          last edited by sdetweil Mar 8, 2019, 1:30 PM Mar 8, 2019, 12:57 PM

          @sunnykeerthi you need to do the same for all the content…

          sort of reverse of what you are doing…

          the content is not going to be placed in the dom if you don’t pass it back to MM. (on the return)

          wrapperEl.appendChild(container); last
          return wrapperE1;

          setTimeout(this.showSlides(container, counter), 2000); // Change image every 2 seconds
          when the timer goes off, the context of the pgm is unknown… its asyncronous… it doesn’t KNOW what
          container and counter are… these were built on the program stack, which has long since gone away…(2 seconds ago)…

          the model for MM is you call this.updateDom(optional_delay)
          and later MM will call getDom() to gte the Modules contribution to the dom…
          that contribution is not IN the dom until sometime after the getDom() rourine returns the topmost element of that contribution tree.

          only getDom() should provide content…

          	var	slideIndex = -1;
          	getDom: function () {
          		console.log('get dom');
                          // note that you are rebuilding your entire dom contribution EVERY time getDom is called
                          // the prior content is destroyed (yanked out of dom),  and this content is injected in its place
                          // if all you are doing on each cycle thru is to chaneg the visibility of one element
                          // then u should build it once, and use it later
          		var wrapperEl = document.createElement("div");
          		var container = document.createElement("div");
          		container.className = "slideshow-container";
          
          		var div1 = document.createElement("div");
          		div1.className = "mySlides fade";
          
          		var img1 = document.createElement("img");
          		img1.src = "https://www.w3schools.com/howto/img_nature_wide.jpg";
          		div1.appendChild(img1);
          		container.appendChild(div1);
          
          		var div2 = document.createElement("div");
          		div2.className = "mySlides fade";
          
          		var img2 = document.createElement("img");
          		img2.src = "https://www.w3schools.com/howto/img_mountains_wide.jpg";
          		div2.appendChild(img2);
          		container.appendChild(div2);
          
          		var div3 = document.createElement("div");
          		div3.className = "mySlides fade";
          
          		var img3 = document.createElement("img");
          		img3.src = "https://www.w3schools.com/howto/img_snow_wide.jpg";
          		div3.appendChild(img3);
          		container.appendChild(div3);
          		wrapperEl.appendChild(container);
          
                          // indicate which element above is visible
                          // content not yet in dom
          		this.showSlides(container);
          
          		Log.log("slide payload >> ");
          
                          // tell MM to insert THIS content where our contribution goes into the dom
                          // if there was other content there, destroy it
          		return wrapperEl;
          	},
          
                  // only called from getDom()
          	showSlides: function (container) {
          
          		var slides = container.childNodes;
          		console.log("ClassName " + slides.length);
          
                          // where did this come from
                          // if in your module contribution, it will not
                          // exist in dom until AFTER getDom() returns	
                          // you are searching the DOM (document.) 
                          // it is not used here
                          var dots = document.getElementsByClassName("dot");  
          
                          // make all slides hidden (on return from getDom())
          		for (var i = 0; i < slides.length; i++) {
          			slides[i].style.display = "none";  
          		}
                          // show next slide in list
                          slideIndex++;
                          // if index more than slides available, start at first again
          		if (slideIndex > slides.length) { slideIndex = 0 }
          
                          // set selected slide visible
          		slides[slideIndex ].style.display = "block";
          
                          // indicate we should force getDom() to be called in 2 seconds
          
                          // which will rebuild the dom contribution again
          
          	        setTimeout(this.updateDom, 2000); // Change image every 2 seconds
          
          	},
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • 1 / 1
          1 / 1
          • First post
            1/4
            Last post
          Enjoying MagicMirror? Please consider a donation!
          MagicMirror created by Michael Teeuw.
          Forum managed by Sam, technical setup by Karsten.
          This forum is using NodeBB as its core | Contributors
          Contact | Privacy Policy