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 /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................


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
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:

www.schuremediagroup.com

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:

www.schuremediagroup.com

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.

[DS928]

Thank you John. Resolved is good. I will do that. Once again, thank you for your help.