iOS [CSS-Webkit] Button-click effect?

[Danneman101]

I have a uiwebview integrated within my app, and I want the content on the html-page to behave similarly to components in the iphone sdk.

Specifically Im wondering how I can get the press-button effect, ie. where the button switches to a darker shade when pressed but yet not released.

As of now I do have a beautiful button that copies the appearance of the iphone sdk-button, but when clicked a dark region flashes around it instead of the desired effect described above.

HTML:

<a href="#" class="button_forward">Next</a>

CSS:

.button_forward
{
display: block;
margin-left: 9px;
margin-top: 8px;
height: 30px;
width: 40px; 
text-align:center;
line-height: 30px; 
font-family: Helvetica;
font-weight: bold;
font-size: 12px;
color: rgb(255, 255, 255);
text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
border-width: 0 14px 0 14px;
-webkit-border-image: url(button_forward.png) 0 14 0 14;
}

As you can see, the css loads the button_forward.png by default. I do however have another button (button_forward_clicked.png) that is exactly the same but slightly darker, and that is the image I want loaded while the button is pressed (not before, not after).


Ive messed around with a javascript-solution, but only come so far.

HTML:

<a href="#" class="button_forward" onClick="changeToPressedButton();">Next</a>

JAVASCRIPT:

function test()
{
	document.getElementsByTagName('a')[0].className='button_forward_clicked';
}

CSS:

.button_forward_clicked
{
// same as class "button_forward", except for this last row:
-webkit-border-image: url(button_forward_clicked.png) 0 14 0 14;
}

The result of this "solution" is that "button_forward_clicked.png" will replace "button_forward.png" only after I released the button, and remain that way until I reload the page. So this is not the desired effect.

Another problem is that any button with the <a>-tag would get this effect, since Im using "getElementsByTagName('a')" in the javascript. A better solution would be to name the specific <a>-tag, and then reference it with another javascript-call:

<a href="#" id="button1" class="button_forward" onClick="changeToPressedButton();">Next</a>

JAVASCRIPT:

function test()
{
	document.getElementsById('button1')[0].className='button_forward_clicked';
}

This doesnt seem to work, and Im guessing that is because the javascript-syntax is not correct?

 

[jnic]

You want onmousedown rather than onclick (a click is mousedown followed by a mouseup, hence your "flashing"), and an onmouseup to reset the image.

 

[Danneman101]

I tried onMouseDown(), and in regular safari and other webbrowsers it works as you state - very well.

In the uiwebview, however, it behaves exactly like onClick(), ie. it executes only after the button is released.

So Im guessing its simply a limitation to the iphone sdk, and that it isnt possible to get the correct looking ui-button behaviours on webpages for the iphone safari, at least not ones loaded locally by the uiwebview.

Thanks a lot for the tip, though. Now I can move on to other things