táblázatban hover-"szerű" sorkijelölés :)

Anonymous · 2006. Szep. 24. (V), 21.46

Sziasztok!

CSS-ben a táblázatsort-t érintő hover-el megoldott kurzorkövető sorszínezést, hogyan tudom böngészőfüggetlenül megvalósítani? (ff,ie,op)
kell valami js-es bűvészkedés? ie-t, hogyan tudom rávenni legegyszerűbben?
nem csicsa lenne, hanem fontos használhatóságot segítő funkció. sokoszlopos széles táblázatom van sok hasonló adattal, ahol látni kell mi van mivel egysorban.

■

csirip

Javascript-el

Fekete Ferenc GDA · 2006. Szep. 24. (V), 22.19

Sajnos az IE csak a linkkere engedi a hover-t, ezért én javascript-el szoktam megoldani. Írsz egy vüggvényt, amely vár egy id-t és az objektum (amit az id jelöl) hátterét beállítja más színűre, a tr-re pedig raksz egy onmouseovert, ami meghívja ezt a függvényt és átadja neki az id-t. onmouseout-ra uyganez. Aztán ha működik, átírod event handlerekre és nem lesz a kódban a sok onmousexxx:)

function setBG(id){
$(id).style.background = '#f00';
}

function setBG(id){
$(id).style.background = '#f00';
}

ja, ez a példa feltételezi a prototype használatát. egyébként $(id) helyett getElemetByID

A hozzászóláshoz regisztráció és belépés szükséges
új téma

kis kötözködés :)

toxin · 2006. Szep. 25. (H), 08.03

Element.setStyle(id,{background:'#f00'});

szerencsésebb a fenti használata, emigyen :)

igazából így kéne

$(id).setStyle({background:'#f00'});

ez az új szintaxis, csak IE alatt (még?) nem megy :S

üdv t

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Csshover

Anonymous · 2006. Szep. 24. (V), 23.03

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* - Martin Reurings
* - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets()
{
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}

function parseStylesheet(sheet)
{
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}

try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}

function parseCSSRule(rule)
{
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;

var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);

currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}

function HoverElement(node, className, events)
{
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}

function getElementsBySelect(rule)
{
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}

