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
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 am trying to find out what the jquery control being used on the Google Nexus website is called: http://www.google.com/intl/all/nexus/5/
Basically as you scroll down the website, the image background changes to a new one. Its not really lazy loading.
It is also used here:http://www.flipkart.com/motorola/motox?otracker=ts_motorola_explore_motox
I can roll my own based on just manipulating z-indexes and scrolling sections on the website, but I would really like to know what this is called.
Figured out that is a variant of Parallax Scrolling
Before you say this isn't possible, I know it is. Here's an example: http://victoriabeckham.landrover.com/INT
The main problem is that iOS freezes DOM manipulation on scroll, so you have to use some sort of technique to overcome the problem. The parallax plugin I was hoping to use is stellar.js, but the issue I am running into is that the "iOS demo" for that plugin isn't really usable on a desktop. I fiddled with it for 3 hours this morning, and couldn't get a setup that works correctly on both iOS and desktop.
I need some ideas, either a technique to configure stellar.js to work the same way on both (I'm not sure if that's possible), or another library that works on both, or maybe some insight on how I could program a workaround myself.
Any help is appreciated.
Step 1: Create and object like this
{
startFrameNumber: {
//first obj
id: idOfElement
duration: howeverManyFrames
startLeft: whatever
endLeft: whatever
startTop: stillWhatever
endTop: whateverAgain
},
nextStartFrameNumber: {
}
}
Step 2: Make the page unscrollable via CSS, ie 100% height and width with and overflow: hidden
Step 3: When the user scrolls (via custom scrollbar, keyboard action, or touch events) advance the animation x frames based on how far they scrolled or whatever. If your animation object you created has a key [frame] then add that to the queue of things that are visible and moving, and move all those things in the queue to their appropriate places and/or remove them from the queue of active objects
That's it. The function for moving things around should be pretty straight forward, except getting the animations smooth will take a little playing around with.
Simply scroll each layer of parallax effect manually and control them yourself without relying on browser's page scrolling.
I've successfully implemented cross device/browser parallax scrolling with the help of the Zynga Scroller js library.
It takes care of one of your main concerns which is the interoperability of click and touch events and scrolling on mobile webkit devices – this allows you to manipulate the DOM as you scroll.
Then, to create the parallax effect you have three options:
Simulating a real-world 3d parallax by using 3d transforms (with a parent/wrapper element that controls perspective and transform origin).
Using a 2d parallax library such as stellar.js or skrollr
Building your own parallax scrolling algorithm.
Here's a quick demo (using existing sample code) of option 1 showing how smooth parallax scrolling would work across desktop and mobile devices. Of course, you're limited to devices that have support for 3d transforms. Note that the Zynga Scroller works via click/touch and drag – it should probably not be used as a dekstop solution as the only thing that would be required is overflow: scroll in CSS.
Have a look at the jQuery-Plugin "Scroll Path" http://joelb.me/scrollpath and combine this with different layers and speeds. You will have recognized that the scrolling of the example page is not just a vertical parallax stage but also moves layers horizontally while you scroll up and down. This is possible with Scroll Path.
Try using http://cubiq.org/iscroll-4 and stellar.js together.
Do your parallax stuff for desktop normally and then add a 'touchmove' Event Listener to fire the scroll event:
document.body.addEventListener('touchmove', function(){$window.scroll()}, true);
Tested and working on iPad 2 with iOs 5.1.1
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 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/