jQuery how to add another css in code?

Question

Hi i have this code right now on my website...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
        var scrollSpeed = 50;       // Speed in milliseconds
        var step = 1;               // How many pixels to move per step
        var current = 0;            // The current pixel row
        var imageWidth = 4000;      // Background image width
        var headerWidth = screen.width;     // How wide the header is.

        //The pixel row where to start a new loop
        var restartPosition = -(imageWidth - headerWidth);

        function scrollBg(){
            //Go to next pixel row.
            current -= step;

            //If at the end of the image, then go to the top.
            if (current == restartPosition){
                current = 0;
            }

            //Set the CSS of the header.
            $('#body').css("background-position",current+"px 0");
        }

        //Calls the scrolling function repeatedly
        var init = setInterval("scrollBg()", scrollSpeed);
</script>

I'm trying to add a second jQuery selector to:

$('#body').css("background-position",current+"px 0");

so that the css background-position property is changed for two elements.

IE 8 will not work with gradient and background so I'm using a nested div (class="flash-bg") with the background picture and want to update it's background-position so that it will animate in IE as well.

How can I add "flash-bg" to the jquery code? Is there a way to just add it next to '#body'? Or just repeat the code except with '#flash-bg'? Thanks!

Actually all i had to do was change the '#body' to '.flash-bg' then it works both in IE and other browsers... — nuk11888
– nuk11888, Commented Mar 7, 2012 at 18:32

Linus Thiel · Accepted Answer · 2012-03-07 14:41:34Z

3

If you want to set the background-position on both #body and .flash-bg, this will work:

$('#body, .flash-bg').css("background-position",current+"px 0");

Also, in your setInterval, you can pass a reference to the function instead of a string to be eval:ed:

var init = setInterval(scrollBg, scrollSpeed);

answered Mar 7, 2012 at 14:41

Linus Thiel

39.3k9 gold badges112 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nuk11888 Over a year ago

Thank you so much! just what i needed. and thank you for the bonus, seems be to executing a lot smoother :D

jrummell · Accepted Answer · 2012-03-07 18:24:48Z

3

If I understand correctly, you simply want to add the flash-bg class if the browser is IE. You can do something like this, using IE's conditional comments:

<!--[if lte IE 8]>
<script type="text/javascript">
    $(document).ready(function() {
      $('#body').addClass("flash-bg");
    });
</script>
<![endif]-->

edited Mar 7, 2012 at 18:24

answered Mar 7, 2012 at 14:40

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

4 Comments

nuk11888 Over a year ago

Thanks i'll keep this at hand!

nuk11888 Over a year ago

where would i put this conditional comment? inside the jquery itself?

jrummell Over a year ago

No, you would put this in your html, after your other jQuery script.

nuk11888 Over a year ago

hmm this didn't work I put in another " after flash-bg and tried ".flash-bg" but does not work :C

Keith · Accepted Answer · 2012-03-07 14:40:53Z

1

$('#body, div.flash-bg').css("background-position",current+"px 0");

answered Mar 7, 2012 at 14:40

Keith

5,4013 gold badges36 silver badges53 bronze badges

Comments

mason81 · Accepted Answer · 2012-03-07 14:41:06Z

0

I think you are looking for addClass http://api.jquery.com/addClass/

$('#body').addClass('flash-bg');

answered Mar 7, 2012 at 14:41

mason81

1,7502 gold badges18 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery how to add another css in code?

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related