function getSelectedNodes(select, elements)
{
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>

Kimásol->beilleszt->elment csshover.htc néven

Használata: css fájlban

body { behavior:url("csshover.htc"); }

Ha gond, hogy kiakad tőle a validator, akkor If IE-z!

Így az IE is minden elemre tudni fogja a hovert.

Arra figyelj, az IE a csshover.htc fájl elérését nem a css fájltól, hanem a html fájltól nézi!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Csatlakozom

oky · 2006. Szep. 25. (H), 14.22

Én is a csshover.htc-t javasolnám.
CSS->be:

#szinestabla tr:hover>td{background:szin;}

#szinestabla tr:hover>td{background:szin;}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

csshover, yoo

TeeCee · 2006. Szep. 25. (H), 16.21

Igen, a csshover az jo, de kevéd ID-re alkalmazva, különben 'villog' az elem, amin hover-ezni szeretnél.
Egyébként van már belőle 1.42-es verzió itt http://www.xs4all.nl/~peterned/csshover.html
A másik, amire figyelni kell, hogy az IE nagyon allergiás az XSS-re, ezért ha valami.hu/csshover.htc-ként hívod meg, akor nem lehetsz a www.valami.hu alatt, mert hmm... nem tölti be, legalábbis nekem meggyűlt vele a bajom...
Illetve, hogy a WinXP SP2 óta a htc-fájlok csak megfelelő headerrel kiadva fogadja el az IE, ezt meg néhány apache nem tartalmazza. Ha nem a Tied a szerver, akkor vagy .htaccess a megdolás (ha engedélyezett), vagy egy lehetséges és egyszerű 'workaround': (a http://www.hoeben.net/node/83 oldalon van még más is, meg nem csak PHPs is, de az alján az enyém, amit ide bemásolok ;) )

<?php
ob_start();
?>
[Copy here the orginal HTC file content]
<?php
header("Content-type: text/x-component");
header("Content-Length: ".ob_get_length());
header("Content-Disposition: inline; filename=csshover.htc");
ob_end_flush();
?>


<?php
ob_start();
?>
[Copy here the orginal HTC file content]
<?php
header("Content-type: text/x-component");
header("Content-Length: ".ob_get_length());
header("Content-Disposition: inline; filename=csshover.htc");
ob_end_flush();
?>

természetesen ezekután nem csshover.htc, hanem mondjk csshover.htc.php néven kell elmenteni, illetve hivatkozni rá...

És végül, de nem utolsó sorban (sörben) az alternatív megoldás:
http://dean.edwards.name/IE7/ Ez a (szerintem nagyon is fantasztikus javascipt-kollekció az IE7 alatti IE-ket javascripttel veszi rá a megfelelő CSS-kezelésre (meg PNG, és egybeket is tud, ráadásul külön fájlan vannak a külön részhez tartozó javascriptes 'patch'-ek, így nem kell az egészet fölöslegesen betölteni).

Tudok mutatni példákat is (mindkettő működik IE alatt gyönyörűen, és nem utdolsó sorban önreklámnak sem utolsó :) ):
- csshover.htc: SZTE ÁJTK HÖK weboldala
- IE7 : Euromenedzser weboldala
==> észrevételeket szívesen fogadok a weblapokkal kapcsolatban...

A hozzászóláshoz regisztráció és belépés szükséges
új téma

document.domain-t

toxin · 2006. Szep. 25. (H), 16.55

A másik, amire figyelni kell, hogy az IE nagyon allergiás az XSS-re, ezért ha valami.hu/csshover.htc-ként hívod meg, akor nem lehetsz a www.valami.hu alatt, mert hmm... nem tölti be, legalábbis nekem meggyűlt vele a bajom...

kell átállítani, nem túl sok változtatást tesz lehetővé, de www. előtag még belefér, bővebben

http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/domain.asp

ill. gugli, sokat nem játsztam vele, mert ha átraktam meg más problémáim lettek tőle, de azért szólok :)

üdv t

A hozzászóláshoz regisztráció és belépés szükséges
új téma

fx 1.5.x , opera9.x ie6 alatt néztem

toxin · 2006. Szep. 25. (H), 17.44

http://toxin.hu/weblabor/tableRow/tableRow.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>tableRowColorizer</title>
<script src="./scripts/prototype.js" type=""></script>
<script src="./scripts/scriptaculous.js?loader=builder" type=""></script>
<script language="javascript" type="text/javascript">
var myTable =
Class.create();
myTable.prototype = {
initialize : function(wrapper,id,rowNum){
this.wrapper = $(wrapper);
this.table = Builder.node('table', {id:id,style:'margin: 0 auto',width:'95%',cellpadding:'0',cellspacing:'0',border:'1'});
this.tbody = Builder.node('tbody');
this.rowNum = rowNum;
this.table.appendChild(this.tbody);
this.wrapper.appendChild(this.table);
},
addRow : function(rowDatas){
this.tr = Builder.node('tr',{id:rowDatas.shift(),className:'data'});
if (this.tr.id == 'id') Element.addClassName(this.tr,'firstRow');
rowDatas.each(
function(rowData){
var td = Builder.node('td',[ Builder.node('strong',rowData)]);
this.tr.appendChild(td);
delete td;
}.bind(this)
)
for (var i=rowDatas.length;i<this.rowNum;i++)
{
var td = Builder.node('td',[ Builder.node('strong',' ')]);
this.tr.appendChild(td);
}
this.tbody.appendChild(this.tr);
},
removeRow : function(rowId){
if ($(rowId)) Element.remove(rowId)
},
reset : function(){
Element.update(this.tbody,'');
}
};
var myTable_Row_Colorizer =
Class.create();
myTable_Row_Colorizer.prototype = {
initialize : function(tableId){
$$('#'+tableId+' tr').each(
function(tr,index){
Event.observe(tr,'mouseover',
function(){
Element.setStyle(this,{background:'yellow'})
}.bind(tr),true);
Event.observe(tr,'mouseout',function(){
Element.setStyle(this,{background:'blue'})
}.bind(tr),true);
Element.setStyle(tr,{background:'blue'});
}
)
}
}
window.onload = function(){
oTestTable = new myTable('tableWrapper','testTable',15);
for (var i=1;i<30;i++)
oTestTable.addRow([i,i]);
new myTable_Row_Colorizer('testTable');
}
</script>
</head>
<body>
<div id="tableWrapper"></div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>tableRowColorizer</title>
<script src="./scripts/prototype.js" type=""></script>
<script src="./scripts/scriptaculous.js?loader=builder" type=""></script>

