I'm wonder how the custom scrollbar on Facebook has been made.
Is it only css or some javascript as well?
If yes can i have an idea of what the code looks like?
This question is specific to Facebook scrollbar style and not how to simply have a custom scrollbar
This link should get you started. Long story short, a div that has been styled to look like a scrollbar is used to catch click-and-drag events. Wired up to these events are methods that scroll the contents of another div which is set to an arbitrary height and typically has a css rule of overflow:scroll (there are variants on the css rules but you get the idea).
I'm all about the learning experience -- but after you've learned how it works, I recommend using a library (of which there are many) to do it. It's one of those "don't reinvent" things...
Facebook uses a very clever technique I described in context of my scrollbar plugin jsFancyScroll:
The scrolled content is actually scrolled natively by the browser scrolling mechanisms while the native scrollbar is hidden by using overflow definitions and the custom scrollbar is kept in sync by bi-directional event listening.
Feel free to use my plugin for your project: :)
https://github.com/leoselig/jsFancyScroll/
I highly recommend it over plugins such as TinyScrollbar that come with terrible performance issues!
If you're looking for a Facebook like scroll bar, then I'd highly recommend you take a look at this one:
http://rocha.la/jQuery-slimScroll
I solved this problem by adding another div as a sibling to the scrolling content div. It's height is set to the radius of the curved borders. There will be design issues if you have content that you want nudged to the very bottom, or text you want to flow into this new div, etc,. but for my UI this thin div is no problem.
The real trick is to have the following structure:
<div class="window">
<div class="title">Some title text</div>
<div class="content">Main content area</div>
<div class="footer"></div>
</div>
Important CSS highlights:
Your CSS would define the content region with a height and overflow to allow the scrollbar(s) to appear.
The window class gets the same diameter corners as the title and footer
The drop shadow, if desired, is only given to the window class
The height of the footer div is the same as the radius of the bottom corners
Here's what that looks like:
Related
I'm looking to create a blog page similar to stripes documentation. When the user scrolls the page, I would like to trigger different highlights on the code. Check out stripes documentation here and see that the code gets highlighted based on the content when you scroll. Is there a library that does this already, or what is the best approach to tackle this myself?
It's basically a combination of a sticky element (the code container) and linking the scroll position with css styles using JavaScript.
Here you can find more information and a nice demo for such purposes: Scroll and let content stick while animating
To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property
I have an html table that is very tall. The web page has to be scrolled vertically to reach the horizontal scroll bar at the bottom of the table. It would be nice if I could float the horizontal scroll bar for the table at the bottom of the browser window.Can such a thing be done?Is der any plugin available for it?
JS Fiddle is : http://jsfiddle.net/RurTZ/1/
I created a solution with the demo table from Maddy (I hope you don't mind):
Use a range input and bind a handler for the input event to it. Then you can use jquery's .scrollLeft to scroll your table.
This way you can position the scroll bar wherever you want it, and even style it the way you want.
fiddle here
I don't know if this is what you want but, I suggest you to use the CSS property
overflow: scroll;
to your table.. This should do the work.
Try this, may be its helpful for you:-
Demo
<div style="width: 300px;overflow: scroll;height:400px">
<div>
<div style="height: 100%;">
<table class='sample'>
If you can use javascript, you can access the documents height using document.height.
Then calculate your elements css positioning accordingly, set the height of the tables parent div to document.height - 100px etc.
NOTE: this will require proper testing as it will not work for many scenarios. But if you have a simple page and understand the basics of page layout and css positioning it could do the trick.
Since you asked for a plug-in or something, try datatables , this would be easy to implement and can handle alot of customizations etc. , browser the docs. However if your requirements remain simple, this may be overkill.
I am lacking of a better term to describe this UX. It is basically a content container that is scrollable. Depending on the scrolling position, the top or bottom edge of container would light up (or change style) to indicate there is content at either of the direction. For example, when you go to Yahoo.com, and scroll down a little, the top edge of the scrollable section would turn purple, indicating there is content at the top that's outside of the viewport. (See image below)
I wonder if there is already some well known script library that can achieve this so I don't have to reinvent the wheel.
This is a fairly custom concept, but you can see how to get started by looking at the way Bootstrap's Affix method works: http://getbootstrap.com/javascript/#affix
Essentially you will need to have a scroll event listener which tracks what the position is that a user is scrolled on a container. When the scroll position reaches certain breakpoints, the listener function will trigger CSS classes which may do a variety of things.
How do I create a div which will act like a relatively positioned div (as in it cannot allow elements behind it) and still will also act like an absolutely positioned div (as in it can freely be positioned)? I am willing to use javascript and jQuery if needed.
Example: or a similar effect
I don't think you can do what you're asking for in the way you're asking for it. You should be able to fake it adequately though.
Say you wanted to "insert" a sidebar that pushes all the main content on a page over by 200 pixels (the width of the sidebar). You could increase the left margin of the page/container by 200px (animate it if you wanna be flashy) and then absolutely position your div where you want it (you could animate it sliding in from off screen if you want it to appear as if it is "pushing" the other content over). If I understood the question correctly, then this should accomplish the visual effect you're going for.
I think you mean Draggable elements, you can use jQuery User Interface:
http://jqueryui.com/demos/draggable/
I have to design a layout for my project. There are arrangements of divs, upper Div, lower Div, fixed height, scrolling etc. It is difficult to describe the problem in words, hence I have attached an image below. Please refer the screenshots.
What I want to achieve is to arrange panels with respect to the overall height of the browser window. Pink module is absolute positioned at the bottom of the parent Div. Upper Div is precious sibling of pink Div and it contains panels. when browser is resized scrollbars should not appear in UpperDiv. Instead panels should show scroll (show in second).
It can be done using HTML and CSS and not at all I am hesistant using javascript or jquery. I appreciate any of your approach in doing this. Many thanks.
Sorry I couldn't made HTML properly. Currently my html shows scroll in upperDiv (instead scroll should appear in panels). Here I have created a fiddle. Please check.
here
Made some changes to the CSS, hope this is kinda what you are looking for.
http://jsfiddle.net/vCVUL/embedded/result/
Regards.
You could use ExtJS for this. Have look at the demo page. There you find "Layout Managers" how will do the job for you.
I can't think of a much better way than, after page load, setting the dynamic section's height.
And to handle the resize, we can just bind the same function with JQuery.
http://jsfiddle.net/N3HWz/7/