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.
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 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 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";
});
}
Hi I'm trying to insert some javascript into a page on my server, from a different page. The 1st page will be loaded into an iframe. I would like to insert some css styles to that page (in the iframe) from the page hosting the iFrame. is there a jQuery script I can use to do this?
Something like.
page1->page2 iframe. page2 script for styles-> page1 within the iframe
<body>
<!--<div id="left_col"></div>-->
<div id="middle_col">
<!--header-->
<div id="header">
<p>iFrame Example</p>
</div>
<div id="entry">
<p>Enter your URL</p>
<textarea id="mytextarea" rows="1" cols="50"></textarea>
<a title="Check Me Out!" id="btn-wrap">
<span class="title">Click to view site</span>
<div id="info">
<p>
<strong>Don't forget</strong>
<strong>the "http://"</strong>
</p>
</div>
</a>
</div>
<br/>
<br/>
<iframe id="myframe" src="http://johnverber.com/simple.html">
</iframe>
</div>
<!--<div id="right_col"></div>-->
<script>
$(document).ready(function() {
positionAd();
});
$(window).resize(function() {
positionAd();
});
var positionAd = function() {
var WINDOW_WIDTH = $(window).width();
var WINDOW_HEIGHT = $(window).height();
var BOX_WIDTH = $('#middle_col').width();
var BOX_HEIGHT = $('#middle_col').height();
$('#middle_col').css({"left": (WINDOW_WIDTH - BOX_WIDTH)/2, "top" : (WINDOW_HEIGHT - BOX_HEIGHT)/2});
}
$('#btn-wrap').click(function() {
var urlVal = $('#mytextarea').val();
if(urlVal.match("?_myTag")){
document.getElementById('myframe').src = urlVal;
}
else{
var addTag = urlVal.concat("?_myTag");
document.getElementById('myframe').src = addTag;
}
});
$('#myframe').contents().find("head").append("<link rel="stylesheet" type="text/css" href="addStyles.css" />");
</script>
</body>
You can use jQuery's .contents() to access the iframe's inner DOM. It's quite trivial from there:
$("#iframe_id").contents().find("head").append("<script>..scripts..</script>");
//or
$("#iframe_id").contents().find("head").append("<style>..styles..</style>");
Hope that helped!
Alright this is what finally ended up working:
$("#iframe_id").contents().find("head").html("<style>..styles..</style>");
I am using the javascript function for multiple hide show divs in custom tumblr theme.. my The problem is as the class name is same, if i click on a single div, by default all the div gets show or hide.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(".toparea3").slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>
<div class="toparea3" style="display:none;">
<div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
<div class="share-bar-buttons">
<div class="share-bar-facebook">
<iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&layout=button_count&show_faces=false&width=110&action=like&font=lucida+grande&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
</div>
</div>
<div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="{Permalink}"
{block:Twitter}data-via="{TwitterUsername}"{/block:Twitter}
data-related="stylehatch:Premium Tumblr Themes by #newezra"></a>
</div>
<div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
<div class="linktumb">
http://www.tumblr.com/xdrs2sf
</div>
</div>
</div>
</div>
Assuming you have multiple "toggleme" buttons, if they're all in the format where you have a toggleme button and then a toparea3, you could do something like this:
$('.toggleme').click(function(){
$(this).next().slideToggle('slow');
return false;
});
The "next" function gets the next element in the DOM, which is the element you want to expand.
Edit: (nevermind the .children)
try using the .closest selector, or the .next selector someone else suggested. Just remember to provide the selector .toparea3 to make sure that only that class opens, not just any closest/next element.
$(document).ready(function() {
$(".toggleme").click(function () {
$(this).closest(".toparea3").slideToggle("slow");
return false;
});
});
I would recommend the following:
Place the 'a' and the corresponding 'div' in a parent 'div'. Something like this:
<div>
<a class='toggleMe' />
<div class='toparea3 />
</div>
Then you can update your inner selector to be:
$('.toggleMe').click(function(evt){
evt.preventDefault();
var parent = $(this).closest('div');
$(".toparea3", parent).slideToggle("slow");
}
My Recommendation is to give the div an id, and make the anchor element's href point to it:
<script>
$(document).ready(function() {
$(".toggleme").click(function () {
$(this.hash).slideToggle("slow");
return false;
});
});
</script>
<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>
<div id="toparea3_1" class="toparea3" style="display:none;"></div>
This since the hash is given in the form #toparea3_1 that is a valid jQuery selector that selects on ID, and can be used directly.