marquee doesn't work in Firefox but works fine in IE Chrome

I wondering if anyone has a solution for marquee I found out it's a IE Creation In my situation I have a web page that works in IE Chrome but not Firefox. Any Ideas for Firefox issue do I need some fancy javascript?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL GAME SCHEDULE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url: 'nfl.xml',
		dataType: "xml"
	}).done(function(data) {
		$('game', data).each(function(i, game) {
			newGame = $('#gameTemplate').clone().removeAttr('id');
			
			$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('vteamid', game).text() + '.png') );
			$('.awayTeam', newGame).html( $('vteam', game).text() );
			$('.awayScore', newGame).html( $('vscore', game).text() );

			$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('hteamid', game).text() + '.png') );
			$('.homeTeam', newGame).html( $('hteam', game).text() );
			$('.homeScore', newGame).html( $('hscore', game).text() );

			$('.gameStatus', newGame).html( $('status', game).text() );

			$('#games').append(newGame);			
		});
	});
});
</script>
<style type="text/css" media="screen">
	#gameTemplate { display:none; }
	.gameLog { width: 222px; border-collapse:collapse; margin-bottom: 10px; }
	.gameLog td { text-align: center;  border: 1px solid #E8E1E1; }
	.gameLog col:nth-child(1) { width: 50px; }
	.gameLog col:nth-child(2) { width: 155px; }
	.gameLog col:nth-child(3) { width: 32px; }	
	.awayLogo img, .homeLogo img { width: 32px; height: 32px; }
</style>
</head>

<body>
	<marquee  behavior="scroll" direction="up" scrollamount='10' scrolldelay='200' 
     onmouseover="this.stop();" onmouseout="this.start();">	
<div id="games"></div>
		
<table id="gameTemplate" class="gameLog">
	<colgroup><col><col><col></colgroup>
	<tr>
		<td class="awayLogo"></td>
		<td class="awayTeam"></td>
		<td class="awayScore"></td>
	</tr>
	<tr>
		<td class="homeLogo"></td>
		<td class="homeTeam"></td>
		<td class="homeScore"></td>
	</tr>
	<tr>
		<td colspan="3" class="gameStatus"></td>
	</tr>
</table>
	</marquee>		
</body>
</html>

Open in new window

I just set some marquee settings nothing fancy but does anyone have ever had to deal with this.
powerztomAsked:
Who is Participating?
 
Chris StanyonCommented:
Right. You've missed a couple of bits from my previous comments. Your HTML needs to look like this:

<div id="games">
	<ul></ul>
</div>

Open in new window

And the scrollbox() code needs to go after the each() loop!

Have a look at this, but please spend the time correalting my previous comments with the code below - if you just copy and paste this, you son't understand what I said!!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL GAME SCHEDULE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="jquery.scrollbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url: 'nfl.xml',
		dataType: "xml"
	}).done(function(data) {
		$('game', data).each(function(i, game) {
			newGame = $('#gameTemplate').clone().removeAttr('id');
			
			$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('vteamid', game).text() + '.png') );
			$('.awayTeam', newGame).html( $('vteam', game).text() );
			$('.awayScore', newGame).html( $('vscore', game).text() );

			$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('hteamid', game).text() + '.png') );
			$('.homeTeam', newGame).html( $('hteam', game).text() );
			$('.homeScore', newGame).html( $('hscore', game).text() );

			$('.gameStatus', newGame).html( $('status', game).text() );

			$('#games ul').append( $('<li>').append(newGame) );
		});
		
		$('#games').scrollbox();			
	});
});
</script>
<style type="text/css" media="screen">
    #games { width: 200px; height: 400px; overflow: hidden; }
	#gameTemplate { display:none; }
	.gameLog { width: 222px; border-collapse:collapse; margin-bottom: 10px; }
	.gameLog td { text-align: center;  border: 1px solid #E8E1E1; }
	.gameLog col:nth-child(1) { width: 50px; }
	.gameLog col:nth-child(2) { width: 155px; }
	.gameLog col:nth-child(3) { width: 32px; }	
	.awayLogo img, .homeLogo img { width: 32px; height: 32px; }
</style>
</head>

<body>

<div id="games">
	<ul></ul>
</div>

<table id="gameTemplate" class="gameLog">
	<colgroup><col><col><col></colgroup>
	<tr>
		<td class="awayLogo"></td>
		<td class="awayTeam"></td>
		<td class="awayScore"></td>
	</tr>
	<tr>
		<td class="homeLogo"></td>
		<td class="homeTeam"></td>
		<td class="homeScore"></td>
	</tr>
	<tr>
		<td colspan="3" class="gameStatus"></td>
	</tr>
</table>
	
</body>
</html>

Open in new window

0
 
Chris StanyonCommented:
Tom,

The marquee tag you've used is not a standard HTML tag and will not work across all browsers. To achieve what you want, you should be looking at a jQuery plugin (or writing your own)

Here's one to get you going:

https://github.com/wmh/jquery-scrollbox

FWIW - based on your previous question, work on getting the status link going first, and then concentrate on the scroll / marquee : function first / form second :)
0
 
