Layer shows and hides locally but not on a public webpage

I created a layer that I want to cover up a section of stats because I have to populate this layer with split stats. Now I got it to work locally but if it's public page it or the image that you click doesn't work any ideas why? I'm using this Real Simple try in locally then here is the public page with same image that I'm using as buttons
http://199.233.14.112/aspdata/mlb2/matchupver2withsplitstats.html

$(document).ready(function() {
   $('#Abutton1').click(function(){
      $('#layer1').show();
   });
   
   $('#Abutton2').click(function(){
      $('#layer1').hide();
   });
});

Open in new window


Don't worry about stats here the goal is to show and hide a layer with a click of a image
matchupver2withsplitstats.html
powerztomAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

powerztomAuthor Commented:
I know image is not there but if you click you can see the show and hide locally work. But not Public Web page.
0
Chris StanyonWebDevCommented:
Right. Your buttons are set to show and hide a DIV with an ID of #layer1. This #layer1 is sat inside a table cell with an ID of #txtPitcher. In your jQuery you have this:

$('#txtPitcher').html(txtPitcher);

So the content of #txtPitcher (i.e #layer1) is overwritten by whatever is in the variable txtPitcher (Pitching: Kyle  Farnsworth). After that, #layer1 no longer exists, so can't be shown or hidden..
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
powerztomAuthor Commented:
Chris I'm still learning should I put #layer1 at top of <body> tag before any html code? Would that be how to go about fixing this problem ?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Chris StanyonWebDevCommented:
No, not really. I can't see exactly what you're trying to do, but I would have a table row for the pitchers name and the button, and then one more row containing both sets of stats - call them something easy like layer1 and layer2. Set the CSS of layer2 to display:none; so it can't be seen. Now, the click of your button will need to toggle the display of layer1 and layer2.

Have a look at this code - http://jsfiddle.net/ChrisStanyon/X9RQT/ and ask any questions if it doesn't makes sense.
0
powerztomAuthor Commented:
Chris helped me fix my problem with a layer. I appreciate it. Good work!
0
powerztomAuthor Commented:
Yo Chris thanks for the link I'm gonna use   Thanks Bro.
$('#button1').click(function() {
    $('#layer1, #layer2').toggle();
});
0
Chris StanyonWebDevCommented:
Cool. Keeps it simple :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.