PDA

View Full Version : Styling array elements



lmbarns
12-09-2011, 03:50 AM
EDIT::SORRY I FIGURED IT OUT SECONDS AFTER POSTING BUT I LITERALLY WAITED A COUPLE HOURS BEFORE POSTING....I incorrectly embeded my " and '. It should have been
style="background:url(iconImage.png)' + pos + [I]'no-repeat>"'



The code:


var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-213px 0px', '-250px 0px', '-285px 0px', '-319px 0px' ];
var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
for ( var i=1; i<=10; i++ ) {
$('<div style="background:url(iconSpriteGrey.png)" + pos[i-1] +" no-repeat;">' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
accept: '#cardPile div',
hoverClass: 'hovered',
drop: handleCardDrop
} );
}


So I put all my icon graphics into 1 image then I just offset it like:


#icon1 {background:url(iconImage.png) 0px 0px no-repeat;}
#icon2 {background:url(iconImage.png) 35px 0px no-repeat;}
#icon3 {background:url(iconImage.png) 70px 0px no-repeat;}
....(etc)


Except the values following "url(iconImage)" are actually the ones in the "pos" array, and I want to apply that background image to the corresponding entry in array "words".

Currently it shows the first icon in iconImage.png for each of the icons it puts out.........rather than adding the pos[i-1] index from the pos array...

Any way to do it like I'm attempting to?