Ago 31

Esta página vende excelentes productos, como tabs, menús, acordeones (accordions), etc.

http://www.projectseven.com/index.htm

Ago 30

En esta página hay un código javaScript que te permite hacer menús de tipo acordeón.

Claro que lo puedes aplicar a otras cosas que no sean menús.

http://www.hedgerwow.com/360/mwd/accordion/demo.php

Es gratuito.

Ago 30
Tooltips en javaScript
icon1 Recursos Web | icon2 Herramientas, Web | icon4 08 30th, 2007| icon3No Comments »

Aquí encontrarás un buen código para crear Tooltips usando javaScript.

Es gratuito.

http://www.walterzorn.com/tooltip/tooltip_e.htm

Ago 22

El ArrayList me resulta ser más útil que el Array regular.

Aquí hay algunos ejemplos:

Declaración de un ArrayList

Clic para mostrar texto plano
VB.NET:
  1. Dim AL As ArrayList = New ArrayList

Añadir un elemento

Clic para mostrar texto plano
VB.NET:
  1. AL.Add("hola")

Ordenarlo

Clic para mostrar texto plano
VB.NET:
  1. AL.Sort()

Ordenarlo al revés

Clic para mostrar texto plano
VB.NET:
  1. AL.Reverse()

Remover duplicados

Clic para mostrar texto plano
VB.NET:
  1. Shared Function RemoverDuplicados(ByVal ElArreglo As ArrayList) As ArrayList
  2.  
  3.     Dim ret As ArrayList = New ArrayList()
  4.     Dim elemento As Object
  5.     For Each elemento In ElArreglo
  6.         If Not ret.Contains(elemento) Then
  7.             ret.Add(elemento)
  8.         End If
  9.     Next
  10.     RemoverDuplicados = ret
  11.  
  12. End Function

Ago 20

Para manipular las cookies del cliente mediante ASP.NET 2, utiliza los siguientes ejemplos.

Recuerda que una sola Cookie puede guardar varios valores. Esto se logra mediante la colección Values.

Para crear una Cookie

Clic para mostrar texto plano
VB.NET:
  1. Dim Galleta As HttpCookie
  2. Galleta = New HttpCookie("datos")
  3. Galleta.Values.Add("nombre", Nombre.Text)
  4. Galleta.Expires = DateTime.MaxValue 'Nunca caduca
  5. Response.AppendCookie(Galleta)

Para obtener el valor de una Cookie

Clic para mostrar texto plano
VB.NET:
  1. Dim Galleta As HttpCookie
  2. Galleta = Request.Cookies("datos")
  3. Nombre.Text = Galleta.Values("nombre")

Para probar si una determinada Cookie existe

Clic para mostrar texto plano
VB.NET:
  1. Dim PruebaGalleta As HttpCookie
  2. PruebaGalleta = Request.Cookies("datos")
  3.  
  4. If PruebaGalleta Is Nothing Then
  5.     'No existe
  6. Else
  7.     'Existe
  8. End If

Para modificar una Cookie

Clic para mostrar texto plano
VB.NET:
  1. Dim Galleta As HttpCookie
  2. Galleta = Request.Cookies("datos")
  3. Galleta.Values.Set("nombre", Nombre.Text)
  4. Galleta.Expires = DateTime.MaxValue 'Nunca caduca
  5. Response.Cookies.Set(Galleta)

Para eliminar una Cookie

Clic para mostrar texto plano
VB.NET:
  1. Response.Cookies.Remove("datos")

Ago 13

La mejor manera que he visto de centrar una tabla (o cualquier contenido) verticalmente en la ventana del navegador, la encontré en Dead Centre.

Resumí lo que encontré ahí para hacerlo más entendible:

En tu hoja de estilos pon estas dos clases:

Clic para mostrar texto plano
CSS:
  1. .horizonte
  2.     {
  3.     color: #000000;
  4.     background-color: #ff0000;
  5.     text-align: center;
  6.     position: absolute;
  7.     top: 50%;
  8.     left: 0px;
  9.     width: 100%;
  10.     height: 1px;
  11.     overflow: visible;
  12.     visibility: hidden;
  13.     /*visibility: visible;  Activa esta linea si quisieras ver donde esta el horizonte*/
  14.     display: block;
  15.     }
  16.  
  17. .contenido    
  18.     {
  19.  
  20.     margin-left: -250px;
  21.     position: absolute;
  22.     top: -250px;
  23.     left: 50%;
  24.     width: 500px;
  25.     height: 500px;
  26.     visibility: visible;
  27.     }

La clase llamada horizonte posiciona contenido exactamente en la mitad de la pantalla, esto lo logra con el top=50%; Su altura es un pixel y su visibilidad es hidden porque no queremos que se vea, es solamente un lugar donde posicionaremos nuestro contenido. Ojo: Como su overflow es visible no importa que el contenido sea más alto que un pixel, más información sobre esto aquí.

