The CSS property position:fixed has is not functional with iOS5. However when the user pinch zooms on iOS5 or MAC OSX lion the header becomes unusable as it modifies it's sized to adjust and compensate in a manner that tends to move the content in question off screen.
What we need is a means that prevents the fixed element from zooming whilst allowing the other content to zoom. Is this possible?
You would have to create a full-screen wrapper that contains your header, then set meta tags to disable scaling for the page. The content want to zoom like normal would then need to exist inside that wrapper, and have scripts that respond to touch events. Guide to get you started . . .
Related
I have a site that I'm working that has navigation bar with secondary block-level elements (images in my case) inside the <a> tags which respond to the window size by either floating or not floating. As long as a user never resizes their browser window after loading the page, the issue would never occur, but it appears as though if the page is stretched wide, and then scaled down without reloading the page, the float style attached to the main CSS declaration (not inside a #media query) fails to activate.
http://jsfiddle.net/MrPickle/ace1rtrq/
Here's an example the behavior that I'm seeing (with the same css code I'm using for layout). If you play with the size of the result panel, you can see what I'm talking about.
I know that I could use javascript to monitor the width of the page and add or remove a .left class to the inner element as needed, but I don't think that's the most elegant solution possible. Has anyone ever run into this kind of an issue?
This site I've built at http://www.bridetobe.co.uk/ is doing something odd when I try and view it on a mobile device. I'm using some media queries to make it responsive and what happens when I view on a mobile #sitehead seems to be covering up most of #homepage_slider below(see image below).
From looking at the CSS on #homepage_slider I don't see any absolute positioning making it be in a particular place in this instance.
Does anyone know how I can make #homepage_slider position itself below #sitehead rather than behind it?
Thanks
#sitehead is position fixed so you either need padding at the top of the body (matching the height of your header) to push you slider down or not have your header fixed (make it relative). It works on the desktop as your sitehead is relative.
I'm displaying mathematical expressions in a webview (using jqmath library and some CSS). One requirement is that expressions should be centred, and here's what I use to achieve that:
<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;text-align: center;}</style></head><body><p>here goes the expression</p></body></html>
Since rendering math takes some time, the webview is hidden while the expression is rendering, and displayed only when it is ready (once the WebViewClient's onPageFinished has been called). This worked well until Android 4.4.
The problem with the new webview seems to be that it only applies CSS when it is visible on screen. So after revealing the hidden webview, the expression first appears in the top left corner, and only after ~0.1 seconds "jumps" to the center. This looks ugly, since I have to display many expressions in quick succession.
A related problem is described in this question: width:100% in CSS not rendering well in Android 4.4. The asker was able to solve his problem by removing the display: table; from html, but that doesn't work in my case.
So is there a way to either:
(a) force the new (Chromium-based) webview to render content while it is not visible, or
(b) display the content at the center from the beginning (without first displaying it in the top left corner).
It is not true that the KK WebView applies CSS only when visible on screen:
the WebView will not size itself if it has visibility set to GONE because the Android framework will call layout-related methods on it (like layout and onSizeChanged). This might be what you're seeing. Try setting the visibility to INVISIBLE instead.
WebViewClient.onPageFinished is not a reliable trigger for showing your WebView. What the callback really means is that the resource for the main frame had been loaded from the network. Unfortunately there never was a reliable callback that would tell you 'your content is ready to be displayed' - what you're describing probably happened to work because of particular timing. The most reliable way to not show unfinished content would be to do so in the HTML/CSS.
you might be using WebView.loadDataWithBaseUrl to load your contents into a new/blank WebView - this API is has an effect similar to re-writing the page's content (rather than issuing a 'real' navigation) and can result in weird layout. If possible use loadData or loadUrl. If neither of those are feasible try calling loadUrl("data:text/html,<body style=\"margin: 0px;\"/>"); before loading the real content (wait at least till you get an WebViewClient.onPageStarted callback for that bootstrap URL).
you might be setting height to WRAP_CONTENTS. This is very unlikely to cause the issues you're describing, but it would be good to rule out. Try setting a width of MATCH_PARENT and a height with a fixed number of pixels.
I've looked and there doesn't appear to be another post the is exactly what I am looking for, and I am on a deadline to make this work so lets see if I can explain it better.
We have one page in development on a Drupal site that uses Panels and Views Slideshow. There are a lot of absolute and fixed position elements because of where they need to be on the page. The parent div needs to have a width and height of 100% to fill the page. Keeping in mind that the point of this page is to not have scrollbars and present everything to the user no matter what screen size they are on. So I have media queries cleaning up elements where need be on certain screen sizes.
Though when a user uses their browser to zoom into the page, the elements start shifting and stacking on top of each other. I believe this is because the 100% height/width is adhering specifically to the window size and doesn't expand beyond the window when a user zooms in.
I was able to fix it by removing the 100%'s and replacing them with pixels, but this becomes an issue because if the screen isn't the correct height or width, then you have scrollbars and the user doesn't immediately see everything on the page.
Is there any JavaScript or anything that can utilize the 100% height/width and allow them to expand beyond the page, and turn on scrollbars, during Browser Zoom?
Keep in mind that if a user is zooming in, its OK for the page to spill off and scrollbars to show, but the default screen this is not allowed.
I hope this is OK to show but an example of a page that uses Javascript to scale the entire page is pretty much what I can see myself needing but don't know how.
http://www.ammunitiongroup.com/
Any help appreciated and the quicker the better of course :)
This should help. Lets you detect the browser zoom level in mordern browsers.
https://github.com/yonran/detect-zoom
Example page:
http://htmldoodads.appspot.com/dimensions.html
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/