Dynamic close button only shows in Firefox

Greenhorn

Posts: 4

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

HI, I am working on a website and have managed to create a page that will play a youtube movie depending on which area of an image is clicked on. Everything seems to work fine, the movies open and play fine but the only problem is that the close button doesn't show in anything other than Firefox. I have tried adding an image as the close button's background but nope, makes no difference, it just isn't there. I've tried both internet explorer and chrome

I have spent several hours on this and it's driving me nuts, any help would be very gratefully recieved

here is the javascript

//Create dynamic Close Button Div
var closebutton = document.createElement('div');
closebutton.style.visibility = "visible";
closebutton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>";
//Add Close Button Div to YouTube Popup Div container
divobj.appendChild(closebutton);

here is the css

.close_button {
font-family: Verdana, Geneva, sans-serif;
font-size: small; font-weight: bold;
color: #666; text-decoration: none;
display: block; float: right;
background-color: #FFF;
z-index: 5500; cursor: default;
border: 2px solid #000;
margin-bottom: -2px;
padding: 0px 3px 0px 3px;
position:absolute;
top:1px;
right:2px;
background-image:url(images/coss.jpg);
}

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

This seems to work fine for me. What is different? Can you give a better example? Errors?

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title></title>
    <style type="text/css">
		.close_button {
			font-family: Verdana, Geneva, sans-serif;
			font-size: small; font-weight: bold;
			color: #666; text-decoration: none;
			display: block; float: right;
			background-color: #FFF;
			z-index: 5500; cursor: default;
			border: 2px solid #000;
			margin-bottom: -2px;
			padding: 0px 3px 0px 3px;
			position:absolute;
			top:1px;
			right:2px;
			background-image:url(images/coss.jpg);
		} 
      </style>
    <script type="text/javascript">
      
		function addBtn(){ 
			
                        //not defined in your example
			var divobj = document.getElementById("out");
			var id="a1";
			
			var closebutton = document.createElement('div');
			closebutton.style.visibility = "visible";
			closebutton.innerHTML = "<span onclick=\"closeYouTube('" + id +"')\" class=\"close_button\">X</span>";
			//Add Close Button Div to YouTube Popup Div container
			divobj.appendChild(closebutton);   
		}      
      
		window.onload = addBtn;
    </script>
  </head>
  <body>
		<div id="out">foo bar </div>
  </body>
</html>

Tracey Couchman

Greenhorn

Posts: 4

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi, thanks for your response.

I've managed to get it working, sort of...

Using the code I had the close button appears fine in Firefox but with any other browser it wasn't there. Eventually I moved the close button to outside the main window so that instead of sitting in the top righthand corner it was sitting on top of the top righthand corner, then it could be seen in all the browsers I have tried it in.

I don't know if it is a CSS thing although the only CSS attribute I thought could affect it like that would be z-index and I've made it a silly z-index number that would definately be on top

Brace yourself while corporate america tries to sell us its things. Some day they will chill and use tiny ads.

a bit of art, as a gift, that will fit in a stocking

https://gardener-gift.com