CODEWITHSUNDEEP
javascripthtmljquery
davidw
davidw

Reputation: 15

How to change html text with javascript based on text inside currently clicked div

First time posting a question. I think I should mention that I am a beginner in javascript/jquery.

I have a gallery which shows details about the image on hover (in form of text). And when clicked it executes a javascript that popups an iframe and changes the src attribute to the clicked div element's href.

Now that works well but is not quiet mobile friendly because there is no hover on a touchscreen device. So mobile visitors are not able to see the details about the images.

I am not so familiar with javascript I just find scripts on forums (basically here), change it a bit, merge more scripts to achieve what I want. Therefore I do not know how I could change text with that script that would replace a "LOADING..." text under the iframe element to the description of what div I have clicked. It just complicates things that the text I need to change TO is not in the parent div the script checks to replace the src, but in the child div classed "description".

Here is the "source" html:

<div class="work categ1 categ2" href="https://youtube.com/embed/example">
  <img class="ref" src="/portfolio/example1.png">
  <div class="description">EXAMPLE1 </br> (2016) </div>
</div>
<div class="work categ3" href="http://webpage-example">
  <img class="ref" src="/portfolio/example2.png">
  <div class="description">EXAMPLE2 </br> (2014) </div>
</div>
<div class="work categ3" href="https://youtube.com/embed/example2">
  <img class="ref" src="/portfolio/example3.png">
  <div class="description">EXAMPLE3 </br> (2013) </div>
</div>

This is the html of the popup iframe:

<div class="popup">
  <iframe class="popupVid" width="560" min-height="300px" src="https://www.youtube.com/embed/" title="Embed video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <img src="/img/x.png" style="height:45px">
  <p class="description">LOADING...</p>
</div>

And here's the current javascript:

<script>
   $(document).ready(function(){
    $(".popup").hide();
    $(".work").on("click", function(e) {
        e.preventDefault();
        $(".popup").show();
        $("iframe").eq(0).attr("src", $(this).attr("href"));
    })
      $(".popup").on("click", function(e) {
        $(".popup").hide();
        $("iframe").eq(0).attr("src", "");
      })
    });
    $(document).keyup(function(e) {
        if (e.key === "Escape") { // escape key maps to keycode `27`
          $(".popup").hide();
          $("iframe").eq(0).attr("src", "");
        }
      });
  </script>

To help understand the script a bit more the "popup" classed div fills the whole window with a half transparent black color. So when you click outside of the iframe it will close the iframe.

I hope I shared everything that is needed. I hope someone can help me out. Thanks in advance!

Upvotes: 0

Views: 101

Answers (2)

davidw
davidw

Reputation: 15

Just for those who look for the fast answer, Nazeer's code solved the problem.

What he added were these lines in the javascript:

var desc = $(this).find('.description').text();
$(".description_popup").text(desc);

And he changed the LOADING text's class to something different:

<p class="description_popup">LOADING...</p>

And that's it! It is how you change the text under the popup to the currently clicked div's text. Thank you Nazeer!

Upvotes: 1

Nazeer Shaik
Nazeer Shaik

Reputation: 65


<html>

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="work categ1 categ2" href="https://youtube.com/embed/example"><img class="ref" src="/portfolio/example1.png"><div class="description">EXAMPLE1 </br> (2016)</div></div>
      <div class="work categ3" href="http://webpage-example"><img class="ref" src="/portfolio/example2.png"><div class="description">EXAMPLE2 </br> (2014)</div></div>
      <div class="work categ3" href="https://youtube.com/embed/example2"><img class="ref" src="/portfolio/example3.png"><div class="description">EXAMPLE3 </br> (2013)</div></div>


<div class="popup">
  <iframe class="popupVid" width="560" min-height="300px" src="https://www.youtube.com/embed/" title="Embed video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <img src="/img/x.png" style="height: 45px;">
  <p class="description_popup">LOADING...</p>
  </div>

</body>
<script>
   $(document).ready(function(){
    $(".popup").hide();
    $(".work").on("click", function(e) {
        e.preventDefault();
        $(".popup").show();
        $("iframe").eq(0).attr("src", $(this).attr("href"));
        var desc = $(this).find('.description').text();
        //console.log(desc);
        $(".description_popup").text(desc);

    })
      $(".popup").on("click", function(e) {
        $(".popup").hide();
        $("iframe").eq(0).attr("src", "");
        var desc = $(this).find('.description').text();
        //console.log(desc);
        $(".description_popup").text(desc);
      })
    });
    $(document).keyup(function(e) {
        if (e.key === "Escape") { // escape key maps to keycode `27`
          $(".popup").hide();
          $("iframe").eq(0).attr("src", "");
          var desc = $(this).find('.description').text();
        //console.log(desc);
        $(".description_popup").text(desc);
        }
      });
  
</script>

Upvotes: 0

Related Questions