I'd like to strip down jquery UI to the bare minimum required for fullpage.Js. Can you please tell me exactly which parts of jQuery UI are necessary for operation? All of this is in jQuery UI:
* Includes: jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.position.js, jquery.ui.accordion.js, jquery.ui.autocomplete.js, jquery.ui.button.js, jquery.ui.datepicker.js, jquery.ui.dialog.js, jquery.ui.draggable.js, jquery.ui.droppable.js, jquery.ui.effect.js, jquery.ui.effect-blind.js, jquery.ui.effect-bounce.js, jquery.ui.effect-clip.js, jquery.ui.effect-drop.js, jquery.ui.effect-explode.js, jquery.ui.effect-fade.js, jquery.ui.effect-fold.js, jquery.ui.effect-highlight.js, jquery.ui.effect-pulsate.js, jquery.ui.effect-scale.js, jquery.ui.effect-shake.js, jquery.ui.effect-slide.js, jquery.ui.effect-transfer.js, jquery.ui.menu.js, jquery.ui.progressbar.js, jquery.ui.resizable.js, jquery.ui.selectable.js, jquery.ui.slider.js, jquery.ui.sortable.js, jquery.ui.spinner.js, jquery.ui.tabs.js, jquery.ui.tooltip.js
That's a lot, and I'd like to reduce the size.
Thanks so much!
You don't need to include jQuery UI at all. After a casual glance at the code (and documentation), it appears the default easing function (easeInQuart) is the only thing using jQuery UI.
https://github.com/alvarotrigo/fullPage.js#usage
Set the easing option to linear or swing to use jQuery's default easing.
Well, what a question. If you want to minimize to only what you use, I suggest you roll-your-own file at: http://jqueryui.com/download/
You can choose specifically which pieces of the jQuery UI you want to include in your file and get it in regular and minimized versions.
Where fullpage.js does not specify what they use or not, you may have a bit of trial and error to see what you can drop out. I would guess they use quite a few of the animations.
Related
What is the difference between jQuery and jQuery UI? Are they both different frameworks? Is jQuery library needed to work jquery UI or both works standalone? what is difference between any jQuery tab plugin and jQuery UI Tab? which is better to use?
jQuery is the core library. jQueryUI is built on top of it. If you use jQueryUI, you must also include jQuery.
jQuery Tabs preceded jQueryUI library. jQueryUI Tabs is based on jQuery Tabs. The current version of jQuery Tabs is Tabs 3. If I recall correctly (I vaguely remember looking through the source code about a year ago), Tabs 3 is very similar to what's in jQueryUI. The jQueryUI version, of course, respects the Themeroller themes.
I used jQueryUI in one project. It has some nice features, but there are few widgets and it seems to be advancing at a glacial pace (seems like the same six widgets have been there for over a year). Maybe it'll get a second wind. If I recall, one of the things that bothered me is that in many of the widgets, there was no visible difference between the hover state and the click state.
So I would not recommend jQueryUI at this time for its widgets. You may want it for the effects and the draggable/dropable interactions handling.
The widgets in Google's Closure library and the widgets in ExtJS seem more useful, in my opinion.
Just browse to the jQuery UI site and read:
jQuery UI provides abstractions for
low-level interaction and animation,
advanced effects and high-level,
themeable widgets, built on top of the jQuery JavaScript Library, that you
can use to build highly interactive
web applications.
jQuery UI is built on top of jQuery. It offers cool user interface enhancements.
#2nd question > Use what you like, end-user- and developer-interface-wise.
You'll also discover that you can't live without jQuery. It's a crucial piece to almost any web application. And since it's footprint is so small you can get away with including on most if not all pages.
jQuery UI however is heavier with css and images. It can also be difficult to get the style to work with existing applications. I find myself using jQuery UI components some of the time and jQuery nearly all the time.
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 seeing a bunch of website with something called tile view (I think).
The idea is you have multiple element on a html page with different width and height.
And you have a javascript that will organize randomly each element next to each other to maximize the number of element you can see at once.
An example is http://www.clipboard.com/feeds (You may have to select tile view next to the search bar)
Is there a jquery plugin already? or a native javascript that do something similar?
If not what kind of algorithm would you use to do it?
Is there a jquery plugin already?
Yes, there is a jQuery for that "already".
or a native javascript that do something similar?
Inside that jQuery there is "native" javascript that does exactly that.
If not what kind of algorithm would you use to do it?
It's explained IIRC, was a blog post outlining how it works. You would need to look that up however.
jQuery Masonry (this is probably exactly what you're looking for)
jQuery Distribute Plugin
I want to make a JavaScript transition that is similar to the one on this website:
http://osc4.template-help.com/wt_32608/index.html#.
Could you please give me some suggestions and show me some libraries that would make it easier
to implement?
Thank you!
I think that you meant "library" rather than "literary".
It looks like this site is using jQuery along with some custom code, although such an effect could be achieved in pure CSS3 (at the cost of some cross browser compatibility).
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 :-)