[TYPO3-templavoila] TV-preview suggestion

Niels Fröhling niels.froehling at adsignum.com
Sat May 10 00:49:48 CEST 2008


Hy;

Here is a little suggestion to improve usability of Templa Voila:

------------------------------------------------------------

<div id="templavoila-preview-5d6d4a40c6" style="text-align: left; 
position: absolute; display: none;">
    
        -- table --
</div>
<div id="templavoila-preview-5d6d4a40c6-wrapper"
    onmouseout="
       
 document.getElementById('templavoila-preview-5d6d4a40c6').style.display='none';
       
 document.getElementById('templavoila-preview-5d6d4a40c6-wrapper').attributes.getNamedItem('style').nodeValue 
= '';
    "
    onmouseover="
       
 document.getElementById('templavoila-preview-5d6d4a40c6').style.display='block';
       
 document.getElementById('templavoila-preview-5d6d4a40c6-wrapper').attributes.getNamedItem('style').nodeValue 
= 'border: 2px dashed #333366;';
    "
    style="">
    
        -- content --
</div>

------------------------------------------------------------

try this instead, please:

------------------------------------------------------------
.templavoila-preview-wrapper:hover {
    background: red;
}
.templavoila-preview-wrapper       .templavoila-preview-info {
    display: none;
}
.templavoila-preview-wrapper:hover .templavoila-preview-info {
    display: block;
}
    
<div id="templavoila-preview-5d6d4a40c6-wrapper" 
class="templavoila-preview-wrapper">
    <div id="templavoila-preview-5d6d4a40c6" 
class="templavoila-preview-info">
        -- table --
    </div>
    
    -- content --
</div>
------------------------------------------------------------

It solves several problems:

- no javascript needed, cleaner, faster, customizable without forced 
"!important"
- hovering the table doesn't go mad (flicker) anymore
- the deactivation of 'border' doesn't reenforce calculation of 
surrounding margins
  anymore, so it stops the shifting down on hover

It leaves the content-layout basically unchanged while appearing (if you are
not actually using "tv-parent:first-child"). It comes without 
complications, nothing
becomes worst, only better.

Ciao
    Niels



More information about the TYPO3-project-templavoila mailing list