Marquee doesn't work well in IE

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Locked
User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Marquee doesn't work well in IE

Post by parasolx »

Hello there,

i have make some changes to portal3board. I have implement the marque code between the recent topic list which the code i provide here:

Code: Select all

			<marquee scrollamount="2" direction="up" loop="true" width="100%" height="200" style="background: #ecf3f7" onmouseover="this.stop();" onmouseout="this.start();">
            <ul class="topiclist topics">
    <!-- ENDIF -->
                <li class="row<!-- IF news_row.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->" style="display: block">
                <dl class="icon" style="background-image: url({news_row.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
                    <dt style="<!-- IF S_DISPLAY_NEWS_RVS -->width: 44%;<!-- ELSE -->width: 60%;<!-- ENDIF --> <!-- IF news_row.TOPIC_ICON_IMG -->background-image: url({T_ICONS_PATH}{news_row.TOPIC_ICON_IMG}); background-repeat: no-repeat;<!-- ENDIF -->" title="{news_row.TOPIC_FOLDER_IMG_ALT}"><!-- IF news_row.S_UNREAD_TOPIC --><a href="{news_row.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF --><!-- IF news_row.ATTACH_ICON_IMG -->{news_row.ATTACH_ICON_IMG} <!-- ENDIF --><!-- IF news_row.S_POLL --><strong>{L_POLL}: </strong><!-- ENDIF --><a href="{news_row.U_VIEW_COMMENTS}" title="{news_row.TITLE}" class="topictitle">{news_row.TITLE}</a><!-- IF U_VIEW_UNREAD_POST and not S_IS_BOT --> &bull; <a href="{U_VIEW_UNREAD_POST}">{L_VIEW_UNREAD_POST}</a> &bull; <!-- ENDIF -->
                        <!-- IF news_row.PAGINATION --><strong class="pagination"><span>{news_row.PAGINATION}</span></strong><!-- ENDIF -->
.
.
.
    <!-- IF news_row.S_LAST_ROW -->
            </ul></marquee>
it works really great in Firefox but in IE there something problem happen. In IE only the background of <LI> is move but the text won't.

Can somebody help me to fix this. I provide link here for the preview. but make sure preview it with Internet explorer.

Link: http://ruaikitai.com/forum/portal.php

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51931
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Marquee doesn't work well in IE

Post by Brf »

marquee is a legacy tag. You should not be using it in modern HTML or XHTML.

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

so how to solve this problem? if there other way to make like this without marquee? javascript?

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51931
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Marquee doesn't work well in IE

Post by Brf »

Yes.
Use a timed javascript.

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

can you suggest the example of javascript that could do it

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51931
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Marquee doesn't work well in IE

Post by Brf »

I am no javascript expert... I general do a Google search when looking for something like that.
Actually, here is a piece of code I found on another site, that claims it works with Marquee with IE6 and 7:

Code: Select all

<marquee id="comments" behavior="scroll" direction="up" height="290" width="170" scrolldelay="100" scrollamount="2" onMouseOver="document.all.comments.stop()" onMouseOut="document.all.comments.start()"> ... insert content here ... </marquee>

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

yes.. the marquee is work, but the result is still same. kind regard to look it with IE:

links: http://ruaikitai.com/forum/portal.php

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51931
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Marquee doesn't work well in IE

Post by Brf »

You forgot the

Code: Select all

id="comments"
I do not think you are going to have much luck using marquee to scroll such a large chunk of code.....

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

still same although i put the id="comments". so how to solve this? i really need the scrolling for recent news list.

in firefox it works well... huh.. IE..

kkyt
Registered User
Posts: 64
Joined: Sun Feb 03, 2008 3:14 pm

Re: Marquee doesn't work well in IE

Post by kkyt »

Replace

Code: Select all

<marquee id="comments" behavior="scroll" scrolldelay="100" scrollamount="2" direction="up" loop="true" width="100%" height="200" style="background: #ecf3f7" onMouseOver="document.all.comments.stop()" onMouseOut="document.all.comments.start()">
With:

Code: Select all

<marquee id="comments" behavior="scroll" scrolldelay="100" scrollamount="2" direction="up" loop="true" width="100%" height="200" style="background: #ecf3f7" onMouseOver="stop()" onMouseOut="start()">
for a start so IE won't bug out.

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

the problem still same, but it start and stop well...

the problem is only the <LI> background is moving in the marquee but not the text.. the text is appear floating outside of the marquee field.

try watch it: http://ruaikitai.com/forum/portal.php

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51931
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Marquee doesn't work well in IE

Post by Brf »

What I was seeing was both the text and the grid moving, but at different rates, so the text and grid are out of synch.

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

Brf wrote:What I was seeing was both the text and the grid moving, but at different rates, so the text and grid are out of synch.
so how to solve this?

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51931
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: Marquee doesn't work well in IE

Post by Brf »

As I said before. Stop using marquee. It is not supported by modern HTML or XHTML.
You can probably find a javascript solution by searching Google.

User avatar
parasolx
Registered User
Posts: 146
Joined: Wed Apr 23, 2008 8:52 am
Location: Malaysia
Name: Hadafi

Re: Marquee doesn't work well in IE

Post by parasolx »

thanks for helping me to solve it and lastly i have get it.

i used javascript and style to make it work in all browser. here i paste the code that i used it for sharing:

Add in <HEAD> in overall_header.html:

Code: Select all

<style type="text/css">

#marqueecontainer{
position: relative;
width: 100%; /*marquee width */
height: 250px; /*marquee height */
background-color: #ecf3f7;
overflow: hidden;
border: none;
padding: 0px;
padding-left: 0px;
}

</style>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=0 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
Add this code to make your content scroll vertically in any template files:

Code: Select all

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 100%;">

=== YOUR CONTENT HERE ===

</div>
</div>

Locked

Return to “[3.0.x] Styles Support & Discussion”