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.
Related
I have an html page with a couple of IFrame loading through external source code. I have no control over the external resources.
When the webpage loads it focuses on the one of the IFrame instead of focusing at the top of the page.
Here is my simple html page:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="topp" tabindex="0"></div>
</head>
<div id="topp" tabindex="0"></div>
<body>
<p id="test">test 1 2 3 4.</p>
<br><br>
<h2>IFrame 1</h2>
<iframe src="https://..../index1.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index2.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index3.html" width="100%" height="825px;"></iframe>
<iframe src="https://..../index4.html" width="100%" height="825px;"></iframe>
</body>
</html>
It's focusing on Iframe index3.html, so I have tried to create workaround by including in the page body text some javascript. In this way I can force the page to scroll back to the top as the DOM is being rendered. But it is not working.
Here is what I have tried:
$(document).ready(function(){
$(this).scrollTop(0);
});
Is there a way to find wheter the IFrame loads all the SRC, and then focus on top of the page?
You can replace your JavaScript code with:
window.scrollTo(0, 0);
That line of code will force the page to scroll to the top after loading.
You can add smooth scrolling with this code:
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
I hope this helps.
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');
Hi every one im very new with using javascript and i cant get this jquery.fullpage.js scroll function to work, https://github.com/alvarotrigo/fullPage.js#fullpagejs
and i have no idea how i should install it.
my code:
<html>
<head>
<link href="/mysite/css/jquery.fullPage.css" rel="stylesheet">
<script src="/mysite/js/jquery.fullPage.js">
</head>
<body>
<div class="section active">
MYCONTENT
</div>
<div class="section">
MYCONTENT
</div>
</body>
</html>
I have been trixing with this for a few hours and its easy
This is my joomla template! (example)
<head>
//here you put the code that gets the source files for fullpage.js which you find on the github link//
</head>
<body>
//here is your body and it probably have tons of <div> elements in it, in different levels like this:
<div>
<div>
<div>
//here you can for example find a line of php that renders a module.
</div>
</div>
</div>
The thing i did wrong when i tried to implement fullpage.js to my joomla site was that i where putting the section class to a div that was not in level 2 after the body tag
What i want to explain with that is:
<body>
<div id="fullpag <<-this is where fullpage starts">
<div class="section" >
YOUR CONTENT
</div>
</div>
The div with the id fullpage should always start in the first level and the section always in the second level after the body tag, i have no real name for what i call levels but i hope everyone understands.
How to move div to before tag end body </body>. I'm using openx, I cannot change div content, because the content owned by others. I just put code javascript from openx in order to get banner I put the code after tag <body> before anyting tag in content.
And my problem is, when I put javascript from openx to generate banner I get two div parallel, which the banner in <div id="div1"> and <div id="div2"> there are in below tag <body>, I want to <div id="div1"> after tag start body <body> above anyting tag in content. And <div id="div2"> in before tag end body </body> after anyting tag.
This is I get html from openx, as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
<div id="div2"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define example insert after div id footer
Because this is content owned by others.
This is justexample content.
</body>
</html>
and I want to transform to as below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="div1"><img src="blablabla" /></div>
Here is content other div id or div class,
I not define, example insert after div id footer
Because this is content owned by others.
This is justexample content.
<div id="div2"><img src="blablabla" /></div>
</body>
</html>
Because I want to put banner one above content and banner two to below content. I don't want to use CSS position: fixed.
So, possible to move tag div to before tag end body?
If possible, please help me code javascript to do it.
Thanks.
Plain simple javascript:
document.body.appendChild(document.getElementById('div2'));
To move the node you just use appendChild method.
And the demo http://jsfiddle.net/6GsbB/
Yes. You can do this way, but you need jQuery.
a = $("#div2").clone();
$("#div2").remove();
$("body").append(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/
Plain JavaScript method.
var a = document.getElementById("div2");
document.body.appendChild(a);
Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/1/
From the comments, this can be made in a better efficient way, given by dfsq:
document.body.appendChild(document.getElementById('div2'));
I have attached the sample code which demonstrates the problem. I am checking this in Firefox 3.5.7. The problem is the parent HTML has a scrollbar, and it loads an iframe which is fullscreen (height: 100%, width: 100%), I want the parent scrollbar to be removed after the iframe is loaded.
1) Is this possible to do?
2) When we give height: 100%; width: 100% why does it occupy only the view area? But not
the full parent occupied area?
This is Main.html
<Html>
<head>
<script type="text/javascript" src="client.js"></script>
<title>
I am a client
</title>
</head>
<body bgcolor="#000000">
You can see the iframe below...
You can see the iframe below...
You can see the iframe below...<br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br>
You can see the iframe below...
<br>
<iframe name="clientframe" id = "clientframe" src = "app.html" style="position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:999;background:#ff0000"
onload = "sendparams();" frameborder="no">
</iframe>
</body>
</html>
This is app.html:
<HTML>
<HEAD>
<title>
I am an Application
</title>
</HEAD>
<BODY>
<h3>This is an application</h3>
<br>
You name <input type="textbox"> <br>
Password <input type="password"><br>
<br>
<br>
<input type="button" value ="Let me in">
</BODY>
</HTML>
NOTE: Open the Main.html, it will load the app.html in a iframe. You can notice that after iframe is loaded a scroll bar appears, and the red background for the iframe does not completely fill the entire parent.
Hide the Parent window scroll bar when iframe is loaded
put this script at top of the Main.html
<script type="text/javascript">
function sendparams() {
document.body.style.overflow = "hidden";
}
</script>
The scrollbars will not hide because your IFrame's height if fixed but the text "You can see the iframe below..." last one crosses the height.
If you remove few (atleast two rows of) <br> then it will work fine as per your requirement.