Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Z-Index and Safari

  1. #1
    Join Date
    Feb 2013
    Posts
    54
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default Z-Index and Safari

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

    HTML Code:
    <div class="popup">
    								<div class="close_popup" align="right">X</div>
                                       	<div align="center">
    										<?php echo $popOut; ?>
    									</div>
                                </div>
    Last edited by DS928; 09-23-2013 at 09:37 PM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,686
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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?
    Last edited by jscheuer1; 09-23-2013 at 04:34 PM. Reason: looked at the page, add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2013
    Posts
    54
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    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 .

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,686
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2013
    Posts
    54
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,686
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2013
    Posts
    54
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

    This is the Javascript I am using.
    Code:
    		$(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.

    Code:
    <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
    Last edited by DS928; 09-23-2013 at 05:41 PM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,686
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    DS928 (09-23-2013)

  10. #9
    Join Date
    Feb 2013
    Posts
    54
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Default

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

  11. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,686
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

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

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

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Changing index.html to index.php TO-DO list
    By BillTheBuilder in forum Other
    Replies: 0
    Last Post: 03-09-2012, 08:37 PM
  2. Static Index page, with changing iframe pages w/o leaving index help
    By Wolfman72 in forum Looking for such a script or service
    Replies: 3
    Last Post: 04-12-2011, 03:19 PM
  3. Replies: 11
    Last Post: 06-01-2009, 12:12 AM
  4. index.php?display=... > index.php/view/id
    By jmh1988 in forum Looking for such a script or service
    Replies: 1
    Last Post: 10-21-2008, 04:19 PM
  5. Replies: 0
    Last Post: 08-05-2007, 09:32 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •