Develop Reference

CSS or jQuery : How to get visible top [duplicate]

This question already has answers here:
How to make a DIV always float on the screen in top right corner?
(2 answers)
Closed 4 years ago.
I have a need to make a hidden div element shown in an user event, in the visible top.
What I mean by visible top is,
- Its 0 if page is not scrolled
- if page is scrolled then I need coordinate of visible top, not the page top
Can that be set static with CSS or how to calculate it with jQuery or pure js.
Best Regards

You can do it with just plain css:
div {
position: fixed;
top: 0;
display: none;
}
This will always be on top: 0 regardless of whether it is scrolled or not.

A scroll bar to a DIV [duplicate]

This question already has answers here:
How do you add a scroll bar to a div?
(8 answers)
Closed 8 years ago.
I've got a DIV which is supposed to hold multiple DIVs inside it. How can I set a scroll bar to a DIV?
<div id="container"> //need a scroller to this div
<div id="subcontainer1"></div>//created dynamically
<div id="subcontainer2"></div>//created dynamically
<div id="subcontainer3"></div>//created dynamically
more created dynamically....
</div>

Give it a fixed height using the height property and then set overflow:auto or overflow:scroll
Here's the demo http://jsfiddle.net/vinith98/oyug02xz/1/

Add this code to your stylesheet overflow:scroll or overflow:auto
#container{
overflow:auto;
}
Hope it helps

.wrapper-div {
overflow: auto;
width: 12%;
height: 80%;
}
Use the above class(.wrapper-div) for the div for which you want to have scroll bars. specify width and height.

Making a div scrollable inside a resizeable container div

I am trying to make a div that looks like the MS Windows Command Prompt.
The div is resizeable, and has two children: a title-bar div, and a content div.
I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.
http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.
The content div has overflow:auto set.
Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(

Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.
Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).
I believe this is what you're looking for:
http://www.webdevout.net/test?0wE

Add the following CSS:
.Content {
overflow: auto;
height: inherit;
}
Here you go: http://www.webdevout.net/test?0v-
Cheers ;)

I assume your HTML tree looks like:
Dialog
Title bar
Content
To make the Content scrollable, use the overflow CSS property
.content {
overflow: auto;
height: inherit;
}

Add the CSS property
overflow:auto;

Just add this to your CSS
overflow: auto;

In CKEditor, how do I always turn scrollbars on?

When editing inside CKEditor, I always want the scrollbars to be shown. Is there a way to override the CSS to always show the scrollbars, even if there's nothing lower filling it up?

it should be achievable using CSS.
I have a tool using the CKEditor and I see the body tag of the iframe in which the content is edited has a class .cke_show_borders.
So you can do:
.cke_show_borders {
overflow: scroll;
}
Or to have more detailed control over the vertical/horizontal scrollbars
.cke_show_borders {
overflow-y: scroll; // vertical scrollbar
overflow-x: scroll; // horizontal scrollbar
}

overflow:hidden but let the content auto-scroll

I have a div where content is appended periodically to it via query's append(). As the content gets longer, it will eventually overflow the div. I want no scrollbars to appear when overflowed, but still have the content scroll up to show the new content below.
Is this possible? When I use overflow-x: hidden no scrollbar appears but the content is hidden.

If the size of the container is fixed, you could place the content inside an absolutely positioned wrap like so:
<div class="container">
<div class="wrap">
<p>bah</p>
</div>
</div>
and css:
.container {
y-overflow: hidden;
position: relative;
height: 200px;
width: 200px;
}
.wrap {position:absolute; bottom: 0; left:0;right:0;
}
http://jsfiddle.net/sXGd9/

append() will add to content at the end. You may want to prepend() new content, so the data get added before the old content.
As for overflow, you can set it to scroll so that scrollbars appear if necessary, or hidden so no scrollbars will appear but the content won't be visible. Otherwise you can set it to visible so it will be visible but the scrollbars won't appear.
Do you want the overflowed content to be visible? If so set the overflow: visible otherwise set overflow: hidden (because you don't want scrollbars).
Anyway with this you wan't be able to scroll the content. If you need to scroll you have to build your own scroll system, adding event handler to your container.

If you have each appended content in your "#container" div wrapped in a seperate ".append" div you can do something like:
var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);
Is this helpfull?
Other solutions can be found in earlier post:
How do I scroll a row of a table into view (element.scrollintoView) using jQuery?