Home/ Questions/Q 6870457
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:41:09+00:00

My problem is so simple, that I cannot believe that there is no HTML/CSS

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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.

    • 0