i have code like this in a page called list.php when i click a link the video in the iframe was change into the video i selected but in the address bar its still list.php how can i make the url be list.php/Anohana10? or something like that?
<script>
$(document).ready(function(){
$("ul#videos li a").click(function(e) {
e.preventDefault();
$("#video").attr("src", $(this).attr("href"));
})
});
</script>
<div class="videoWrapper">
<IFRAME id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0
webkitAllowFullScreen ></IFRAME>
</div>
<ul id="videos">
<li><a id="Anohana10" href="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
<li><a id="Anohana9" href="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>
You could, instead of intercepting the <a>'s default behaviour of redirecting the page, let it anchor the information, like <a id="Anohana10" href="#Anohana10">, then your page's url would look like: list.php#Anohana10.
The iframe's link information, you can store on another custom attribute (let's say data-url), and retrieve it with your jquery function:
<script>
$(document).ready(function(){
$("ul#videos li a").click(function(e) {
$("#video").attr("src", $(this).attr("data-url"));
})
});
</script>
<div class="videoWrapper">
<IFRAME id="video" SRC="http://upload4free.co/embed-trdcgvsgf0tj-500x300.html" FRAMEBORDER=0
webkitAllowFullScreen ></IFRAME>
</div>
<ul id="videos">
<li><a id="Anohana10" href="#Anohana10" data-url="http://upload4free.co/embed-ndi71khpdvbf-580x300.html">Anohana Episode 10</a></li>
<li><a id="Anohana9" href="#Anohana9" data-url="http://upload4free.co/embed-flm2y2648udr-580x300.html">Anohana Episode 9</a></li>
EDIT
To get the anchor from the URL when typing it directly, add this to the ready jquery method:
$(document).ready(function(){
var identifier = window.location.hash;
if(identifier != "")
$(identifier).click();
$("ul#videos li a").click(function(e) {
...
});
This will get the #id from the url, and perform the click of the corresponding <a> tag, loading the video...
Related
I want to change the content of iframe by clicking on menu items. But the content of iframe does not refresh for some reason.
HTML
<div class="switcher">
Option 1
Option 2
</div>
<iframe class="switch-target" width="300" height="300" src=""></iframe>
Javascript
var switcher$ = $('.switcher');
var switchTarget$ = $('.switch-target');
switcher$.on('click', switchIframeSrc);
function switchIframeSrc() {
switchTarget$.attr('src', switcher$.val());
}
// call the method on load
switchIframeSrc();
A bit late, but you don't need any JavaScript to do that. Just give your <iframe> element a name attribute and use that name as a target for your hyperlinks.
<div class="switcher">
Option 1
Option 2
</div>
<iframe class="switch-target" width="300" height="300" src="" name="switch-frame"></iframe>
First, you've to prevent the default action that is triggered by the click on an anchor. For this, use the event object and call the following method:
event.preventDefault();
And then, pass the element to switchIframeSrc which triggered the event:
switchIframeSrc(event.target);
var switcher$ = $('.switcher');
var switchTarget$ = $('.switch-target');
switcher$.on('click', event => {
event.preventDefault();
switchIframeSrc(event.target);
});
function switchIframeSrc(anchor) {
switchTarget$.attr('src', $(anchor).attr('href'));
}
// call the method on load
switchIframeSrc();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switcher">
Option 1
Option 2
</div>
<iframe class="switch-target" width="300" height="300" src=""></iframe>
I have two functions I want to happen, load iframe only after the clicking (not all iframes, just this one - per click) using the .overlay. There are multiple .overlays and iframes on the page.
I have checked out various sites and these work alone but I can not get both to work together.
overlay:
$(function() {
$("span[rel]").overlay();
});
iframe code option 1:
$(function() {
$('.overhover').click(function(e) {
e.preventDefault();
var iframe = $(this).next();
iframe.attr("src", iframe.attr("data-src"));
});
iframe code option 2:
$(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});
My Code:
Test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
test
<iframe data-src="http://www.bing.com" src="about:blank">
</iframe>
<!-- Actual code -->
<div class="res-item">
<h4>Header</h4>
<h2>
<!-- Overlay Link -->
<span class="overhover" rel="#tool3">Title
</span>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe seamless="" data-src="http://www.bing.com" style="width:100%; height:75vh;" frameborder="0">
</iframe>
</div>
</div>
css not included here.
Thanks,
Load iframe:
Load IFRAME onClick
and
Is it possible to not load an iframe in a hidden div, until the div is displayed?
.overlay
http://jquerytools.github.io/demos/overlay/index.html
Based on your "Actual Code", this is what I would do:
EDIT
I've modified the code so it actually does what you want. Also, modified your "original" code slightly for demonstration purposes.
$(function() {
var toolID;
$("span[rel]").on('click', function() {
//so we get the ID of the tool we'll be loading later
toolID = $(this).attr('rel');
}).overlay({
onLoad: function() {
var ifSrc = $(toolID + ' iframe').attr('data-src');
$(toolID + ' iframe').attr('src', ifSrc);
$(toolID + ' iframe').show();
}
});
});
.simple_overlay iframe {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>
<div class="res-item">
<h1>Header</h1>
<h2>
<!-- Overlay Link -->
<ul>
<li><span class="overhover" rel="#tool3">Bing</span></li>
<li><span class="overhover" rel="#tool4">Duck Duck Go</span></li>
</ul>
</h2>
<!-- Overlay Insert -->
<div class="simple_overlay" id="tool3">
<iframe data-src="https://bing.com" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
<div class="simple_overlay" id="tool4">
<iframe data-src="https://duckduckgo.com/" style="width:100%; height:75vh;" frameborder="0"></iframe>
</div>
</div>
You can take it from there, and modify it to suit your needs. Also, notice that bing's protocol is https, not http. If you use the latter, nothing will load in the iframe.
How do I populate the iframe src attribute with the href attribute from the a element? The iframe can be moved inside the li.feed-item element if needed.
I need this in something like an each function, since there are several li elements with different links.
Closest I got is this, but it fetches the first link to all iframes.
jQuery(document).ready(function () {
jQuery('li.feed-item').each(function () {
var href = jQuery("li.feed-item a.colorbox.cboxElement").attr('href');
jQuery('li.feed-item a.colorbox.cboxElement iframe').attr('src', href);
});
});
HTML
<ul>
<li class="feed-item">
<a class="colorbox cboxElement" href="http://www.youtube.com/embed/Tp-VAe59RyA"><img height="280" src="http://skateflix.se/wp-content/uploads/cache/remote/i1-ytimg-com/1384690600.jpg" width="280">
<iframe allowfullscreen class="video-embed" height="100%" itemprop="video" src="http://www.youtube.com/embed/werwerw4wer" width="100%">
</iframe></a>
</li>
</ul>
<ul>
<li class="feed-item">
<a class="colorbox cboxElement" href="http://www.youtube.com/embed/Tp-VAe59RyA"><img height="280" src="http://skateflix.se/wp-content/uploads/cache/remote/i1-ytimg-com/1384690600.jpg" width="280">
<iframe allowfullscreen class="video-embed" height="100%" itemprop="video" src="http://www.youtube.com/embed/Qq0u6vbzXXoeerer" width="100%">
</iframe></a>
</li>
</ul>
Basically refer always to $(this), the currently iterated li.feed-item
jQuery(function($) { // DOM ready and $ alias secured
$('li.feed-item').each(function() {
var href = $(this).find("a.cboxElement").attr('href');
$(this).find("iframe").attr('src', href);
});
});
Or even simpler, query first for your iframe and than lookup for the a parent:
jQuery(function($) { // DOM ready and $ alias secured
$('li.feed-item iframe').attr("src", function() {
return $(this).closest("a.cboxElement").attr('href');
});
});
Using 'this' should work:
jQuery(document).ready(function () {
jQuery('li.feed-item').each(function () {
var href = jQuery(this).find("a.colorbox.cboxElement").attr('href');
jQuery(this).attr('src', href);
});
});
I have an iFrame where I am pushing some html files. But when the iFrame is loaded I show a button which on click I want to open that html from src in a new window.
So my code looks like this:
<div class="btn"></div>
<div class="player-container">
<div class='page-title'></div>
<iframe id="iframe" src="" class="page-iframe"></iframe>
</div>
jQuery
$('#iframe').one('load', function(){
$('.btn').show();
})
$('.btn').on('click', function(){
window.open('whatever is in iframe src');
})
Does anyone has any idea how to do this?
src is an attribute, you can read it with attr:
$('#iframe').one('load', function(){
$('.btn').show();
});
$('.btn').on('click', function(){
window.open($("#iframe").attr("src"));
})
I want to have a video player popup showing up when an image is clicked. I don't want the player embedded on the page and visible by default.
HTML:
<a href="#popupVideo" data-rel="popup" data-position-to="window" class=
"ui-btn ui-corner-all ui-shadow ui-btn-inline"><img class="..." src="...chuck.jpg"></a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
<iframe src="http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298"seamless=""></iframe>
</div>
Javascript is over here
Here i have a function called EventHandlers that will add the eventlistener to every element with the class name Vids. The ID of each video will be used to set the iframe src.
Example
http://player.vimeo.com/video/41135183?portrait=0
ID = 41135183 for this Video.
Your image ID should be set to the video ID you want to play.
You will need to add your own styles but the functionality is all here and working.
I hope this helps, if it does please make sure to mark the question as answered.
Thanks.
<script>
function EventHandlers(){
document.getElementById("ExtVid").addEventListener("click",function(event){CloseVid();},false);
//Set events for all images with the class Vids
Vids=document.getElementsByClassName('Vids');
for(var i=0;i<Vids.length;i++){
Vids[i].addEventListener("click",function(event){VideoDisplay(event);},false);
}
}
function VideoDisplay(e){
//Check & remove Iframe.
if(document.getElementById('VidFrame')){
console.log("removing Video Frame");
var VidFrame=document.getElementById('VidFrame');
VidFrame.parentNode.removeChild(VidFrame);
}
//Buile the Iframe
var VidID=e.target.id;
var target = document.getElementById('VideoPopup');
var element = document.createElement('iframe');
element.setAttribute('id', 'VidFrame');
element.setAttribute('src', 'http://player.vimeo.com/video/'+VidID+'?portrait=0');
element.setAttribute('height', '298');
element.setAttribute('width', '497');
element.setAttribute('frameborder', '0');
target.appendChild(element);
document.getElementById("VideoPopup").style.display="inline";
}
function CloseVid(){
if(document.getElementById('VidFrame')){
console.log("removing Video Frame");
var VidFrame=document.getElementById('VidFrame');
VidFrame.parentNode.removeChild(VidFrame);
}
document.getElementById("VideoPopup").style.display="none";
}
</script>
<body onload="EventHandlers();">
<img class="Vids" id="41135183" src="#"/>
<img class="Vids" id="41135181" src="#"/>
<img class="Vids" id="41135176" src="#"/>
<div id="VideoPopup" style="display:none;height:100%;width:100%;position:fixed;top:0;left:0;z-index:10;background:rgba(0,0,0,.4);">
<iframe id="VidFrame"></iframe>
<button id="ExtVid" style="position:absolute;top:10px;right:10px;"> Close Video </button>
</div>
</body>