CODEWITHSUNDEEP
htmlcssiosipadwebkit
tomk
tomk

Reputation: 1356

How do I change the color of a HTML element, when user taps on it?

My problem is so simple, that I cannot believe that there is no HTML/CSS based solution for iOS 4 and above.

I have grid of images, each subtitled with a single line of gray text. The text is bordered by lines at the top and at the bottom.

When the user taps down on the element (the image or the subtitle) the text and the lines should change the color to white and resets the color, when he lifts the finger again. I would even be better, if an additional line would appear at the top of the image. The whole element is encapsulated in a div.

I already tried to use the CSS properties -webkit-tap-highlight-color, -webkit-active-link and :hover, :active on the div or various subelements, without any success so far.

As suggested I tried this document

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="highlight.css" />
    <style type="text/css"></style>
    <script type="text/javascript">
      div = document.getElementById('element');
      div.ontouchstart = function(){this.style.backgroundColor = '#fff';} // on tapping
      div.ontouchend = function(){this.style.backgroundColor = '#000';} // on releasing
    </script>
   <title></title>
  </head>
  <body>
    <div id="element">
      <p>Dies ist noch ein Test.</p>
      <p>Wenn man auf <a href="#">diesen etwas laengeren Link </a> tappt, sollte was     passieren.</p>
    </div>
  </body> 
</html>

with this style sheet

#element {
    width:200px;
    height:200px;
    border:solid;
    border-color:blue;
    -webkit-user-select:none;
}

But this also seems not to work.

Upvotes: 3

Views: 8372

Answers (2)

Michael Sazonov
Michael Sazonov

Reputation: 1533

div = document.getElementById('#DIV');
div.onmousedown = function(){this.style.backgroundColor = ###;} // on tapping
div.onmouseup = function(){this.style.backgroundColor = ###;} // on releasing

Since you're not into JS - here's the complete script for you:

<script>
div = document.getElementById('elem');
div.onmousedown = function(){this.style.backgroundColor = '#f00';} // on tapping
div.onmouseup = function(){this.style.backgroundColor = '#000';} // on releasing
</script>

Put it after your element's tag.

Here something even better:

<script>
function changeClr( id , clr ){
    document.getElementById( id ).backgroundColor = clr;
}
</script>

Put the code above in the <head> element. All left to do is to add to your element theese atts:

onmousedown='changeClr( "id" , "#f00" );' onmouseup='changeClr( "id" , "#000" );'

e.g. <div id='element' onmousedown='changeClr( "element" , "#f00" );' onmouseup='changeClr( "element" , "#000" );'></div>

That code allows you to change color of any element by adding theese atts.

Upvotes: 4

Matt H
Matt H

Reputation: 6530

The -webkit-tap-highlight-color is just what happens when a user taps something, it isn't an "on/off" state. You must use Javascript as Michael notes to effect the changes.

Upvotes: 2

Related Questions