Z-Index and Safari

[DS928]

I have a Div that pops up and is closed with an X in the corner. This closes in Explorer, Chrome but not in Safari, I beleive it is the z-Index causing this. How would I make this work in all browsers?

the link. www.schuremediagroup.com go to "contact" and hit send.

The CSS.

<style>
		.popup
		{
			font:Arial, Helvetica, sans-serif;
			font-size:36px;
			font-style:normal;
			font-color;#FFF;
			line-height:50px;
			display:inline-block;
			min-width:500px; 
			/*width:500px;
			height:100px;*/
			position:absolute;
			z-index:999;
			left:50%;
			top:30%;
			margin-left:-250px;
    		margin-top:-50px;
			border-style:solid;
 			border-color:#FFF;
			border-width:8px;
			background-color:#000000;
			opacity:0.6;
   			filter:alpha(opacity=60); /* For IE8 and earlier */
			padding:25px;
			border-radius-topleft: 20px; /* top left corner */
			border-radius-topright: 20px; /* top right corner */
			border-radius-bottomleft: 20px; /* bottom left corner */
			border-radius-bottomright: 20px; /* bottom right corner */
			border-radius: 20px 20px 20px 20px; /* shorthand topleft topright bottomright bottomleft */
			-webkit-border-top-left-radius: 20px;
			-webkit-border-top-right-radius: 20px;
			-webkit-border-bottom-left-radius: 20px;
			-webkit-border-bottom-right-radius: 20px;
			-moz-border-radius-topleft: 20px;
			-moz-border-radius-topright: 20px;
			-moz-border-radius-bottomleft: 20px;
			-moz-border-radius-bottomright: 20px;
		}
		</style>

The DIV itself

<div class="popup">
								<div class="close_popup" align="right">X</div>
                                   	<div align="center">
										<?php echo $popOut; ?>
									</div>
                            </div>

[jscheuer1]

In the future, please use the forum's bbcode tags to indent your code and make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] <!-- markup goes here -->.....[/html]
for js/css/other.......[code] code goes here................[/code]

The advanced editor (activated by using the 'Go Advanced' button from the simple editor) has buttons for PHP, HTML, and CODE braces. But for simplicity, you can just use the [code][/code] tag for any code if you prefer.

Your applicable post(s) in this thread have already been edited for you by a member of the moderator staff.

Also, please do not hot link to your pages. Give a text only link like (without http:// or www.):

schuremediagroup.com

or do:

[noparse]www.schuremediagroup.com[/noparse]

so it will look like:

www.schuremediagroup.com


Oh, and I loaded the page in Safari/Win and it worked fine. I guess you mean on a MAC, or a mobile? What device(s) are you seeing this problem in Safari on?

[DS928]

Thanks John. I tried that using the icons above. But it kept asking me if I want to leave the page? Next time I will manually place in the .

[jscheuer1]

OK, thanks. That's weird, which browser? And as I was editing my last post as you were responding, I will repeat the extra stuff here. I added (I do address your question a bit at the end):

Also, please do not hot link to your pages. Give a text only link like (without http:// or www.):

schuremediagroup.com

or do:

[noparse]www.schuremediagroup.com[/noparse]

so it will look like:

www.schuremediagroup.com


Oh, and I loaded the page in Safari/Win and it worked fine. I guess you mean on a MAC, or a mobile? What device(s) are you seeing this problem in Safari on?

[DS928]

Thank you. On an iPad and an iPhone I am having the problem.

[jscheuer1]

Is that where clicking (I guess tapping) on the formatting buttons causes a problem as well? They use a non-standard method to accomplish their objectives, perhaps that's not to those device's liking.

I have an idea about what you're asking about. It might not be the z-index at all. I would need to see the javascript that's used to assign the close event to the div. But I have seen where on those devices, a click is not always registered when a tap occurs, especially on something that's not a link or button. You may have to assign a touchstart event to the div.

I'll poke around and see if I can find the javascript. But if you know where it is, please tell me.

[DS928]

This is the Javascript I am using.

		$(document).on('click','.close_popup',function(){
    	$(this).parent().fadeTo(300,0,function(){
          $(this).remove();
    	});
		});

This is the code that is used to close the other Div's I was trying to maybe incorporate its close event. Just a thought.

<li id="page_TV2">
<div class="box1">
<div class="inner">
<a href="#" class="close" data-type="close"><span></span></a>
<h2>Television</h2>
<p class="color1 pad_bot2"><strong>Nightime shows we worked with.</strong></p>
<div class="wrapper pad_bot3">
<figure class="left marg_right1"><img src="images/page_Nightime.jpg" alt=""></figure>
<!--p class="color1 pad_bot2"><strong>SHows We-ve Been Involved With...</strong></p-->
</div>
</div>
</div>
</li>

Thank you

[jscheuer1]

Right, I found it right away, and it's on the document, so that will never work in those devices. This should take care of it, addition highlighted:

<script>
		$(document).on('click','.close_popup',function(){
    	$(this).parent().fadeTo(300,0,function(){
          $(this).remove();
    	});
		});
	if(document.addEventListener){
		document.addEventListener('touchstart', function(e){
			if(e.target.className == 'close_popup'){
				$('.close_popup').parent().stop().fadeTo(300,0,function(){
					$(this).remove();
				});
			}
		}, false);
	}
		</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

Hopefully that will not adversely affect anything else. Browsers without touch will ignore it, as will older browsers (IE 8 and less) that don't have addEventListener. Android might do a double close, but I added a stop() to the animation to prevent that.

I checked that it has no syntax errors in Chrome's console, but I have no iPad, or iPhone to test on. The same principle works in a menu script I updated recently.

[DS928]

John.
Thankyou so very much! It works! How do I close this thread?

[jscheuer1]

OK, Great! And I was thinking one of these two variations might be safer:

<script>
		$(document).on('click','.close_popup',function(){
    	$(this).parent().stop().fadeTo(300,0,function(){
          $(this).remove();
    	});
		});
	if(document.addEventListener){
		document.addEventListener('touchstart', function(e){
			var $t = $(e.target);
			if($t.hasClass('close_popup')){
				$t.parent().stop().fadeTo(300,0,function(){
					$(this).remove();
				});
			}
		}, false);
	}
		</script>

Or even:

<script>
		$(document).on('click','.close_popup',function(){
    	$(this).parent().stop().fadeTo(300,0,function(){
          $(this).remove();
    	});
		});
	if(/ipad|iphone/i.test(navigator.userAgent)){
		document.addEventListener('touchstart', function(e){
			var $t = $(e.target);
			if($t.hasClass('close_popup')){
				$t.parent().stop().fadeTo(300,0,function(){
					$(this).remove();
				});
			}
		}, false);
	}
		</script>

But to answer what I think is your question about changing the thread, you cannot close it, you can mark it resolved:

Go to your first post in the thread, hit:

Edit

Then in the lower right hit:

Go Advanced

Then in the top portion of the advanced editor "Your Message" section find the drop down for:

Prefix

Change it to Resolved.

Hopefully that will not cause the page to reload.

If you really want it closed, I can do that for you.