Click here to Skip to main content
Rate this: bad
good
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 11:16am
Edited 10-Apr-13 11:26am
v2
Comments
Jordan Wilde at 10-Apr-13 16:37pm
   
@richcb What did you change or edit?
richcb at 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
0 OriginalGriff 6,564
1 Sergey Alexandrovich Kryukov 6,078
2 DamithSL 5,228
3 Manas Bhardwaj 4,717
4 Maciej Los 4,150


Advertise | Privacy | Mobile
Web03 | 2.8.1411022.1 | Last Updated 10 Apr 2013
Copyright © CodeProject, 1999-2014
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