I have an animation in an iframe, but I don't want it to load until you scroll down to it. Is this possible? Thanks!
You could try my project https://github.com/emn178/jquery-lazyload-any.
Lazyload youtube iframe demo: http://emn178.github.io/jquery-lazyload-any/samples/youtube/
Usage:
<div class=".lazyload">
<!--
<iframe src="xxx" />
-->
</div>
<script>
$('.lazyload').lazyload();
</script>
Related
I am using iFrame to call common footer and header into a muti-site wordpress but the header and footer load much later than the rest of the site. Here is what I have for the footer:
<iframe scrolling="no" height="395px" frameborder="0" width="100%" src="http://domain.com/common-footer/" class="footer-frame"></iframe>
Is there a better way to do this or to improve this? Thanks much.
You could do this easily with jQuery with the .load() function. Use it like this:
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
HTML:
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
For more information about the .load() function: http://www.jquery-tutorial.net/ajax/the-load-method/
Hope this helps!
See http://plnkr.co/edit/hPyYUCBYvWguyNniCexk?p=preview for a basic example (the original solution is much more complex). The problem is that I cannot scroll the div inside iframe because main page has another div on top. Is there a nice way to fix this (ideally without handling javascript events)?
<html>
<body style="overflow:hidden;">
<div style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;background-color: rgba(255,255,255,0.01);">
</div>
<iframe src="main.html" style="width:100%;height:100%">
</iframe>
</body>
</html>
<html>
<body>
<div style="overflow:auto;position:absolute;top:0;left:0;height:2000px;width:2000px">
</div>
<div style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:green;z-index:2;">
</div>
</body>
</html>
Yes, you can add pointer-events: none; style to your div element.
I dnt have coding knowledge, i have a code with div and it have some contents with one flash file. i would like to make the contents to refresh for every 30secs.
please the content code to add auto refresh
<!-- BEGIN:PAGE -->
<div id="page">
<div id="pictureAndLinks">
<img class="picture" id="picture" onload="showPicture(this, true)" src="$song.picture$" alt="Buy CD!" border=0 />
</div>
<h1>Track Information</h1>
<dl>
<dt>Title</dt>
<dd>$song.title$</dd>
<dt>Artist</dt>
<dd>$song.artist$</a></dd>
<dt>Album</dt>
<dd>$song.album$</a></dd>
<dt>Duration</dt>
<dd>$song.mmss$</dd>
<dt>Year</dt>
<dd>$song.albumyear$</dd>
<dt>Genre</dt>
<dd>$song.genre$</dd>
<dt>Lyrics</dt>
<dd class="broad"><pre>$song.lyrics$</pre></dd>
<dt>Information</dt>
<dd class="broad">$song.info$</dd>
</dl>
<div class="spacer"></div>
Please dnt add php file. because this file works on same location and the same file name. I tried with load.php files its not working.
I think iframe is working on this. I dnt know to change this to Iframe please anybody change it to iframe with autorefresh for 30secs.
Thanks
This should work. Add this to the top of your file and the site will refresh every 30 seconds.
<script type="text/javascript">
window.onload = setupRefresh;
function setupRefresh() {
setTimeout("refreshPage();", 30000);
}
function refreshPage() {
window.location = location.href;
}
</script>
Add in the head tag
<meta http-equiv="refresh" content="30">
http://www.w3schools.com/tags/att_meta_http_equiv.asp
I have a below code in my iframe and it contain some jQuery and I want to call it from the iframe to parent page but it not working and path of the iframe is the content/test/doubleimg.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.example.com/content/test/base64.js"></script>
<script type="text/javascript" src="https://www.example.com/content/test/doubleimg.js"></script>
And double img contain some jQuery function which is execute onload of the page and it work fine but if i put it in iframe its not working.
And my html markup like and path of the parent file is template/category.html
<div id="Container">
-----------
-----------
<div class="Content" id="LayoutColumn2">
<iframe id="theiframe" allowtransparency="true" target="_top" src="/content/test/doubleimg.html" frameborder="0" height="0" width="0"></iframe>
</div>
</div>
So please suggest me the idea how can I use jQuery from the iframe and my jQuery is execute on the page load.
Actually I am trying to call api of the Bigcommerce but for that I need to set https and I can't set it because it not allowed in the Bigcommerce to set https in category page url
And if I am not set https then the API returns a 401 authentication error
So please help me out from this.
Something like this, if documents are in the same domain:
var iframe = document.getElementsByTagName('iframe')[0];
var jQuery = iframe.contentWindow.jQuery;
alert(jQuery);
See my jsfiddle for more information. It include other jsfiddle in iframe there I inited jQuery.
try this
window.parent.document.wirte('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>');
I want to change the URL in browser based on the iframe navigation like:
**[URL at navigator: http://localhost/]**
<html>
<body>
<iframe src="http://localhost/?loadiframe=true">
<!-- this is at the code retrieved by the iframe -->
<a id="mypage" href="http://localhost/mypage/?loadiframe=true">Navi</a>
</iframe>
</body>
</html>
When the user clicks the #mypage link the URL in the browser will be:
http://localhost/mypage/
Not matters that the src of the iframe be the same always.
¿Is that possible?
Maybe using ajax.........??
Take a look at: Html5 history api
If you set the target attribute of the link to _parent, the address should open in the parent window:
<a id="mypage" href="http://localhost/mypage/?loadiframe=true" target="_parent">Navi</a>