Lego Worlds

carousel

Posted by Taylor Bernard on June 25, 2015

scratching my head on how to do this one.
auto width divs have not been working well for me lately.

needs to fill with how many different selections there are, so say 2-6.
cant do like you did in the footer, by using a fixed with and padding then.

using that piece of code i found a while back that works great, and found it works on like ie 6+ so should be good there.

but when i do auto width on the container it fills to the parent size. it keeps inheriting width from parent container.
found a trick to use white-space: nowrap; and that fixes it trying to pull a diff width besides 'auto' but then for some reason that kills my margin: 0 auto centering.

Comments

Taylor Bernard on June 25, 2015:

fixed images

Taylor Bernard on June 25, 2015:

got it

Justin Bernard on June 25, 2015:

hoooot!  post codez

Taylor Bernard on June 25, 2015:

you or me want to populate it on the pages that have the carousel?

Justin Bernard on June 25, 2015:

most def

Justin Bernard on June 25, 2015:

can just do it on /carbon if want

Taylor Bernard on June 25, 2015:

all files on carbon refreshed. i dont know if index is up to date but you can just look at the files and css and copy the code

Justin Bernard on June 25, 2015:

any luck with carousel integration?

Taylor Bernard on June 25, 2015:

a little. i org used just images and its a piece of cake there. finds image size, makes viewport that big then just tiles thru them. holding divs looks to behave differently. and the viewport settings are overrriding the css on some stuff.

Justin Bernard on June 25, 2015:

equity used text/divs though right?

Taylor Bernard on June 25, 2015:

yeh i reckon so.
looks like i copied their formatting. but i dont have li and ul formatting in my css. just divs.
so looks like i just put divs inside list. looks like it may be wrong?

Justin Bernard on June 25, 2015:

negative, that should work fine (pasting div's into a <li> is fine)

does it work?

Taylor Bernard on June 25, 2015:

yeh i got scrollable content now. so that part is good.
now gotta figure out how to replace the dots and biggest thing is how to position the arrows to be outside of the div.

Justin Bernard on June 25, 2015:

cool thx

you can have any hours off tomorrow that you work on this thing tonight
im swamped on other aspects at moment

thx

Taylor Bernard on June 25, 2015:

what you want to do here.

they made the selected state a bigger circle, and it works ok when its auto-tiling thru them. but if you mouse hover over it 'jumps' up size and looks real bad.
leave it alone or make them the same size and just change color?

Taylor Bernard on June 25, 2015:

ok the reason its 'jumping' is because the red dot is 27x27. yellow is 23x23. when i hover over its pushing a +4px more in there and spacing it out. i dont think theres any way to make it not jump by having 2 different sized objects.

Justin Bernard on June 25, 2015:

Ah

See if can fake it, make both dots same size, add trans to small one, or make circles same size

Taylor Bernard on June 25, 2015:

add like a dot in the corners to get it to be 27px square? i think if i add any overlay and make it like 5% it'll still be visible?

Taylor Bernard on June 26, 2015:

got it all working.

up on carbon. new js, css and home.html and should be all there.

few notes.

- the next and prev buttons are in the bxslider.css file, search for 'bx-prev' 'bx-next' . their placement are in their divs. their div SIZE is in '.bx-controls-direction a'

- this did this on webb too. i dont know if its a bug or how its supposed to be. but the auto-cycle will turn off once you use either the dots or arrows with a mouse click. after you click it will stop autocycling.

- '.bx-controls-auto' is placement of nav dots in relation to bottom of viewport

- a character like a 'p' that hangs down below the line is running into the whitebutton (play trailer button). may have to bump that margin down some. all their mockup copy didnt have any hanging characters, and its where they have it in the art.

- theres a way to do a controller in another div. shown here:
http://bxslider.com/examples/custom-next-prev-selectors

i couldnt get it to work. doubtful its any better than what were using now.
looks like its populating a blank div with copy, and using that copy as a selector (prevText, nextText). couldnt get it to work with an image div.

Taylor Bernard on June 26, 2015:

dont know if this may help or not. saw this thread and thought may help if you ran into repsonsive issue. but i think this is in regards of using nav outside of the normal window.

https://github.com/stevenwanderski/bxslider-4/issues/626

Justin Bernard on June 26, 2015:

awesome thx much
ill try to integrate in a bit, hopefully can tweak it easy for the 4 placements
thx again

Justin Bernard on June 26, 2015:

got it working perfect, thx again

Taylor Bernard on June 26, 2015:

not centering for me on firefox fullscreen.

Justin Bernard on June 26, 2015:

your build or mine?

Taylor Bernard on June 26, 2015:

yours, viper

Justin Bernard on June 26, 2015:

give me two secs, about to get you to test something on big screen

Taylor Bernard on June 26, 2015:

i just copied all your bxslider css code you had on /viper and replaced my local css.

centering fine. so i dont think its in the css.
leaves it up to a js issue or something as a bug since the /viper is a fullwidth div, which may be messing it up?

Taylor Bernard on June 26, 2015:

http://stackoverflow.com/questions/7840151/centering-bxslider-jquery-plugin


??

Justin Bernard on June 26, 2015:

weird, sure its that.  they are having me make some more centering content changes, ill address then, so no sense in debugging on current build as it may tweak a bit

thx

Taylor Bernard on June 26, 2015:

hey re-upload your current version of lego. i dont messed up viper a bit and cant revert back to the old one.

Justin Bernard on June 26, 2015:

see what this does on homepage
http://client.fleeangrybear.com/lego/sparrow/

Taylor Bernard on June 26, 2015:

yeh thats what i did. make it auto/100% and it centers fine.
its when you specifiy the viewport to be a fixed pixel i think it was bugging on me.
try making that viewport a fixed width and make it red bg and let me try it again. theres a small % chance i may have had a setting on my firefox enabled that was causing the glitch. easy to test now.

Justin Bernard on June 26, 2015:

but sparrow fixed it on ff for you now already though?

cause if so we good, there are no fixed widths, client was wanting that too, full screen slide out