jeswin_simon — 2012-04-14T04:27:03-04:00 — #1
I'm trying to create a full page noobslide for my website. I tried changing the width to 100% in style.css its not working.
here is the copy of the sample I'm working on.
ralphm — 2012-04-14T05:18:10-04:00 — #2
Hi Jeswin Simon. Welcome to the forums.
You also need to change the widths on all the inner elements, too, as they all have pixel widths.
jeswin_simon — 2012-04-14T08:11:45-04:00 — #3
I already tried changing the width of mask1 and #box8 div . Not working.
paulob — 2012-04-14T09:08:18-04:00 — #4
I don't think css will help here as that script seems to be built to work with fixed widths only as you have to set the width in the jquery parameters. The script would need to be revised to accommodate fluid widths and really a question for the JS forum.
Indeed there are not many fluid width text sliders about because of the problem with the fact that text will expand at different widths and cause the element to be taller or shorter depending on the width of the screen and most sliders are fixed height. this can have the effect that all the page content jumps up and down for each new slide. You can't set a fixed height either because if you close the window the text would be taller and break out of the container.
We had a question in the forums a while back and I converted the following menu to be fluid.
It suffers from the problem that I mentioned where the page jumps up and down as the element expands. Therefore I also made this example which calculates the height of the tallest element in the slides and uses that as a base for the height.