powerztomAuthor Commented:
Chris,

Thanks for Links the jquery scrollbox looks cool but maybe you can tell me what I'm doing wrong I put a link to the external javascript file then I put a div tag around what I what to scroll up and then jquery statement in code take a look. I read your advice about getting status link to work then do scroll and your right but I feel like I'm getting close to scrolling part. But vhere did I go wrong here?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NFL GAME SCHEDULE</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="jquery.scrollbox.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.ajax({
		url: 'nfl.xml',
		dataType: "xml"
	}).done(function(data) {
		$('game', data).each(function(i, game) {
			newGame = $('#gameTemplate').clone().removeAttr('id');
			
			$('.awayLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('vteamid', game).text() + '.png') );
			$('.awayTeam', newGame).html( $('vteam', game).text() );
			$('.awayScore', newGame).html( $('vscore', game).text() );

			$('.homeLogo', newGame).html( $('<img>').attr('src', 'http://powerzsoftware.com/tsn/nfl/minilogos/' + $('hteamid', game).text() + '.png') );
			$('.homeTeam', newGame).html( $('hteam', game).text() );
			$('.homeScore', newGame).html( $('hscore', game).text() );

			$('.gameStatus', newGame).html( $('status', game).text() );

			$('#games').append(newGame);
			$('#div2').scrollbox({
  linear: true,
  step: 1,
  delay: 0,
  speed: 100
});			
		});
	});
});
</script>
<style type="text/css" media="screen">
	#gameTemplate { display:none; }
	.gameLog { width: 222px; border-collapse:collapse; margin-bottom: 10px; }
	.gameLog td { text-align: center;  border: 1px solid #E8E1E1; }
	.gameLog col:nth-child(1) { width: 50px; }
	.gameLog col:nth-child(2) { width: 155px; }
	.gameLog col:nth-child(3) { width: 32px; }	
	.awayLogo img, .homeLogo img { width: 32px; height: 32px; }
</style>
</head>

<body>

	<div class="div2" id="div2">

<div id="games">
  
<table id="gameTemplate" class="gameLog">
	<colgroup><col><col><col></colgroup>
	<tr>
		<td class="awayLogo"></td>
		<td class="awayTeam"></td>
		<td class="awayScore"></td>
	</tr>
	<tr>
		<td class="homeLogo"></td>
		<td class="homeTeam"></td>
		<td class="homeScore"></td>
	</tr>
	<tr>
		<td colspan="3" class="gameStatus"></td>
	</tr>
</table>
</div>
		
	</div>	
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
Looking good :)

Couple of things. The scrollable plugin expects the scrollable content to be an Unordered List (UL) wrapped in a DIV. It's the DIV that then gets the scrollable() function called on.

What I would do is get rid of the #div2 DIV (you really do need to work on your naming conventions!). Then add a UL to the #games DIV, and then in your jQuery, wrap the newGame in an LI and then append that to the UL. So your HTML would look like this:

<div id="games">
   <ul></ul>
</div>

And line 28 of your jQuery would look like this:

$('#games ul').append( $('<li>').append(newGame) );

The scrollbox() function call would then need calling on #games. It will also need to sit outside of the each game loop.

Finally, you'll need to use CSS to style the #games DIV so that only a couple of the tables are visible:

#games { width: 200px; height: 400px; overflow: hidden; }
0
 
