Tuesday, June 24, 2008

show and hide content on next prev button

<table width="99%" cellpadding="3" cellspacing="1" bgcolor="#000000">
                  <tr>
                    <td height="20" class="photonamewhite"><div style="float: right; width: 100px; position: relative; height: 25px;" class=smallphotoname align="right"><a href="#" class="curhand" title="Previous" onclick="moveRight('div_hall',90)">«prev</a>   <a href="#" title="next" onclick="moveLeft('div_hall',90)">next»</a></div></td>
                  </tr>
                  <tr>
                    <td  bgcolor="#999999" >
                   
                    <DIV style="MARGIN-LEFT: 5px; OVERFLOW: hidden; background-color:#666666; WIDTH: 276px; POSITION: relative; HEIGHT: 184px">
                        <DIV id="div_hall" style="LEFT: 0px; WIDTH:<%=(photo.Items.Count%6)==0?(photo.Items.Count/6)*270:((photo.Items.Count/6)+1)*270%>px; POSITION: absolute; TOP: 0px">
                              
                               <asp:DataList ID=photo runat =server   ItemStyle-BackColor="#666666"  BackColor=#666666
                                 RepeatDirection=Horizontal RepeatLayout=Table   ItemStyle-Width=90 ItemStyle-Height=90 ItemStyle-CssClass=smallphotoname >
                                <ItemTemplate>
                                <a  onclick='getvedio(<%=Request.QueryString["vid"]%>,<%#Eval("vediosno")%>)' class=filterimage><img src='<%#"../../"+Eval("Urlimage") %>'  width="80" style="cursor:hand;border-color:DarkGray" height="80" border="2" ><br>
                                     </a></ItemTemplate>
                                     
                               </asp:DataList>
                               </DIV>
                               </DIV>
                             
                    </td>
                  </tr>
                
              </table>
//using method in javascript ///

function moveRight(divname,owidth)

 var crossobj=document.getElementById(divname) ;
 leftpos = parseInt(crossobj.style.left) + owidth ;
 
 if ( leftpos < 0 )
  crossobj.style.left = parseInt(crossobj.style.left) + owidth ;
 else
  crossobj.style.left = 0 ;

}

function moveLeft(divname,owidth)
{
 var crossobj=document.getElementById(divname) ;
 var contentwidth=crossobj.offsetWidth ;
 leftpos = (contentwidth - 300) * (-1)  ;

 if ( parseInt(crossobj.style.left) > leftpos )
  crossobj.style.left = parseInt(crossobj.style.left) - owidth ;
}
Share:

0 Comments:

Post a Comment