add css properties in using jquery

Question

i have one image in my html and i have 5 different link, i want to change image background position using only one class, so i set parameters in function but it is not working ?

<head>

<script type="text/javascript" src="jquery-1.7.min.js"></script>

<script type="text/javascript">

$(function Bg(left,top) {

    $('.me').each(function (){
        $(this).hover(function(){
            $('.container').css({backgroundPosition: left+ 'px', top + "px"})

            })

        })

    })




</script>
<style>

.container { width:100px; height:100px; float:left; background:url(../bike.jpg) left top no-repeat;}
</style>

</head>

<body>
<a href="#" class="me" onmouseover="Bg(50,60)">click me1</a>
<a href="#" onmouseover="Bg(80,70)" class="me">click me2</a>
<a href="#" onmouseover="Bg(120,60)" class="me">click me3</a>
<a href="#" onmouseover="Bg(150,60)" class="me">click me4</a>

<div class="container"></div>

</body>

Zeta · Accepted Answer · 2012-03-28 07:13:00Z

4

Your syntax for background-position (unexpected ,) is wrong. Try

$('.container').css('background-position', left + 'px ' + top + 'px');

or

$('.container').css({backgroundPosition: left + 'px ' + top + 'px'});

instead.

EDIT: This is not how .hover() works. Either use .hover or mouseover, it's a bad idea to mix them. You can use the following code to solve your problem, however, I recommend you to have a look at the jQuery documentation. Try to to seperate your JavaScript logic, don't use attribute handlers whenever possible.

JSFiddle Demo

$(function(){
    /* The following function will reset the background-position
     * if the mouse moves out of the given element
    */
    $('.me').mouseout(function(){
        $('.container').css('background-position', '0 0');
        // remove the following line in productive environment
        $('.container').text($('.container').css('background-position'));
    });

    /* The following function will set the background-position
     * to the given values. It has to be called in another function
     * (see mouseover in your code).
    */
    window.Bg = function(left,top) {
        $('.container').css('background-position', left+ 'px ' + top + "px");
        // remove the following line in productive environment
        $('.container').text($('.container').css('background-position'));
    }
});

edited Mar 28, 2012 at 7:13

answered Mar 28, 2012 at 5:57

Zeta

106k13 gold badges205 silver badges249 bronze badges

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

2 Comments

Zeta Over a year ago

@amit: T.J. added the missing +, try again. Please add all JavaScript errors you encounter to your question.

Zeta Over a year ago

@amit: Sorry, I didn't look at your JavaScript at all, I noticed only the CSS error.

Codrin Eugeniu · Accepted Answer · 2012-03-28 07:15:17Z

1

That code won't work. You have the values stored inline in the href attribute of each <a> and you never call the function itself.

You should move the background position in a data attribute like: data-bg="x,y" then use this adapted code:

   $(function() {
    $('.me').each(function (){
        $(this).on('hover', function(){
             var bgPos = $(this).attr('coords');            
             bgPos = bgPos.split(',');   
             $('.container').css(
                  'background-position', bgPos[0] + 'px ' + bgPos[1] + 'px');
            });
        });
  });

edited Mar 28, 2012 at 7:15

answered Mar 28, 2012 at 6:11

Codrin Eugeniu

1,3838 silver badges14 bronze badges

5 Comments

Jitender Over a year ago

very close to my requirement but this $('.container').css({ backgroundPosition: bgPos[0]+ 'px', bgPos[1] + 'px'}); line giving me syntext error

Jitender Over a year ago

one more thing i am using coords="50,60" attr instead to data-bg because i did not find it

Jitender Over a year ago

if i give only one parameter then it is working like $('.container').css({ backgroundPosition: bgPos[0]+ 'px'});

Jitender Over a year ago

ya it is working thanks but i cant understand how extra space make it happen bgPos[0] + 'px ' , if i remove one space from right qoute it is not working.

Codrin Eugeniu Over a year ago

That's easy. background-position takes 2 parameters, in our case pixels, in the form: background-position: x y (notice the space between x and y), where x is the horizontal offset, and y is the vertical offset. jQuery ofc follows this when it adds your custom values.

me_digvijay · Accepted Answer · 2012-03-28 06:08:42Z

0

Here is the correct syntax

$('.container').css({backgroundPosition: 'left, top'});

answered Mar 28, 2012 at 6:08

me_digvijay

5,53210 gold badges51 silver badges86 bronze badges

2 Comments

Jitender Over a year ago

i want to add background position by its parameters like <a href="#" class="me" onmouseover="Bg(50,60)">click me1</a>

me_digvijay Over a year ago

Same thing I am saying . Here the left and the top parameters are the one that you passed on onmouseover event. You just need to copy and paste this line, inplace of yours in your code it will work for you.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

jsBin demo

function Bg(left, top) {
     $('.container').css({backgroundPosition: left +' '+ top});
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 28, 2012 at 7:13

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

add css properties in using jquery

4 Answers 4

2 Comments

5 Comments

2 Comments

jsBin demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related