jQuery animations not working on iPhone - javascript

I'm using jQuery on a client's vCard site - http://chrismward.com/beta - to switch between pages.
It all works great on the computer, but when I try on my iPhone: no dice.
I'm using jQuery 4.0 and here is the only js file I'm using on the site (other than jQuery from the Google CDN) - http://chrismward.com/beta/resource/js/main.js
If anyone can help me, I'd greatly appreciate it.
Thanks,
-Giles

Regular JavaScript animations (using setTimeout/setInterval) don't work very well in Mobile Safari; you need to use CSS Animations to get decent results. You might want to try creating an iPhone-optimised version of the site using jQTouch (which uses CSS animations).

They appear to work fine in the iPhone Simulator. Which means, if they are too slow on an iPhone, they are just too slow. Use CSS animations like Steve Harrison suggests. You probably want the -webkit-transition property. Here's an example you can try.

Related

Firefox touch scrolling not working

I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.

Multiple page Phonegap App without JQuery Mobile

I have created a few mobile app using phonegap and i have used jquery mobile, purely because the controls are nice looking, but mainly because it has the nice changePage function. I like to have multiple html documents to break up the code, and with over 10 separate screens i think it keeps the code tidier.
Can anyone tell me, how to normally changePage with a nice "slide" animation without using JQuery mobile, using multiple html pages. Is this possible?
I will still be using JQuery, but i would like to use something like chocolateUI or twitter bootstrap for the design of the controls.
Any examples would be much appreicated, i have tried googling this but all the results say "how to change page with JQuery Mobile" and i do not want this.
Thanks in advance
Maybe you could start working with Ionic Framework:
http://ionicframework.com/
It's works with AngularJS, and has the functionality you are looking for. It also works great with jQuery.
I've build a couple of apps with it myself and I'm still really fond of it!
There are other frameworks like:
OnsenUI (http://onsenui.io/)
Kendo UI (http://www.telerik.com/kendo-ui)
Sencha (http://www.sencha.com/products/touch/)
Monaca(http://monaca.mobi/en/)
ReactJS (http://facebook.github.io/react/)
Hope it helps!

ResponsiveSlides.js plugin not working in IE

I use Zurbs Foundation framework to develop my sites but do not like their built in orbit slider so have opted to use another responsive slider which I really like. The slider works perfectly in every browser I have tested it in apart from IE.
The plugin I use is http://responsiveslides.com/. The plugin works in IE on their site but not mine but I am using the exact same code so cannot understand why it does not work.
Does anyone know why it is working on the site above but not mine, the website I am using this slider on is http://www.viscari.co.uk/client.
If you require any more information from me please let me know.
Thanks in advance for any help given.
You can use html5shiv to make IE support HTML5!

RightJS Lightbox Plugin Not Working In IE

I am using the RightJS Lightbox plugin for a Lightbox to show inline HTML data. It works perfectly in FF and Chrome but alas IE is a no-go. I had it working yesterday for a short time and have tried to retrace my steps to no avail.
Here is a link the the applicable code: http://jsfiddle.net/jmarcello/QuwfE/. The full version can also be viewed here: http://www.buenolisto.com/alma
A simple elegant fix would be greatly appreciated. Or if anyone has another lightweight solution that provides a light box supporting inline HTML that would be great.
By lightweight I guess I mean with minimal files and preferably without having to connect in to yet another style sheet which is why I like the RightJS solution.
Thanks in advance...
Works perfectly http://jsfiddle.net/YHwyr/, you seems like have broken links, it didn't download right.js from your site

What is the code behind this javascript?

I'm trying to find out how they were able to create this site. http://www.cpeople.ru, i am trying to build my portfolio to look something like it. Particularly, I want the slider effect of the menu. Please help me out. Thanks. :)
Look at the source code, it's quite open. They're using jQuery with the jCarousel and Mousewheel plugins. On top they have two custom scripts called f.js and portfolio.js, which are plainly readable as is.
Look into free JavaScript frameworks, particularly jQuery UI. jQuery can do plenty of special effects, and it's quite easy to use.
If you look at the source of the linked webpage, you can see it uses jQuery and two jQuery plugins, jCarousel and mousewheel.
Be sure not to copy swathes of code from existing websites (unless it is expressly permitted, as is the case with jQuery), as that would be copyright infringement.
Try chrome sniffer if you use google chrome.

Categories

Resources