Vyoms OneStopTesting.com - Testing EBooks, Tutorials, Articles, Jobs, Training Institutes etc.
OneStopGate.com - Gate EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopMBA.com - MBA EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopIAS.com - IAS EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopSAP.com - SAP EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
OneStopGRE.com - of GRE EBooks, Tutorials, Articles, FAQs, Jobs, Training Institutes etc.
Bookmark and Share Rss Feeds

Display Marquee's on ASP.NET Page | Articles | Recent Articles | News Article | Interesting Articles | Technology Articles | Articles On Education | Articles On Corporate | Company Articles | College Articles | Articles on Recession
Sponsored Ads
Hot Jobs
Fresher Jobs
Experienced Jobs
Government Jobs
Walkin Jobs
Placement Section
Company Profiles
Interview Questions
Placement Papers
Resources @ VYOMS
Companies In India
Consultants In India
Colleges In India
Exams In India
Latest Results
Notifications In India
Call Centers In India
Training Institutes In India
Job Communities In India
Courses In India
Jobs by Keyskills
Jobs by Functional Areas
Learn @ VYOMS
GATE Preparation
GRE Preparation
GMAT Preparation
IAS Preparation
SAP Preparation
Testing Preparation
MBA Preparation
News @ VYOMS
Freshers News
Job Articles
Latest News
India News Network
Interview Ebook
Get 30,000+ Interview Questions & Answers in an eBook.
Interview Success Kit - Get Success in Job Interviews
  • 30,000+ Interview Questions
  • Most Questions Answered
  • 5 FREE Bonuses
  • Free Upgrades

VYOMS TOP EMPLOYERS

Wipro Technologies
Tata Consultancy Services
Accenture
IBM
Satyam
Genpact
Cognizant Technologies

Home » Articles » Display Marquee's on ASP.NET Page

Display Marquee's on ASP.NET Page







Article Posted On Date : Wednesday, March 21, 2012


Display Marquee's on ASP.NET Page
Advertisements

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.






Sponsored Ads


Interview Questions
HR Interview Questions
Testing Interview Questions
SAP Interview Questions
Business Intelligence Interview Questions
Call Center Interview Questions
Databases
Clipper Interview Questions
DBA Interview Questions
Firebird Interview Questions
Hierarchical Interview Questions
Informix Interview Questions
Microsoft Access Interview Questions
MS SqlServer Interview Questions
MYSQL Interview Questions
Network Interview Questions
Object Relational Interview Questions
PL/SQL Interview Questions
PostgreSQL Interview Questions
Progress Interview Questions
Relational Interview Questions
SQL Interview Questions
SQL Server Interview Questions
Stored Procedures Interview Questions
Sybase Interview Questions
Teradata Interview Questions
Microsof Technologies
.Net Database Interview Questions
.Net Deployement Interview Questions
ADO.NET Interview Questions
ADO.NET 2.0 Interview Questions
Architecture Interview Questions
ASP Interview Questions
ASP.NET Interview Questions
ASP.NET 2.0 Interview Questions
C# Interview Questions
Csharp Interview Questions
DataGrid Interview Questions
DotNet Interview Questions
Microsoft Basics Interview Questions
Microsoft.NET Interview Questions
Microsoft.NET 2.0 Interview Questions
Share Point Interview Questions
Silverlight Interview Questions
VB.NET Interview Questions
VC++ Interview Questions
Visual Basic Interview Questions
Java / J2EE
Applet Interview Questions
Core Java Interview Questions
Eclipse Interview Questions
EJB Interview Questions
Hibernate Interview Questions
J2ME Interview Questions
J2SE Interview Questions
Java Interview Questions
Java Beans Interview Questions
Java Patterns Interview Questions
Java Security Interview Questions
Java Swing Interview Questions
JBOSS Interview Questions
JDBC Interview Questions
JMS Interview Questions
JSF Interview Questions
JSP Interview Questions
RMI Interview Questions
Servlet Interview Questions
Socket Programming Interview Questions
Springs Interview Questions
Struts Interview Questions
Web Sphere Interview Questions
Programming Languages
C Interview Questions
C++ Interview Questions
CGI Interview Questions
Delphi Interview Questions
Fortran Interview Questions
ILU Interview Questions
LISP Interview Questions
Pascal Interview Questions
Perl Interview Questions
PHP Interview Questions
Ruby Interview Questions
Signature Interview Questions
UML Interview Questions
VBA Interview Questions
Windows Interview Questions
Mainframe Interview Questions

Copyright © 2001-2025 Vyoms.com. All Rights Reserved. Home | About Us | Advertise With Vyoms.com | Jobs | Contact Us | Feedback | Link to Us | Privacy Policy | Terms & Conditions
Placement Papers | Get Your Free Website | IAS Preparation | C++ Interview Questions | C Interview Questions | Report a Bug | Romantic Shayari | CAT 2025
Fresher Jobs | Experienced Jobs | Government Jobs | Walkin Jobs | Company Profiles | Interview Questions | Placement Papers | Companies In India | Consultants In India | Colleges In India | Exams In India | Latest Results | Notifications In India | Call Centers In India | Training Institutes In India | Job Communities In India | Courses In India | Jobs by Keyskills | Jobs by Functional Areas

Testing Articles | Testing Books | Testing Certifications | Testing FAQs | Testing Downloads | Testing Interview Questions | Testing Jobs | Testing Training Institutes

Gate Articles | Gate Books | Gate Colleges | Gate Downloads | Gate Faqs | Gate Jobs | Gate News | Gate Sample Papers | Gate Training Institutes

MBA Articles | MBA Books | MBA Case Studies | MBA Business Schools | MBA Current Affairs | MBA Downloads | MBA Events | MBA Notifications | MBA FAQs | MBA Jobs
MBA Job Consultants | MBA News | MBA Results | MBA Courses | MBA Sample Papers | MBA Interview Questions | MBA Training Institutes

GRE Articles | GRE Books | GRE Colleges | GRE Downloads | GRE Events | GRE FAQs | GRE News | GRE Training Institutes | GRE Sample Papers

IAS Articles | IAS Books | IAS Current Affairs | IAS Downloads | IAS Events | IAS FAQs | IAS News | IAS Notifications | IAS UPSC Jobs | IAS Previous Question Papers
IAS Results | IAS Sample Papers | IAS Interview Questions | IAS Training Institutes | IAS Toppers Interview

SAP Articles | SAP Books | SAP Certifications | SAP Companies | SAP Study Materials | SAP Events | SAP FAQs | SAP Jobs | SAP Job Consultants
SAP Links | SAP News | SAP Sample Papers | SAP Interview Questions | SAP Training Institutes |
Copyright ©2001-2025 Vyoms.com, All Rights Reserved.
Disclaimer: VYOMS.com has taken all reasonable steps to ensure that information on this site is authentic. Applicants are advised to research bonafides of advertisers independently. VYOMS.com shall not have any responsibility in this regard.