Click here to Skip to main content
13,005,198 members (61,183 online)
Rate this:
Please Sign up or sign in to vote.
I am working on a mobile auction page for an upcoming event. I have two buttons. 1) a triangle image that raises the bid price 2) a circle image that submits the bid.

The triangle has a concave bottom where the circle image sits inside of. The images change when pressed from normal state to indented just to show that they are being pressed. I am using `onmousedown` and `onmouseup` events for the images.
<input id="btnraise" class="btnraise" type="image" src="bidraise-up.png" onmousedown="touchStartRaise()" onmouseup="touchEndRaise();" />
<input id="btnbid" class="btnbid" type="image" src="mobilebid-up.png" onmousedown="touchStart()" onmouseup="touchEnd()"/>

I have two event listeners for each image in order to meet the requirements for different mobile platforms (i.e. windows phone, iPhone, Android). I started this way because from what I know, for iPhone uses the touch events and this works best for them. (I may be mistaken. If you know better about this let me know)
    var btnbid = document.getElementById('btnbid');
    btnbid.addEventListener('touchstart', touchStart, false);
    btnbid.addEventListener('touchend', touchEnd, false);
    var btnraise = document.getElementById('btnraise');
    btnraise.addEventListener('touchstart', touchStartRaise, false);
    btnraise.addEventListener('touchend', touchEndRaise, false);

That is the background so you understand what I have. Now when I test out this page on different platforms I get this box like the button is highlighted when the input image is pressed. Only on mobile. I don't know what this is. Can someone help? Does all this make sense?
Posted 10-Apr-13 10:16am
Updated 10-Apr-13 10:26am
Jordan Wilde 10-Apr-13 16:37pm
@richcb What did you change or edit?
richcb 10-Apr-13 16:53pm
Just the code blocks to make the thread more readable.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170627.1 | Last Updated 10 Apr 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100