Numerar trucos

JavierB · #1 29-06-2006

Cita:

Empezado por Emilio

Si tienes una solución que cumpla con todo eso y con los navegadores principales te damos un 10

Código:

<html>
<head>
<style type="text/css">
td {border:1px solid black}
td a {width:100%; display:block}
td a:hover {background:red}
</style>
</head>
<body>
<table>
<tr>
<td style="width:120px">
<a href="algo.html">Enlace</a>
</td>
</tr>
</table>
</body>
</html>

Si funciona, me conformo con un "gracias"

Saludos,

*Emilio* · #2 29-06-2006

No está mal, pero eso funciona con TD, la intención es que funcione con el TR o con el TABLE.

De todas formas las gracias por supuesto que ya las tienes

Sick boy · #3 29-06-2006

Ya recorde donde lo habia visto, esta en PHPMyAdmin !!!!!!!

Esta es la función javascript:

Código:

/**
 * This array is used to remember mark status of rows in browse mode
 */
var marked_row = new Array;


/**
 * Sets/unsets the pointer and marker in browse mode
 *
 * @param   object    the table row
 * @param   integer  the row number
 * @param   string    the action calling this script (over, out or click)
 * @param   string    the default background color
 * @param   string    the color to use for mouseover
 * @param   string    the color to use for marking a row
 *
 * @return  boolean  whether pointer is set or not
 */
function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)
{
    var theCells = null;

    // 1. Pointer and mark feature are disabled or the browser can't get the
    //    row -> exits
    if ((thePointerColor == '' && theMarkColor == '')
        || typeof(theRow.style) == 'undefined') {
        return false;
    }

    // 2. Gets the current row and exits if the browser can't get it
    if (typeof(document.getElementsByTagName) != 'undefined') {
        theCells = theRow.getElementsByTagName('td');
    }
    else if (typeof(theRow.cells) != 'undefined') {
        theCells = theRow.cells;
    }
    else {
        return false;
    }

    // 3. Gets the current color...
    var rowCellsCnt  = theCells.length;
    var domDetect    = null;
    var currentColor = null;
    var newColor     = null;
    // 3.1 ... with DOM compatible browsers except Opera that does not return
    //         valid values with "getAttribute"
    if (typeof(window.opera) == 'undefined'
        && typeof(theCells[0].getAttribute) != 'undefined') {
        currentColor = theCells[0].getAttribute('bgcolor');
        domDetect    = true;
    }
    // 3.2 ... with other browsers
    else {
        currentColor = theCells[0].style.backgroundColor;
        domDetect    = false;
    } // end 3

    // 3.3 ... Opera changes colors set via HTML to rgb(r,g,b) format so fix it
    if (currentColor.indexOf("rgb") >= 0)
    {
        var rgbStr = currentColor.slice(currentColor.indexOf('(') + 1,
                                     currentColor.indexOf(')'));
        var rgbValues = rgbStr.split(",");
        currentColor = "#";
        var hexChars = "0123456789ABCDEF";
        for (var i = 0; i < 3; i++)
        {
            var v = rgbValues[i].valueOf();
            currentColor += hexChars.charAt(v/16) + hexChars.charAt(v%16);
        }
    }

    // 4. Defines the new color
    // 4.1 Current color is the default one
    if (currentColor == ''
        || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
        if (theAction == 'over' && thePointerColor != '') {
            newColor              = thePointerColor;
        }
        else if (theAction == 'click' && theMarkColor != '') {
            newColor              = theMarkColor;
            marked_row[theRowNum] = true;
            // Garvin: deactivated onclick marking of the checkbox because it's also executed
            // when an action (like edit/delete) on a single item is performed. Then the checkbox
            // would get deactived, even though we need it activated. Maybe there is a way
            // to detect if the row was clicked, and not an item therein...
            // document.getElementById('id_rows_to_delete' + theRowNum).checked = true;
        }
    }
    // 4.1.2 Current color is the pointer one
    else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()
             && (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {
        if (theAction == 'out') {
            newColor              = theDefaultColor;
        }
        else if (theAction == 'click' && theMarkColor != '') {
            newColor              = theMarkColor;
            marked_row[theRowNum] = true;
            // document.getElementById('id_rows_to_delete' + theRowNum).checked = true;
        }
    }
    // 4.1.3 Current color is the marker one
    else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
        if (theAction == 'click') {
            newColor              = (thePointerColor != '')
                                  ? thePointerColor
                                  : theDefaultColor;
            marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])
                                  ? true
                                  : null;
            // document.getElementById('id_rows_to_delete' + theRowNum).checked = false;
        }
    } // end 4

    // 5. Sets the new color...
    if (newColor) {
        var c = null;
        // 5.1 ... with DOM compatible browsers except Opera
        if (domDetect) {
            for (c = 0; c < rowCellsCnt; c++) {
                theCells[c].setAttribute('bgcolor', newColor, 0);
            } // end for
        }
        // 5.2 ... with other browsers
        else {
            for (c = 0; c < rowCellsCnt; c++) {
                theCells[c].style.backgroundColor = newColor;
            }
        }
    } // end 5

    return true;
} // end of the 'setPointer()' function

Y esta es la forma de utilizarlo:

Cita:

<tr onmouseover="setPointer(this, 1, 'over', '#E5E5E5', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 1, 'out', '#E5E5E5', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 1, 'click', '#E5E5E5', '#CCFFCC', '#FFCC99');">
<td align="center" bgcolor="#e5e5e5">
<a href="hola_mundo.htm">Texto de prueba</a>
</td>
</tr>

Funciona con todos los navegadores, y gestiona el evento onmousedown, para marcar de otro color los trucos visitados durante esa sesión, por ejemplo.

En cada celda puedes poner un href a documentos diferentes (por ejemplo para editar).

Me parece que el efecto es el que se buscaba, funciona con todos los navegadores, y funciona el boton derecho, y como el link esta en un href el google lo indexa correctamente.

No me merezco el 10, porque la función no es mia (ni mucho menos), solo soy muy observador, y recuerdo donde veo cosas interesantes.

*Emilio* · #4 29-06-2006

Cita:

Empezado por Sick boy

No me merezco el 10, porque....

Porque tampoco sirve

A ver si es que me he explicado mal...

Se tiene que poder hacer clic en cualquier zona del TR, con eso sólo se puede hacer clic en el href.

Por cierto todo ese codigo se puede reducir a 4 líneas y se logra el mismo efecto, pero gracias por intentarlo, esto se está convirtiendo en un reto para muchos

Sick boy · #5 29-06-2006

Cita:

Se tiene que poder hacer clic en cualquier zona del TR, con eso sólo se puede hacer clic en el href.

Pues basta con poner un href en todos los TD en los que quieras que se pueda clickar.
De todas formas, no puedes poner el mismo link para todo el TR, ya que necesitas un link distinto de los demas para editar el truco.

Cita:

Por cierto todo ese codigo se puede reducir a 4 líneas y se logra el mismo efecto,

Como ??? Si es posible puedes pasar ese codigo de cuatro lineas.

Me parece que no has probado esta función, si la pruebas comprobaras que no solo hace lo que se pide,sino que hace más.

Si quieres verla en acción, entra en el phpmyadmin, y selecciona una tabla.
Donde te aparecen las especificaciones de los campos ( Campo Tipo Atributos Nulo Predeterminado Extra Acción) hay la tienes funcionando.

Creo que es el efecto que se busca, o al menos el efecto que yo pondria

Sick boy · #6 29-06-2006

Cuando dices "cualquier zona del TR", te refieres también a zonas donde no hay texto??

En ese caso tienes razón, si la fila es muy ancha, solo puedes hacer click donde hay texto, en caso contrario no funciona.

En el explorer, puedes poner un href antes del TR o antes del TD para que el link abarque toda la columna, pero para firefox no funciona.

Llegados a este punto, no se me ocurre nada más, no conozco ninguna forma de hacer lo que se comenta.

JavierB · #7 29-06-2006

Hola de nuevo.

La verdad es que esto llega a enganchar

¿Que tal añadiendo un poco de JavaScript?

Código:

<html>
<head>
<style type="text/css">
table {border-collapse:collapse}
td {border:1px solid black}
td a {width:100%; display:block}
</style>
<script type="text/javascript">
function ini() {
  obj = document.getElementById('tabla');
  for (i=0; ele=obj.getElementsByTagName('a')[i]; i++) {
    ele.onmouseover = function() {this.parentNode.parentNode.style.background = '#ff0'}
    ele.onmouseout = function() {this.parentNode.parentNode.style.background = ''}
  }
}
</script>
</head>
<body onload="ini()">
<table id="tabla">
<tr>
<td style="width:100px"><a href="algo.html">28/06/06</a></td>
<td style="width:50px"><a href="algo.html">90</a></td>
<td style="width:200px"><a href="algo.html">Minimizar todo</a></td>
</tr>
<tr>
<td style="width:100px"><a href="algo.html">29/06/06</a></td>
<td style="width:50px"><a href="algo.html">89</a></td>
<td style="width:200px"><a href="algo.html">Combinar</a></td>
</tr>
</table>
</body>
</html>

Saludos,

*Emilio* · #8 29-06-2006

Cita:

Empezado por Sick boy

Cuando dices "cualquier zona del TR", te refieres también a zonas donde no hay texto??

Efectivamente, tal y como está ahora en los trucos.

Cita:

Empezado por Sick boy

En ese caso tienes razón, si la fila es muy ancha, solo puedes hacer click donde hay texto, en caso contrario no funciona.

Si la cosa no es tan simple como a primera vista parece.

Cita:

Empezado por Sick boy

En el explorer, puedes poner un href antes del TR o antes del TD para que el link abarque toda la columna, pero para firefox no funciona.

En Explorer incluso se lo puedes poner antes de un TABLE, ya dije eso por ahí.

Cita:

Empezado por Sick boy

Llegados a este punto, no se me ocurre nada más, no conozco ninguna forma de hacer lo que se comenta.

Vaya, uno que ya se rinde. Por cierto, por supuesto que he probado la función y ejemplo que pusiste, tuve que añadir un table y cierre de table que faltaba y lo probé, no soy tan jeta de decir que algo no funciona sin haberlo probado, no obstante me extrañaba porque uso con frecuencia PhpMyAdmin y sé que incluso las últimas versiones no hacen eso.

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Trucos para Linux	jhonny	Linux	0	17-05-2003 18:20:01