Solved

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

Posted on 2013-11-25
15
1,837 Views
Last Modified: 2013-11-26
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.
0
Comment
Question by:powerztom
  • 8
  • 7
15 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39675587
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
 

Author Comment

by:powerztom
ID: 39675685
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39675721
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
 

Author Comment

by:powerztom
ID: 39675728
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
 

Author Comment

by:powerztom
ID: 39675897
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39675898
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39675908
Ooops. Cross-posted there. Give me a minute and I'l have a look
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39675936
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
 

Author Closing Comment

by:powerztom
ID: 39676061
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
 

Author Comment

by:powerztom
ID: 39676144
Chris I figured it out the scores that were chopped off. Thanks for your help today
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39676321
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
 

Author Comment

by:powerztom
ID: 39677576
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
 

Author Comment

by:powerztom
ID: 39678848
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
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39678998
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
 

Author Comment

by:powerztom
ID: 39679167
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now