I've been working on a SharePoint 2010 site that utilizes jQuery. jQuery is used almost everywhere on the site. On an iPad or iPhone the jQuery animations work as they should but I'm not pleased with the performance. Overall jQuery animations are laggy. I've been searching for solutions to this problem and have come up with nothing. Has anyone come across a solution to this problem?
You should use CSS transitions if you want them to be smooth. Javascript animations don't use the device's graphics hardware, while CSS transitions do. This plugin makes it much easier to use the appropriate type of animation for each user's device.
Did you try to play with jQuery animation settings like http://api.jquery.com/jQuery.fx.interval/
Related
I'm trying to find a way to replace the flash animaton on this page http://www.autopulsen.se/ into jQuery. I could cut the images out and rotate them with javascript but it would require major changes in code. Basically I want to keep the same look without flash.
Is this possible?
Yes, you can.
Your starting point would be having a look at this site, there are a lot of zoom plugins on there, which is the main feature of that flash menu. Then you would want to chain the JQuery Shake effect, and maybe look at the fade effect.
To achieve the slanted look you will want to use the skew css selector as featured here.
I'll throw in GreenSock Animation Platform:
www.greensock.com/gsap-js
which may be worth a look, especially if there's the option of paying for a commercial license, as that includes a pretty nifty throwProps plugin.
you can use CSS3 animation but this one i think so good and hard to built in css3
anyway
giving you some animation generator
ceaser
CSS3animationGenrator
Css3Maker
and this one for Inspiration
At DesignShack
Can anyone give me a light how to develop a site without jquery and javascript.
Currently I have a carousel developed using by jquery cycle plugin, but as we changed the mind that we should implement our site believing 'web for all, using progressive enhancement', sounds good to me but have no idea how i'm gonna modify my exisiting carousel and accordion to run if javascript is disabled.
I have to run those carousel and accordion without javascript or minimal use of javascript. Using only css3 and html5, so if javascript is OFF still users can view. Currently without javascript, accordion breaks, simply it displays all the contents and carousel just stucks!
I'm just looking for some ideas, how to run my existing carousel, accordion without JS.
Thanks in advance.
Waiting for your answers.
Interactivity on websites is delivered through CSS and Javascript. If you disable Javascript, you'll have to do all interactivity with CSS.
CSS3 is certainly able to generate carousels. See http://speckyboy.com/2010/06/09/10-pure-css3-image-galleries-and-sliders/ for some examples. Here is (german, but understandable) walk-through for a pure CSS3 carousel: http://webstandard.kulando.de/post/2010/05/21/sliding-image-gallery-css3-transition-tutorial
Still, while this is nice and solves the problem for people that don't have Javascript, it creates just as much problems for people with older browsers that don't support CSS3...
Tell your boss that there will always be people that don't have Javascript, don't have CSS3, don't like carousels or even don't have internet. You can't make your site accessible for everybody! Just consider the costs and benefits, and go for some reasonable option!
I myself think that a Javascript with CSS3 fallback works well for most everybody :)
Good luck!
You are going to want to check out css3 transitions, transforms and the :active pseudo class.
transitions: http://www.alistapart.com/articles/understanding-css3-transitions/
transforms: http://24ways.org/2010/intro-to-css-3d-transforms
pseudo classes: http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/
You will end up displaying all of the images at once, or displaying one static image in browsers like ie6, if you don't want to use javascript.
I'm just starting to use HTML5 and CSS3 in my documents.
I understand the need for JavaScript to bring Internet Explorer up to speed with these new tags and styles, but I don't know which to use and when!
My plan was to use html5shiv and IE9.js to look after the HTML5 tags as well as the transparent pngs (and whatever other pesky errors they fix) but then Modernizr and CSS3 Pie were brought to my attention.
My question is, if I use Modernizr, does it look after my need for html5shiv as well as IE9.js? Or should I include these as well? What is the overlap, if any?
And what does CSS3 Pie do that Modernizr or the others doesn't? Or vice versa?
I appreciate your guys help. Let me know what you do!?
I've got extensive experience with all of these, having used them for a few years each.
Modernizr
Includes HTML5shiv functionality
Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, just fixes html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
Conclusion
My advice would fall into two categories:
If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.
If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.
Hope that's helpful!
I would recommend you use only what you need. Build your app in a browser that supports the features you are using, and periodically test in other browsers that you support. If something isn't working correctly, find the appropriate fix, whether it be html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all of the new features in HTML5 and CSS3 all in one page, so you don't need to include every polyfill library in existence. Wait until you find problems with the features you're trying to use, then try and find the library necessary to do that.
I've used mainly CSS3Pie...it works great. But this afternoon i tested it on my laptop with I.E8 and there was an problem with it...it was disabling some css lines...when i removed the css3pie code my site gained twice the speed...then i came accross the posts with people arguing about the css3 slowdown...So at the moment i'm busy to find another way for IE7 & IE8 to have border-radius and shades.
If you want to use it...please test alot as it is NON-official fixes
I'm converting a jQuery-based web application for use on iPad and need to make use of the hardware-accelerated performance of CSS3 animations. I'm already using fadeIn, fadeOut and some positioning animation so ideally I'd like a plugin which overrides these functions to make use of CSS3 without me having to change the core functionality.
I've searched around but can't find anyone that has tackled this problem, so I'm considering writing a plugin myself, but I wanted to make sure someone else hadn't already done it.
Any feedback would be greatly appreciated!
How about checking out http://playground.benbarnett.net/jquery-animate-enhanced/
I understand how JS is run and I think I understand most of the DOM but I've no idea about animation. Does anybody here know of a good guide that can explain to me how it's done in Javascript?
In addition, should I even consider Javascript for animation? Should I instead be looking to learn flash?
Avoid flash, its a horrible requirement, uncrawlable by Google, unsopported by a bunch of browsers and systems (eg iPhone) and most importantly: it forces you to reinvent web standards (e.g. scroll bars and whatnot), Javascript on the other hand is easier to maintain and code for in the noscript case.
try scriptaculous for your animations;
here's a quickie 3-line tutorial so
you can see it working
here's a more complete tutorial
here's the scriptaculous wiki
note that there are a gazillion JS animation libraries, some really good jQuery comes to mind. Usually they're just a script tag and an onclick event to setup.
Good luck!
/mp
if your animation is simple, change colors over time, move from x to y in 3 seconds. Javascript is fine. If you want all kinds of wizbang buttons and coordinated rotation of the screen, straight up js + dhtml will be clunky at best. Silverlight vs Flash are you questions at that point. Interestingly enough, you program Silverlight with javascript, and that would be the major benefit to simply upgrading to a faster and more dynamic DOM that is implemented in Silverlight but still writing the same code. Flash programmability is very limited in my experience, you can do anything, but it will be slow and take thousands of lines of code to get there. For simple JS animations look at jQuery or Scriptaculous.
Check out a JS animation framework like Bernard Sumption's Animator.js. It's pretty light-weight and has some excellent examples.
Personally, I wouldn't be animating things in JS. Flash FTW.
If you aren't concerned with IE support, you could also try experimenting with the canvas element:
MOZILLA DEVELOPER NETWORK Basic animations