Click here to Skip to main content
15,937,198 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I fount this code from a site. This make a slide down after 3 minutes. But how can I make it from another side??

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Home</title>
<style type="text/css">
.divNoBorder
{
background-color:White;
font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
font-size:12px;
color:BLUE;
width:500px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
padding:0px;
}
.divNoBorder p {
color: #4B0082;
}


</style>

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script>

<script type="text/javascript">
$(function () {
var $divSlide = $("div.slide");
$divSlide.hide().eq(0).show();
var panelCnt = $divSlide.length;

setInterval(panelSlider, 3000);

function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function () {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
});
}
});
</script>


<link rel="stylesheet" type="text/css" href="StyleSheet2.css" />
</head>

<body >
<img src="Images/book2.jpg" alt="" />

Enlighten Yourself!







<form id="form1" runat="server">


LET YOUR KNOWLEDGE BE MODIFIED



<asp:Panel ID="panelOne" runat="server" class='slide'>
<img src="Images/slide1.jpg" alt="" class="alignleft"/>

<asp:Panel ID="panelTwo" runat="server" class='slide'>
<img src="Images/slide2.jpg" alt="" class="alignleft"/>

<asp:Panel ID="panelThree" runat="server" class='slide'>
<img src="Images/slide3.jpg " alt="" class="alignleft"/>

<asp:Panel ID="panelFour" runat="server" class='slide'>
<img src="Images/slide4.jpg" alt="" class="alignleft"/>

<asp:Panel ID="panelFive" runat="server" class='slide'>
<img src="Images/slide5.jpg" alt="" class="alignleft"/>


</form>


</body>
</html>

If you have any idea to make slide show in C# please help me to ahead.
Posted
Comments
Peter Leow 13-Apr-14 3:02am    
what is "from another side??"? which side do you want?

1 solution

If you want to slide from left or right, you have to use jQuery UI library, try the example:
<html>
<head>
<title>the title</title>
   <script type="text/javascript">
   src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript">
   src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
   <script type="text/javascript" language="javascript">
   
    $(document).ready(function() {

      $("#hide").click(function(){
         $(".target").hide( "slide", 
                     { direction: "left"  }, 'slow' );
      });

      $("#show").click(function(){
         $(".target").show( "slide", 
                      {direction: "left" }, 'slow');
      });

   });
   </script>
   <style>
     div{ width:100px; 
            height:100px; 
            background:blue;  
        }
  </style>
</head>
<body>

   <button id="hide"> Hide </button>
   <button id="show"> Show</button> 
  
   <div class="target">
   </div>
  
</body>
</html>

Learn more: jQuery Slide Effect[^]
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900