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!
Related
I want to add css properties in a iframe div by using jQuery but it's not working.
Html Code:-
<html>
<body>
<iframe id='iframeId' src='api.php?abc=xyz..'>
<html>
<head></head>
<body>
<div class='change-class'> //require <div class='change-class' style='background-color:black'>
.......
</div>
</body>
</html>
</iframe>
</body>
</html>
JS Code:-
I try below code but doesn't get any result.
$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');
For this the iframe src document should also have to be on same domain to access iframe's dom nodes, if you have both pages on same domain then you can do this:
$("#iframeId").contents().find(".change-class").css('background-color', 'black');
You can find use like this way:
var iframe = $('iframe');
$(".change-class", iframe.contents()).addClass('border');
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 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>
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 tried adding the SlimScroll to an iframe, but for some reason it isn't working.
<div id="-my-profile"><iframe id="scroll" height="525" width="912" src="/index/8"></iframe></div>
<script type="text/javascript">
$(function(){
$('#scroll').slimScroll();
});
</script>
I read the documentation about slimscroll and I found nothing about iframe.
What could be the problem? Is it working only with divs?
Thank you.
in "/index/8" page add:
<script type="text/javascript">
$(function(){
$('body or .container or #content').slimScroll();
});
</script>
add scrolling="no" to iframe:
<div id="-my-profile"><iframe scrolling="no" height="525" width="912" src="/index/8"></iframe></div>