Hey Guys I have implemented a scroll area but within the scroll the I have an expandable text area but the scroll area doesn't take this in to consideration so when the expandable text is clicked it is cutting of the bottom. Is there anyway to fix this? The link that its doing it on is http://www.ashleysark.com/transport
You can see on http://www.ashleysark.com/dogcare the scroll works.
Thanks
Adam
When the page was loaded the height of the content was small and when the vets link was clicked thn the height increased and now the javascript is not aware of it may be one simple fix will be once the accordion call is done try calling $("#scrollbar1").tinyscrollbar() that should fix the issue.
You have to call $("#scrollbar1").tinyscrollbar() again after the text has expanded. In fact, you have to call it every time the content of <div id="scrollbar1"> changes.
Related
So, the question is pretty basic but I couldn't find an example snippet to start with.
Idea is to have multiple div with full-screen height and upon scroll, the whole of the div scrolls making the user think that they are on same position and content is coming on same position. [ kinda-ish]
I have an example website where such scrolling behaviour is done. here
Just a reference will help me start.
Thanks
There is a div. In this div has a chat. This div has scroll bar. I want to take a screenshot of all this div content at once. I almost did it by changing the div height to 500% and overflow: visible, but I got a problem. In fact I got about a large part of the chat in the screenshot, but at some point the chat just disappeared with a long white space till the end of the image as shown below.
I took this screenshot using the Firefox's "Screenshot node" feature. And I tried all possible extensions you can imagine before it and none worked (they don't detect the div scroll, just the main page scroll). Anyways, I want a HTML/CSS solution if possible. I want to understand why it is not working.
As you can see, there a lot of white space, but there is a lot of more chat that was ignored by the print.
What could have happened?
You can use FastStone Capture if you want to get a screenshot of a scrolling window or anything with scroll bars. Use the Capture Scrolling Window <Ctrl + Alt + PrtSc> in manual mode.
I'm currently making a new website for my school and some of my webpages have more content than others and they require scroll bars and when you open these pages, the content moves with a few mm to the left which is really annoying and I can't leave it like that.
Some people advice me to target the html tag and use the overflow-y:scroll property but that way the pages with a few lines of text get a unusable scroll bar - it just looks unprofessional... Is there another option to bypass that issue? I'll be grateful if you can answer me :)
overflow-y: auto;
Causes the scroll bar to be visible when it is needed. Otherwise it will stay hidden. Try and see if it works.
I have been struggling for several hours about this problem, although it seems ridiculous I cant fix it somehow.
So this is the webpage draft, http://www.mysecretathens.gr/Sera/test.html
If you click on the Bio link, you will notice that the topbar menu on the Biography.html is moving slightly to the right.
How can we fix that? Any ideas?
p.s I have noticed that If I have the same picture in biography.html as in test.html there is no problem, the topbar remains in the saim position.
html{
overflow-y: scroll;
}
This forces a scrollbar on the right hand side
That's because your first page has a scroll bar and the bio page doesn't. You can force a scrollbar to always show up which can be annoying but consistent, or use absolute positioning to have the content always appear in a specific location, albeit probably not centered.
The content on the first page is going below your screen, meaning you will have to scroll. This isn't the same for the bio page, hence the inconsistencies, either add more content, set overflow-y to scroll or just ignore it (as users will)
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