CODEWITHSUNDEEP
jquerycss
nuk11888
nuk11888

Reputation: 161

jQuery how to add another css in code?

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!

Upvotes: 0

Views: 303

Answers (4)

jrummell
jrummell

Reputation: 43087

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]-->

Upvotes: 3

Linus Thiel
Linus Thiel

Reputation: 39233

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);

Upvotes: 3

mason81
mason81

Reputation: 1750

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

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

Upvotes: 0

Keith
Keith

Reputation: 5381

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

Upvotes: 1

Related Questions