Post
Ask Question

Display Marquee's on ASP.NET Page: Part 2

Introduction

 
In this article, we will see the advanced version of how to show marquees in our ASP.NET webpage. In my last article, we saw some basics of using a marquee tag of HTML and show the content in that. In this article, we will create such kind of things but without using any marquee tag of HTML. In this article for displaying the movable content, we use JavaScript. In Google search, I found this JavaScript and I would like to share it with you. In this, we will use an attractive style also to display the marquee's on our ASP.Net page.
 

SagScroller.js

 
This is the JavaScript file that I found with Google search. This file contains the function to scroll the content of our web page.
  1. var sagscroller_constants={  
  2.             navpanel: {height:'16px', downarrow:'down.jpg', opacity:0.6, title:'Go to Next Content', background:'black'},  
  3.             loadingimg: {src:'wait.gif', dimensions:[100,15]} 
In the above markup, this file has some constant values like the panel for navigation which contains the image to display the down arrow. If we want the next content we can use it. Here we have static content like a wait image. This image can be used when we give image urls that belong to another server and take time to load on our page then we will show this waiting image. You can replace both images as you want.
 

Sagscroller.css

 
This is the stylesheet file. This file contains attractive styles for our divs in which we want to show the contents.
 
How to Use?
 
How to use this functionality in our application; we will see how to step by step. So let's get started.
 
Step 1:
 
Create a new website using Visual Studio template add the new page to the application.
 
Step 2:
 
In the attachment we have two folders; one is a StyleSheet which contains sagscroller.css and the second is Script which contains sagscroller.js file. Copy both of the folders to your webroot. You can provide your own images to display on the page as well as waiting and next. To create one more folder as Images which has some images.
 
Step 3:
 
Next, you need to refer to the given files and some additional stylesheets so paste the following markup in your <head></head> section.
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>    
  2. <link rel="stylesheet" type="text/css" href="StyleSheet/sagscroller.css" />    
  3. <script src="Script/sagscroller.js">    
  4. </script>    
  5. <style type="text/css">    
  6. div#mysagscroller {    
  7.     width: 200px;    
  8.     height: 250px;    
  9. }    
  10.     
  11. div#mysagscroller ul li {    
  12.     background: navy;    
  13.     color: white;    
  14.     padding: 5px;    
  15.     margin-bottom: 5px;    
  16. }    
  17.     
  18. div#mysagscroller ul li:first-letter {    
  19.     font-size: 28px;    
  20.     background: white;    
  21.     color: black;    
  22.     padding: 0 2px;    
  23.     margin-right: 2px;    
  24. }    
  25.     
  26. div#mysagscroller2 {    
  27.     width: 250px;    
  28.     height: 300px;    
  29.     border: 7px solid #C0C0C0;    
  30. }    
  31.     
  32. div#mysagscroller2 ul li img {    
  33.     border-width: 0;    
  34.     display: block;    
  35. }    
  36. </style>    
  37. <script>    
  38. var sagscroller1 = new sagscroller({    
  39.     id: 'mysagscroller',    
  40.     mode: 'manual'    
  41. })    
  42. var sagscroller2 = new sagscroller({    
  43.     id: 'mysagscroller2',    
  44.     mode: 'auto',    
  45.     pause: 2500,    
  46.     animatespeed: 400    
  47. })    
  48. </script>   
In the above markup, there is nothing special to discuss in which we have only given a reference to a .js and a .css file with the additional stylesheet. In the above markup, we have one script which contains our scroller content. We will give two different types of scrolls in our application; one for scrolling text and a second one to scroll the images. In the script, we have declared the variables sagscroller1 and sagscroller2 which contains the id of a content container and some properties. For Sagscroller2 we have given an animatedspeed which means having the speed of animation and pauses, which means how much time you want to display the single content at a time. You change this according to you.
 
Step 4:
 
In this step, we will create our content now to scroll on the page. For accomplishing this task we will use the div tag of HTML as a container for our content. With the Id given in the above script.
  1. <div id="mysagscroller" class="sagscroller">  
  2.     <ul>  
  3.         <li>Can show the news for your website.</li>  
  4.         <li>Can show merquee in advanced manner on your ASP.Net page.</li>  
  5.         <li>This work has been done by JavaScript files.</li>  
  6.         <li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>  
  7.         <li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>  
  8.     </ul>  
  9. </div>  
  10. <div id="mysagscroller2" class="sagscroller">  
  11.     <ul>  
  12.         <li><a href="#"><img src="Images/10to15.jpg" /></a></li>  
  13.         <li><a href="#"><img src="Images/20to25.jpg" /></a></li>  
  14.         <li><a href="#"><img src="Images/25to30.jpg" /></a></li>  
  15.         <li><a href="#"><img src="Images/35to40.jpg" /></a></li>  
  16.         <li><a href="#"><img src="Images/demo1.jpg" /></a></li>  
  17.         <li><a href="#"><img src="Images/demo4.jpg" /></a></li>  
  18.     </ul>  
  19. </div> 
In the above code, we have written two div tags; one for scrolling text and another one for scrolling images, but remember the id of div is the most important thing. Use the same id to div as we wrote above in the script of head section.
 
Step 5:
 
Now run your project and see the scrolling text and scrolling images on your web page.
 

Conclusion

 
In this simple way, we can make our web site attractive. I hope you enjoyed reading this article.


Similar Articles