Tom Powers
asked on
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>ASKER
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?
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>
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; }
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; }
ASKER
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.
ASKER
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
DailyNFL.html
nfl.xml
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.
If you can upload a page for me to look at, I'll let you know where you're going wrong.
Ooops. Cross-posted there. Give me a minute and I'l have a look
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
Chris I figured it out the scores that were chopped off. Thanks for your help today
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:
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; }ASKER
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
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
ASKER
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.
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.
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:
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 );ASKER
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!!
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!!
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/jqu
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 :)