Two buttons interfering? - php

Question

I'm working on a webpage but i'm a designer not a developer, I have a problem with my buttons. Here's the code`
<style>
#chat {
position:fixed;
bottom:0;
right:0;
background-color:#000;
width:300px;
padding:10px;
color:white;
display:block;
z-index:99999;
}
#chatbtn {
background:#666;
width:310px;
position:fixed;
bottom:0;
right:0;
z-index:14;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
border-top-left-radius:5px;
background:#333;
cursor:pointer;
}
#chatbtn h3 {
background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);
background-repeat:no-repeat;
background-position:-5px -574.5px;
margin:0;
font-size:20px;
padding-left:40px;
line-height:2.2;
color:#fff;
font-weight:700;
}
#box {
position:relative;
width:890px;
height:100px;
top:130px;
z-index:14;
margin:0 auto;
}
#box .left_part {
width:810px;
height:100px;
float:left;
}
#box .left_part .top {
width:790px;
height:54px;
margin-left:10px;
}
#box .left_part .bottom {
width:810px;
height:45px;
}
#box .right_part {
width:80px;
height:100px;
float:right;
}
.media_icons {
width:190px;
height:45px;
display:inline-block;
float:left;
text-align:center;
}
.song_titel {
width:510px;
height:45px;
display:inline-block;
float:left;
text-align:center;
}
.social_icons {
width:150px;
height:45px;
display:inline-block;
float:right;
text-align:center;
margin-top:-40px;
}
.twitter a {
background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);
background-repeat:no-repeat;
background-position:-10px -480px;
width:32px;
height:32px;
float:right;
margin:10px 7px 10px 0;
}
.facebook a {
background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);
background-repeat:no-repeat;
background-position:-10px -532px;
width:32px;
height:32px;
float:right;
margin:10px 7px 10px 0;
}
.twitter a:hover {
background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);
background-repeat:no-repeat;
width:32px;
background-position:-10px -480px;
height:32px;
float:right;
margin:10px 9px 10px 0;
}
.facebook a:hover {
background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);
background-repeat:no-repeat;
width:32px;
background-position:-10px -532px;
height:32px;
float:right;
margin:10px 9px 10px 0;
}
#-webkit-keyframes NAME-YOUR-ANIMATION {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes NAME-YOUR-ANIMATION {
0 {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes NAME-YOUR-ANIMATION {
0 {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes NAME-YOUR-ANIMATION {
0 {
opacity: 0;
}
100% {
opacity: 1;
}
}
.black_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: .8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
bottom: 6%;
right: 0;
padding: 1px;
border: 1px solid black;
background-color: white;
z-index: 1002;
overflow: auto;
}
#tunein {
float: right;
margin: 3px 0px 0 -1px;
margin-top:15px !important;
}
#tunein img {
margin: 3px;
opacity: 0.8;
}
#tunein img:hover {
opacity: 1;
}
.song_titel .current_show, .song_titel .current_song {
font-size: 15px;
color: #FD0E62;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
height: 20px;
line-height: 20px;
}
.song_titel .current_show span, .song_titel .current_song span {
font-size: 12px;
color: white;
line-height: 22px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
}
</style>
<script>
function show_proto() {
if ($("#chat").css('display') == 'none') {
$("#chat").show();
} else {
$("#chat").hide();
}
}
</script>
<div id="chat" style="z-index:1999999;display:none;">
<iframe id="chat_frame" src="http://www.muzik.gr/chat/index_mini.php" width="470" height="540" name="chat">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
<div style="z-index: 1000000;" id="chatbtn" onclick="show_proto();">
<h3>Chatbox</h3>
</div>
<div>
<style>#contactus{position:fixed;bottom:0;left:0;background-color:#000;width:300px;padding:10px;color:white;display:block;z-index:99999;}#contactusbtn{background:#666;width:310px;position:fixed;bottom:0;left:0;z-index:14;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-left-radius:5px;background:#333;cursor:pointer;}#contactusbtn h3{background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);background-repeat:no-repeat;background-position:-5px -574.5px;margin:0;font-size:20px;padding-left:40px;line-height:2.2;color:#fff;font-weight:700;}#box{position:relative;width:890px;height:100px;top:130px;z-index:14;margin:0 auto;}#box .right_part{width:810px;height:100px;float:left;}#box .right_part .top{width:790px;height:54px;margin-left:10px;}#box .right_part .bottom{width:810px;height:45px;}#box .right_part{width:80px;height:100px;float:left;}.media_icons{width:190px;height:45px;display:inline-block;float:left;text-align:center;}.song_titel{width:510px;height:45px;display:inline-block;float:left;text-align:center;}.social_icons{width:150px;height:45px;display:inline-block;float:left;text-align:center;margin-top:-40px;}.twitter a{background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);background-repeat:no-repeat;background-position:-10px -480px;width:32px;height:32px;float:left;margin:10px 7px 10px 0;}.facebook a{background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);background-repeat:no-repeat;background-position:-10px -532px;width:32px;height:32px;float:left;margin:10px 7px 10px 0;}.twitter a:hover{background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);background-repeat:no-repeat;width:32px;background-position:-10px -480px;height:32px;float:left;margin:10px 9px 10px 0;}.facebook a:hover{background-image:url(http://www.muzik.gr/wp-content/themes/theme18309/images/spriteme1.png);background-repeat:no-repeat;width:32px;background-position:-10px -532px;height:32px;float:left;margin:10px 9px 10px 0;}#-webkit-keyframes NAME-YOUR-ANIMATION1{0%{opacity:0;}100%{opacity:1;}}#-moz-keyframes NAME-YOUR-ANIMATION1{0 {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes NAME-YOUR-ANIMATION1 {
0 {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes NAME-YOUR-ANIMATION1 {
0 {
opacity: 0;
}
100% {
opacity: 1;
}
}
.black_overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: .8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
bottom: 6%;
left: 0;
padding: 1px;
border: 1px solid black;
background-color: white;
z-index: 1002;
overflow: auto;
}
#tunein {
float: left;
margin: 3px 0px 0 -1px;
margin-top:15px !important;
}
#tunein img {
margin: 3px;
opacity: 0.8;
}
#tunein img:hover{
opacity: 1;
}
.song_titel .current_show, .song_titel .current_song {
font-size: 15px;
color: #FD0E62;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
height: 20px;
line-height: 20px;
}
.song_titel .current_show span, .song_titel .current_song span {
font-size: 12px;
color: white;
line-height: 22px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
}
</style>
<script>
function show_proto() {
if ($("#contactus").css('display') == 'none') {
$("#contactus").show();
}
else
{
$("#contactus").hide();
}
}
</script>
<div id="contactus" style="z-index:1000000;display:none;">
<iframe id="contactus_frame" src="http://www.muzik.gr/contactus/contactus.php" width="290" height="600" name="contactus">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
<div style="z-index: 1000000;" id="contactusbtn" onclick="show_proto();">
<h3>Contact Us</h3>
</div>
</div>
`
The Chat box button was working before i added the contact us button. after i added the contact us button it brings the contact us button frame

Answer 1

Thanks for a comment from #TamilSelvan! i could solve my problem!
The problem was that both of the buttons are calling the same js function! show_proto()
So what i did is changed the second function to show_proto1() and it solved my problem!