Sincronizar barra de desplazamiento: OnScroll Event

En días recientes he tenido la necesidad de sincronizar la barra de desplazamiento de varios paneles(llamados así en .net, en HTML son DIV); es decir, que al momento que el usuario mueva un panel, en automático se muevan los demás.

La implementación del ejercicio est hecha en c#, que realmente es poco código, el core del ejercicio está en JavaScript.

Paso 1: Agregar los paneles



Definición de los paneles:

<asp:Panel ID="Panel2" runat="server" Height="393px" ScrollBars="Horizontal" Style="z-index: 107; left: 31px; position: absolute; top: 141px" Width="1029px" BorderColor="Red" BorderStyle="Dashed" BorderWidth="1px">

Paso 2: Agregar atributos a los paneles con código .Net para que los DIVs(Paneles) capturen el evento onScroll.

protected void Page_Load(object sender, EventArgs e)
{
Panel1.Attributes.Add("onscroll", "javascript:scrollPanel1(this);");
Panel4.Attributes.Add("onscroll", "javascript:scrollPanel4(this);");
Panel6.Attributes.Add("onscroll", "javascript:scrollPanel6(this);");
}

Como podrán ver para cada Panel se ha creado una función scrollPanelX(this); esto obviamente podrá ser mejorado, para efectos de este ejemplo así lo dejaremos.

Paso 3: Agregar funciones JavaScript
Dado que este ejemplo está usando un MasterPage, debemos usar un Content Page. Para poder agregar código JavaScript a un Content Page sin tener que agregarlo en todo el Master Page usamo el siguiente script

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
function scrollPanel1(objDIV){
 var objToMove1 = document.getElementById("ctl00_ContentPlaceHolder1_Panel4");
 var objToMove2 = document.getElementById("ctl00_ContentPlaceHolder1_Panel6");
objToMove1.scrollLeft = objDIV.scrollLeft;
objToMove2.scrollLeft = objDIV.scrollLeft;
}
function scrollPanel4(objDIV){
 var objToMove1 = document.getElementById("ctl00_ContentPlaceHolder1_Panel1");
 var objToMove2 = document.getElementById("ctl00_ContentPlaceHolder1_Panel6");
objToMove1.scrollLeft = objDIV.scrollLeft;
objToMove2.scrollLeft = objDIV.scrollLeft;
}
function scrollPanel6(objDIV){
 var objToMove1 = document.getElementById("ctl00_ContentPlaceHolder1_Panel1");
 var objToMove2 = document.getElementById("ctl00_ContentPlaceHolder1_Panel4");
objToMove1.scrollLeft = objDIV.scrollLeft;
objToMove2.scrollLeft = objDIV.scrollLeft;
}
script>
.....

Los IDs de los controles son lo generados por .Net por eso hace referencia por ejemplo a: "ctl00_ContentPlaceHolder1_output"


Conclusión: El resultado, al mover un scroll de uno de los Panels(DIVs) en automático los demás de ajustarán para que siempre esten alineados.

Lydia Cacho - Carta a los secuestradores

Carta a los secuestradores

Cada vez que uno de ustedes asesina a una persona, se hace más pequeño ante sí mismo y ante los demás. No, no son grandes, ni valientes, ni fuertes, ni malos profesionales. Su vida carece de sentido y por eso consideran que secuestrar, torturar y cobrar por ello les hace grandes y poderosos. El poder que tienen en realidad es minúsculo, no depende tanto de ustedes como de la incapacidad, ignorancia y debilidad de quien debiera ser su adversario: las autoridades mexicanas. Ustedes son un puñado regado por todo el país; hay millones de hombres y mujeres que no les temen, que no se arrepienten, que no se venden ni venden a sus familiares a cambio de que ustedes les perdonen, magnánimamente, la vida. Seguir leyendo...

40 Caracteristicas Nuevas del iPhone 3.0

Para los que tienen un iPhone aquí les dejo una lista de 40 modificaciones y/o agregados que le hicieron al iPhone 3.0.

Acá el resúmen:

1. Forward or Delete Individual Messages

This feature allows you to manually select individual messages from a text message conversation, and forward them directly to another person via text message. 

You can also selectively delete individual messages.

How it works:

• Open a text message conversation.
• Tap edit on the top right of the screen. 
• Check off the messages that interest you.  
• Tap forward and select a recipient. 
• OR tap delete to selectively get rid of messages. 

2. Email up to 5 photos at a time

The previous iPhone operating systems did not allow you to send more than one picture at a time as an email attachment. You can now send up to 5 at once.

How it works:

• Go to photos
• Tap the arrow on the bottom left 
• Select the photos you want to share 
• Press share 
• Send the email with the automatically attached photos 

3. Shake to undo and redo typing

No matter what application you are using, you can undo typing by shaking your iPhone. If you want your text back, simply shake again. 

If you had something else written before you started writing the sentence you chose to undo, it reverts back to that. If this was the first thing you wrote, it simply erases it.

seguir leyendo....