powerztomAuthor Commented:
Some of the samples looked pretty cool for jquery scroll. I looked at the code for the javascript page and it has <div id="games" class="scroll-text"> Class part I didn't have so I put it in the code for the page but the the dam thing still is frozen.
0
 
powerztomAuthor Commented:
Chris I read and tried your instructions a few times I didn't want to post that I didn't get it but I didn't get it. Could you check out attachments This looks like it would be a cool jquery plugin but getting it to work is a bitch I got List Dots and indentation on my boxscores where the scores got cut off. I think it's the <ul> or <li> tags ? Anyway could you kindly assist I tried every trick I could think of ?
DailyNFL.html
nfl.xml
0
 
Chris StanyonCommented:
The class is just for styline and you don't need it. Just use the ID selector to style it.

If you can upload a page for me to look at, I'll let you know where you're going wrong.
0
 
Chris StanyonCommented:
Ooops. Cross-posted there. Give me a minute and I'l have a look
0
 
powerztomAuthor Commented:
Thanks alot Chris I promise to research before I post. That's really cool that Jquery plugin. And it's using it's preconfig configuration for settings. Chris there is one thing I played around with Css Settings like the width to try and get it where score isn't chopped off. I realized that increasing width increases the width of table and is not the way the see the score There a dot next to each boxscore maybe it's that? Check it out. Anyway Awesome help Today Bro. Have a Great Thanksgiving.
0
 
powerztomAuthor Commented:
Chris I figured it out the scores that were chopped off. Thanks for your help today
0
 
Chris StanyonCommented:
Hey Tom,

The dot next to the Table is the bullet that's the default for ULs. You would remove it by styling the UL in CSS (list-style-type:none;). You may also want to remove the margin and padding from the UL

The 'visible' part of the tables is down to the #games DIV. If the scores are being cut off, make it wider:

#games { width: 300px; height: 300px; overflow: hidden; }
#games ul { padding: 0px; list-style-type:none; }

Open in new window

Enjoy your Thanksgiving - I'm English and we don't celebrate it here in the UK ;)
0
 
powerztomAuthor Commented:
Chris,

Thanks again for the extra tidbits. It's cool meeting people all over the world like you Robert S from Netherlands. You guys have helped me out tremendously. But I promise to try harder before I submit a question. Peace

Tom
0
 
powerztomAuthor Commented:
Chris,

I know what you said about I'm not gonna do your job for you. And if I were you I'd be the same way. But my boss wants me to start on Mobile side of this gamecast. I got the scores looking good thanks to you you and you. I can't move forward I'm stuck on trying to get the status which is date or in progress or final text to click and pass gameid to the browser. I tried quite a few things to get the link to be a button but can you tell me what I need to do to get the text to become like a button and pass gameid to browser url for now. It would be a big help believe me I'm trying but I don't have a knowledgebase in my brain that you have.

I got $('.gameid', newGame).html( $('game_id', game).text() ); just don't know how to get it working for me as described.
0
 
Chris StanyonCommented:
Hey Tom,

There's a few ways you can do this, so I'll get you started. You may need to tweak it to get exactly what you need.

When programming, it often helps if you describe in plain language what you need to do (even if it's only to yourself). This then acts as a guide for your programming and allows you to get your head around the logic of your program. So, in plain language, this is one way of doing what you need:

1. Create a Link
2. Set the HREF of the link (it may just be #)
3. Set the Text of the link to the Status from the XML file
4. Bind the GameID to the link (so we can use it later)
5. Fire some function when we click the link
6. Add the Link to the HTML page.

In code, this equates to the following:

var newLink = $('<a>')
    .attr('href', '#')
    .text( $('status', game).text() )
    .data('gameID', $('game_id', game).text() )
    .click( function(e) {
       e.preventDefault();
       alert( $(this).data('gameID'));
    });

$('.gameStatus', newGame).html( newLink );

Open in new window

Give it a go and see how you get on
0
 
powerztomAuthor Commented:
Chris,

Thanks it funny cause I went to a answered solution on EE and it worked there was a button created and it worked but I wanted one change. So then I clicked on your solution and It was what I wanted and the other solution has window.location =
                        "DailyNFL2.html#" + $('game_id', game).text();
so in the end with two solutions just like I wanted. Except I gave the points away. Chris thank you for your advice you typed about thinking about the solution. Cause when I now look at this it really isn't that bad Have a great weekend!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.