CODEWITHSUNDEEP
jquery
Eli
Eli

Reputation: 4359

change background position using query

on my site project I want the user to be able to change the banner image they have for their profiles. So far I am able to have them upload an image and it automatically be applied as a background to the header, I also have 3 radio inputs that lets them repeat-x, repeat-y, and no-repeat the banner.

My next step is to figure out how to let them choose the position of their image.

I don't want to throw 10 radio buttons giving them predefined choices as it looks ugly. I tried to take a checkbox approach and have them seletct "Top" then a second postions say "LEFT" so that would apply as .css({'backgroundPosition' : 'top left'});

the problem with this is that I have more than two checkboxes so it would mess up the logic of jquery.

Can someone give me some ideas as to how I can tackle this problem?

In the end I was planing on giving up and and giving them a sample rectangle with "hot spots" and just have them select the place they want the image to go along side two inputs for a numerical value for Top Left positioning (i.e. 10px 200px)

is there an elegant eye candy way to approach this?

my current code to handle the radio button click

$("form#frm_look_and_feel input[name='position']").each(function(){
        $(this).bind('change', function(){
            var position = $(this).val();
            $('#topHeader').css({'backgroundPosition' : position});
        });
    });

Upvotes: 0

Views: 371

Answers (1)

Marcus Whybrow
Marcus Whybrow

Reputation: 20008

Give them 2 more radio button sets:

  • One For top or bottom

  • One for left or right

    <form id="form">
  <input type="radio" name="topOrBottom" value="top" />Top
  <input type="radio" name="topOrBottom" value="bottom" />Bottom


  <input type="radio" name="leftOrRight" value="left" />Left
  <input type="radio" name="leftOrRight" value="right" />Right
</form>

Then your jQuery would look as follows:

$('#form').submit(function() {
    var tb = $('input[name="topOrBottom"]:checked').val(),
        lr = $('input[name="leftOrRight"]:checked').val();
    $('.whatever').css({'backgroundPosition' : tb + ' ' + lr});
});

Upvotes: 1

Related Questions