[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