Lo que debes de modificar en la hoja de estilos anterior es el width y el height de acuerdo a tu contenido. Cuando lo hagas, también modifica margin-left y top. Nota que son los mismos valores que width y height pero divididos entre 2 y con número negativo.

Y este es el código donde colocas tu información:

Clic para mostrar texto plano
HTML:
  1. <div class="horizonte">
  2.             <div class="contenido">
  3.                 <table width="500" border="1" height="500">
  4.                     <tr>
  5.                         <td align="center" valign="middle">Esto es una tabla.<br/>También podría ser un DIV o cualquier
  6.                         otro elemento.  De igual forma se centraría horizontal y verticalmente en la página.</td>
  7.                     </tr>
  8.                 </table>
  9.             </div>
  10. </div>

Aquí también modifica width y height en la tabla para que concuerden con los valores que pusiste en la hoja de estilos.

* Funciona en Internet Explorer y Firefox.

Ago 10
La propiedad overflow de CSS
icon1 Recursos Web | icon2 Web | icon4 08 10th, 2007| icon3No Comments »

La propiedad overflow de CSS define qué ocurre cuando el tamaño del contenido sobrepasa el tamaño del área que la contiene.

Es útil para colocar un scrollbar a un elemento DIV.

A continuación pongo un ejemplo y 4 imágenes que muestran cómo se ve con cada diferente opción.

La definición de la hoja de estilos

Clic para mostrar texto plano
CSS:
  1. .divScrolls {
  2.     font-family: Arial;
  3.     font-size: 10px;
  4.     background-color:#FFCC99;
  5.    
  6.     overflow:auto; /* Este valor hay que irlo cambiando para cada ejemplo */
  7.     width: 300px;
  8.     height: 300px;
  9. }

El HTML ejemplo

Clic para mostrar texto plano
HTML:
  1. <div class="divScrolls">
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean a nisl ac nibh ultrices elementum. Suspendisse potenti. Etiam eros elit, sollicitudin a, pretium nec, consequat blandit, elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus ac nunc. Nullam elementum arcu pellentesque nisi. Duis a nulla vel metus placerat porta. Etiam ullamcorper hendrerit ante. Sed eleifend nisl id lectus. Cras est. Curabitur nec dui. Integer venenatis, sapien in adipiscing luctus, turpis dolor porttitor nisi, id laoreet mi nunc vel dolor. Sed libero justo, dapibus vitae, tempus vitae, feugiat id, risus. Etiam blandit blandit justo. Phasellus lobortis, leo vitae pellentesque cursus, leo mauris elementum felis, a facilisis nisi felis ac nisl.
  3. <br /><br />
  4. Proin libero elit, condimentum vitae, congue non, fermentum id, magna. Maecenas ipsum neque, pulvinar feugiat, fermentum nec, ultrices non, elit. Fusce in neque vel augue aliquet interdum. Etiam malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sollicitudin odio vitae odio sagittis feugiat. Vivamus laoreet purus in nisl congue egestas. Proin dui risus, aliquet nec, ornare eget, hendrerit ut, felis. Maecenas imperdiet venenatis nisi. Donec vestibulum orci adipiscing lectus. Morbi venenatis, pede vitae pretium porttitor, sapien diam vulputate libero, in sagittis purus urna vel risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  5. <br /><br />
  6. Morbi rhoncus porta lectus. Ut volutpat quam sit amet mauris. Curabitur egestas. Maecenas placerat nibh ac enim. Cras neque neque, adipiscing eu, posuere vitae, eleifend eget, felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at nisi quis turpis suscipit faucibus. Nulla eget nisi. Nulla dignissim scelerisque ipsum. Vivamus malesuada odio at purus. Nulla porttitor, justo eu fringilla suscipit, quam lectus iaculis odio, et volutpat pede tellus et elit. Donec quis purus et purus luctus aliquam. Cras est neque, scelerisque et, vestibulum ullamcorper, eleifend mollis, massa. Morbi iaculis nisi non erat. Etiam dolor ante, dapibus nec, venenatis quis, tempus non, nisi. Nam aliquet tortor nec mi. Sed massa arcu, consectetuer ac, volutpat sit amet, tempus sit amet, pede. Donec rhoncus mattis dolor. Nulla purus erat, nonummy quis, scelerisque vitae, ornare at, enim.
  7. </div>

Muestras

visible
Es el valor por default. Si el contenido no cabe, no se ajusta, se sale del elemento.
Overflow Visible

hidden
El contenido se ajusta al área, pero no se despliega ningún scrollbar para visualizar la parte que no se ve.
Overflow hidden

scroll
El contenido se ajusta, y se despliega un scrollbar que permite ver el resto del contenido.
Overflow scroll

auto
Si el contenido se ajusta, el navegador despliega un scrollbar.
Overflow auto

Ago 10

Si queremos tener un fondo semi transparente y un texto opaco encima, quizás lo primero que se nos ocurra sea crear un estilo que contenga filter:alpha(opacity=10); y -moz-opacity:0.1; y luego aplicárselo a un DIV o celda y colocar todo nuestro contenido ahí.

