HTML | Javascript | -- Importing / dislpaying HTML inside Javascript |
HTML | Javascript | -- Importing / dislpaying HTML inside Javascript |
sanoj96 |
Jan 24 2019, 06:10 PM
Post
#1
|
Advanced Member Group: Members Posts: 118 Joined: 18-September 12 Member No.: 17,803 |
Hello,
So i am having a litle project. So my quesstion is what is the best way to use HTML inside a javascript ? as of now i am using this CODE info: '<div class="info_content">\n' + '<h3><?php echo $locations[$i]['address'];?></h3>\n' + '<div class="slideshow-container">\n' + '<div class="mySlides fade">\n' + '<img src="https://urbanhus.no/wp-content/uploads/U-1030_cam01_day_snow-1600x1160.jpg" style="width:100%">\n' + '</div>\n' + '<div class="mySlides fade">' + '<img src="https://urbanhus.no/wp-content/uploads/U-940_cam02_day-1-1600x900.jpg" style="width:100%">\n' + '<div class="text">Caption Two</div>\n' + '</div>\n' + '<div class="mySlides fade">\n' + '<img src="https://urbanhus.no/wp-content/uploads/U-1090_cam01_dusk_snow-768x576.jpg" style="width:100%">\n' + '<div class="text">Caption Three</div>\n' + '</div>\n' + '<a class="prev" onclick="plusSlides(-1)">❮</a>\n' + '<a class="next" onclick="plusSlides(1)">❯</a>\n' + '</div>\n' + '<br>\n' + '<div style="text-align:center">\n' + '<span class="dot" onclick="currentSlide(1)"></span>\n' + '<span class="dot" onclick="currentSlide(2)"></span> \n' + '<span class="dot" onclick="currentSlide(3)"></span> \n' + '</div>\n', But this takes time and makes the code unclear / hard to read. So my quesstion is what do you guys reccommend? have it in it own file and imprt that file ? NOTE: The HTML will have PHP inside at a later time. Also when i did this, this happend: When it is supposed to look like this: (it gets like this when i click on one of the dots) Made the slide show in one file, and then imported it like shown above. Thanks in advanced, (Sorry for bad english, feel free to ask quesstions if you didnt understand) |
Christian J |
Jan 25 2019, 04:47 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Hello!
what is the best way to use HTML inside a javascript ? One idea is get it with innerHTML: CODE HTML: <div id="info" class="info_content"> <h3><?php echo $locations[$i][address];?></h3> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://urbanhus.no/wp-content/uploads/U-1030_cam01_day_snow-1600x1160.jpg" style="width:100%"> </div> <div class="mySlides fade"> <img src="https://urbanhus.no/wp-content/uploads/U-940_cam02_day-1-1600x900.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <img src="https://urbanhus.no/wp-content/uploads/U-1090_cam01_dusk_snow-768x576.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> JS: var info = document.getElementById('info').innerHTML; In general it's best to keep as much of the HTML static as possible, so that search engine bots and browsers without javascript can still access it: https://en.wikipedia.org/wiki/Progressive_enhancement QUOTE have it in it own file and imprt that file ? That could work well if you import the file with PHP (i.e. on the server). You can also import a file with javascript/Ajax, but then its content won't be available when JS is unavailable, so I generally advice against that. QUOTE Also when i did this, this happend: When it is supposed to look like this: (it gets like this when i click on one of the dots) Cant' say without seeing the JS function currentSlide(). |
Lo-Fi Version | Time is now: 24th April 2024 - 06:53 PM |