I need something that gives me theming enabled controls (dropdown, combobox, etc), slick animation, dialog windows, and so forth for both desktop and mobile.
The only thing I've found so far is jQuery UI. I'm sure there's more?
Note: I'm not looking for ExtJS or other "big" solutions, just something simple that I can add-on quickly.
If you don't want a "big" solution (note that things like Ext JS can be trimmed down) then you should use jQuery.
For mobile you should look at using jQuery Touch as well.
Related
I started using bootstrap and had a very good experience with it.
Today when I was testing it, I understood that the navigation menu doesn't work when javascript is disabled. i.e. drop down menus don't work (i know that they cannot work without javascript but atleast some alternative should be there) and the menu is not at all accessible for mobile devices having javasript turned off.
I didn't find any resources which helped to fix this online. So, is there any way (if not fix drop down menus) make the menu work on mobile devices?
Or do I have to stop using bootstrap?
Most modern mobile devices should be able to support JavaScript. And it is the recommended way of doing responsive Web pages.
However you may be able to use css for this type of function by using a hover which will display a div that you've defined and hidden further up in the css
There is also css animations if you wish to have some sort of movement.
http://www.w3schools.com/css/css3_animations.asp
I was looking at flickr and noticed their carousel at the top and how smoothly it operated. Upon inspecting it, it shows "yui" but I don't see it anywhere in the YUI list of items.
http://www.flickr.com/#yui_3_5_1_3_1354482071640_111
Does anyone know what elements specifically from YUI the carousel is made from, and where they're available?
Thank you for any assistance.
The following are conclusions I'm reaching based on what I can tell from the HTML and minified JS source.
The Flickr carousel is written with very little YUI code and without using any complex component besides the transition module. Transition is used to provide a fallback for animations in older browsers. It's very smooth because it's using CSS transitions, in particular using translate3d() which works really well for moving images in one direction.
Like Quinn mentions, there's the Gallery Carousel widget. Lately I'm using ScrollView + ScrollViewPaginator and disabling drag events in non-touch devices. I like this approach because it feels like the typical carousel, but it also supports flicking through the images/pages with gestures on touch devices.
you can build it very easily using the YUI Gallery Carousel YUI Gallery Carousel
I'm looking to create a slider/scroller with javascript for the iPad. I created one using JQuery UI, but it's not supported on iPad.
I'm looking to create something simple, where the user can drag an image left and right along a track. I've looked all over the place for some simple insight on how to do that, all I find are tutorials or links to jquery plugins.
I'm not sure I can use the built-in slider from jquery-mobile, as I have specific images to use, and it doesn't look like it can be skinned.
Any help is welcome.
jQuery Tools Scrollable is iPad/touch friendly.
As an example, checkout the custom scrollable slider on trekk.com (works on iPad) that I built with jQuery Tools.
I recently used a plugin called Flexslider (http://flex.madebymufffin.com/) that supports swiping between images on iOS.
I am looking for a simple way to use transitions you typically see in the native iPhone apps or Android native apps (such as the slider effect, ie. the whole page sliding to the left or the right).
I know those transistions between web pages on my web application are doable with the use of frameworks such as jQuery Mobile, Wink, iUi etc.
Also my application requires a fixed footer and a fixed header with scrollable content. I tried with jQuery Mobile but though the scrolling effect of the content is good, the rendering of the fixed header and footers are not that good.
So I use iScroll 4 instead but I cant use jQuery mobile to do only transistions as the jQuery mobile plays with the DOM etc. which causes some problems within the placement of the divs
Im giving a try with iUI but then again though it seems less 'wide' than jQ mobile, it still is a whole framework for web apps. But Im currently only looking for transitions..
Is there a way to achieve those "full web page" transisitons whitout the use of a javascript framework?
Also those framework such as iUI put all the pages inside one only( jQuery Mobile does not which is great ) separating them inside several divs.. this might be problematic with iScroll i guess?
The finest would be to be able to do those transitions between separate html pages, but I don't know if it's even possible ( I mean whitout the use of AJAX world techniques)
I only target modern devices using webkit (Android, iDevices..)
Thanks a lot for your help
You can have a look at http://maker.github.com/ratchet. It mimics the iPhone behavior quite closely, including all transitions.
forget iScroll for mobile applications. It works well but not for all webkit devices and you will have issues with a good chunk of Android devices. If you want something like a native app you need to go for a container model. A container model is basically having a header and a footer and a dynamic container in the middle. This is used by mobile sites like Twitter and Flikr. The dynamic container you can load either with an iframe or ajax (but personally I would stay away from iframes and mobile anything). Also before using any frameworks out there consider the benefits vs cost (size, future dependency and scalability, overhead parsing the JS... etc) because mobile is not desktop development and many developers seem to forget that fact. I currently work for a major social networking site and we have our own framework with is not a byte more then what we need. We used JQuery in the past but it turned out to be too much bloatwhere for the webkit devices we serve (size + parse time + dependency.. etc) and we ended up killing it.
I am hoping to incorporate custom scrollbars in my site as there are divs with set heights that will overflow. I have managed to get exactly what I want using webkit styling in css however I am aware that there will be issues when looking at the site in Firefox or IE.
As a result, I tried to incorporate the jScrollPane library into my site but its causing all sorts of js "clashes" which is throwing the whole site into a mess!
Are there any simpler methods to customise my scroll bar so that I have cross browser compatibility without adding a new js page to the site?
Alternatively - is there a way I can attach something to the css for when the browser is firefox!?
Thanks
JD
Fast forward to 2017, and there are a lot of good custom scrollbar scripts these days. By good I mean ones that rely on native scrolling mechanics and works on mobile devices too. The one I use is Perfect Scrollbar. Some other good ones can be found here in this blog post.
I'm a little confused with what exactly you're asking for, but if you're looking for a scroll bar of some sort that can be customized with CSS, look no further than jQuery UI's Slider.
You'll have to add some event handlers to do the scrolling, but it shouldn't be too difficult over-all.
Here are some custom scrollbars you can use:
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
One off these solutions should work. BTW i use JScrollpane and it works like a charm for me
I went through all of the suggestions above and was disappointed by either of the following issues:
poor cross-browser compatibility
lag
a lot of redundant code/ dependencies (jQuery UI)
Therefore, I've used some CSS trickery and JavaScript (depends on jQuery selectors) to build my own custom scrollbar implementation. The demo is available at https://dev.anuary.com/680a3c94-9651-550f-abca-e853613eb9ce/. The source code is hosted at https://github.com/anuary/jquery-custom-scrollbar.
My approach relies on the native browser scrollbar. However, this implementation does not support horizontal scrollbars.
Just found this, without jQuery, if anyone is interested:
http://www.script-tutorials.com/custom-scrollbars-cross-browser-solution/