<script language="javascript" type="text/javascript">

var myTable = 

    Class.create();
    myTable.prototype = {
        
        initialize : function(wrapper,id,rowNum){
            
            this.wrapper = $(wrapper);
            this.table   = Builder.node('table', {id:id,style:'margin: 0 auto',width:'95%',cellpadding:'0',cellspacing:'0',border:'1'});
            this.tbody   = Builder.node('tbody');
            this.rowNum  = rowNum;
           
            this.table.appendChild(this.tbody); 
            this.wrapper.appendChild(this.table);

                   
        },
             
        addRow : function(rowDatas){
            this.tr = Builder.node('tr',{id:rowDatas.shift(),className:'data'});           
            if (this.tr.id == 'id') Element.addClassName(this.tr,'firstRow');
            
            rowDatas.each(
                function(rowData){
                  var td = Builder.node('td',[ Builder.node('strong',rowData)]);
                  this.tr.appendChild(td);  
                  delete td;
                }.bind(this)
            )
            
            for (var i=rowDatas.length;i<this.rowNum;i++)
            {
                var td = Builder.node('td',[ Builder.node('strong',' ')]); 
                this.tr.appendChild(td);  
            }
                                  
            this.tbody.appendChild(this.tr);  
                      
         },
         
         removeRow : function(rowId){
             if ($(rowId)) Element.remove(rowId)
         },
         
         reset : function(){
            Element.update(this.tbody,'');             
         }
         
};

var myTable_Row_Colorizer = 

    Class.create();
    myTable_Row_Colorizer.prototype = {
       
       initialize : function(tableId){
                       
           $$('#'+tableId+' tr').each(
                function(tr,index){
                  Event.observe(tr,'mouseover',
                    function(){ 
                       Element.setStyle(this,{background:'yellow'}) 
                   }.bind(tr),true);
                  
                  Event.observe(tr,'mouseout',function(){
                      Element.setStyle(this,{background:'blue'}) 
                  }.bind(tr),true);
                  
                  Element.setStyle(tr,{background:'blue'});                                        
                }
           ) 
       }
        
    }
       
        
window.onload = function(){
    oTestTable = new myTable('tableWrapper','testTable',15);
    for (var i=1;i<30;i++)    
    oTestTable.addRow([i,i]);
    
    new myTable_Row_Colorizer('testTable');
}


</script>

 </head>
 <body>

 <div id="tableWrapper"></div>

</body>
</html>

kaptok ajándékba egy tábla generáló class-t :) IE megint megduplázta a fejlesztési időt 5percről 10percre, kezd nagyon idegesítení mostmár az a böngésző :P :)

üdv t

A hozzászóláshoz regisztráció és belépés szükséges
új téma

javascript-tel

Anonymous · 2006. Okt. 4. (Sze), 13.09

Hali!

Én így oldottam meg:

<tr bgcolor="#alapszín" onmouseover="this.bgColor='#másikszín'" onmouseout="this.bgColor='#akármilyenszín'">

<tr bgcolor="#alapszín" onmouseover="this.bgColor='#másikszín'" onmouseout="this.bgColor='#akármilyenszín'">

A sor színe alaphelyzetben #alapszín, egéret fölé csúsztatva #másikszín, egér távozás után ismét #alapszín.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés