I have a div element that at the beginning is hidden. It appears when a button is clicked. the problem is that this div has a scroll and when it appears, it is at the end of scroll. How can I fix this?
The code is something like this:
<div style="width: 412px; height: 351px; overflow: auto; position: relative;">
<div style="width: 540px;">
Here is a form
</div>
</div>
The first div is that is hidden at the beginning.
On your button that displays the div, add this javascript to set the div to be scrolled to the top.
document.getElementById('id').scrollTop = 0;
Per your comment, if you want to set the scroll without modifying the button's code, you could try running it on page load:
<body onload="javascript: document.getElementById('id').scrollTop = 0;">
Or, you could run it at the bottom of the page:
<script type="text/javascript">
document.getElementById('id').scrollTop = 0;
</script>
I would suggest showing your code, providing a link, or creating a test page for people to view and debug. It's difficult to see what's going on without some context.
Here's an example that, I believe, shows what you want: http://jsbin.com/emoji4/edit
This uses the jQuery library, so I'm not sure it will meet your needs.
Related
I have a top navigator, and an iframe below the navigator which load the content.
The layout is kind of like
<body>
<div style="text-align:middle">
<div id="nav"></div>
<iframe></iframe>
</div>
</body>
The navigator is set to fixed width to match the width of iframe content which is not full screen width. So that the navigator and the iframe are aligned at both sides.
But when iframe's height grows beyond the screen, the vertical scroll bar for the iframe shows up and the the iframe becomes a little left(no longer in the absolute horizontal position) and not aligned with the top navigator.
How could I make the iframe always showing at the center even with a vertical bar?
I think this should be a common issue but haven't searched out a similar question here...
Edit 1:
Attach a full sample here to illustrate this question.Here index is the main page, iframe2.html is a frame without vertical bar and iframe.html is the one with a bar. The blue block(iframe) is not aligned with the other two:
index.html:
<html>
<head></head>
<style type="text/css">
iframe {
width : 100%;
padding : 0;
margin: 0 auto;
display : block;
}
</style>
<body>
<div style="text-align:center;margin:0 auto;overflow:hidden">
<div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
<span>test</span>
</div>
<iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
<iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
</div>
</body>
</html>
iframe2.html
<html>
<head></head>
<body style="padding:0px;margin:0px;">
<div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>
iframe.html
<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
<div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>
Result:
You can center the iframe using css,
iframe {
margin: 0 auto;
display: block;
}
See the example: https://jsfiddle.net/bnby6umd/
After my comment (as this seemed to help you with the edits you have made):
Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? body { overflow-y: scroll; }
and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.
Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.
UPDATE
Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.
By setting the <div> within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.
It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe> to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.
Basically, in the styling for the iframe, change width: 100%; to width: 900px;.
Here's a Fiddle.
I've tried to create a diagram to help explain:
On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.
You may also like to take a look at some documentation and tutorials for iframes.
Does anyone have a code for a page up button with endless scrolling? So no matter where the visitor is on the page, they will always see the button to bring them back to the top of the page.
Give this a try:
<div id="toTop" style="position: fixed; right: 20px; bottom: 20px;" onclick="javascript: scroll(0, 0);">Top</div>
You can fancy it up with more CSS and a smooth JavaScript scroll behavior if you want, but this should at least get you started.
I am working on a page and it is a little lengthy, so I chose to link to sections of it using the method below:
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.</div>
Everything works correctly, as I am pretty proficient with basic stuff like this, but I am wondering if there is a way to make it so that the content I am linking to is a little farther from the top of the browser window, rather than immediately at the top. It doesn't have to be perfectly centered, maybe a margin of 100px or so would be fine.
Thanks
<head>
<script>
function change()
{
document.getElementById("myID").style.marginTop="100px";
}
</script>
</head>
<body>
Link
<div id="myID">Content that I would like in center of screen, rather than at the absolute top.sss
<pre>
s
s
s
s
s
s</pre>
</div>
</body>
All you need to do is add a little CSS:
#myID {
margin-top: 100px;
}
Hope that helps!
In my application I have the Iframe that has some log file content. Since I will always be interested in the latest logs. I always want to keep the scroll bar to the bottom. How can I achieve it.
<IFRAME src="/results/show_client_log?testinstanceId=<%=params[:testinstanceId]%>&clientIp=<%=params[:clientIp]%>" id= "frame" style="width:100%;" height=500px scrolling="yes"></IFRAME>
This the code that enables the scrollbar to iframe.
Does adding this to style section in your iframe work?
overflow: auto;
or maybe even
overflow-x:scroll;
or
overflow-y:scroll;
This is my code:
<div id="divSpinner" style="margin-top:30px; visibility:collapse;">
</div>
<br />
<div id="divPaging">
</div>
I'm trying to show a spinner, and afterwards show some content in the 'Paging' div (Using Javascript).
The spinner and the 'Paging' div are not visible at the same time, so I've tried to collapse the Spinner visibility, but the 'margin-top' still effects the position of the 'Paging' div.
What should I do ?
you must use position: absolute; or position: relative; on your divPaging css selecting between them related to your code ,if you put link from web page i can say you witch one and how.
I've set 'display: none;' instead of 'visibility:collapse;'