logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 10-07-2012, 04:58 PM   #1
RyanBeckett01
RyanBeckett01's Avatar
 
Join Date: Oct 2012
Posts: 5
Question CSS Horizontal Slider

I wondering could someone help me achieve this result?

With my current attempts at the moment it goes vertically aswell. Just wont work.

Any help at all would be appreciated.
RyanBeckett01 is offline   Reply With Quote
Old 10-07-2012, 05:11 PM   #2
RyanBeckett01
RyanBeckett01's Avatar
 
Join Date: Oct 2012
Posts: 5
Default

Here is the example.

http://germansaez.com/photo/places/miami/
RyanBeckett01 is offline   Reply With Quote
Old 10-07-2012, 10:29 PM   #3
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 869
Default

Quote:
Originally Posted by RyanBeckett01 View Post
I wondering could someone help me achieve this result?
What result Ryan? Something with the menu or getting the girl to let you take her picture too?
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 10-07-2012, 10:50 PM   #4
RyanBeckett01
RyanBeckett01's Avatar
 
Join Date: Oct 2012
Posts: 5
Default

Quote:
Originally Posted by johnMoss View Post
What result Ryan? Something with the menu or getting the girl to let you take her picture too?
Thanks for reply haha. I want to know how to make a Horizontal image slider like that
RyanBeckett01 is offline   Reply With Quote
Old 10-07-2012, 11:20 PM   #5
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 869
Default

How familiar are you with coding? The script appears to be called preview.js but doing a cursory search I did not find an open source download for it. Truth be told you can just pull all the code you need directly from the site, but in the absence of an open source declaration (meaning free for anyone to use) it would be bad protocol to do so, and no one here would assist in that process...
That said, it is of course a very simple piece of javascript.
__________________
LinkedIn: jM

Last edited by johnMoss; 10-07-2012 at 11:22 PM.. Reason: disclaimer
johnMoss is offline   Reply With Quote
Old 10-07-2012, 11:32 PM   #6
RyanBeckett01
RyanBeckett01's Avatar
 
Join Date: Oct 2012
Posts: 5
Default

Quote:
Originally Posted by johnMoss View Post
How familiar are you with coding? The script appears to be called preview.js but doing a cursory search I did not find an open source download for it. Truth be told you can just pull all the code you need directly from the site, but in the absence of an open source declaration (meaning free for anyone to use) it would be bad protocol to do so, and no one here would assist in that process...
That said, it is of course a very simple piece of javascript.
I'll be honestly new but I pick it up very fast. Top of my class
You be able to help me take it off the website ?
RyanBeckett01 is offline   Reply With Quote
Old 10-08-2012, 02:21 PM   #7
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Quote:
Originally Posted by johnMoss View Post
How familiar are you with coding? The script appears to be called preview.js but doing a cursory search I did not find an open source download for it. Truth be told you can just pull all the code you need directly from the site, but in the absence of an open source declaration (meaning free for anyone to use) it would be bad protocol to do so, and no one here would assist in that process...
That said, it is of course a very simple piece of javascript.
John, can you show where the slider is using Javascript?

Here's the core of the slider:
width: 10000px;
overflow: scroll

preview.js is something else completely, did you look at it?
domedia is offline   Reply With Quote
Old 10-08-2012, 02:26 PM   #8
johnMoss
johnMoss's Avatar
 
Join Date: Dec 2010
Location: Dallas
Posts: 869
Default

DUH!
My bad... I thought I saw it roll for a sec when I released the mouse button off the slider...
__________________
LinkedIn: jM
johnMoss is offline   Reply With Quote
Old 10-08-2012, 02:34 PM   #9
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Here's the core of the slider:
width: 10000px;
overflow: scroll
Yes, it's just as simple as that.

And for the styling of the scrollbar they've use webkit proprietary CSS which is stupid, cause it only works in Safari and Chrome.
Code:
::-webkit-scrollbar{width:12px;height:8px;}
::-webkit-scrollbar-button:start:decrement
::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:#fb3b33}
::-webkit-scrollbar-track-piece{background-color:#000;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#fb3b33}
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#fb3b33}
For a crossbrowser customizable scrollbar solution I'd recommend jScrollPane:
http://jscrollpane.kelvinluck.com/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 10-08-2012, 02:41 PM   #10
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

I noticed the -webkit only implementation as well. Not cool, but then it just drops down to a regular browser scroll bar for non webkit browsers, so it degrades gracefully.
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:15 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com