Solved

load background image based on xml field

Posted on 2013-06-17
33
310 Views
Last Modified: 2013-06-18
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

    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; 
        }  

Open in new window

0
Comment
Question by:powerztom
  • 19
  • 14
33 Comments
 

Author Comment

by:powerztom
ID: 39254363
Any Questions please ask I know it may not sound to clear. But I need a image of a ballpark based on Location name to load as background web page image. Attach are all you need to get it running
New.zip
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254387
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+'\')');

Open in new window

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254403
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).
0
 

Author Comment

by:powerztom
ID: 39254496
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).toUpperCase;  

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.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254516
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.
0
 

Author Comment

by:powerztom
ID: 39254517
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.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254524
This should work by itself:
$('#txtBallparkname').html(loc);

Open in new window

If you need to do something with that afterwards maybe (untested):
var locate = "Location" + $('#txtBallparkname').html().toUpperCase();

Open in new window

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254531
the background picture will give it a nice look
You probably want to stretch it then, tiled it looks rather confusing... ;-)
0
 

Author Comment

by:powerztom
ID: 39254537
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.
0
 

Author Comment

by:powerztom
ID: 39254544
How do you stretch it ? or should I load it and have a black background ?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254565
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: ...
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39254701
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;

Open in new window

0
 

Author Comment

by:powerztom
ID: 39256223
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);

Open in new window

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256299
Yes, that looks correct at first glance, I will double check. Did you add the css as well?
0
 

Author Comment

by:powerztom
ID: 39256312
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?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256331
That is the css, yes.

In your current document I saw:
body {
	background-color: #FFF;
}

Open in new window

and I added those 3 lines there.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256393
This is what I see with that code and css (and previous change for uniforms):
capture FireFox
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256419
are we looking at different files? Field/Next3...
0
 

Author Comment

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

Author Comment

by:powerztom
ID: 39256453
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.
0
 

Author Comment

by:powerztom
ID: 39256460
3d stadium looks like3d image
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256516
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?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256546
I just saw that you posted a new html file...
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256568
you commented out the line that sets var stadium_location. The arrays (stadiums and hometurf) are defined within getStats, they should be outside it.
0
 

Author Comment

by:powerztom
ID: 39256572
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.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256615
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.
0
 

Author Comment

by:powerztom
ID: 39256626
I had that line commented cause I was troubleshooting it I put it back but still no 3d ballpark.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256639
Found another problem: javascript is case sensitive. In stadiums it says:
"nationals park":"Nationals Park.jpg" ,

Open in new window

but in homeTurf it says:
  "washington":"Nationals Park"

Open in new window

so it's not found, these need to be the same or made the same programmatically with toLowerCase().
0
 

Author Comment

by:powerztom
ID: 39256673
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 39256686
Here's a copy of what seems to work ok for me now:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Sports Network</title>
<style>
h1 {
    font-size: xx-large;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    margin-left: 0px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
}

.gallery {
	margin: 0px 0px 0px 0px;
	padding: 0px;
	height: 400px;
	width: 400px;
	background-color: #FFF;
}

.gallery img {
  vertical-align:middle;
  margin: 5px;
  padding: 5px;
  width: 75px;
  border: solid 1px black;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  
}

.gallery img:hover {
  -webkit-transform: scale(6.2) rotate(10deg);
  -moz-transform: scale(6.2) rotate(10deg);
  -o-transform: scale(6.2) rotate(10deg);
}

