Tom Powers
asked on
load background image based on xml field
I have all the ballparks in a folder I'd like to load a Ballpark once based on xml file location(Ballpark name) attrib But I don't know how to load the Background Page image dynamically I always loading it static. I'm having issues getting Location(Ball Park's Name) to then load Ballpark as a background page. Ballpark has to be Background page Image and Location does not come up from xml attrib Location. Same code works fine in my other page I don't get it.
here is a portion
here is a portion
var homeOrAway = team.attr("vh");
var name = team.attr("name").toLowerCase();
$("#team"+homeOrAway).append(teamLogo);
if (homeOrAway=="H") {
var stadium_location = stadiums[homeTurf[name]]; // or have
var url = "http://199.233.14.112/aspdata/mlb2/new/stadiums/";
url = (stadium_location) ?url + stadium_location:"default.gif";
// $("#imgStad").attr("src",url)
var d = $(data);
var Play = d.find('Play');
// $('#imgStad').attr('src', imgStad);
var loc = Play.attr('Location') ;
var locate = "Location" + $('#txtBallparkname').html(loc).toUpperCase;
}
I don't see the logic exactly but this loads the image that is now in the stadium <img> as body background. Is that what you need?
$('body').css('background-image', 'url(\''+url+'\')');
By the way, I used that in place of lines 12 and 13 of the posted code in this question (and tested it in the code of your other open question).
ASKER
I'll try it out I for some reason can't get Location from the xml.
var loc = Play.attr('Location') ;
var locate = "Location" + $('#txtBallparkname').html (loc).toUp perCase;
Do you know why this isn't working cause It works in another page. Any Ideas.
Thanks for your help I'm gonna try it tonight or first thing tomorrow.
var loc = Play.attr('Location') ;
var locate = "Location" + $('#txtBallparkname').html
Do you know why this isn't working cause It works in another page. Any Ideas.
Thanks for your help I'm gonna try it tonight or first thing tomorrow.
That part of the code I took out because it is mostly unclear and I don't see the relation with the question, you're looking at text and asking about image? Also, add () after toUpperCase but even then, that doesn't seem valid code.
ASKER
This will be the page in between Innings the background picture will give it a nice look. It will have next 3 batters due up and once Outs go from 3 to 0 in xml file this page will route itself back to GamePage MainPage.
This should work by itself:
$('#txtBallparkname').html(loc);
If you need to do something with that afterwards maybe (untested):var locate = "Location" + $('#txtBallparkname').html().toUpperCase();
the background picture will give it a nice lookYou probably want to stretch it then, tiled it looks rather confusing... ;-)
ASKER
The Location defines what Ballpark will be loaded to page. I'm using that name to correctly load home teams Ballpark. Unless you can think of something that will work better.
ASKER
How do you stretch it ? or should I load it and have a black background ?
You can use CSS for it, actually you can pre-set that in the style of the html and it will only become apparent when the background image is set, otherwise it won't interfere. Exact syntax I don't have but I think it's background-size: ...
Use this in the css for body that is already present in your style sheet:
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
ASKER
I can't get background image to load I placed the $body right here is that right?
if (homeOrAway=="H") {
var stadium_location = stadiums[homeTurf[name]]; // or have
var url = "http://199.233.14.112/aspdata/mlb2/new/stadiums/";
url = (stadium_location) ?url + stadium_location:"default.gif";
// $("#imgStad").attr("src",url)
$('body').css('background-image', 'url(\''+url+'\')');
// $('#imgStad').attr('src', imgStad);
var loc = Play.attr('Location') ;
$('#txtBallparkname').html(loc);
Yes, that looks correct at first glance, I will double check. Did you add the css as well?
ASKER
No I didn't add css I don't know what css as to what to add? other then the background to size image to stretch. Is that the Css or something different?
That is the css, yes.
In your current document I saw:
In your current document I saw:
body {
background-color: #FFF;
}
and I added those 3 lines there.
are we looking at different files? Field/Next3...
ASKER
I added 3 lines take a look if you can at html doc Would cleardata prevent the background image from loading. I looked at firebug but it did not have any info about background image.
At first I misspelled stadium in url path but oddly enough that wasn't it.
Next3.html
37260.xml
At first I misspelled stadium in url path but oddly enough that wasn't it.
Next3.html
37260.xml
ASKER
Yeah Next3 is supposed to load new 3d stadium in background
That's way I'm using this url
var url = "http://199.233.14.112/aspdata/mlb2/new/stadiums/";
This contains the new 3d staduims but I using same code to load staduim in field and next3 except next3 needs to be background. Next3 has next three batters due up and home teams background that's the one I couldn't get location to come up.
That's way I'm using this url
var url = "http://199.233.14.112/aspdata/mlb2/new/stadiums/";
This contains the new 3d staduims but I using same code to load staduim in field and next3 except next3 needs to be background. Next3 has next three batters due up and home teams background that's the one I couldn't get location to come up.
ah sorry, I had missed that /new/... bit as well! but the code we have been working on is not present in Next3.html at all or am I wrong there as well?
I just saw that you posted a new html file...
you commented out the line that sets var stadium_location. The arrays (stadiums and hometurf) are defined within getStats, they should be outside it.
ASKER
Yeah there both similar so I'm not sure why it's not working I can't even get location ( Ballpark) to come up Sometimes it's confusing cause same exact code that works on one page does n't for me work on another page.
It takes very long for the picture to load. Maybe that's just for me but it could mean it's working but not showing yet. I'll try to fix it and post the file.
ASKER
I had that line commented cause I was troubleshooting it I put it back but still no 3d ballpark.
Found another problem: javascript is case sensitive. In stadiums it says:
"nationals park":"Nationals Park.jpg" ,
but in homeTurf it says: "washington":"Nationals Park"
so it's not found, these need to be the same or made the same programmatically with toLowerCase().
ASKER
Changed to lowercase but no luck
http://199.233.14.112/aspdata/mlb2/New/Stadiums/NATIONALS%20PARK.JPG
http://199.233.14.112/aspdata/mlb2/New/Stadiums/NATIONALS%20PARK.JPG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
So I just changed the keys in the first array to match the values fro the second one now, note that there are still some mismatches!
ASKER
This guy Rob never disappoints he solved it again after I was out of answers.
Nice!
ASKER
New.zip