Buttons carousel

[Paco]

Hi,

I'd like to create a carousel containing multiple buttons created dynamically.

I've created the buttons from the database like this:

function crearBotones() {var myClass = eval('myBtnObject');botonera = document.getElementById("spBotones");for (i = 0; i < myClass.length; i++) { var btn = document.createElement("input");//Assign different attributes to the element.btn.setAttribute("type", "button");btn.setAttribute("value", myBtnObject[i].pdescri);btn.setAttribute("name", myBtnObject[i].pid);btn.style.width = "130px";btn.style.height = "80px";btn.setAttribute("onclick", "llamarHijos(this);");//Append the element in page (in span).botonera.appendChild(btn);} }

These are shown in line, but I'd like to add a left and right button to navigate when they are more than 8 for example.

I've seen multiple jquery explamples but I can't fit them in my project.

Any ideas?

Thank you

[davej]

Rather than setting the style in JS you ought to assign a className. Then you can simply adjust the classes in the css style block to position and style the buttons. Perhaps you will want to create "btncenter", "btnleft", "btnright" classes.

 

http://www.w3schools.com/jsref/prop_html_classname.asp

[Paco]

May I have some more help?

 

Thank you

[justsomeguy]

If you want the list of buttons to scroll left and right then I think you need 2 elements. One of them is the container element for the buttons, and should expand to fit all of the buttons. The other should be set to a fixed width, and you can use the CSS overflow property set to hidden to not show scroll bars. So you have a wider element with the buttons inside a smaller element, like a window. You look through the smaller window to see the buttons in front of the window. Clicking on the left or right buttons would move the bigger button container element left or right, which will look like it is scrolling the buttons behind the window element.That's the basic idea, there are several things you can add to that. You can add animation so that the scrolling is animated, you can play with opacity so that the left and right edges of the window have a slight opaque gradient like a fade effect, etc.