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"));
})
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.
I tried to display the page2.html when click the Show Image in page1.html. I use ViewController.openExternalView to display page2.html because dijit.registry.byId("myPage1").performTransition('myPage2', 1, "slide", null); is not working.
When the page2 displays, I change the visibility of the image in page2 to visible. But the document.getElementById('myImgId') return null.
It seems script execute before page2.html is loaded. Is there anyway to execute script to able to get elements safely?
dojo version: 1.9.3
Following is the snippet that I'm trying.
javascript
function showImage(){
var vc = dojox.mobile.ViewController.getInstance();
vc.openExternalView({
url:"page2.html",
transition:"slide"
},dijit.registry.byId("container").containerNode);
document.getElementById("myImgId").style.vilibility="visible";
}
page1.html
<div data-dojo-type="dojox.mobile.View" id="myPage1">
----some html tags----
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props="variableHeight:true" >
<div onclick="showImage();"><label>Show Image</label></div>
<div>
----some more html tags----
</div>
</li>
</div>
page2.html
<div data-dojo-type="dojox.mobile.View" id="myPage2">
<div data-dojo-type="dojox.mobile.Container">
<img src="img1.png" id="myImgId" style="vilibility:hidden;"/>
</div>
</div>
Try this:
function showImage(){
var vc = dojox.mobile.ViewController.getInstance();
Deferred.when(vc.openExternalView({
url:"page2.html",
transition:"slide"
},dijit.registry.byId("container").containerNode), function(){
document.getElementById("myImgId").style.vilibility="visible";
});
}
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...
I'm trying implement a button inside a Colorbox that will update the modal and render a form.
An example of this is Pinterest's add functionality. "Homepage > Add a Pin > Pin URL"
I've tried copying Colorbox's inline HTML example.
<script type="text/javascript">
$(document).ready(function () {
$(".inline").colorbox({inline:true, width:"50%"});
$('a[rel="colorbox"]').live("click", function() {
$.colorbox({
open: true,
href: this.href
});
return false;
});
});
</script>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Add a Promotion</strong></p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="ajax" href="**shared/promotion_form**" rel="colorbox">Add a Promotion</a></p>
</div>
</div>
The problem is that the form is _promotion_form.html.erb so I can't link to it.
Try moving your selector up a level, and updating to jQuery 1.7.1
Maybe something like this:
$('body').on("click", "a[rel="colorbox"]", function() {
So this way you're watching the body for any element that has that selector "a[rel='colorbox']".
Hope this helps.