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.
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
I´m currently developing my first jQuery Plugin. It´s called Fraction Slider and is a Slideshow-Framwork which allows you to animate unlimited elements (with different animations, delay, etc) per slide.
Here you can find a small demo, and also the documentation:
Demo
It´s also hosted in the jQuery Plugin repository
So, introduction is over ;)
Now i have a few question:
The general code. What could i improve, what should be replaced, etc.
As you can see, when us different animations, delays, speeds etc. the html tag for each element will have an awfully lot of data-... attributes. I would like to make that a bit more easy and maybe with less markup (damn, i dont know how to say this in english).
How could i do that - any ideas or suggestions?
What should i add to the plugin? I was think about pager/controls, fading and simple show/hide effect and maybe making it responsive.
Last but not least: i would be happy to get some general feedback about the plugin and its realization.
Looks like it doesn't support chaining. e.g.
$('.step-slider').fractionSlider().remove();
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/
I am interested in making a tabbed display on a web page I am working on. I need to apply my own styles, so I would like to find a javascript library that provides very little styling out of the box and makes customization as easy as possible.
Features I would like:
Specify the Image used for the tab.
Tabs can re-size to fix the text inside of them.
Relatively easy to apply my own styles.
I looked at jQuery UI Tabs but it does not seem like it would be too easy to apply my own styles if I don't use their tools to do it.
I also looked at jQuery Tools, which seemed a little easier to customize, but appears to require that you use fixed length images for the tabs.
Can anyone recommend a good js library for creating customized tabbed navigation? Am I just making customization of the two libraries mentioned above harder than it needs to be?
This is a super easy walk-through to create custom tabs using jQuery, I followed it once and haven't used any other tabs since:
Custom jQuery Tabs | Soh Tanaka
I know it can be tempting to often use libraries for something like this, but it is very straightforward and you'll know all about how they work, which will allow you customize them far easier than nearly other plug-ins.
With jQuery-UI you can easily change the styles with css, you do not need any fancy tools ^_^
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/