Posts Tagged ‘javascript symfony webdesign’

Mouseover-Effekte in Symfony

Posted in JavaScript, Symfony Framework on July 15th, 2009 by admin – Be the first to comment

Ich schreibe gerade an einer kleinen Anwendung in Symfony und wollte für das Frontend-Bearbeiten Edit-Buttons einbauen. Diese sollen aber nur sichtbar sein, wenn man mit der Maus über dem gesamten Feld ist das bearbeitet werden soll. Wie sich nach kurzer Recherche herausgestellt hat ist das ganze kein großes Hexenwerk:

Angenommen unsere View hat folgenden HTML-Code und wenn man mit der Maus über die DIV mit der ID box fährt soll edit angezeigt werden.

  1. <div id="box">
  2. Text Text Text Text Text Text Text
  3. Text Text Text Text Text Text Text  
  4. Text Text Text Text Text Text Text  
  5. <div id="edit" style="visibility: hidden">Edit</div>

Folgendes JavaScript sorgt nun fürr den gewünschten Effekt:

  1. <?php use_helper(‘Javascript’); ?>
  2. <?php echo javascript_tag("function hover() {
  3. document.getElementById(’edit’).style.visibility=’visible’;
  4. }
  5.  
  6. function out() {
  7. document.getElementById(’edit’).style.visibility=’hidden’;
  8. }
  9.  
  10. document.getElementById(’box’).observe(’mouseover’, hover);
  11. document.getElementById(’box’).observe(’mouseout’, out);"; ?>

Fertig :D

P.S.: Natürlich dürfte sich das auch ohne Symfony problemlos umsetzen lassen.