CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hara
Hara

Reputation: 87

load another html page in Jquery, when click event happens on iframe element

Please excuse me i have a very basic question as i am still getting hands on Jquery. I am trying to load another .html page on click of any figure element in this .html page but script tag is not working as expected can anyone help with the below js

html code:

$(document).ready(function(){
	
	$("figure").click(function(){		
		
$(this).load("singlevideo.html"); 
	});	
});
 

* {
 padding:0px;
 margin:0px;
}


body {
   margin:0;
   padding:0;
   height:100%;
}

header {
	  background: green;
  color: white;
  padding: 8px 0px 6px 40px;
  height: 50px;
     
}

.navbar.navbar-inverse.navbar-fixed-top {
  background-color: green; /* fallback color, place your own */
   font-weight: 400;
 color: white;
 text-decoration: none;

}

header h1 {
 display: inline;
 font-family: 'Oswald',sans-serif;
 font-weight: 400;
 font-size: 32px;
 float: left;
 margin-top: 0px;
 margin-right: 10px;
 
 }

nav ul{
  display: inline;
 padding: 0px;
float: left;
}

nav ul li{
 display: inline-block;
 list-style-type:none;
 color: white;
 float: left;
 margin-left: 15px;
 }

nav ul li a{
 color: white;
 text-decoration: none;
 
 }

#nav {
 font-family: 'Montserrat', sans-serif;
 position: fixed;
}

.homered{
 background-color: red;
 padding: 30px 10px 30px 10px;
 
}



.homeblack:hover{
 background-color: blue;
 padding: 30px 10px 30px 10px;
}
div{
 width:250px;
 height:666px;
 background:#1A8DA9;
}
div a{
 text-decoration:none;
 color:white;
 padding:20px;
 padding-right:100px
}
div ul li{
 list-style-type:none;
 display:block;
 padding :15px;
 border-bottom:1px solid #236D7F;
 }
 div ul li :hover{
  background:#4097AD;
  transition:linear all 0.40s;
  margin-left:10px;
 }
 div ul li a:hover{
  color:black;
 }
  #navBar {
   float: left;
   position: fixed;
 }
 
 #nav {
 float: right;
}

#maincontent{
width: 80%;
    height: auto;
    outline: 1px solid;
    position: absolute;
    right: 0;
    background: white;

}



figure {
    display: inline-block;    
}

}
figure figcaption {    
    text-align: center;
}

iframe:focus { 
    outline: none;
}

iframe[seamless] { 
    display: block;
}

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:green;
  text-align: center;
}
<!DOCTYPE HTML>
<html lang = "en">
  <head>
  <title>Videos</title>
      <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="videos.css">
  </head>
  <body>
  
 
   <header>
  <nav class="navbar navbar-inverse navbar-fixed-top">
  <h1> Main logo </h1>
   <ul id="nav"> 
    <li><a class="homeblack" href="index.html">Home</a></li>
    <li><a class="homered" href="videos.html">Videos</a></li>
    <li><a class="homeblack" href="news.html">News</a></li>
    <li><a class="homeblack" href="contactus.html">Contactus</a></li>
 </ul>
 </nav>
 </header>

 <div id="navBar">
<ul>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
 <li><a href="#">video </a></li>
</ul>
</div>

<div id="maincontent">
<figure  id="1">
  <iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe>
  <figcaption> Trailer </figcaption>
</figure>
<figure id="2">
<iframe width="300" height="240" src="https://www.youtube.com/embed/VORxzZazSnc" frameborder="0" allowfullscreen></iframe> 
  <figcaption> Trailer</figcaption>
</figure>
<figure id="3">
<iframe width="300" height="240" src="https://www.youtube.com/embed/_fL4RuPcDw4" frameborder="0" allowfullscreen></iframe> 
  <figcaption> trailer </figcaption>
</figure>
<figure id="4">
<iframe width="300" height="240" src="https://www.youtube.com/embed/7yxNzMhXSr4" frameborder="0" allowfullscreen></iframe>
  <figcaption> trailer </figcaption>
</figure>
<figure id="5">
<iframe width="300" height="240" src="https://www.youtube.com/embed/ljuBWvzZtyc" frameborder="0" allowfullscreen></iframe> 
  <figcaption> trailer</figcaption>
</figure>
<figure id="6">
<iframe width="300" height="240" src="https://www.youtube.com/embed/2ZBHa9gIOp4" frameborder="0" allowfullscreen></iframe>
  <figcaption>Trailer</figcaption>
</figure>
</div>
<div class="footer">						
<p style="color:white; font-size:20px; font-weight:bold;">Copyright &copy; Education Students</p>
</div>
	<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   
  </body>
</html>

Upvotes: 1

Views: 4121

Answers (2)

treyBake
treyBake

Reputation: 6560

you can make use of the .load function, not to be confused with the load event handler.

.load() can be used to load data to an element - here's a reference http://api.jquery.com/load/

here's a basic example of how to use, the code is not like yours, it's just a template for you to use :)

html:

<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>

jQuery:

$('#clickMe').on('click', function()
{
    $('#targetLoad').load('path/to/html.html')
});

this will load html.html into the div with the id of targetLoad.

Your issue with your .on() function is that you use a single world, instead of a class or id. To target an id use # and for classes use .

update 1

didn't realise fully this was for an iframe - the problem with this is, because it's a dynamic element that isn't technically part of the DOM, the event won't fire, or at least shouldn't. But you can use the below to target dynamic elements:

$(document).on('click', '.myDynamicElement', function() {})

and this applies the click action on document where the target has a class of myDynamicElement, which is how you get around working with dynamic elements.

To target your iframe though, it might be better to use .find() as the iframe is it's own entity in a way. The above might work for it, but I reckon this should work

var element = $(document).find('.myIframe').find('figure');

$(document).on('click', element, function() {});

update 2 - req from OP in comments below

Example of how to use dynamic event handling:

$('body').on('change', '.myDropdown', function()
{
    alert($(this).val())
})

in this case, every change to an input that has a class of .myDropdown, then alert the current value of it.

Upvotes: 1

Rajesh Kumaresan
Rajesh Kumaresan

Reputation: 57

You are just embedding a youtube video to your frame, so click event on youtube page will always work for video functions of youtube and your java script click event is working on the name "Trailer" of your page. Just click on the name "trailer" and check it is working.

Instead of embedding a youtube video just have the preview and url of the video and have a click event on the url to load that video on separate page as u expected.

Upvotes: 0

Related Questions