I'm in the process of coding a sticky notification bar seated at the bottom of a mobile screen. I want the bar to be stuck at the bottom of the users screen until the user has reached the scroll position of where the bar is actually positioned in the code (which is just before the footer of the page).
I have pretty much copied the "doctor" example from this page: https://alligator.io/css/position-sticky/
My problem is: On my page, the bar works fine when using Android Devices or when simulating a mobile device by adjusting the Browser width on my Desktop Computer. However, on iOS, the bar is not sticky, i.e. it just sits at its position and doesn't stick to the bottom of the screen until reached. This applies to both Safari and Google Chrome.
The weird thing is: On the previously mentioned alligator.io page, it works just fine on my iOS device.
I suspect this is some kind of Webkit problem having to do with the code surrounding the bar, but I cannot isolate it. I have tried debugging by adjusting my code as far as possible to the example from alligator.io, but I cannot get it to work. I have also tried looking for any overflow:auto in parent elements - without success. I have been trying to fix this for several hours and am sick and tired of the problem and could use another pair of eyes to help me find what I'm overlooking.
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
position: -webkit-sticky;
position: sticky;
bottom: -50px;
align-self: flex-end;
}
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
You can visit the live page I am working on at (hidden on request of the customer, please contact me privately).
Simply start any (suggested) search and the bar will pop up (or not, if you are using iOS...)
Thanks in advance for your help.
I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.
As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.
This is the real answer
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
and works!!!
Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.
For me nothing worked except jQuery/javascript in this way: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:
#stickyElement {
position: absolute;
left: 0;
}
function scrolling(){
$('.someElementScrollingLeft').on('scroll', function() {
let offset = $(this).scrollLeft();
/* For me it only didn't work on phones, so checking screen size */
if($( window ).width() <= 768)
{
let stickyElement = $('#stickyElement');
stickyElement.css("left", offset);
}
});
}
In my case in full screen menu it was overflow-y: auto. I eliminated this issue by adding: overscroll-behavior: contain.
I visited a website and may be I found solution for you.
Try this it may can help you:
#jobalarm_mobile {
display: none !important;
}
and then place your notification <a> tag at the end (after <footer> tag)
//write this css
.jobAlertToggle{
display: none;
}
#media (max-width: 767px)
.jobAlertToggle{
display: block;
width: 100%;
position:sticky;
position:-webkit-sticky;
bottom:-50px;
}
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
-webkit-align-self: flex-end;
align-self: flex-end;
}
For my problem it was:
I had { contain: paint; } in ancestor (container above inside-container).
Changed it to { overflow: clip; }
Sticky would not work if contain: paint was present regardless of having overflow: clip.
This was tested on Iphone 15.4.1. Other tested devices didn't break with contain: paint (tested on chrome, ipad, android)
I had so many problems with this issue as well. The sticky position wouldn't work on my phone - not in Safari or Chrome.
I tried placing the element that I wanted sticky in the top of the surrounding wrapper - it worked! Apparently the sticky position can't really work if there is something above it inside the same parent-wrapper. You don't have to change your order or design, you can just create a wrapper that's around the content, with the sticky element in the top.
<div class="container">
<p>Some text above the sticky element</p>
<div class="inside-container">
<div class="sticky-element">
<p>This is sticky</p>
</div>
<p>Some more text, that scrolls past the sticky element.</p>
</div>
</div>
I think the Problem is, that Safari (the Browser of iOS) does not support position: sticky properly. See this Article (https://caniuse.com/#feat=css-sticky). Read the Known Issues Section to find aut more. Maybe, you have to deactivate it for iOS and show a note on your Page, that its not working properly.
I hope, I could help you.
Use for ios position: -webkit-sticky and for other case position: sticky
I want to add youtube video on website. I want, There will have only control panel. and need to hide top title and logo.
But If hide the title, then never hide logo / watermark logo.
But I need to hide twice (title+logo).
How can I do this ?
This is my code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/Oo00q-l8VKQ?modestbranding=1&autoplay=0&rel=0&showinfo=0" frameborder="0" allowfullscreen>
</iframe>
Try try this jsfiddle.net
<style>
.video-wrapper {height: 153px; width: 272px; position: relative; overflow:hidden}
#YouTubeVideo1 {height: 262px; width: 272px; position: absolute; margin-top:-55px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-wrapper">
<iframe id="ytplayer" type="text/html" width="272" height="252"
src="https://www.youtube.com/embed/M5h3U_nNn3k?autoplay=1&controls=0&fs=0&rel=0&showinfo=0"
frameborder="0" allowfullscreen></iframe>
</div>
As you should have read from HERE, it is not possible to remove ALL branding from the player window.
It is a corporate product that they have made. As such they advertise that it is their player (from their site) for their use with sharing functionality for us.
Considering the work that goes into a product like the YT-Player, and that they give us so much access to the api. I think it is reasonable.
If you do not want any branding, you should have your own player and content.
I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}
There's an iframe, which basically has more content than fits into the frame. The sizing of the frame is based on the browser screen size and lets the overflow scroll, which works perfectly on all browsers, except for iOS. On iOS, safari decides to resize the frame to fit the content. Not what you'd expect.
Example code on jsFiddle:
http://jsfiddle.net/R3PKB/2/
Try it out on your iOS devices:
http://jsfiddle.net/R3PKB/2/embedded/result
The HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
The CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}
You can make it work by adding a wrapping div with overflow: auto; and -webkit-overflow-scrolling:touch;.
Here's your example with it: http://jsfiddle.net/R3PKB/7/
According to previous questions on SO it's a bug since iOS 4. I found more info here:
https://stackoverflow.com/a/6721310/1047398
iframe on iOS (iPad) content cropping issue
This is an old question, but since it comes first on google and the issue exists on nowadays ios devices, I repost a better fix that I found on this page:
How to get an IFrame to be responsive in iOS Safari?
Basically, if you have an iframe with scroll (let's say a twitter widget), the solution above won't work very well because it makes the parent scrollable. The fix that worked for me is replacing height: 100% with height: 1px; min-height: 100%;.
If iOS Safari is displaying your iframe content from a different origin than expected (i.e. it is shifted over by some pixels), try adding scrolling="no" as an attribute to the iframe. This should prevent it from automatically fitting its content.
More here.
using height: 1px; min-height: 100%; did not work for me, though I did not need a scrolling element. I had to use the overflow:auto; on a surrounding div instead. Note that this method is discouraged as it may have unintended consequences, but I tested on Android/iOS and desktop browsers and could not find any issues yet. fingers crossed.
This is a nice post from Andy Shora on some iOS iframe nuances: http://andyshora.com/iframes-responsive-web-apps-tips.html
I have included the Facebook like box code on my website. However for some reason when viewed on an iPad the embedded Youtube links show outside the iframe (the other content does not). I have tried wrapping this with a div and applying overflow: hidden but still no joy.
It works fine on all browsers on the PC (including Safari) and as such I cannot figure out where to go with this one.
Usually with embedded videos I include wmode="transparent" in the embed code which usually sorts it. However because Facebook generates the code so I cannot access the content generated in the widget.
Any help would be much appreciated, as I have been banging my head against the wall about this for days.
Cheers
HTML
<div id="fb-root">
<iframe id="facebookscroller"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMorgan-Motor-Company%2F209507192406727&width=450&colorscheme=dark&show_faces=false&border_color&stream=true&header=false&height=395"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:450px; height:395px;"
allowTransparency="false"
wmode="transparent">
</iframe>
</div>
CSS:
#fb-root {
position: absolute;
top: 50px;
right: 10px;
z-index: 4;
height: 395px;
overflow: hidden;
display: block;
}