<div class="result">
<div class="thumbnail">
<img src="80x80.png">
</div>
<div class="name">
Alex Hong
</div>
</div>
The page will have 400 of these! A list of people and their thumbnails, all different. I will use JQuery LazyLoad, so that not all images are downloaded immediately. (The images are only downloaded when the user scrolls to that portion of the site).
Will the browser be able to handle it? Please give your expert advice. thanks.
By the way, I don't know if LazyLoad will work or not:
Due to webkit bug #6656 Lazy Loading
wont give you any improvements in
Safari. It will load all images you
wanted it or not.
I don't doubt they'll be able to handle it but I would definitely do some sort of pagination 400 images is a lot for what I'm assuming will be a pretty small screen.
It will be very slow (at least on iPhone < 3GS).
In the sproutcore framework, there are long lists with lazy loading performing very well. You can check the UI demo.
But you can also use iScroll, because the default scrolling speed in webkit is very slow, and not adapted to long list like yours.
And finally avoid complex CSS in your list (like gradient etc..), because it is very slow for long list.
Related
I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
Major Edit: I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/Major Edit.
Here are some workarounds that worked for me:
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)
I would like to stop a UIWebView from loading specific images. The problem is that, although the images change, the domain name stays the same; for example, adsmarket.com.
<a target="_blank" href="http://network.adsmarket.com/click/imVtnmGcqZWQaWmcX8p8mItoasReyoCYj2JylV_Kf5qMYnLEYaB6lomQbJdknnqV">
<img width="728" height="90" border="0" src="http://network.adsmarket.com/stc/35021/6471901/ctv.png">
</a>
I want this blocked IN the UIWebView, and no, I can't edit the page's HTML.
You should try looking at this answer. Rob's suggestion (and a subsequent answer that expands on it) won't be trivial to implement, but is doable.
Or, check out this other answer to another question. In this one, yonel suggests implementing your own NSURLCache. When one of the images from adsmarket.com is requested, you would return an image from your cache (which could be a dummy image ... maybe clear or 1x1 pixel), instead of letting the request go to the real adsmarket.com server. The cached image would just be something local, bundled in your app, not a remote image.
I'm having some strange issues on <li> elements when viewing my webpage on an iphone.
There appears to be a mysterious padding added to the left of ALL <li> elements on the page (almost like a padding-left:30px) when viewing the webpage over 3G/Edge/GPRS. However, when viewing the page over wifi, the padding disappears, and the page renders as expected.
I use Eric Meyers reset.css stylesheet to reset my styles. This issue has happened to me on previous sites I've built so I know it's not localised just to this particular site. Perhaps O2 (my network provider) are modifying the css before sending it over to my iphone?
If you want to try and replicate this for yourself, my site is at http://www.pyre7.com
Any insight would be appreciated.
I've just found this article. It appears o2's proxy cache is in fact modifying content.
http://startupcafe.co.uk/2010/07/23/o2-compression-on-mobile-devices/
It could have something to do with slow speed of 3G and how you render CSS
I've got a UIWebView embedded in my iPhone app, and I'd like to keep a locked header and footer DIV on the page at all times, with a scrollable center DIV.
I know that I could do this using a header/footer that are UIView controls, but I want the header and footer to be HTML divs, as a pure HTML/JS/CSS solution will be easier to port to Android/PalmPre/AdobeAir, which is going to be on my todo list relatively soon.
I can do this using techniques like the one mentioned here:
http://defunc.com/blog/?p=94
But this requires that the user use 2 fingers to scroll the div, which is not satisfactory to me...
Any suggestions on how to do this?
Thanks,
Brad
I found someone that implemented a reusable solution for this, with a header and a footer:
http://cubiq.org/iscroll-4
I'm not too familiar with the UIWebView, so this may be a totally silly suggestion. But is there anything stopping you from having three UIWebViews on the page? One for the header, one for the body, and one for the footer. Because breaking it up sounds like the right idea.
Is this what you're looking for? Open this link on your iPhone device or simulator.
The index.html file has three div elements for "header", "container" and "footer" directly under the body, while all the work is done in the fixed.js file. The document is fixed in place by canceling the normal action for the "touchmove" event:
// Disable flick events
disableScrollOnBody : function() {
document.body.addEventListener("touchmove", function(e) {
e.preventDefault();
}, false);
},
Then, a lot of work goes into creating event listeners for the "touchstart", "touchmove" and "touchend" events which are attached to the "content" div under "container". The logic boils down to simply moving the "content" div up and down.
This solution is 100% HTML/CSS/JavaScript, however there is some WebKit proprietary CSS and JavaScript which may limit portability. It may take a bit of tweaking to work on another mobile device but this would be a good proof-of-concept to start from.
I did not create this awesome sample project, I'm merely bringing it to the community's attention. For more information and a link to the zipped project, read Richard "Doctyper" Herrara's entire post on Fixed positioning in Mobile Safari.
May be clunky, but you could reposition the header and footer over top of the div as the user scrolls. This way your main div doesn't need to be scrollable. No help for anything (still) using frames though.
This is one of the more irritating browser issues with the iPhone/touch, I wish you could just focus on part of the page like a normal browser.
For a CSS only reference the Safari CSS Reference probably has what you are looking for. You'll be especially interested in anything starting with "-webkit" or "-khtml" as those are extended properties only available with WebKit like 3D and touches. Should apply to Android as well.
With JavaScript the Introduction to WebKit DOM Programming Topics and WebKit DOM API Reference are go-to guides. Definately take a look at the light-table demo for some copy and paste javascript on handling your touches as that's how I would solve this.
I have implemented iScroll on iphone and it is really smooth and fast and you can do whatever you want. Disadvantages are that android (1.6) refuses to scroll how I wanted and sometimes block other javascript if there are any.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<div style="overflow: scroll">
Add those to your html code may solve your problem.