I'm trying to add an android-like spinner to my mobile website. To put everyone in context the site is access via a WebView in an android application not from the phone/tablet browser.
Now the problem is adding a nice jQuery android-like spinner or spawning a native control that looks something like this:
Follow this link for image. Image taken from my phone on the Google calendar app.
I really don't want the solution posted here.
For several reasons:
- the plus button on top and bottom looks awful
- doesn't apply for other types of spinners that I have such as states (FL, CA, etc).
- I might need one, two or three spinners depending on the case
All those conditions completely discard the native DatePicker and I don't know if it's possible to get rid of the + things in it to make it look like the image above. If the case, that wouldn't solve the problem for the state spinner.
We also have an iPhone version of the app and we use cubiq spinning wheel but i don't want iPhone look-n-feel for the android version.
Thanks!
This one looks like a promising solution but I haven't tried yet.
http://mobiscroll.com/
Related
I am new to this and need some tips. I want to know if is there some way to optimise an A-Frame page to work fully on Mobile. I made some events and all works well with PC and Mac, but a lot of functions don't work on Mobile (iPhoneX and Android 6), and even using lines like:
this.el.addEventListener('touchstart', (e) => {
window.open('https://physi-enabled.glitch.me','_blank');
Any ideas? This is the code: https://glitch.com/edit/#!/building-world?path=index.html:28:62
enter image description here
Your question is not specific enough, but here's a few tips as you requested:
Use A-Frame built-in components, primitives and util functions to your advantage. For example there's already link component - you can use it instead of manually attaching click events just to open link in new tab.
Look controls is a component that defines mouse and touch behaviors, so you might want to look into it.
AFRAME.utils.device.isMobile is a function that tells you if the device is mobile, you don't really need your own most of the time.
event-set component might help you reduce all the code related to changing one property on hover or click etc.
Most of the above, if not everything is mentioned in A-Frame docs.
Imagine a mobile webpage with a navigation bar at the very top of the page.
Using javascript/jQuery I'd like to be able to detect when a user scrolls "past" the top of the screen.
Let me try to explain: Imagine that the webpage just loaded and you see the navigation bar at the very top of your screen. Now, you put your finger on the screen and drag down. On an iPhone, this will look something like:
I'm looking for something similar to the following:
$(document).ready(function () {
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if(y < -20)) {
//do something
}
Unfortunately, this won't work on Android phones because they don't have the same elastic behavior as iPhones:
The bad news
So, let's start with the bad news: there is no way to get the information you wish for natively. Why? Because once you get into the 'elastic' zone you're dragging the entire webview component down rather than just the content of the document like in your pseudo code.
What does this practically mean? Emulation or Native wrapping
Emulation, the choices
So you will have to run your own solution and you will have to make a couple of choices. First of all if you wish to use elastic scrolling you should note that this is patented by Apple Inc. in patent US7469381 B2. Please go through this patent carefully to ensure you won't be infringing (even if you're building an iOS only app this does not change anything).
Secondly the question is whether you really want to emulate a native experience. There is a big lobby against native experience emulation due to 1) a believe that it can't ever be perfect enough and 2) as operating systems and browser change your code will stay out of date and thus look terrible/weird or possible can even cause entirely unexpected behaviour/combinations.
Secondly you will have to decide whether you wish for the same elastic behaviour on android or whether you wish to give a more native like experice on android. Personally I believe it makes for some excellent UX, so I wouldn't explicitedly disadvice you from using an elastic effect, however it is something you should consider carefully.
Emulation, the scripts
Most scripts that provide similar emulation to what you want are "pull to refresh" scripts. Depending on your specific wishes you should simply use one of those scripts and either alter them or use some CSS to hide the message inside them.
Hook.js - Not perfect emulation of the native experience and uses the old iOS background, but a pretty good option none the less, to hide the spinner just use
.hook-spinner{
display:none;
}
iScroll.js - Very well developed code and behaves excellently. Disadvantage is that it provides a lot more than what you're looking for which might be either a good thing or a bad thing. You can find a sample implementation of pull to refresh behaviour here, but do note it's for an older version of iScroll, in the last version the example seems not to have been implemented, but it should be quite similar. Just look at the code to see how to remove the pull to refresh message.
jQuery scrollz - Just one more option. Seems to be comparable to hook.js, but does have some iScroll like features as well. You can 'remove' the message by specifying the pullHeaderHTML with empty HTML strings.
Native wrapping
The alternative, which I am convinced you do not want to do, but I do want to add for the sake of completeness, is to distribute your app as a native app for example bundled up in phonegap. However to get this working would require a fair number of changes to the phonegap code itself and would not be an advisable approach (I have once developed a phonegap app using native components and interactions 'around' it triggering various javascript events, although doable and presenting certain advantages it's not something I would advice).
So..I'm not sure what do you need this for.
If it's for a ListView - you can override onOverScrolled
If you need this for ScrollView - there's a way by also extending it. I don't remember now, but if you need it - I can find it.
If it's for a WebView inside your app - I'm pretty sure it's not possible. The amount of control you have on the way web pages are rendered and manipulated is limited.
If you want the Chrome/stock browser to act the way it does on iOS - I don't think it's possible unless you get the browser's code and change it yourself :)
my problem is that I am expanding my website to a mobile version. So I've created a script to check user's screen size and redirect to the mobile version. That works perfectly! But now, I want to create a link in the mobile version to the desktop version. So, I figured out that it would be possible to include some parameters in the URL to alert the script that the user don't want to be redirected to the mobile version. Something like that: href="desktoppage.htm?mode='desktop'". The problem is the link is not working (error 404 - page not found). I guess, because of the parameter the hiperlink is being misinterpreted. Is there a way to do that without having to change all my pages to js or php? Pardon my poor english. Thanks.
Change
href="desktoppage.htm?mode='desktop'"
To this
href="desktoppage.htm?mode=desktop"
I don't think href lets you put quotes around values.
If you want a mobile version of your site, why not just adjust the CSS to use Media Queries? There's plenty of resources out there to help you get started on that. You don't have to mess with the existing HTML version of your site, and it'll automatically adjust the layout based on the type of screen your users are using.
CSS-Tricks has a good list of queries for standard devices that you can start with. You basically fill in those braces with the special code you want to run for those particular devices. You can probably combine many of them, and remove the "Desktops and Laptops" version so that it would be default. Make sure you place these definitions after your main css!
I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.
Do any of you have an idea how to accomplish this either by using javascript/java/flash?
Any option will do as long as it works...
P.S. I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.
Thanks a lot!
Currently possible alternatives:
rasterizeHTML.js:
this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo:
http://cburgmer.github.io/rasterizeHTML.js/
Lively 3D:
On the tool's website you can find a demo as well and it is still supported and developed.
http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html
HTML2Canvas:
Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.
https://html2canvas.hertzen.com
Old-Answer:
I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.
In the end, I ended up using server side generation of screenshots with phantomjs. Found it the most reliable in my scenario and it takes pretty decent screenshots.
I'm creating an iphone (web)app.
If user slides tumb left it has to show the settings panel, after modifying settings, user drags thumb to the right and the normal app screen comes back.
However I took as basis some carrousel code which needs (minimal) 3 pages, I only want 2 pages.
Current state:
http://jsfiddle.net/U92wt/
I can't remove the red page without breaking everything....
Edit:
More information about code used here.
I tried cruising through your code but I couldn't identify exactly what the issue was. It's a good idea and I felt like playing around with it so I wrote an implementation that is capable of only two panels that you're welcome to use if you wish.
http://www.netortech.com/plugins/swiper.htm
If you like it please give me a vote on the jQuery website!
http://plugins.jquery.com/project/CarouselSwiper