This is the code I have
http://jsfiddle.net/qhoc/KUYeJ/3/
Here is what I am trying to do (requirements):
.left has known fixed width of 100px
.right must be position:fixed because I want it to stay still regardless of the left content. It will have a bunch of images in Pinterest style using Wookmark
http://www.wookmark.com/jquery-plugin
.right needs to scroll independently using some scrollbar plugin. I tried all below and none works: no scrollbar.
http://www.baijs.nl/tinyscrollbar/
https://github.com/jamesflorentino/nanoScrollerJS
https://github.com/rochal/jQuery-slimScroll
I was thinking it's because the usage of position:fixed causing it to not have overflow scroll. But I tried to adjust it in css and it still doesn't show scroll.
I am stuck at this point and would like to find out how to fix this. The following are negotiable in term of requirements.
If I have to set a dynamic width in .right, that is OK. I think I can use jQuery to detect a change in window size. Because right now, it is expanding all the way as right:0
If both .left and .right have to use the artificial scrollbar, that's OK too. Although ideally the .left one has browser default scrollbar (just like Facebook today: imagine the .left is Facebook Feed and .right is the Chat Panel)
If I need to add more parent elements, I am OK too.
Really appreciate the help!
I ended up using slimScroll but the trick is to change the html structure and where to apply the plugin.
This is the structure:
.scrollable
.photo-thumbs
%ul
%li
Here is how to apply the plugin:
$('.scrollable').slimScroll();
$('.photo-thumbs ul li').wookmark();
Related
On my site I have the Problem that when I´m coming from the Imprint or How-to-find-us Site and I click on service or contact, the scrollTop doesn´t work correktly.
http://wicker-schuetz.de/en/
thanks
It's doing that because when you get to that point on the page, there's no more room for the page to scroll up any further; because your footer is kind of stuck to the bottom of the page.
You need to add some padding to the bottom of your footer to allow some extra space for your page to scroll up. You can do that by either adding a line to your css:
#footer { padding-bottom: 40%; }
or by adding a line to your javascript file:
document.getElementById("footer").style.paddingBottom="40%";
Either one should work, but If you want to dynamically adjust the padding on the bottom of the footer, so that the padding is just right, based upon the screen size, you might want to take a look at javascript's window onresize event and adjust the padding accordingly. Or you could probably just use CSS3 media queries.
I'm wondering specifically how to get the kind of scrolling div used by the SpineJS documentation:
http://spinejs.com/docs/ajax
You'll see that if you resize the window, the scrolling div on the right side (as well as the left) adjusts its height to track the window's height.
What are the key css and js elements of this trick?
The solution used on the website that you've mentioned is only CSS.
The key elements are:
CSS position
CSS line-height
CSS height
CSS overflow
See this working Example and analyze the CSS used to see how it is done! Also, read the links above to know more about those CSS properties and learn to combine them!
It looks like they are just using the css property overflow: auto on the elements. That will add scrollbars if the child content exceeds the parent boundaries.
And the element itself is absolutely positioned with top, bottom and right set to 0px;
I am using jQuery Masonry to display a grid of boxes (all the same size).
Here is my testing site.
Works great when the browser width is 1100px or below.
When viewing it at 1270px and above, Masonry keeps adding columns on the right hand side.
I have a max-width set on the outer container, but Masonry doesn't seem to acknowledge it and just keeps expanding the width of the Masonry container.
On the Masonry Centered page, you can see that it is centered, but there is no constraining width. As you increase the browser width, it just keeps expanding and adding more columns.
How can I add a hard rule to say, "This is the maximum width. Stop trying to add more columns."
Thanks
UPDATE
Here is a jsfiddle, although I"m not sure if it's even set up correctly. It's best just to go to my testing site to see the problem.
Setting a max-width on the parent element of the masonry'ed container works for me. Is this not the result you're looking for?
#wrapper { max-width: 990px; }
I can't figure this out for the life of me. On this page, if the browser height is too small, you won't be able to see the full form. How do I add a scroll bar to the popup so that people with small screen sizes will still be able to see the entire form from top to bottom?
http://kinkarso.com/rayku/profile.html
Thanks!
You change position: fixed; to position: relative; (or absolute if you want it to be overlaid something else) on the .filter-popup class
Your problem is the CSS position attribute for your popup (using filter_popup class). If you used position: fixed, the containing element will not grow to accommodate it. Change it to position: absolute instead and the scroll bar will appear.
To solve this you should use overflow:scroll which is the css way of creating scroll bars.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.