Changing the image of a scroll bar without flash - css

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/

Related

How can I achieve this 'WOW' scrolling effect

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.

Manipulate CSS with javascript

RE:http://www.jorgemonedero.com/blog/index.php/portfolio/tamara-rojo-2/
I wish to move the close button (top right below social media icons) to the bottom line alongside photo title/publication and photo count. When I changed the css the button disappears behind a layer?
Someone mentioned I could do this with javascript?
Can anyone help?
Brians answer is pretty much the easiest way to go, or you could give your container #grid-gallery-wrapper a height and then it wouldn't cut off the close buttons when positioned.

Horizontally centered on a horizontally scrolling page

I'm trying to develop a horizontally scrolling website in which clicking a link in the navigation scrolls the page to the right to the linked div.
The problem is I want the elements that it scrolls to to be horizontally centered within the browser window. I assume that this can be done using javascript, but I have no idea how to go about it.
Here is a pastebin link to my HTML: http://pastebin.com/YxajLvtW
And here is the CSS: http://pastebin.com/JpaJC2Yg
I know how to implement javascript, but not necessarily read/write it.
This should be helpful: http://www.arvindandrion.com/jquery/horizontal-scroll-using-jquery-scrollto/
General advice: Use a Javascript framework like jQuery to code Javascript functionality. It makes life a loooooot easier :)
Maybe take a look at this, too: http://api.jquery.com/scrollLeft/

Simple horizontal content slider / scroller only with CSS?

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/

How do I show flip effect in flex viewstate?

I'm new to Flex.
I want to build cool web application in flex.
For displaying content of my site, I use viewstack and button bar. It is ready, but now I'd like to add some animation effect in that.
For example changing the navigation content shows flip animation.
So how do I do that?
Help full link.
This sounds similar to another question: How can I nicely animate between viewstacks.
Perhaps that will help?
That example shows the most basic kind of animation which is readily available using open and widely supported web-standards such as HTML, CSS, and JavaScript. The jQuery library will allow you to do this in just a few lines of code. Do you have an absolute requirement for flex?

Resources