I have this code to hide iframe until link is clicked
link
</br></br>
<div style="display:none;"><iframe id="iframe1" name="iframe1" src="#"></iframe></div>
I want to hide link after iframe is loaded
How i can do that please ?
If there is code is better than my code please post it too
Thank you
Change your link to this:
link
It sets the style of the link to display: none.
Also, I set the display for the iframe to block instead of ''. You should consider moving your css and javascript outside of your HTML into external files, or at least to a <style> tag for CSS and a <script> tag for JS.
Use jQuery's .load() event:
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
$("#iframe").load(function(){
$("#link").hide();
});
Related
i need help with this script, it works when you click on the empty space, but when i click the script inside the div, the jquery function dont work, i need to make it work when i click on the script on the div get the div close by the cookie.
code in jsfiddle
http://jsfiddle.net/FcFW2/406/
Your script tag creates an iframe. Clicks in an iframe won't bubble up to the iframe's parent. You'd have to write the code in the iframe src link.
See capture click on div surrounding an iframe for a related question (your script tag basically inserts an iframe at the location)
I have a page where I modded an app to prepopulate a number of fields. I would like to automatically have the 'submit' button be pressed/submitted when the page loads. I have tried things like:
<script type="text/javascript">
function autoclick() {
document.getElementById('buttonid').click();
}
</script>
with
<body onload="autoclick()">
But it does not work.
Any advice would be greatly appreciated!
Thanks
(It is the iframe on this site: http://abraxas.pw)
I see that your iframe is in the same domain and hence it will possible for you as the cross-domain security may not apply.
Give your iframe an id. And then:
document.getElementById('iframeName').contentWindow.document.getElementById("buttonid").click()
More info here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Scripting
Make sure that the DOM is fully loaded before you fire your Javascript. Wrap this code into body load or iframe load.
Update:
If the iframe is in the same domain and is in your control, you don't need to do all this. Just fire the click from domloaded of jQuery, or place your code at the end (just before body ends). It will work.
Seeing your code, you have defined the function in the head and are calling it at body load. Place the function and the call at the end of the body.
You cannot do it in iframe for security reasons: http://pipwerks.com/2008/11/30/iframes-and-cross-domain-security-part-2/
Content coming from different domain in iframe can't be controlled in your page using javascript.
Browser treats iframe as a different window so you've no access over it. it's something like trying to access content of different window open in your browser from your own window(which is obviously not possible)
I am sorry for my questions, but I am a beginner...
I need a javascript that allows me to:
1 "load/unload" a webpage within an "iframe" (or something similar).
2 "show/unshow" different "div tags"
when i click on a "menu link".
That means that i need a "menu" with different "links" and when I click on one of them, an "iframe" will be loaded and different "div tags" with the same id will be shown.
If then I click on another "menu link", I need the first "iframe" to "unload", all the first "div tags" to "hide", another "iframe" to be "loaded" and other "div tags" to be shown.
The thing is, that if I have a script that hides/shows "iframes", all of them are loaded when the page is opened, and all the videos and music on the different pages will autostart...
Thank you!!!
<!-- this is the menu link tag -->
google
<!-- this tag should be shown on menu link click -->
www.google.com/
<!-- this iframe should be loaded on menu link click -->
<iframe src="https://www.google.com/">iframe not supported</iframe>
Well that won't be iframe since iframes are loaded at the DOM load event.
To do that, you might consider using .load() of the jQuery API.
Like this:
$('element_where_load_happens').load('new_url_here');
This will load the http://new_url_here to the element_where_load_happens. It is easy and better to use.
Using the above code, you will be able to
Load the web content
In the DOM, on some specific event, lets say a click event. And at the same time, you can hide the content using the hide() method of the jQuery API, or even wipe out all the content of that element using: html('') method, please note the '' in between the paranthesis to wipe out current values.
https://api.jquery.com/load/ (jQuery Load)
I am trying to make it so when you click on an iframe it loads the page it is displaying. I have tried putting it inside a <iframe src="something.com"></iframe> tag but that does not work. I want an effect much like zoomer were when your mouse clicks on the iframe it sends you to the source page. This effect would require the iframe to not allow selection of its text. I tried putting a layer above the iframe of the same size and having that link but this does not work because of what this iframe will be doing.
EDIT:
The iframe is on the same domain
Ok third try: The magic of javascript
jQuery has a method, called .contents() , that when used on an iframe element returns the document of the iframe.
// Get a reference to the iframe document
var iframeDoc = $('#inviteFrame').contents().get(0);
Now you can bind a click event to it:
// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
// User has clicked the Iframe !!
});
You could make the entire page inside the iFrame a link with target _top, but only if the url is page.(html/php)#iframe
Oh, I see. Why not just an image of the page that goes to the actual page, instead of an iframe?
This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.