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,
Related
I am working on a project based on Ionic. I have a page consisting of three tabs.
When I switch between the tabs there is a white blank screen appears for a short period of time, but it looks like the whole page is getting refreshed.What I want to achieve is that the tabs should remain as it is. It should not look like tab gets disappears and then appears.only the content should change.
Any help will be appreciated.
you have to use show hide functionality. in your design three tabs are there right. so in your application create one main div and in that div put your three tab and inside your controller buy-default tab1 data show on load tab2 and tab3 div make hide. and if you click on tab2 then hide data tab1 and tab3. you do not change your whole page only data show hide. its faster and all header footer data as it is. and if you have any confusing then tell me.
I want to develop a firefox addon sdk to show a sidebar or a panel that contains an embedded browser with a navigation bar.
I have constraint too : Since the page shown in the embedded browser, I want to be able to inspect the dom, to hightlight some specific text and also to be able to select text from and send it to a specific input in sidebar with right menu.
Is there some examples or ideas how can I do this?
P.S : I'm sorry for my bad English ;)
Use sidebar module, create HTML file with a fixed textarea top:0, left:0, width: 100%. Create an iframe that takes up the rest of the sidebar. User enters text into the textarea, then listen for enter keystroke, use regex to see if it's a URL, and set iframe source to the URL if it's a URL or to a Google search if not.
Loading a whole browser into the sidebar seems like overkill, but if you really want to, try to load chrome://browser/content/browser.xul into the sidebar.
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!
There's an issue when accessing my website (http://www.zero11arquitetura.com.br) on iPad or iPhone with iOS 5 that I can´t fix. When window is scrolled thru code every position:fixed elements click event stop working. Can you please help me ?
This site structure uses a top menu div and a header div with position: fixed css. When user clicks on a menu item window scrolls horizontally until it reaches its target.
Clicking in the menu item is done by jQuery click method on each img tag and scrolling is done by jQuery animate method ($("html:not(:animated),body").animate({ scrollLeft: varDestino }, 1500);)
When page is loaded the menu works just as I intended but, after it scrolls thru menu, and I try to click on another menu item nothing happens. The strangest thing is that everything works again when user manually scrolls the window (by finger).
It looks like that by changing window scroll position by code (jQuery calls window.scroll) fixed elements lost its clickable position references.
Is there any workaround for this ?
Thanks,
I've solved this with a trick. I've created invisible divs over the menu items that changes it's position when page scrolls (simulating afixed element over the real position: fixed menu items). When user clicks or hover over those invisble divs the real ones are called
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.