[CSS-Webkit] Button-click effect?

Discussion in 'iOS Programming' started by Danneman101, Jan 31, 2009.

  1. Danneman101 macrumors 6502

    Joined:
    Aug 14, 2008
    #1
    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:
    Code:
    <a href="#" class="button_forward">Next</a>
    
    CSS:
    Code:
    .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:
    Code:
    <a href="#" class="button_forward" onClick="changeToPressedButton();">Next</a>
    
    JAVASCRIPT:
    Code:
    function test()
    {
    	document.getElementsByTagName('a')[0].className='button_forward_clicked';
    }
    
    CSS:
    Code:
    .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:

    Code:
    <a href="#" id="button1" class="button_forward" onClick="changeToPressedButton();">Next</a>
    
    JAVASCRIPT:
    Code:
    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?
     
  2. jnic macrumors 6502a

    Joined:
    Oct 24, 2008
    Location:
    Cambridge
    #2
    You want onmousedown rather than onclick (a click is mousedown followed by a mouseup, hence your "flashing"), and an onmouseup to reset the image.
     
  3. Danneman101 thread starter macrumors 6502

    Joined:
    Aug 14, 2008
    #3
    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 :)
     

Share This Page