pwntastic Posted August 17, 2013 Share Posted August 17, 2013 (edited) Hello, I'm having a problem with a popup I'm making. This problem is only in the android default browser however it works well in any other browser. With JavaScript, I found out that when I click anywhere within the popup, it doesn't tell me I'm in #popup, it tells me that I am in the #popup_wrapper I imagine it's something witht he size because when i zoom out it works well. What would cause this issue? Thanks in advance. My code is actually inline and not like here. I just put it out like this because I thought it would be easier to read. <style type="text/css"> #popup_wrapper{ overflow: hidden;z-index: 100;width: 100%;height: 100%;background-color: #c0c0c0;background: rgba(0, 0, 0, 0.5);position: fixed;top: 0px;left: 0px;font-family: 'Karla', Arial, Sans-Serif;color: #5a5353; } #hor_wrapper{ width: 100%;height: 450px;position: relative;top: 15%; z-index: 101; } #popup{ height: 450px;width: 450px;margin: 0 auto;background-color: #fff;border-radius: 7px;box-shadow: 3px 3px 5px #000; z-index: 110; } #popup_header{ width: 400px;height: 150px;margin: 0 auto; } img{ width: 250px;height: 100px;position: relative;left: 75px;margin: 15px auto; } h1{ text-align: center; font-size: 25px; margin-bottom: 0px; } p{ width: 350px;height: 40px;margin: 15px auto;line-height: 20px;font-size: 16px; } #opt1{ line-height: 100px;border: 2px dashed #fcc4ab;outline: #fcc4ab solid 2px;text-align: center;color: #fff;height: 100px;width: 150px;background-color: #fcc4ab;float: left;margin: 40px 20px;text-transform: uppercase; cursor: pointer; } #opt2{ line-height: 100px;border: 2px dashed #aca9a9;outline: #aca9a9 solid 2px;text-align: center;color: #fff;height: 100px;width: 150px;background-color: #aca9a9;float: right;margin: 40px 20px;text-transform: uppercase; cursor: pointer; } </style> <div id="popup_wrapper" style=""> <div id="hor_wrapper" style=""> <div id="popup" style=""> <div id="popup_header" style=""> <img src="image.jpg" alt="image goes here" style=""> <h1 style=""> Lorem ipsum! </h1> <p style=""> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. </p> <div id="opt1" style=""> Option 1 </div> <div id="opt2" style=""> Option 2 </div> </div> </div> </div> </div> Edited August 17, 2013 by pwntastic Quote Link to comment https://forums.phpfreaks.com/topic/281284-css-android-issue/ Share on other sites More sharing options...
Solution Irate Posted August 18, 2013 Solution Share Posted August 18, 2013 If I'm not mistaken, Android browsers handles click events with propagating up to a higher hierachy. Add, within the click function, the line event.stopPropagation();, which will prevent any event from bubbling up to a higher hierachy element. So, for example, $('#popup').click(function(e){ e.stopPropagation(); /* rest of your code here */}); Quote Link to comment https://forums.phpfreaks.com/topic/281284-css-android-issue/#findComment-1445624 Share on other sites More sharing options...
pwntastic Posted August 22, 2013 Author Share Posted August 22, 2013 Yep that was what was happening lol thanks for your help. Quote Link to comment https://forums.phpfreaks.com/topic/281284-css-android-issue/#findComment-1446220 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.