A client of mine saw this awesome scrolling effect when clicking on a menu item: http://www.feedmusic.com/
I'm talking about the grey/purple overflow between the two anchor menu items.
I've been Googeling around for hours and can't find anything like this. Does anyone know how to achieve this?
Thanks in advance!
It's singlepage application with disabled scrolling. I haven't experience with singlepage, but here are ideas which looks like it could work:
Create two divs between content one gray and second purple (or one with two colors in the background). Then create scrolling via js (jquery) on button click.
If it's ajax loaded, there could be only 3 divs: one with current content, one with gray/purple background and third with new content and js should place the divs to required places. But first solution should be easier.
Implementation is up to you.
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
Behance has a column on the right side of the page, that once you scroll past a certain point, becomes fixed.
i.e. go to this page then scroll down to see example
http://www.behance.net/gallery/minke/7133409
Does anyone know how they do this? Is it with CSS and AJAX?
Thank you.
It can be done in the jquery way. Check this Stopping fixed position scrolling at a certain point?.
Or you can go with a jquery plugin jQuery-Stickem.
Click this link to see my concept image regarding the subject: http://i45.tinypic.com/k33c0i.jpg
Hi! Is it possible to do such custom "sliders" for overflowing content without the default Scrollers? It doesn't matter how the actual transition goes (could work just like the regular horizontal scrollbar for i care, just without the ugly default gray buttons/bar). Preferably i would like to do it just with CSS, but if not, i'll consider other ways to do it aswell. Or i'll just simply create another page to the remaining images.
http://www.visioville.fi/en/
Thanks!
You can get rid of the scrollbars by setting
overflow:hidden
in CSS, which will "clip" the DIV contents.
I don't think there is a pure CSS way to scroll it. That is easily doable with jQuery.ScrollTo - just bind hover() or click() events to your arrow icons.
Take a look at this site, I believe it will be of some use to you. It's what I've used in the past: http://jscrollpane.kelvinluck.com/
Wondered if anyone had any links to a tutorial for a navigation bar in css (not javascript). I'm after a 2 tier horizontal bar. the bottom tier being also horizontal.
Just like the following image
any pointers would be a great help!
cssplay.co.uk has plenty of dropline menus. Just look under "Multi-Level - Dropline". Pay attention to copyright though.
I think you just mean two tiers, and they are both visible all the time, not that the second tier is visible on hover, correct?
If so, here's a basic fiddle example: http://jsfiddle.net/jblasco/XAE9c/
Anyway, the idea is to use two ul lists, and place the li elements of your nav in them accordingly. You can then style the list items however you want from there, as well as add links to their content, etc.
If you have a dynamic page, you would do a simple server-side check for if ($PageURL == "blah.php") { and spit out class="active" on the current tab, and style that however you like.
I'd suggest using inspect element on some nav bars you like, and going from there.
The solution without Javascript for IE hover hack http://webstuffshare.com/demo/New-CSSTabMenu
but it may not behave in the way you want, are you after reveal on hover?
http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/
THE guide: Suckerfish Dropdowns.
http://www.alistapart.com/articles/dropdowns
You'd just modify the styles to be fully horizontal.
How can i change the appearance (not the color) of a scrollbar within a box with overflow? I know how to do it in flash, I need a way to do it without it. In fact, I want to know how they did this slider in the apple web site: http://www.apple.com/mac/
It seems they used css along with javascript, but that's all I know. Is it possible that they did it using DOM, DHTML, HTML 5, Ruby or PHP? I have no idea.
If you'd be kind enough to share the answer, I thank you in advance.
They basically re-created a fake scrollbar using images, CSS and some Javascript. When you drag the image, Javascript makes it move together with the mouse cursor and scrolls the box contents in the opposite direction. The real scrollbar is being hidden/deactivated using CSS.
Look here for some examples/tutorials: http://www.hiddenpixels.com/javascript/custom-javascript-scrollbar/