Bueno, lo anterior no sirve porque debido a que el texto se encuentra dentro del mismo bloque, también se hace transparente.

Lo que debemos hacer es crear dos bloques (DIV o celda) distintos: uno para el fondo semi transparente y otro para el texto (o contenido) que va encima. Y luego colocar uno encima del otro.

Esto se hace de la siguiente manera.

Hoja de estilos

Clic para mostrar texto plano
CSS:
  1. .dppal {
  2.    position: absolute;
  3. }
  4.  
  5. .dfondo {
  6.    width: 200px; height: 200px;
  7.    background-color: #ff0000;
  8.    filter:alpha(opacity=20);
  9.    -moz-opacity:0.2;
  10.    opacity: 0.2;
  11.    padding:10px;
  12. }
  13.  
  14. .dtexto {
  15.    width: 200px; height: 200px;
  16.    background-color: transparent;
  17.    position: absolute;
  18.    z-index: 2;
  19.    padding:10px;   
  20. }

Clic para mostrar texto plano
HTML:
  1. <div class="dppal">
  2.  
  3.    <div class="dtexto">
  4.         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pharetra augue vel tellus. Nulla blandit urna sit amet metus.
  5.    </div>
  6.  
  7.    <div class="dfondo">
  8.  
  9.    </div>
  10.  
  11. </div>

Referencia:
http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background

Ago 7

Para maximizar la ventana del navegador utilizando javascript, debes usar el siguiente código:

Clic para mostrar texto plano
JavaScript:
  1. window.moveTo(0,0);
  2. window.resizeTo(screen.availWidth, screen.availHeight);

¿Dónde colocarlo?

Si quieres que cuando alguien haga clic en un vínculo, la ventana se maximice, entonces colócalo en el hipervínculo, así:

Clic para mostrar texto plano
HTML:
  1. <a href="#" onClick="window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);">Haz clic aquí para maximizar esta ventana</a>

Si quieres abrir un pop-up y que éste se maximice al abrirse, entonces coloca el código en el body de la página del popup, para que se ejecute apenas se abra éste:

Clic para mostrar texto plano
HTML:
  1. <body onLoad="window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);">

Por cierto, si tu página es un frameset, también funciona:

Clic para mostrar texto plano
HTML:
  1. <frameset rows="100,*,100" frameborder="no" border="0" framespacing="0" onLoad="window.moveTo(0,0);window.resizeTo(screen.availWidth, screen.availHeight);">

Probado en Internet Explorer y Firefox.

Ago 4

En este post veremos cómo implementar un mensaje de confirmación con javascript para borrar un registro en un GridView.

Debes tener un GridView y un ObjectDataSource similares a estos:

Clic para mostrar texto plano
ASP:
  1. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" AllowPaging="True" AllowSorting="True" CellPadding="0" PageSize="30" GridLines="None" Width="100%" DataKeyNames="id">
  2.     <Columns>
  3.         <asp:BoundField DataField="id" HeaderText="ID" InsertVisible="False" SortExpression="id" />
  4.         <asp:BoundField DataField="usuario" HeaderText="Usuario" SortExpression="usuario" />
  5.  
  6.         <asp:TemplateField HeaderText="Eliminar">
  7.           <ItemTemplate>
  8.             <asp:LinkButton ID="LinkButton1"
  9.               CommandArgument='<%# Eval("id") %>'
  10.               CommandName="Delete" runat="server">
  11.               Eliminar</asp:LinkButton>
  12.           </ItemTemplate>
  13.         </asp:TemplateField>           
  14.        
  15.     </Columns>
  16.  
  17.     <EmptyDataTemplate>
  18.         No existen registros.
  19.     </EmptyDataTemplate>
  20. </asp:GridView>
  21. <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" OldValuesParameterFormatString="{0}"
  22.     SelectMethod="ObtenParaGridView" TypeName="BLLComentario" DeleteMethod="BorraComentario">
  23.     <DeleteParameters>
  24.         <asp:Parameter Name="id" Type="Int32" />
  25.     </DeleteParameters>
  26. </asp:ObjectDataSource>

Ahora bien, para agregar el javascript necesario para realizar la confirmación, debemos valernos del evento GridView1_RowDataBound, así:

Clic para mostrar texto plano
VB.NET:
  1. Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
  2.         'Anadir javascript de confirmacion para cada linkbutton
  3.         If e.Row.RowType = DataControlRowType.DataRow Then
  4.             Dim Lb As LinkButton = e.Row.FindControl("LinkButton1")
  5.             Lb.Attributes.Add("onclick", "javascript:return confirm('¿Está seguro de que desea eliminar el registro con ID=" & DataBinder.Eval(e.Row.DataItem, "id") & "?')")
  6.         End If
  7.     End Sub

Y listo, obtendremos una confirmación como esta:

Confirmar con javascript eliminación de registro en GridView

« Previous Entries