4
Answers

Scrolling when click on side arrow

Mas

Mas

5y
559
1
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)
Next Recommended Forum