4
Answers

Scrolling when click on side arrow

Hello Members,
 
Hope you are doing good!!
 
Here am implementing the scroling event when click on side arrow...
 
In the fiddler it is working(here is the reference http://jsfiddle.net/PAw8q/10/)
 
But when i am trying to implement in VS, The click event is not taking place
 
Here is the code. Can anyone guide me..
 
Thank you in advance!!
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Scrool.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <title></title>  
  6. <style type="text/css">  
  7. .bloc_1_edito{width: 967px;background-color: #bbbbbb;height: 366px;  
  8. margin:0 auto;position: relative}  
  9. #nav_container {  
  10. z-index: 10000;  
  11. bottom: 0px;  
  12. background-color: rgba(181, 174, 5, 0.4);  
  13. position: absolute;  
  14. height: 80px;  
  15. overflow: hidden;  
  16. width: 500px;  
  17. white-space: nowrap;  
  18. }  
  19. .image_thumbnails{width: 116px;height: 65px;}  
  20. #prev_nav{position: absolute;  
  21. left: 5px;font-size:20px;font-family: 'avantgarde_medium';  
  22. font-weight: bold;top:30px;color: blacks;cursor: pointer;z-index: 1000;}  
  23. #next_nav{position: absolute;  
  24. right: 5px;font-size:20px;font-family: 'avantgarde_medium';  
  25. font-weight: bold;top:30px;color: black;cursor: pointer;z-index: 1000;}  
  26. #nav{  
  27. position: absolute;  
  28. width: 500px;  
  29. overflow: hidden;  
  30. }  
  31. #nav li { width: 116px; height:65px; display: inline-block;  
  32. margin: 10px 5px 8px 33px;list-style: none }  
  33. #nav a { width: 116px; height:65px; display: block; }  
  34. #nav li.activeSlide a {}  
  35. #nav a:focus { outline: none; }  
  36. #nav img { border: none; display: block }  
  37. </style>  
  38. <script type= "text/javascript">  
  39. $('#next_nav').click(function () {  
  40. $( "#nav" ).animate({  
  41. scrollLeft: '+=156px'  
  42. });  
  43. });  
  44. $('#prev_nav').click(function () {  
  45. $( "#nav" ).animate({  
  46. scrollLeft: '-=156px'  
  47. });  
  48. });  
  49. </script>  
  50. </head>  
  51. <body>  
  52. <form id="form1" runat="server">  
  53. <div class="bloc_1_edito">  
  54. <div id="nav_container">  
  55. <div id="next_nav">></div>  
  56. <div id="prev_nav"><</div>  
  57. <div id="nav">  
  58. <li class="activeSlide">  
  59. <a href="#">  
  60. <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/image_edito1.jpg"></img>  
  61. </a>  
  62. </li>  
  63. <li>  
  64. <a href="#">  
  65. <img class="image_thumbnails" src="http://img.youtube.com/vi/yjtqkQFAn5U/0.jpg"></img>  
  66. </a>  
  67. </li>  
  68. <li>  
  69. <a href="#">  
  70. <img class="image_thumbnails" src="http://img.youtube.com/vi/KNz01ty-kTQ/0.jpg"></img>  
  71. </a>  
  72. </li>  
  73. <li>  
  74. <a href="#">  
  75. <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/test_2_slider.jpg"></img>  
  76. </a>  
  77. </li>  
  78. <li>  
  79. <a href="#">  
  80. <img class="image_thumbnails" src="http://img.youtube.com/vi/hn0wAloRrMM/0.jpg"></img>  
  81. </a>  
  82. </li>  
  83. <li>  
  84. <a href="#">  
  85. <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/the-order-1886-012814-3-650x366.jpg"></img>  
  86. </a>  
  87. </li>  
  88. <li>  
  89. <a href="#">  
  90. <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/jpg_650x366_bluegrass.png"></img>  
  91. </a>  
  92. </li>  
  93. <li>  
  94. <a href="#">  
  95. <img class="image_thumbnails" src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/c…-scientifique-Canyons-Mediterranee-ROV-650x366_reference.jpg"></img>  
  96. </a>  
  97. </li>  
  98. <li>  
  99. <a href="#">  
  100. <img class="image_thumbnails" src="http://img.youtube.com/vi/syzS14qzfMA/0.jpg"></img>  
  101. </a>  
  102. </li>  
  103. </div>  
  104. </div>  
  105. </div>  
  106. </form>  
  107. </body>  
  108. </html>  

Answers (4)