The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML | Javascript | -- Importing / dislpaying HTML inside Javascript
sanoj96
post 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:

IPB Image

When it is supposed to look like this:

IPB Image
(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)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 25 2019, 04:47 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Hello!

QUOTE(sanoj96 @ Jan 25 2019, 12:10 AM) *

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:

IPB Image

When it is supposed to look like this:

IPB Image
(it gets like this when i click on one of the dots)

Cant' say without seeing the JS function currentSlide().
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sanoj96
post Jan 25 2019, 06:48 PM
Post #3


Advanced Member
****

Group: Members
Posts: 118
Joined: 18-September 12
Member No.: 17,803



Thanks for the reply!

This is the code for the slideshow:

CODE

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}


I am getting code: TypeError: slides[(slideIndex - 1)] is undefined
Dont understand why it shouldnt work when i place it inside the javascript.
as it works when i have it all inside an html dokument it works fine.

as shown here: http://apilix.net/maps/test1.php
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 26 2019, 05:17 AM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



CODE
info: '<div class="info_content">\n' +

Is the colon above used correctly? I don't recognize the syntax.

QUOTE
I am getting code: TypeError: slides[(slideIndex - 1)] is undefined
Dont understand why it shouldnt work when i place it inside the javascript.
as it works when i have it all inside an html dokument it works fine.

as shown here: http://apilix.net/maps/test1.php

Seems to work for me, did you fix it already?

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sanoj96
post Jan 26 2019, 07:39 AM
Post #5


Advanced Member
****

Group: Members
Posts: 118
Joined: 18-September 12
Member No.: 17,803



QUOTE(Christian J @ Jan 26 2019, 05:17 AM) *

CODE
info: '<div class="info_content">\n' +

Is the colon above used correctly? I don't recognize the syntax.

QUOTE
I am getting code: TypeError: slides[(slideIndex - 1)] is undefined
Dont understand why it shouldnt work when i place it inside the javascript.
as it works when i have it all inside an html dokument it works fine.

as shown here: http://apilix.net/maps/test1.php

Seems to work for me, did you fix it already?



This link is the working version: http://apilix.net/maps/test1.php
If you head to http://apilix.net/maps/test.php and click on one of the IPB Image you will see the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sanoj96
post Jan 26 2019, 11:03 AM
Post #6


Advanced Member
****

Group: Members
Posts: 118
Joined: 18-September 12
Member No.: 17,803



Have been updateing the script:

JS For Slideshow:
CODE
<script>
var sliderObjects = [];
createSliderObjects();

function plusDivs(obj, n) {
  var parentDiv = $(obj).parent();
  var matchedDiv;
  $.each(sliderObjects, function(i, item) {
    if ($(parentDiv[0]).attr('id') == $(item).attr('id')) {
      matchedDiv = item;
      return false;
    }
  });
  matchedDiv.slideIndex=matchedDiv.slideIndex+n;
  showDivs(matchedDiv, matchedDiv.slideIndex);
}

function createSliderObjects() {
  var sliderDivs = $('.slider');
  $.each(sliderDivs, function(i, item) {
    var obj = {};
    obj.id = $(item).attr('id');
    obj.divContent = item;
    obj.slideIndex = 1;
    obj.slideContents = $(item).find('.mySlides');
    showDivs(obj, 1);
    sliderObjects.push(obj);
  });
}

function showDivs(divObject, n) {
  debugger;
  var i;
  if (n > divObject.slideContents.length) {
    divObject.slideIndex = 1
  }
  if (n < 1) {
    divObject.slideIndex = divObject.slideContents.length
  }
  for (i = 0; i < divObject.slideContents.length; i++) {
    divObject.slideContents[i].style.display = "none";
  }
  divObject.slideContents[divObject.slideIndex - 1].style.display = "block";
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



This is what is going to be displayed: within the "box": (Includes php, Java, html)
CODE
    var locations = [
        <?php for($i=0;$i<sizeof($locations);$i++){ $j=$i+1;?>
        {
            lat: <?php echo $locations[$i]["lat"];?>,
            lng: <?php echo $locations[$i]["lng"];?>,
            info:'<h3><?php echo $locations[$i]['address'];?></h3>\n' +
            '<div class="w3-content w3-display-container slider" id="div<?php echo$j=$i+1;?>">\n' +
            '<div class="mySlides">\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">' +
            '<img src="https://urbanhus.no/wp-content/uploads/U-940_cam02_day-1-1600x900.jpg" style="width:100%">\n' +
            '</div>\n' +
            '<div class="mySlides">\n' +
            '<img src="https://urbanhus.no/wp-content/uploads/U-1090_cam01_dusk_snow-768x576.jpg" style="width:100%">\n' +
            '</div>\n' +
            '<a class="w3-btn-floating w3-display-left" onclick="plusDivs(this,-1)">❮</a>\n' +
            ' <a class="w3-btn-floating w3-display-right" onclick="plusDivs(this,1)">❯</a>\n' +
            '</div>',
            
        }<?php if($j!=sizeof($locations))echo ","; };?>
        ];


It is displaying like it should, but now every picture that is inside <img> </img> is displayed with errror: TypeError: matchedDiv is undefined. This might be the way i am displaying it atm. Going to try and do something like innerHTML
like this:

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 26 2019, 11:47 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(sanoj96 @ Jan 26 2019, 01:39 PM) *

This link is the working version: http://apilix.net/maps/test1.php
If you head to http://apilix.net/maps/test.php and click on one of the IPB Image you will see the problem.

Aha, now I saw the error. I don't understand most of the script, but it seems this:

CODE
var sliderDivs = $('.slider');

tries to get HTML elements with the CLASS "slider", but maybe those elements don't (yet?) exist as HTML, maybe they're still just part of the locations array? In that case no sliderObjects are being created, which in turn means matchedDiv gets no properties.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sanoj96
post Jan 27 2019, 11:39 AM
Post #8


Advanced Member
****

Group: Members
Posts: 118
Joined: 18-September 12
Member No.: 17,803



Hmm, so what do you recommend me do ?

I am not good at Javascript, so idk what i should do.
to get the .slider to show.
Also i think class="mySlides" needs to be seen by the javascript for the slider.

Tried to do innerHTML but that didnt work as it should.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 27 2019, 12:15 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



Why do you put the HTML code in the locations variable in the first place? Why not use static HTML (created by PHP if necessary)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 03:12 PM