Different CSS for divs in jQuery loop

Question

I want to do an jQuery fade in and fade out in a loop such as here in this jsfiddle

But I want to maintain different css positioning for each of the .trip elements, ie, the elements fading in and out.

For example with the element <div id="3" class="trip">Item3</div> , I want to add positioning so that it displays left 200px when it fades in, such as in this css:

#3{position:absolute; left:200px;}

AND for another element

#2{position:absolute; left:100px;top:100px;}

With the current code in the jsfiddle, the elements are loaded in the same spot on the page.

I tried adding css to the different elements as I did above, but it still loads in the same place as in the jsfiddle.

How do I fix this?

He's correct, if you add your CSS and change the ID's to div1 div2 and div3 it works just fine. — Mark, Jul 22 '14 at 19:53
I used the ids to be in numeric format to count in the jquery loop. But I added it as class="trip one" etc, and used the css as .trip.one and now it works fine — Tester, Jul 22 '14 at 20:03

Tricky12 · Answer 1 · 2014-07-23T04:06:22.207

1

You can't start id's with a number in CSS. Try this

HTML

<div id="main">
    <div id="one" class="trip">Item1</div>
    <div id="two" class="trip">Item2</div>
    <div id="three" class="trip">Item3</div>
</div>

CSS

#two{position:absolute; left:100px;top:100px;}    
#three{position:absolute; left:200px;}

edited Jul 23 '14 at 04:06

answered Jul 22 '14 at 19:55

Tricky12

6,752
1
27
35

Working Fiddle: http://jsfiddle.net/SaQXY/1/ – Mark Jul 22 '14 at 19:56
HTML5 says you can start ID's with a number :D – tymeJV Jul 22 '14 at 19:58
1

@tymeJV IDs starting with numbers are perfectly valid in HTML5. Problem is, CSS selectors will not work correctly... :) – kapa Jul 22 '14 at 20:26

score 1 · Answer 2 · answered Jul 22 '14 at 19:57

You can give margin for each ids

CSS:

#a2 { margin-left: 200px; }
#a3 { margin-left: 400px; }

HTML :

<div id="main">
   <div id="one" class="trip">Item1</div>
   <div id="two" class="trip">Item2</div>
   <div id="three" class="trip">Item3</div>
</div>

DEMO Here

score 0 · Answer 3 · answered Jul 22 '14 at 20:00

Or you can give them margin dynamically , some thing like this:

function go() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.css( { marginLeft :( (i+1) * 100)+ "px", marginRight :((i+1) * 100) + "px" } );
        $elem.eq(i % l).fadeOut(700, go);
        i++;
    })
}

score 0 · Answer 4 · answered Jul 22 '14 at 20:02

As others have said, don't start IDs with numbers. It's not valid.

However, if you absolutely have to (maybe it's not your HTML), you can give them CSS rules like so:

[id='2'] { margin-left:200px; }
[id='3'] { margin-left:400px; }

But, again, fix the ID names if you can. You'll have fewer issues.

Different CSS for divs in jQuery loop

4 Answers4