When I tried to select a value using jQuery Mobile select menu, it disturbs the screen resolution.
Is there any Javascript solution like window.resize() to overcome this problem.
Related
I have implemented side menu for my IONIC 5.0.0 application. In smaller device side menu is shrinking to Hamburger icon (working fine). I want the same behavior in large screens also but unfortunately the menu is fully visible in the landscape mode of my iPad (6th gen). Does anyone know how to hide the menu in Hamburger icon always (for all device).
Seems you need to use when="false" property in the ion-split-pane component. Please find app.component.html. The location should be like src/app/app.component.html and change the following line from
<ion-split-pane>
to
<ion-split-pane when="false">
To learn more about the ion-split-pane component, visit this link.
we have a page with a search box. search box is displayed using an iframe. on that search box, we have multiple select boxes.there is a select tab to select children.if user select the option for "more", another dynamic div will be displayed. when this div is loaded, scroll bar is displayed so user can scroll down to add more. this is working fine on all browsers, but scroll bar is not displaying when we test that page using ipad or iphone.
what is the reason for thsi and how can we solve this?.
Thanks
Please check outer div property.
may be in css used overflow:hidden;
You need to remove it,
If possible please share URL,
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!
On this site : mecanomedic.com, the menu template work fine in "normal" desktop browser, but dont slide down on ipad-iphone device. What can be the problem ?
Some tell me it's a css problem, but HOW safari desktop work ?
The problem is that the menu expansion relies on the user hovering with a mouse. On touch devices like iPads & iPhones, the hovering gesture can't be replicated because there's only one input- touch. If I were you, I'd take a look at Twitter's Bootstrap menu setup and perhaps use media queries to serve up a different menu on smaller screen sizes.
Here's an example of a Bootstrap navigation bar in action (you'll have to inspect the code to see how it works).
Add a href to the top-level <a>'s so that they can be focusable:
Produits
Elements that are focusable receive mouse events and hover styles when the user taps on them.
As #Matt stated, the problem is that your menu relies on a hover event and unfortunately that event is unavailable on touch screen devices.
One way to fix this would be to:
Check if the current user's device is an iOS device
If the device is an iOS device, use javascript to trigger a menu item's "show event" when the menu button is CLICKED instead of ROLLED OVER / HOVERED.
This would result in the menu being shown when the user taps a menu button.
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.