I'm having an issue taking a click event on a button that's in an iframe (same domain as referrer) and making it close (in this case) 2 divs that are in the parent window.
Example html for the main page:
<div class="wrapper">
<iframe src="foo"></iframe>
</div>
<div class="bg"></div>
Example html of the iframe:
<div class="btn_wrapper">
Yes
<a class="no">No</a>
</div>
JS:
// redirect
$('body').on('click', '.btn_wrapper .yes', function() {
window.top.location = 'http://www.foobar.com';
});
// hide iframe popup wrapper and bg
$('body').on('click', '.btn_wrapper .no', function() {
$('.wrapper').fadeOut(250, function() {
$('.bg').fadeOut(150);
});
});
The $('body').on('click'... functions do run successfully, as clicking the yes button does redirect, and in my full code, clicking no is made to set a cookie, which it does.
For some reason though it just doesn't hide the .wrapper which contains the iframe and a background overlay. How can I make this work?
I do not strictly have to use an iframe for what I'm building, however for the sake of consistency and integration with functions already in place i would really like to keep using the iframe.
Try:
$('body').on('click', '.btn_wrapper .no', function() {
$('.wrapper', window.parent.document).fadeOut(250, function() {
$('.bg', window.parent.document).fadeOut(150);
});
});
Related
I have an mainpage, we will call it "main.php". At this page exists an iframe, we will call it "frameX".
1. Example html of "main.php"
<html>
<div class="result">20</div>
<div class="result">25</div>
<div class="result">154</div>
<iframe id="X"></iframe>
</html>
2. Example html of "frameX":
<div class="button"></div>
The content of the "frameX" and the "main.php" are from the same URL (like: www.example.com)
Now the question:
How can I reload all "result" divs (outside the iframe) by clicking at the "button" div (inside the iframe)?
I have tried the jQuery "load" function:
$( '.button' ).click(function() {
$(".result").load("https://www.example.com/main.php" + ".result");
});
... but this works for me only at the same page. Has anybody a simple solution? Is it even possible?
You need to indicate the context where jQuery will select the elements.
$( '.button' ).click(function() {
$(".result", window.parent.document).load("https://www.example.com/main.php" + ".result");
});
As far as I know there is no onClick event for an iframe, but you can hook to the actual document inside the iframe.
document.getElementById("iframe-id").contentWindow.document.body.onclick =
function() {
$(".result").load(https://www.example.com/main.php + ".result");
}
Note: this will only work if the iframe is rendering a page within the same domain.
I have a page which users get to by clicking through an ebook. When they click a link it takes them to a product on the page depending on the link so it looks like
example.com/#product1
example.com/#product6
example.com/#product15,
etc...
The page already scrolls to that part of the page using this code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
I have another div within the #product1 div called #amazonbutton with a style of display:none.
<div id="product1" class="product">
<a href="link">
<div id="amazonbutton"><img src="amazonbuttonz" />
</div>
</a>
</div>
This is because it's a "go to amazon" button hidden for all items except the currently selected div. So basically, the button should display for the :active div while staying in its original state (hidden) for all inactive divs.
How can I change this with jquery?
I have this bit of code which is incomplete and I'm stuck:
jQuery(function() {
jQuery('amazonbutton').each(function() {
if (jQuery(this).attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
Thank you in advance!
There is a cool thing called document.activeElement . It is a read only property that tracks the current active element.
$('.yourdivclass').hide();
$(document.activeElement).show();
You can activate a element by .focus() .activate()
Firstly, you looped the amazonbutton, in your code i saw that it wasn't a link. So you can't check the attr href. I guess that you want to check the href of amazonbutton's parent. Secondly, amazonbutton in your loop is a class or id? You must add . or # to it. The code could be:
jQuery(function() {
jQuery('#amazonbutton').each(function() {
if (jQuery(this).parent().attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
I would like to have an iframe inserted into a column div on my web page when someone clicks on it. How do I make this possible? When someone is just viewing the page the iframe will be made invisible, but when a button is clicked the iframe will be made visible. How can I do this?
Give your iframe a class like hidden iframe then add the following JavaScript before the closing </body> tag:
Your Frame
<iframe src="..." other-iframe-stuff="" class="hidden iframe">
</iframe>
JS
<script>
$(function(){
$(".your-toggle-btn").click(function(){
$(".iframe").removeClass("hidden");
});
});
</script>
Your button should have a your-toggle-btn class and define the following CSS styles:
CSS
.hidden {
display: none;
}
Give your iframe and button classes or data-attributes, so you can reference them.
Then create an event that displays the iframe on button click, using jQuerys hide() and show() functions. It's important that the iframe is visible to start with if you wan't the site to function when javascript is turned off.
<script>
$(function(){
var $button = $('.iframe-opener'); // or [data-iframe-opener]
var $iframe = $('.iframe'); // or [data-iframe]
$iframe.hide();
$button.click(function() {
$iframe.show();
});
});
</script>
I have list of RSS feed (rss page) in mobile app. I want to open each feed link once clicked, in different tab (in Android) and in iOS want to open _blank. Below code works fine for me.
First issue is I need to click once in empty place on rss page, then it works; otherwise app replaced itself with the external hyperlink webpage.
Second issue as many times I click anywhere in rss page or rss links; on next rss click it opens that many tabs. (e.g I click 3 times in empty space in page and already 2 times visit rss links; on next hyberlink click, it tries to open 5 tabs).
index.html
<script>
$(document).click(function(e){
$('a').click(function(){
var myurl= $(this).attr('href');
if(myurl.indexOf('/') > -1)
{
//alert('linked found');
if (typeof navigator !== "undefined" && navigator.app)
{
navigator.app.loadUrl(myurl, {openExternal: true});
}
else
{
window.open(myurl, "_blank");
}
myurl='';
return false;
}
});
});
$(document).ready(function (){
$("#btnnewgrant").click(rssfeedbtn);
});
</script>
HTML:
<div data-role="page" id="rssfeed">
<div data-role="header">
<h1>Grants New Opportunity List by Agency</h1>
</div>
<div data-role="content">
<div class="myfeedheading">Grants New Opportunity </div>
<div id="busy1" style="color:#000000"><img src="ajaxloader.gif"></img>
</div>
<div id="myfeeddiva" class="myfeed"></div>
</div>
<div>
feed.js
function rssfeedbtn()
{
$('#myfeeddiva').empty();
$.mobile.changePage("#rssfeed", {reverse:false, transition:"slide"});
var rssurl='http://www.ddd.ddd/rss/asdd.xml';
$.get(rssurl, function(data) {
var $xml = $(data);
var mytext="";
$xml.find("item").each(function() {
mytext+='<a href="';
mytext+=$(this).find("link").text();
mytext+='">';
mytext+=$(this).find("title").text();
mytext+='</a>';
mytext+='<br>';
mytext+=$(this).find("pubDate").text();
mytext+='<br>';
mytext+='<br>';
});
$('#busy1').hide();
$('#myfeeddiva').append(mytext);
});
}
You attach click event handler in another click handler attached to the document. So when you click anywhere then a handler is attached to your links. You can have any number of handlers so if you click 10 times anywhere then there will be 10 handlers on your links and code will run 10 times on click on a link.
You need to change
$(document).click(function(e){
to
$(document).ready(function(){
or shorter
$(function(){
Edit: If your links are created dynamically then you need to use .on instead of .click.
Instead of:
$('a').click(function (e) {
use
$('body').on('click','a',function (e) {
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
<a class="trigger" href="#">Shoutbox</a>
<div class="shoutpanel">
<iframe id="shoutbox" name="shoutbox" width="350" height="480" src="tchat.php">
</iframe>
</div>
This script will toggle a sliding panel with a shoutbox in it.
If i put the shoutbox outside of the sliding panel then it will automatically scroll down as soon as it is loaded (to display the last shout)
But for some unknown reason when i put the shoutbox inside the sliding panel, it won't scroll down unless i manually refresh it.
So i am trying to find a workaround and i thought about setting the trigger script to automatically refresh the shoutbox iframe when it is executed. So when you click the trigger it would refresh the shoutbox after opening the sliding panel
i'm not a jquery pro so i have not been able to do it myself... Basically i just need something like this:
$(document).ready(function(){
$(".trigger").click(function(){
$(".shoutpanel").toggle("fast");
$(this).toggleClass("active");
return false;
document.getElementById(shoutbox).contentDocument.location.reload(true);
});
});
Couple of issues:
You have a return false in your click event (which is not required) and also it is before your reload statement. So it never executes.
document.getElementById(shoutbox) should have the id in quotes.
With this you are always reloading the iframe even during slideUp.
Try this:
$(document).ready(function () {
$(".trigger").click(function () {
$(".shoutpanel").toggle("fast", function () { //Use toggle's complete function
if ($(this).is(':visible')) { // check if this is in visible mode
document.getElementById("shoutbox")
.contentDocument.location.reload(true); //reload the iframe
}
});
$(this).toggleClass("active");
});
});
Fiddle