100% width jquery slider help
- Started
- Last post
- 15 Responses
- ideaist0
Seems like a start dbdesign -> http://css-tricks.com/examples/A… from http://webdesignledger.com/tutor…
Keep chippin' around something will work...
- Check out the "default options" on the first link to see if it has the control you need... ; )ideaist
- detritus0
o_O
var w_w = $(window).width();
$("#yourDIV").css("width",w_w);
- dbdesign0
Gah.
Not having much luck. Pretty hefty amount of code under that hood.
Anyone have any other resources? I can't believe I am having such a hard time finding a simple example of this. I know I have seen one before, but I can't find it to save my life.
- Here's a more light weight one..
http://themeforest.s…detritus
- Here's a more light weight one..
- detritus0
Oh, hey - that's actually the exact same piece of parallax code I'm hacking away with right now. Christ, I didn't even notice beforehand.
- detritus0
the prob with the code you've gone for is it builds the bulk of the page for you, depending upon what you throw in the thumbnail div.
If you don't want it to do that for you, you either need to strip out the loader code and such. or you need to force JQ to reset elements AFTER its done its thing.
i'd share my code if I wasn't waist-deep in total mess myself right now. Suffice to say, you want that w_w snippet above, and another that derives margin sizes along the following lines...
This assumes a 'page' size of 960px..
var marginWidth = (w_w - 960) / 2;Then you need to work out the distance between pages 1 & 2, etc—
var doubleMarginWidth = ((w_w * 2)- 960) / 2;
- dbdesign0
Ha Ha.
Yeah, its a nice piece of code. I just wish I could find something like it without all of the bells and whistles.
- lukus_W20
I reckon any slider should be able to to this.
Many jquery slider implementations take a parent element, and a bunch of child elements - and use the parent element as the 'viewport'.
<div id="parent">
<div class="child">[.... content ....]</div>
<div class="child">[.... content ....]</div>
<div class="child">[.... content ....]</div>
<div class="child">[.... content ....]</div>
<div class="child">[.... content ....]</div>
</div>If you want the slider to span the whole page width - use CSS to reposition and widen the parent element.
- silentpost0
I don't know how good you are with jquery, but you could probably edit this: http://jqueryfordesigners.com/co…
then make the container full page
- dbdesign0
Thats what I was thinking. It seems like I could do this pretty easily by setting the container width to 100%, but I am having a hell of a time getting it to work properly.
- detritus0
I'm too embarrased to share publicly what I've got right now, so I've dropped you an email to the account mentioned in your profile, dbdesign.
- TheBlueOne0
Here you go. I looked into my Magic Bag of Scripts and found this. I think this will do what you want:
http://theminiblog.com/files/ful…
Just look at the source, everything is there. Relevant javascripty stuff is at bottom.
- This is absolutely perfect. Really appreciate it.dbdesign
- detritus0
OH. You're not necessarily wanting the parallax functionality?
Just the slider?
I'd look into this..
http://flowplayer.org/tools/inde…..then use JQ to set the DIV widths based on window size, afterwards.
- < overkill for *just* the slider — but it provides a load of other useful functionality to add in quickly and easilydetritus
- estetic0
check this out:
http://rapidshare.com/files/4469…
Jquery/Cycle.js + a bit of css. done.
It doesnt like being resized after its loaded though...need a bit more complicated JS to handle all that.
- only tested in Safari & FF... dont think there will be any issues with ie7+estetic
- dbdesign0
Wow. Really appreciate it guys. Thanks.