Introduction
In this article we will see the advanced version of how to show marquees in our ASP.NET webpage. In may 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 the 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 which I found with Google search. This file contains the function to scroll the content of our web page.
var sagscroller_constants={
navpanel: {height:'16px', downarrow:'down.jpg', opacity:0.6, title:'Go to Next Content', background:'black'},
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 which belongs to another server and takes 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 step by step. So let's get started.
Step 1:
Create a new web site using Visual Studio template add the new page to 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 web root. You can provide your own images to display on the page as well as waiting and next. So 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.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet/sagscroller.css" />
<script src="Script/sagscroller.js">
</script>
<style type="text/css">
div#mysagscroller{
width: 200px;
height:250px;
}
div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px;
}
div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}
div#mysagscroller2{
width: 250px;
height:300px;
border:7px solid #C0C0C0;
}
div#mysagscroller2 ul li img{
border-width:0;
display:block;
}
</style>
<script>
var sagscroller1 = new sagscroller({
id: 'mysagscroller',
mode: 'manual'
})
var sagscroller2 = new sagscroller({
id: 'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400
})
</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 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
above script.
<div id="mysagscroller" class="sagscroller">
<ul>
<li>Can show the news for your website.</li>
<li>Can show merquee in advanced manner on your ASP.Net page.</li>
<li>This work has been done by JavaScript files.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<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>
</ul>
</div>
<div id="mysagscroller2" class="sagscroller">
<ul>
<li><a href="#"><img src="Images/10to15.jpg" /></a></li>
<li><a href="#"><img src="Images/20to25.jpg" /></a></li>
<li><a href="#"><img src="Images/25to30.jpg" /></a></li>
<li><a href="#"><img src="Images/35to40.jpg" /></a></li>
<li><a href="#"><img src="Images/demo1.jpg" /></a></li>
<li><a href="#"><img src="Images/demo4.jpg" /></a></li>
</ul>
</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 written above in the script of head section.
Step 5:
Now run you project and see the scrolling text and scrolling images in your web page.
Conclusion
In this simple way we can make our web site attractive. I hope you enjoyed reading this article.