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>
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');
I have following code for iframe
<div id="demoframe" class="content">
<iframe src="mysite.com" width="100%" height="500px" style="border:none"></iframe>
</div>
and following javascript code
<script>
(function($) {
$(window).load(function() {
$("body").mCustomScrollbar({
theme: "dark"
});
$("#demoframe").mCustomScrollbar({
theme: "dark"
});
});
})(jQuery);
</script>
However, only the scrollbar for body changes and not of iframe? What am I doing wrong here.
It's only adding the body element for CSS. Add an iframe element.
i guess you need to refer to the iframe:
$("#demoframe").find('iframe').mCustomScrollbar({theme:"dark"});
or
$("#demoframe iframe").mCustomScrollbar({theme:"dark"});
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!
Hi is there any possibility to load this page to div?
connectis.pl/connectis.pl/index.php
I tryied this way but seems to not load the data.
<div id="siteloader"></div>
$("#siteloader").html('<object data="ger-pol.home.pl/connectis.pl/index.php" />');
http://jsfiddle.net/SsJsL/
With jquery you can do it like this...
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
Edit: Make sure your jquery functions are wrapped in the document ready wrapper...
<script type="text/javascript">
$(document).ready(function(){
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
Or the shorthand...
<script type="text/javascript">
$(function() {
$("#siteloader").load("http://ger-pol.home.pl/connectis.pl/index.php");
});
</script>
I tried your fiddle and it works just fine..
Might be that you forgot the script tag?
<script>
$("#siteloader").html('<object data="http://ger-pol.home.pl/connectis.pl/index.php"/>');
</script>
Here's JSFIDDLE
I'd like to change my iframe content but I don't understand how
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<iframe id="frame" width="100%" height="95%" src="http://google.com"></iframe>
<script type=text/javascript >
$('#frame').contents().find( "body" ).html('<p>hi</p>')
</script>
</body>
</html>
With this code I always have my google page and not a ifram with hi
<script type="text/javascript">
$(document).ready(function(){
$('#frame').on('load', function() {
$(this).contents().find( "body" ).html('<p>hi</p>');
});
});
</script>
While this is right, the content will never change as you are trying to modify the body of an external resource. You cannot do this due to cross-site scripting rules.
EDIT:
The only way to do it is to do what #user1153551 did and replace the whole document.
Check this Demo jsFiddle
you have to use load event within the iframe's document and calling out to a load function in the containing document to replace to a body contain.
jQuery
$('#frame').load(function() {
$('#frame').replaceWith('<p>hi</p>');
});
HTML
<iframe id="frame" width="100%" height="95%" src="http://w3schools.com"></iframe>
Use .replaceWith() jQuery Method.
use document.ready
<script type=text/javascript >
$(document).ready(function(){
$('#frame').on('load', function() {
$(this).contents().find( "body" ).html('<p>hi</p>');
});
});
</script>