0

I am developing a mobile website. I have created dynamic buttons in java-script. Now I want to bind two events with each button.

1) when pressed, change background image of the button to img-pressed.jpg. Note: Every button has its own normal and pressed image source.

2) when clicked, do something.

I am very much confused to work with these two events together. 

    ItemsToAdd += '" id="'+ appVal.id +'">\
               <a id="' + appVal.id + '" data-role="button" style="background-image:url('+ img_path + appVal.big_icon_normal_path +')" class="custom-button" href="#"></a>\
               <p><br><b>' + appVal.name + ' </b><br> ' + appVal.apptypename + '<br><i>' + appVal.price + '</i></p> </div>';


$("#appGrid" + catVal.id).append($(ItemsToAdd));
$("#appGrid" + catVal.id).trigger("create");    

$("#appGrid" + catVal.id + " > #" + appVal.id + " > #" + appVal.id ).bind('click', function ()
{
    updateAppInfo(appVal.id);
});

The code is working fine on the click event. Actually i am changing some content on the button click. Now i want to change the source of the image when pressed and change to source to normal when press is released. Content change should also work with it.

I will appreciate you help. Thanks in advance.

Omar
  • 32,302
  • 9
  • 69
  • 112
naki
  • 77
  • 2
  • 10
  • bind it to `mousedown` -> change img `mouseup` -> do something else. you can also use `vmousedown`, `vmouseup`, `touchstart`, `touchend`. – Omar Nov 13 '13 at 16:21

1 Answers1

0

Try adding this:

// preload the image
var preloader = new Image();
preloader.src = img_path + appVal.big_icon_mousedown_path;

// bind the events
$('.custom-button').bind({
    'mousedown' : function() {
            // you'll need to set appVal.big_icon_mousedown_path or similar 
            $(this).css('background-image', 'url('+ img_path + appVal.big_icon_mousedown_path +')');
    },
    'mouseup mouseleave' : function() {
            $(this).css('background-image', 'url('+ img_path + appVal.big_icon_normal_path +')');
    }
});
Josh Harrison
  • 5,927
  • 1
  • 30
  • 44
  • thanks buddy....it worked...but now while the mousedown is true and i move the mouse out of the button area, the pressed state is not changed to the normal state. Can give me a hint? – naki Nov 14 '13 at 09:30
  • normally i use .custom-button:active in css to change the background image. How can i use this active property up here. – naki Nov 14 '13 at 10:32
  • Just trigger the same function for mouseleave as mouseup. See updated answer. – Josh Harrison Nov 14 '13 at 10:54
  • You could also apply this css to your .custom-button to prevent users from selecting it - http://stackoverflow.com/a/4407335/940252 – Josh Harrison Nov 14 '13 at 10:56
  • i am working on an android based mobile device. The events vmouseup and vmouseout (equivalent to mouseleave) do not work when i press and moveout from the button and then release. Any suggestions? – naki Nov 15 '13 at 15:32
  • Sorry - that one's outside of my experience. – Josh Harrison Nov 15 '13 at 15:52