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();
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 wanting to rearrange table columns dynamically.
I can do the actual rearrange but for the dragging of the header cells I'm wanting something that feels like jqueryui's sortable elements with the placeholder http://jqueryui.com/demos/sortable/#placeholder (obviously horizontally rather than vertically though)
The problem is that I don't want to use jquery (javascript is fine but jquery is too heavy), does anyone know of something more lightweight that does the same thing?
Anything that can handle the complexities of drag-and-drop is going to be big. JavaScript libraries usually try to solve simple things, like DOM selectors and AJAX, then other UI functionality, like sliders, animation and drag-drop are added on top of these.
So finding small a library that does the drag-and-drop alone is unlikely. There are alternatives, such as Scriptaculous, but you'll find they aren't smaller.
Keep in mind that jQuery isn't all that big - smaller than many images you'd use on your site. It is also cached by the browser, so it doesn't have to be downloaded with every page load.
Check out http://microjs.com/ Type in what you need and it will help you narrow down a list of libraries.
Take a look at this:
http://www.switchonthecode.com/sites/default/files/99/source/SOTC-DnDLists.js
It's not horizontal but I'm sure it can be worked with...
[update: Indeed, minor modifications made this work like a charm - code will follow]
Forgive me if this is not the best forum to ask this question in. I'm not sure where to start, so maybe someone here can direct me.
Using html and jquery/javascript, I want an animation of one item flipping over another item. Almost as if someone is taking a page out from a file and replacing it on top of another page in the file.
Please see attached picture for referance.
If (and only if) you need some custom animations, check out this sweet jQuery plugin: http://weepy.github.com/jquery.path/
It should get you going in the right direction. Your general approach:
Create a path that swings Box2 into position in step 4.
Change z-index of Box2 to be on top of Box1.
Animate Box2 back along the same path in the opposite direction.
Addition: here's a good ReadMe for creating your path: https://github.com/weepy/jquery.path/blob/master/README.markdown
Addtion #2: It was asked how to do rotation, so I dug up a couple plugins to do that:
http://plugins.jquery.com/project/AnimateRotation
http://plugins.jquery.com/project/jQueryRotate
If anyone has experience with either of these (I don't) leave a comment below for the OP!
Rotation
http://code.google.com/p/jqueryrotate/
http://code.google.com/p/jqueryrotate/wiki/Examples
This plugin is for images specifically while in CSS3 compatible browser other elements will work in older browsers and IE: don't expect other elements to work.
Example:
$myContainer = $('selector');
$myContainer.rotate({animateTo:45}).animate({'left':100,'top':-100}, function(){
$myContainer.css('z-index', 2).rotate({animateTo:0}).animate({'left':0,'top':0});
});
Maybe try to combine it with http://weepy.github.com/jquery.path/ (credit to Adam Terlson for posting it) for smooth path animation. Looks like a great plugin.
In my experience rotating in IE is always glitchy.
I adopted couple scripts a while back into something that worked best for me: http://pastebin.com/kDK9mu9W however I did this for a project of mine and never test it outside and it does not have animation - you would need to use a interval.
IE7, IE8 & CSS3 compatible browser support for all elements. Images are wrapped in divs to prevent filter conflicts.
Is this a question? You certainly could use jquery to do this and there are already some plugins that offer something similar. See the shuffle type animation of jCycle
http://jquery.malsup.com/cycle/
I'm sure you could take a look at the code there to get some pointers on how to proceed.
There's an excellent tutorial here that explains the basics of sprite animation with jQuery. It's not a solution for your specific question, but it offers a quick introduction to the concepts you'll need.
Have two divs with appropriate Z-scores. Animate div to slide top right, as soon as div is completely free, switch z-score and reverse animation.
ive seen the plugins etc to create a carousel of images etc, but what i want to achieve is having a content slider.
The content would be approx 500x400px, i was hoping to just give the content a div with unique id, and have it show for, say 6 seconds but if your mouse enters then for animation to hold.
I was thinkin along the lines of using:
$(#id).fadeOut(*time*);
Im on my mobile so its not the best example of code. Id be using set Interval for timeouts, however, do you think i should opt for a plugin? I already use many on my site, so would prefer just this page to use some simple jQuery.
This can be done in jQuery without too much work. You already know about setInterval() and the jQuery animation functions. All you'll need to do is implement mouseenter() and mouseleave() to properly pause and continue the animations. Perhaps a setInterval() every time mouseleave() and a clearInterval() every time mouseenter().
I agree with marcosfromero that plug-ins are great so you don't have to develop the whole thing again, but you stated that you have a lot of plug-ins already, so it could be better to write it yourself so that you gain more experience and have more control over it. I would say the choice to go with a plug-in depends on whether you find one that fits your needs and the size of it (even with minify, size does matter and one must consider blocking while JS files load).
If a plugin works for you, I don't see the point in developing the whole thing again.
Recall that most plugins offer a minified version so size wouldn't be a matter.
You can also use some automatic tool to minify code and join several JavaScript source files to prevent lots of requests.
If you still think the plugin is too big for your needs, consider inspiring yourself with the plugin's source code.
I want to make small image browser like the one used on Myfonts.com (link) in the sidebar under "More fonts like this".
I'm wondering if there is a jQuery plugin that could do that.
I know that this is some kind of carousel, but I couldn't find any with this cool resize function on scroll.
I would suggest you take the jCarousel plugin, as it has a very good base, and modify it to your liking. You could combine it with the jquery ui slider to somehow achieve the same effect as on Myfonts.com.
I did come across something similar although not exactly the same. It might help you figure out how the resizing effect is accomplished. See http://www.eogallery.com/ and http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/index.html
As of today I couldn't find any out-of-the-box plugin that does what you are trying to do, but maybe if you build this, you'll post it to the jquery gallery and everyone will live happily ever after :-)