Nested and multiple <marquee> troubles
JavascriptHtmlMarqueeJavascript Problem Overview
Actually I am trying to move some box alternatively with in another box. I made it work, but both the blocks do not interrupt each other. What should I do? How can I make the blocks cross each other? I try using style:position, but it is not working.
Here is the code I have been using:
<marquee direction="down" behavior="alternate" scrollAmount=10 style="border:2px solid blue;">
<marquee behavior="alternate" scrollAmount=50 >
<img src="img1.JPG">
</marquee>
<marquee behavior="alternate" scrollAmount=10 >
<img src="img1.JPG">
</marquee>
</marquee>
What am I doing wrong?
Javascript Solutions
Solution 1 - Javascript
Oh, dear Lord!
Well. They don't cross because they're positioned statically one above the other. The second marquee cannot go above the first.
You can solve* this problem by ungluing the marquees from each other using absolute positioning. Then doubly-nest each one with different horizontal and vertical motion:
<div style="border:2px solid blue; position: relative;">
<marquee direction="down" behavior="alternate" scrollAmount="10">
<marquee behavior="alternate" scrollAmount="50"><img src="img1.jpeg" alt="oh no" /></marquee>
</marquee>
<marquee direction="down" behavior="alternate" scrollAmount="20" style="position: absolute; top: 0;">
<marquee behavior="alternate" scrollAmount="10"><img src="img1.jpeg" alt="help meee" /></marquee>
</marquee>
</div>
*: for values 'x' of 'solve' where x='make a hideous mess of'.
This is for illustration purposes only. Please don't use this.
Solution 2 - Javascript
Please don't use the marquee tag, it's non-standard and deprecated. Use some JavaScript library like jQuery UI for any kind of animation.
Solution 3 - Javascript
Use a JavaScript library or if not use JavaScript's settimeout plus absolute positioning & dhmtl.
Solution 4 - Javascript
I once had an email (a javascript-less environment) from a company trying to sell me something or other. The signature used the marquee tag to slide in the lines one at a time, and they then stayed put. It was brilliantly done - just enough movement to catch the eye, and certainly not cringeworthy as we usually expect from marquee.
The lessons I learned are a) that marquee still has its place, no matter how small, and b) 'All generalisations are bad'. As for non-standard/deprecated - Outlook has pretty much dictated that the only rule in HTML emails is that if it works, it's good. There no use in polishing a you-know-what.