Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Any way to replace marquee with CSS?

Status
Not open for further replies.
hotfusion

hotfusion

Technical User
Jan 20, 2001
755
GB
A need has arisen to create a moving image across the page, and the only way I know of to do this is by using the marquee element. This is less than ideal, as it is not cross-browser compatible.

Is there any way to do this using CSS for compatability, or am I limited to using JavaScript?

Please bear with me, I'm learning....... :)

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:
 
Sort by date Sort by votes
Marquee is exceptionally obnoxious. I think you're limited to Javascript or perhaps an animated gif or flash or ....

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
dhtml might be able to do it, but I know that a lot of browsers choke on DHTML, which is a good thing because it stops from render annoying things like scrolling marquees.

[plug=shameless]
[/plug]
 
Upvote 0 Downvote

You cannot animate HTML elements using CSS alone, AFAIK. You will have to use some sort of scripting, most likely JavaScript.

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
i've done something like this with javascript before using an iframe. i'm sure the same can be done using an image.

i don't consider it messy.

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
something like:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>

<style type="text/css">
#theImg {
  position: absolute;
}
</style>

<script language="javascript"><!--

var scl = 10;
var frq = 50;

function posImg() {
    var o = document.getElementById('theImg');
    var curX, maxX, newX;
    maxX = parseInt(getWidth());
    curX = parseInt(o.style.left);
    newX = (curX <= 0) ? maxX : (curX - scl);
    
    o.style.left = newX + 'px';
    
    setTimeout( "posImg()", frq );
}

function getWidth() {
	if (self.innerWidth)
		return self.innerWidth;
	else if (document.documentElement && document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
	else if (document.body)
		return document.body.clientWidth;
    else return 800;
}
onload=posImg;
--></script>

</head>

<body>

<img id="theImg" style="left: 0; top: 0;" src="[URL unfurl="true"]http://www.tek-tips.com/images/logo.gif"[/URL] />

</body>
</html>

*cLFlaVA
----------------------------
[tt]a frickin' twelve-gauge, what do you think?[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
I did something like this in the body of the form, without JavaScript. Here's the source.

<!--START SCROLLING IMAGE MARQUEE-->
<marquee scrollamount="3" scrolldelay="0" onMouseover="this.scrollAmount=1" onMouseout="this.scrollAmount=3" width="100%" height="31" direction="left" style="filter:alpha(opacity=100, finishopacity=2, style=1, startx=10, starty=0, finishx=0, finishy=0);">

<img src="Scrolling/food.gif" border="0" vspace="3" /></a>&nbsp;&nbsp;

<img src="Scrolling/cake.gif" border="0" vspace="3" /></a>&nbsp;&nbsp;

<img src="Scrolling/Hawaiin.gif" border="0" vspace="3" /></a>&nbsp;&nbsp;

<img src="Scrolling/meal.gif" border="0" vspace="3" /></a>
</marquee>

Copy and paste that wherever you want it on the form, but DO NOT add it to the script.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
628
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
658
pmonett
pmonett
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
632
3esolar
3
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
538
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top