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/
Related
From my example here:
http://www.singaporeswimming.com.sg/button-problem
I want to get rid of the horizontal scrollbar, but unable to do so.
I can easily use overflow-x: hidden, but I do not want to touch the css of the modal plugin. I only want to change elements from the source.
Any idea?
Check this Question - remove horizontal scrollbar in div the answer is the same as the one of #Connor Miles
As a besides note - use the full power of CSS (Cascading Style Sheets by adding your styles in external files. It's very hard to debug right now.
Add overflow-x:hidden; top the body of the register page that is displaying in lightbox, this way your not touching the lightbox
I was wondering if there is a way to achieve an effect similar to Chris Coyier's: Scroll/Follow Sidebar using CSS3 animations?
I have a sidebar that scrolls down with the page as the user scrolls (simply using a fixed position div), but I would like to animate that sidebar to sort of bounce down and/or play catch up with the page as the user scrolls down.
Take a look at Chris' jQuery technique to see what I'm talking about.
The main thing I would like to know is if it is possible to achieve this effect using only CSS3 and no javascript.
Thanks in advance for any help!
No its not possible to get that effect without JavaScript unless you have some other sort of mechanism that allows you to check how far the user has scrolled, and change CSS properties of elements accordingly.
ok i need to make a whole background image so that it resizes with the window and keeps the same proportions
i need to do this only using css
does anybody know how i have looked but cannot find a working solution.
i tried some suggestions on here too but does not seem to work for me either
thankyou
You might want to read the article "Supersize that Background, Please!" on A List Apart. It presents "old" as well as modern techniques.
In order to do it in vanilla CSS, you cannot settle for less than CSS3 since both Background and Borders and Media Queries modules are required.
What you are asking for is not possible. Not with standard CSS2.0 and XHTML.
You can make an image tile, but not scale to fit your page.
The link you provided does just that, it repeats the image in a tile fashion. Background images do this by default.
Sorry, CSS can't stretch images. Only an <img> tag can do that. So you'll have to put one of those in the background.
Maybe you can do that with CSS3, I don't know, but even then browser support is not very good yet.
Here is an example of using a div (100% width + height) containing an img tag to use as the background, might be worth a look.
Try this technique: http://css-tricks.com/perfect-full-page-background-image/
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/
Anyone know if there's a bullet-proof (standards-compliant to XHTML1.1 strict, cross-browser, non-javascript) way to use CSS and background images to turn an inline link into a visual button that will stretch to accommodate different amounts of text (or text resizing)?
I'm thinking I need to use background images as the designer's buttons have rounded corners with a different coloured border. It must work in IE6 (Government job).
Im pretty sure the answer is no, but as always thought it worth a check.
Amongst other things, I've already tried variations on the sliding doors technique, but can't make it work as the solution needs to work inline (i.e. within a paragraph) and I can't set a fixed width.
EDIT: There are several buttons, each of which has a different colour for foreground, border and background. They also have a gradient 'face', but no need for transparency or anything else 'unorthodox'. Unfortunately I can't link to examples as I'm under an NDA.
I'm not sure if this will fit your needs, but I helped someone with hoverable rounded buttons in this post... it uses only HTML and CSS.
I don't think you can do this within your restrictions. The problem is that you have one element, but to properly do stretching, you need three (unstretched left side, stretched center, unstretched right side).
Yeah, you probably need to make image buttons for this.
Just as an aside in future, here's a page on CSS button styling.