#players {
    list-style:none
}
#players li {
    line-height:30px
}
#players li img {
    height:100px
}

	table {font-family:arial, verdana, sans-serif;}
	th, td  {padding:1px 1px 1px 1px;margin:0px;}
	th {border-bottom:1px solid #000000;text-transform:uppercase;background-color:#efefef; text-align:left;}
	.even{background-color:#d6d6d6;}
	.number {text-align:right;}
  
body {
	background-color: #000;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.formatloc {
	color: #FFF;
}
.formatcell {
	color: #FFF;
}
#txtBallparkname {
	color: #FFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var xmlPath = '.'; //'/xml/mlb/scores/real';
  var xmlGameID = '37260';
//var counterXml = 0;
var stadiums = {
	"Wrigley Field":"Wrigley Field.jpg",
	"Comerica Park":"Comerica Park.jpg" ,
	"yankee stadium":"Yankee Stadium.jpg" ,
	"Citi Field":"Citi Field.jpg" ,
	"Angel Stadium Of Anaheim":"Angel Stadium of Anaheim.jpg" ,
	"Rangers Ballpark In Arlington":"Rangers Ballpark.jpg" ,
	"at&t park":"AT&T Park.jpg" ,
	"Citizens Bank Park":"Citizens Bank Park.jpg" ,
	"Coors Field":"Coors Field.jpg" ,
	"Busch Stadium":"Busch Stadium.jpg" ,
	"oriole park at camden yards":"Camden Yards.jpg",
	"Dodger Stadium":"Dodger Stadium.jpg" ,
	"Chase Field":"Chase Field.jpg" ,
	"Tropicana Field":"Tropicana Field.jpg" ,
	"Great American Ball Park":"Great American Ball Park.jpg" ,
	"Kauffman Stadium":"Kauffman Stadium.jpg" ,
	"mcafee coliseum":"mcafeecoliseum.jpg" ,
	"hubert h. humphrey metrodome":"metrodome.jpg" ,
	"metrodome":"metrodome.jpg" ,
	"Miller Park":"Miller Park.jpg" ,
	"Minute Maid Park":"Minute Maid Park.jpg" ,
	"Nationals Park":"Nationals Park.jpg" ,
	"Petco Park":"Petco Park.jpg" ,
	"Pnc Park":"PNC Park.jpg" ,
	"Progressive Field":"Progressive Field.jpg" ,
	"Rogers Centre":"Rogers Centre.jpg" ,
	"Safeco Field":"Safeco Field.jpg" ,
	"Turner Field":"Turner Field.jpg" ,
	"dolphin stadium":"dolphinstadium.jpg" ,
	"Fenway Park":"Fenway Park.jpg" ,
	"U.S. Cellular Field":"U.S. Cellular Field.jpg" ,
	"oakland-alameda county coliseum":"OColiseum.jpg",
	"Marlins Park":"Marlins Park.jpg",
	
	 "minnesota":"Target Field.jpg"
}; // no comma on the last

var homeTurf = {
  "philadelphia":"Citizens Bank Park",
  "milwaukee":"Miller Park",
  "san francisco":"U.S. Cellular Field",
  "la angels":"Angel Stadium of Anaheim",
  "tampa bay":"Tropicana Field",
  "chicago wsox":"U.S. Cellular Field",
  "oakland":"OColiseum",
  "kansas city":"Kauffman Stadium",
  "los angeles":"Dodger Stadium",
  "san diego":"Petco Park",
  "boston":"Fenway Park",
  "seattle":"Safeco Field",
  "detroit":"Comerica Park",
  "atlanta":"Turner Field",
  "baltimore":"Camden Yards",
  "miami":"Marlins Park",
  "pittsburgh":"Pnc Park",
  "ny mets":"Citi Field",
  "st. louis":"Busch Stadium",
  "houston":"Minute Maid Park",
  "cleveland":"Progressive Field",
  "cincinnati":"Great American Ball Park",
  "texas":"Rangers Ballpark",
  "toronto":"Rogers Centre",
  "chicago cubs":"Wrigley Field",
  "arizona":"Chase Field",
  "colorado":"Coors Field",
  "ny yankees":"Yankee Stadium",
  "washington":"Nationals Park"
};
function getStats(player,txt,img,li) {
  var hittingAttribs  = ["AB","R","H","RBI","HR","AVERAGE"];
 var seasonAttribs = ["AB","R","H","RBI","HR"];

 
  var tbl = $("<table/>").attr('cellPadding', 4);

  var tr0 = $("<tr/>");
  var tdi = $("<td/>");
  tdi.attr('rowspan', 4).append(img);
  tr0.append(tdi);
  var td0 = $("<td/>").attr('valign', 'bottom');
  td0.append(txt);

  var hitting = player.find("Hitting");
  //var pitching = player.find("Pitching");
  //console.log(hitting.size(),pitching.size());

  if (hitting.size()==0) {
      td0.append(" - Not found");
     tr0.append(td0);
      tbl.append(tr0);
      li.append(tbl);
      return;
  }

  var tr1 = $("<tr/>");
  var td1 = $("<td/>");
  var bold1 = $("<b/>");
  bold1.append("Stats");
  td1.append(bold1);
  tr1.append(td1);

  var tr2 = $("<tr/>").attr('valign', 'top');
  var td2 = $("<td/>");
  var bold2 = $("<b/>");
  bold2.append("Today");
  td2.append(bold2);
  tr2.append(td2);
  
  var tr3 = $("<tr/>").attr('valign', 'top');
  var td3 = $("<td/>");
  var bold3 = $("<b/>");
  bold3.append("Season");
  td3.append(bold3);
  tr3.append(td3);

  if (hitting.size()) {
    td0.attr('colspan', hittingAttribs.length+1);
    $.each(hittingAttribs,function(i, attrib) {
      var th1 = $("<th/>");
      th1.append(attrib.replace("AVERAGE", "AVG"));
      tr1.append(th1);
      var th2 = $("<th/>");
      th2.append(hitting.attr(hittingAttribs[i]));
      tr2.append(th2);
    });
   }
   var season = player.find("Season");
  if (season.size()==0) {
    td3.append(" - Not found");
    tr3.append(td3);
    tbl.append(tr3);
    li.append(tbl);
    return;
  } else {
    $.each(seasonAttribs,function(i, attrib) {
      var th3 = $("<th/>");
      th3.append(season.attr(seasonAttribs[i]));
      tr3.append(th3);
    });
  }
  tr0.append(td0);
  tbl.append(tr0);
  tbl.append(tr1);
  tbl.append(tr2);
  tbl.append(tr3);
  li.append(tbl);
}
$(document).ready(function(){
  $.ajax({
    type: "GET",
    url: xmlPath+"/"+xmlGameID+".xml",
	
    dataType: "xml",
    success: function(data){
		 var d = $(data);
      var Play = d.find('Play');
      var Teams = $(data).find("Team");
	  
      $.each(Teams,function(i,Team) {
        team=$(Team);
        var id = team.attr("ID").toLowerCase();
        var teamLogo = $("<img/>").attr("src","http://images.sportsnetwork.com/MLB/attheballpark/pbp_logos/" + id + ".png");
        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://images.sportsnetwork.com/mlb/attheballpark/stadiums/";
          var url = "http://199.233.14.112/aspdata/mlb2/New/Stadiums/";
          url = (stadium_location) ?url + stadium_location:"default.gif";
          $('body').css('background-image', 'url(\''+url+'\')');
          var loc = Play.attr('Location') ;
          $('#txtBallparkname').html(loc);
        }  

       });
     }
  });
});


function clearData() {
	document.getElementById("players").innerHTML = '';
}

 function loadData() {
  clearData();
  
 $.ajax({
    type: "GET",
     url: xmlPath+"/"+xmlGameID+".xml",
    dataType: "xml",
    success: function(data){
    
        var d = $(data);

        var Batter = d.find('NextBatter');
        if (Batter.size() > 0) {

          var nextbatterteam = Batter.attr('TeamID');
          var nextbatterid = Batter.attr('ID');
          var shownext = -1;

          $('#imgBatterTeam').attr('src', 'http://images.sportsnetwork.com/MLB/attheballpark/pbp_logos/'+Batter.attr('TeamID')+'.png');

          var li="",txt="",img = "";
          if ($(data).find("Play").attr("Status").toLowerCase() == "final")
          {
            //here you may want to stop timer
            clearInterval(myVar);
          }

          var players = d.find("Batters>Player");
          $.each(players,function(i,player) {
              player=$(player);
             if (shownext == -1 && player.attr('ID') == nextbatterid)
             {
               shownext = 3;
             }
           if (shownext > 0 && player.attr('TeamID') == nextbatterteam && player.attr('Active')=="1")
             {
              shownext--;
              li = $("<li/>");
              img = $("<img/>").attr("src","http://images.sportsnetwork.com/MLB/attheballpark/players/" + player.attr("ID") + ".jpg");
              txt = " " +
                  player.attr("FirstName") + " " +
                  player.attr("Lastname") + ", " +
                  player.attr("Pos");
              getStats(player,txt,img,li);
              
              $("#players").append(li);
        
           }
          });
		   if (shownext > 0) { // too few found, start from top again
          $.each(players,function(i,player) {
              player=$(player);
             if (shownext > 0 && player.attr('TeamID') == nextbatterteam && player.attr('Active')=="1")
             {
              shownext--;
              li = $("<li/>");
              img = $("<img/>").attr("src","http://images.sportsnetwork.com/MLB/attheballpark/players/" + player.attr("ID") + ".jpg");
              txt = " " +
                  player.attr("FirstName") + " " +
                  player.attr("Lastname") + ", " +
                  player.attr("Pos");
              getStats(player,txt,img,li);
              
              $("#players").append(li);
        
           }
          });
   }

		  
		  
        }
    }
  });
 }
</script>
</head>
  <body>
  <img src="BBLogo.png" name="imgBatterTeam" width="84" height="76" id="imgBatterTeam"><img src="NEXT3.png" name="imgStart" width="259" height="116" id="imgStart">
  
  <div id="gallery" class="gallery">
  <ul id="players"></ul>
  </div>
<div id="txtBallparkname"> <table width="100%" border="0">
    <tr>
      <td><div align="center" id="txtBallparkname"> Ballparkname</div></td>
    </tr>
  </table></div>
<SCRIPT>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
//var d=new Date();

//var t=d.toLocaleTimeString();
//clearData();

//document.getElementById("demo").innerHTML=t;
loadData();
	
	

}

        </SCRIPT>
</body>
</html>

Open in new window

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256691
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!
0
 

Author Closing Comment

by:powerztom
ID: 39256713
This guy Rob never disappoints he solved it again after I was out of answers.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39256728
Nice!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)

708 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

15 Experts available now in Live!

Get 1:1 Help Now