I don't have that much exp with css. I am testing the html in my iphone. The problem is that sometimes the div is not visible but still it responds to touches. When I debug in Safari by connecting it to a mac machine, it shows the div in the inspector but it is hidden on the device.
When I test the same on my ipad, And in portrait if my div is invisible and if I change the orientation, it becomes visible. I don't understand the magic thats happening here. Need some expert guidance on this. I want to display the HTML DIV and also need to enable touch. Please help.
Here is the css which I am using:
#container {
margin-left: 0px;
margin-top: -20px;
padding-right: 0px;
background-position: 0px -2px;
background-repeat: no-repeat;
position: absolute;
-webkit-transform-origin: 0px 0px;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
background-color: yellow;
-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transition-duration: 0ms;
-webkit-transform: translate3d(0px, 0px, 0px);
}
It can be done using CSS pointer-events
Try setting
div
{
pointer-events: none;
}
For different view ports (different screen widths), prefer using css through Media Queries, it's the preferred method these days.
Related
I'm working on an iframe where I'm trying to overlay the iframe on top of a web page. The iframe is a floating button that remains on the bottom right of the webpage no matter where the user is on the page. The issue I'm having is that while scrolling works perfectly, the buttons and links on the base html page (where the iframe is called) are not functional anymore. The code for the iframe is here:
<iframe src="ka.html" title="KA"
style=" padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;"
height="100%" width="100%">
</iframe>
How can I get the base layer functionality working? I really appreciate any help I can get.
I have a serious issue with my dropdown settings on iOS Safari. Imagine a website, which has a header on the top. If you click the header, it will slide down, just like any notification center on mobile phones. The way I chose was quite simple. I have a <div class="settings hide"> with this css:
.settings{
position: fixed;
width: 100%;
height: calc(100vh + 60px);
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 10;
}
.hide{
top: -100vh;
}
Now, this makes it look like so:
Now, the next step was to create it "slide-able" which I've done using jQuery, by adding class called "show".
.show{
top: calc(0vh - 60px);
}
And this actually made it great. It just worked! Suddenly I tried the website on my iPhone, and because of the bottom bar, always showing until you scroll, my hipe was all gone.
Because it look like this:
Getting it so far? My menu did slide correctly, looks great in any browser, but here in Safari, it is hidden right behind the bar, so user actually can't close it.
I tried my best to solve this issue, butnothing really worked as I wanted.
PS: I assume you know that, but it kinda works when you use bottom: 0;, then it "knows" about the bar and stops correctly right above it. But because the setting is calculated with top position, it does not do the animation, which is necessary for my design.
Any help/solution appreciated!
David, unfortunately iOS Safari is full of unpleasant surprises.
One of them is what iOS Safari considers 100vh.
Viewport height in iOS Safari is not equal window inner height as in Chrome or Firefox.
E.g. on iPhone 7plus 100vh == 696px, but window.innerHeight == 628px.
On iPhone 6 100vh == 628px, but window.innerHeight == 559px.
And so on...
So the solution is getting rid of 100vh.
Assuming that body is offset parent of .settings use 100% instead:
.settings {
position: fixed;
width: 100%;
height: calc(100% + 60px);
...
}
.hide {
top: -100%;
}
Also you do not need to use calc in your .show class (since 0vh === 0):
.show {
top: -60px;
}
I am using Bootstrap 3 framework, and the columns they use seem to do a lot of the centering of content for me
using the css
.test {
position: absolute;
z-index: 9;
left: 50%;
transform: translateX(-50%);
opacity:0;
transition: opacity 0.5s ease;
}
inside a div with position relative.
works fine in firefox, wondering what needs to be added for it to work the same in safari. I know there are browser specific css to add for cross browser compatibility
I had the same problem and I fixed it with webkit prefix:
.test {
position: absolute;
z-index: 9;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
opacity:0;
transition: opacity 0.5s ease;
}
To get rid of these problems, i suggest you use a javascript library like this:
http://leaverou.github.io/prefixfree/
You can happily code your css without adding browsers prefixes, prefixfree will do it for you!
I am trying to build a sidebar navigation like the one used in the Wordpress admin dashboard. I like the option to collapse the sidebar but still see the icons. I'm using Zurb Foundation and jQuery. I finally have a solution that I think might work, but it's doing some funny things. The <li>s are all different widths, until I collapse and reopen the menu for the first time. Then they all stay the same size. So here are my questions:
How can I make the lis be the same size on the first load?
How can I make the main content resize and push over when the sidebar opens (instead of getting pushed down, which is what is currently happening)?
I want the sidebar to appear open on the first page load (with icons and titles), but then if the user toggles it closed (to just the icon view), it should stay closed as they navigate the site. How do I do that?
Here's a jsFiddle with my code.
Here you have a tutorial to do this, and works like a charm, you only need to adapt it to Foundation tutorial
In your particular case, since you want to have teh icons always visible, just open components.css and replace
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 0px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
with
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0px;
left: 60px;
overflow: hidden;
width: 60px;
border-top: 1px solid #C6D0DA;
background: none repeat scroll 0% 0% #FFF;
transform: translateX(-60px);
transition: transform 0.3s ease 0s, width 0.3s ease 0s;
}
I'm developing a phonegap app for iphone and android.
I have a black overlay with a loading message that appears when the user clicks on a button.
Everything is fine on ios, but on android, the fadeIn() function only displays parts of the overlay. Like, really, parts. Sometimes just the bottom, sometimes the bottom and the top right corner... Really weird.
Although if I use .show() instead, everything goes right.
Have you ever seen something like this ? (terrible quality but you can see the overlay on the bottom half, and a semi-transparent piece of overlay on the top right corner.)
What's wrong with the .fadeIn() function on android ?
(Here is the css if you need it)
.black-overlay {
position: absolute;
width: 100%;
height: 120%;
background-color: #000;
color: #FFF;
display: none;
z-index: 99999;
top:0;
}
And the beginning of the HTML code :
<body class="side">
<div class="black-overlay row-fluid"> //overlay
<div class="span12 loading-splash">
<div class="span12"><span>Chargement...</span></div>
<div class="span12 span-no-margin"><img src="img/ajax-loader_black.gif" alt=""></div>
</div>
</div>
<div class="app container-fluid event-creation"> //Rest of the app...
Here's some CSS that I use for background overlays.
.ajax-loader-background
{
background-color: rgba(0,0,0,0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
zoom: 1; /* Force hasLayout in IE. */
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99999;
}
I'm not sure why you get a different result with .fadeIn, except that jQuery might need to know the width/height of the element, and if it's not visible it has zero width/height.
I've noticed slight differences between width: 100% and left: 0px; right: 0px. Same with height: 100%. You're also setting the height to 120% which I've never seen done with absolute positioning. You should not have to do that for an overlay.