This is how it looks like: http://pancake.io/19c56e/cool-list/index.html.
Sorry, no frame, I can't really figure it now why embedded code isn't working.
Some notes:
- the images are simple photoshop custom shapes that I've found on internet googling, try making your own
- generating dynamically the list is easy: with a for loop that appends to a container items
- an item is a div that floats left and it's containing: a picture and a text,
- practically, an item is a link, but I didn't implement that yet
- pictures, text and links, are acctually stored as strings in variables in a defined order, so the for loop can benefit of accesing required array item; it's more like: show picture[3] with title[3] and this links to link[3], and this is showing a picture of, let's say, a musical note, the title is "New Songs" and the link is your online mp3 list of songs. Neat, huh?
- as you saw, there is an unexplicable empty div with no width, but with same height as the items, that I've been appending after each item: this is because hovering your mouse upon the last item of rows of the list would modify the position of the bellow (in column) divs; because of the float:left style, the bellow row would completely rearranged itself, with only item on the row, just bellow the last item of above row! You probably didn't understood me, but try comment and uncomment that line.
- update: the above discused trick works well in chrome; accidentally, I've seen it working not on firefox (yes, yes, I didn't check compatibility), but I've found the same the solution: put a width:1px after the height.... like this:
$('#container').append("<div style='height:150px; width:1px; float:left'></div>");
- and please do insert links like this:
$('#container').append("<a href="#"><div class='box'><img src='" + images[i] +".png' /><br /><h5>"+ titles[i] +"</h5></div></a>");
It doesn't really have any CSS, almoust the whole style is dynamically generated with jQuery:
And this is the jQuery code:
Niciun comentariu:
Trimiteți un comentariu