I am using Swipebox through the responsive lightbox plug-in and the bar with close button at the bottom gets covered by the iPhone bottom nav so you can't close the enlargements. I tried adding padding in css, but it doesn't seem to work. I love the way that swipebox works and looks, but it may not be an option for me if you can't close the enlargements on the iPhone.
When you touch the bottom area on iPhone it evokes this bottom iPhone nag which covers the swipebox close button. I would think the solution would be to either swap the top caption bar of the swipe box with the bottom bar that closes it, or to move the bottom bar up so it would not be covered. If I switch from landscape to portrait a couple of times it does move upon it's own. I have no idea why.
When I test the jQuery plugin at the swipebox site it does the same thing. So I am asking if anyone has modified this successfully.
Now I have at least a quick and dirty approach that is ok for the moment.
I set in the css at #swipebox-overlay height: 101%; overflow:scroll;
and in the js at
$('body').bind('touchstart', function(e){
window.scrollTo(0,1); ....
thats far from being perfect but works for me at the moment for an urgent project...
I had a similar issue on android. To puch the bar up to display above the buttons, just edit swipebox.css to the following:
#swipebox-action.visible-bars {
//bottom: 0px;
bottom: 50px;
}
#swipebox-action.force-visible-bars {
//bottom: 0px!important;
bottom: 50px!important;
}
That did the trick for me.
Related
I noticed a small issue with trying to open a modal from within a popover. in iOS on both my iPhone 6S Plus as well as the emulators, when I open these modals, the DOM becomes non-responsive. Text areas refuse to be clicked into, buttons won’t run functions when tapped. Buttons in the <ion-navbar> will work. Text inputs or textareas in the <ion-navbar> WON’T work.
Then, of course, in my <ion-content>, nothing will work, buttons, text areas, anything with a (tap) or (click). Has anyone else had this issue?
I should note that when I’m trying to open the modal from a page or other component, it doesn’t have this issue, ONLY when opened from a popover. Is this a bug within Ionic or could I be doing something wrong? No error shows up in my console for any of this. I could post some of my code, but the code is pretty much identical between opening the modal from the popover vs opening the modal from a regular page or component.
Thanks in advance, this is really weird :D
Adding this to app.scss solved the problem in iOS. I haven't seen any issues arise from doing this:
.disable-scroll .ion-page {
pointer-events: auto;
}
My quick fix for this issue is similar to #StevieStar solution, but I applied it to the opener classes for both Popovers and modals as it can happen with either kind of window because they are all kept in the same modalStack
In your custom css file
.modal-open{ pointer-events: all ; }
.popover-open { pointer-events: all ; }
This fix does not override a modal's or popover's behavior when backdropClickToClose:false is set either. The surroundiung area is still not clickable.
I am building a site that has a header with a fixed position which contains a select menu. The header is supposed to stay locked to the top of the screen due to the position:fixed in css. However, when clicking the select menu in mobile safari on iphone, the header no longer stays locked to the top when the ios select menu opens. It seems that ios is centering the div with the select menu onto the visible area of the screen above the menu. This doesn't happen when the page is scrolled to the top, but when the address bar is not visible, it "breaks" like so. Haven't found any other answers, maybe I'm asking the question the wrong way. I can't post links to code yet, any help is appreciated.
http://selfconstruc.tv/menu-open.PNG
http://selfconstruc.tv/menu-closed.PNG
For now I don't think there is a perfect solution to deal with the focus jumping.
In my case I hide the header on focus in and show again in focus out and it works well.
I don't know if in your case this could be a workaround.
You can try this:
// detect ios device
if(navigator.userAgent.match(/(iPad|iPhone|iPod)/gi)){
// hide header on focus in and show on focus out
jQuery("#content").focusin(function(){
jQuery('#your-header-id').hide();
})
jQuery("#content").focusout(function(){
jQuery('your-header-id').show();
})
}
The #content is a div where you should have all your controls, the jQuery .focusin() detects the focus event on parent elements, so every control will trigger the focus event. You hide the header on focus and show after that. Hope this helps!
I've seen plenty of scripts on the web about hiding the address bar by scrolling down to hide it etc. But I noticed that Apple actually hide it completely as in make it disappear!
http://help.apple.com/iphone/5/interface/ on your iPhone you will see the bar removed...
How do I do this? Thanks
They're doing event.preventDefault() on the touchstart event and handling scrolling in their own code.
They're not removing it. It's behaving in the same way as every other webpage does in Mobile Safari. The difference appears to be in the way they're displaying the page itself. If you tap on the Status Bar while looking at that webpage the navigation bar appears for you.
I switched my useragent on Safari to Mobile Safari and it looks like they're not actually scrolling the page when you swipe, but have a div setup with overflow:hidden; and you're scrolling inside that div instead of the page itself.
(Edit: This appears to be in addition to hiding the bar by scrolling down the page)
To hide the address bar, use jQuery and execute the following on document load:
jQuery(function($) {
$('html,body').scrollTop(0)
};
The address bar will disappear and will reappear only if the user touches the screen to make it reappear.
I am creating a wepapp, that has a horizontal menu. The menu is limited to 320px and has overflow set to hidden. Inside the links are wrapped in a div which has a width set to it. The list overflows on the x axis. I have applied a jquery plugin called OverScroll so you can drag this list left and right to reveal the hidden menu items.
It works great on a desktop browser but I am having difficulty on getting this to work on the iphone.
I have set up a demo at www.irfanyasin.com/iphone/
Any ideas?
Thanks
Apart from general usability issues (will people know it's slidable? I could see how this can be annoying if you use that menu often and have to slide it a lot), dragging doesn't work on most touch interfaces. You could try adding left and right buttons that scroll the menu when they click them maybe?
Also your demo doesn't work in Chrome on my desktop. Is the menu supposed to slide? It won't.
Hey, I'm just wondering if there is a way to modify the popup that appears after you've hit the 'like' button.
Right now, it appears to the right of the like button.. Problem is, the button is to the very right of the page, so it bleeds off.. Is there a way to customize the positioning of this box?
Thanks
You can only move the popup with CSS, you can't apply styles to the content of the iFrame.
If you have the like button too close to right you can use this:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: -150px !important;
left: -150px !important;
}
The arrow's problem is that it's inside an iframe, so you can't apply css to it.
I hope facebook will provide a way to customize all theres widgets.