Please bear with me here! I familiarized myself with basic HTML and decided web programming would be my occupation. I enrolled in a program and am now writing my first live project in my fourth semester. Our classes deal mainly in the .NET Framework and I am very unfamiliar with Javascript and client-side programming in general.
Hopefully I outline this information enough to give the great members of this munity a chance to help a budding developer.
Objective: Scroll a div containing plain text horizontally across a page indefinitely Environment: Windows server running ASP.NET 4.0. Language: C#/XHTML/Javascript Tools Used: jQuery, jQueryTools, SmoothDivScroll
I have attempted to use a jQuery plugin known as SmoothDivScroll as well as jQueryTools to execute my objective, however, with my lack of client-side experience, I have had absolutely no success.
My webpage is available at / and the div that I am attempting to scroll has a class and ID of scrollingPanel.
I can provide sample code if it will help.
-Taylor
Please bear with me here! I familiarized myself with basic HTML and decided web programming would be my occupation. I enrolled in a program and am now writing my first live project in my fourth semester. Our classes deal mainly in the .NET Framework and I am very unfamiliar with Javascript and client-side programming in general.
Hopefully I outline this information enough to give the great members of this munity a chance to help a budding developer.
Objective: Scroll a div containing plain text horizontally across a page indefinitely Environment: Windows server running ASP.NET 4.0. Language: C#/XHTML/Javascript Tools Used: jQuery, jQueryTools, SmoothDivScroll
I have attempted to use a jQuery plugin known as SmoothDivScroll as well as jQueryTools to execute my objective, however, with my lack of client-side experience, I have had absolutely no success.
My webpage is available at http://paysonfirstassembly./ and the div that I am attempting to scroll has a class and ID of scrollingPanel.
I can provide sample code if it will help.
-Taylor
Share Improve this question asked Apr 22, 2011 at 16:20 PenumbraPenumbra 851 gold badge2 silver badges9 bronze badges 03 Answers
Reset to default 2This seems to fit your needs: http://plugins.jquery./project/jqScroller
<style type="text/css">
/* CSS for the scrollers */
#scrollingPanel{
position:relative;
height:24px;
width:500px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
.scrollingtext{
position:absolute;
white-space:nowrap;
}
</style>
$(document).ready(function() {
//create a horizontal scroller
$('#scrollingPanel').SetScroller({
velocity: 80,
direction: 'horizontal'
//more tweaks on the source code of plugin page
});
});
your HTML should be like this:
<div id="scrollingPanel">
<div class="scrollingtext">
Making a Difference in People
</div>
</div>
See this page source code for more functions and tweaks
Remy Sharp has a good jQuery Marquee implementation here with some demos. This allows you to do
<div class='marquee'>Scroll this</div>
and then
$('.marquee').marquee();
with his plug-in included.
Wrap your text in marquee tag like this
<div class="scrollingPanel">
<marquee>Making a Difference in People</marquee>
</div>
Though, I personally DO NOT RECOMMEND this solution. But it will work for your college project like charm. It doesn't need any external scripts.