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

      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 Reply Quote 0
      • S Offline
        sdetweil @sunnykeerthi
        last edited by

        @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

          Hey @sdetweil ,

          Tried it. But it doesn’t seem working.

          Thanks!!!

          S 1 Reply Last reply Reply Quote 0
          • S Offline
            sdetweil @sunnykeerthi
            last edited by sdetweil

            @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
            • First post
              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