I have a div with a scrollbar in the main window who has also a scrollbar. So, if I use window.scrollbar then it will return the scrolling position of the main scrollbar or my div window's scrollbar? What I need to write if I want to know the position of both the scrollbars? Please explain so it will help me in understanding the stuffs such as frames and window.
window.scrollbar doesn't exist AFAIK, it may be some IE specific thing, but it's certainly not standard. window.scrollbars simply gives you information about whether or not the scrollbar is visible on the page.
You want, I believe, document.body.scrollTop which tells you how far the page is scrolled, or div.scrollTop on your div.
Related
I'm working on a chat system and I would like a functional scrollbar to appear to go to the top / beginning of the conversation.
I use overflow-y CSS propery. When its value is egal to scroll, the scrollbar appears but it is not functional.
The best mode would be auto for overflow-y.
I need some help to make it work please.
Full code here.
Many thanks.
I saw the full code but there was no problem
overflow-y : scroll is ok
http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
The above link contain the practice background of W3school.
In the left side code,under style there is "ul" where the "overflow" property have been used.
My question is,when i remove the overflow,whole menu disappears.
Its not a problem, but i am not getting why this is happening.
The browser needs to know the limits in which to produce the bar. Since there is no width indicated it needs to have something to tell it how far it can go.
Setting overflow to hidden makes it so the data just doesn't show past the page width.
Setting it to scroll allows the data to go "off" the page and the user can scroll to view it.
Is it possible to design page like on this picture:
I need reach only three goals:
First content can be scrolled only vertically.
Second content can be scrolled only horizontally.
Must be used only browsers scrollbars.
p.s. Better if we will not use javascript code.
Yes, this is possible.
The real difficulty is to add scrollbars outside de views.
But when done, you can easily scroll to a position your scrollviews.
I don't think this is really a good feature to make this but why not.
Be strong!
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right