This is one of the trick use the Flash messages or marquee text without html marquee tag using javascript. In Some Situation we can't able to use html tag in our websites. in that particular situation you can use the this script.
Marquee Text Without Marquee Tag
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll Text</title>
<style type="text/css">
.scroll{
width:430px;
height:21px;
overflow:hidden;
position:relative;
}
.scrollingtext{
white-space:nowrap;
position:absolute;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 20000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');
});
</script>
</head>
<body>
<div class="scroll">
<div class="scrollingtext"> Flash message without marquee tag using javascript! </div>
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scroll Text</title>
<style type="text/css">
.scroll{
width:430px;
height:21px;
overflow:hidden;
position:relative;
}
.scrollingtext{
white-space:nowrap;
position:absolute;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 20000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');
});
</script>
</head>
<body>
<div class="scroll">
<div class="scrollingtext"> Flash message without marquee tag using javascript! </div>
</div>
</body>
</html>
1 Comments
This is helpful, but I have a question. Is there a way to adjust the speed of the scroll? I've noticed the more text that you put in the scroll, the faster it scrolls. I need the speed to be consistent regardless of the amount of scrolling text.
ReplyDeleteThanks!
Roger