I've built a horizontal accordion with jquery. I'm having a problem with it. When it animates from one panel to another there's a jump at the right hand edge of the carousel. I've tried everything to get rid of this...adding widths...changing the js..removing whitespace from html etc..any suggestions?
http://boudaki.com/testing/carousel
http://dev.iamntz.com/40/jquery-ui-accordion-jump-bug/
http://dev.iamntz.com/166/jquery-accordion-tutorial/
Two relatively reasoned through musings on that issue.
I have run into this previously - I think it is a particularly nasty little issue that the community on the pluging has been trying to find a workaround for. The markup at the links above is probably a bit different but the application should be no different when adjusted to your case.
Related
I've build a carousel that will let users flick/scroll trough dates using the slick library. I've got some minor issues with the library, and a major one.
You can see the carousel here:
http://radiant-meadow-8480.herokuapp.com/
user=test,
pw=test
I'll list the issues in the hopes that you can help me fix them, but if not, it might help you recommend me another library.
Events only fire when you release you're click(mouse up). I would like to slide my finger/mouse back and forth, and see the data on the screen change.
You can't sling your finger/mouse to one side and scroll through a bunch of slides. You'll only slide though a few slides.
The biggest issue is the fact that the slide your currently looking at will change, if you add slides in front of it. To get past this you have to destroy the slick object, and reinitialize it. This makes it way less smooth, and close to unusable on my old iPhone 3g.
I don't have any easily sharable code, but I hope the demo on the page, plus my issues listed can help you recommend a better suited library, or a fix to my current implementation.
I've also looked at iScroll, but the infinity scroll gave me nothing but problems, and the documentation seemed a bid lacking. It's also my understanding that the author is working on an updated version, and haven't updated the current release for over 6 months.
I would go one step out and question your usage of a carousel at all.
Why?
If you are doing mobile development, just allow mobile devices to use their built in ones, e.g. for iPhone use
<input type="date"/>
See Date Picker for iPhone Web Application.
Carousels for date selection on desktop are kludgy at best, including this one.
Carousels (although yours is slightly different) are generally considered bad UI. This is more of a slider than a carousel, granted. Reference:
Humorous example:
http://shouldiuseacarousel.com/
Good explanation:
https://ux.stackexchange.com/questions/10312/are-carousels-effective
I'm trying to create a page similar to new google calendar landing page http://www.google.com/landing/calendar/
I'm using skrollr(https://github.com/Prinzhorn/skrollr) but I can't get the effect right, on google landing page if you do a small scroll it will send you to the next block and with skrollr I'm not able to get that navigation. Any ideas how I could reproduce that? is it possible to do with skrollr or you would recommend another js plugin?
Thanks!
In case you still haven't found a solution yourself, I've been tasked with doing a very similar thing. There are two ways of achieving this that I researched and choosing the right one mostly depends on the complexity of your design/expected result. Unfortunately I can't provide a link because the site won't be live for next couple of weeks.
This is what worked for me:
I used fullpage.js library to achieve 'full-page' scroll effect. You could also take a look at onepage-scroll.js and see which one fits you most - they don't differ that much in terms of functionality though.
Benefits of using fullpage.js (among other things):
integration is quick and simple
allows a lot of customisation through options hash
provides callbacks when scroll to another section is triggered (before or after it happens)
enables you to manually trigger a scroll via 'methods'
works surprisingly good on iPad/iPhones. Probably on other mobile devices as well, although I can't fully confirm that since that
wasn't a requirement for my project.
Now when you've got section-to-section scrolling in place, what's missing is the animations. Considering that fullpage.js provides you with callbacks, it's as easy as adding a class when a transition to another section/slide happens and then using that class to trigger an animation of your choice through CSS. This is what worked for me without facing major problems.
For more advanced things:
If you're looking to build something more complex, then I strongly recommend that you take a look at tween.js. This is what google used on the landing page that you've provided in your question.
It's a very powerful tool hence it requires quite some setup + it moves animations to javascript, which might be a hassle. I would rather keep them in CSS where they belong and dont use javascript until I really need to.
FYI I also started with skrollr but it won't really work with 'fullpage scroll' because what it really does is disabling scrolling and animating body/html through translate. Skrollr bases it's behaviour on scroll event which will not fire if you use libraries I proposed.
EDIT:
It appears that you can actually use skrollr in par with fullpage.js. You can see the answer on how in it's FAQ site. Thanks to Alvaro for claryfing that! Even then, I wouldn't use skrollr unless you really need it for some advanced parallax scrolling effect - as said before, depends on your needs though. :)
Let me know if you have any doubts or something is not clear in my answer.
Good luck!
I find my problem a little bit difficult to ask about, because I don't know how to explain it or how to even start searching for an answer. I will try here because I'm really stuck and I know Stack Overflow always helps me find a way to keep going and learning. See if someone can open my eyes.
What I'm looking forward to is to achieve a similar effect as the navigation in uzik's page: (see the grey banner at the bottom? well, that). So, yes, I know how to overlap two divs and just slide one or the other on top using jQuery. In fact, there's this demo that shows how to do that and more beautifully (very interesting link to keep ;) ).
But my problem is something else. Notice that when you click on the slider that will overlap the main content, the url changes. That's what I would like to achieve and I don't know if both divs (main content and overlapping content) are on the same page and the url is being changed using some js; or if the overlapping div is, in fact loaded from an external source.
In my case, I would like to load from an external page. Say, for instance, someurl.com and someurl.com/blog. The aim is, having both preloaded (I guess) to slide one on top of the other.
Is this even possible? I would like to think it is. I can follow js and jQuery instructions more or less, but need some guidance as to where to start off searching info, specifically on the loading content from some other url part.
Any tip is appreciated.
Kind regards, Bea.
I need to build a multi-directional JQuery parallax page for a client - they basically want it to work in a similar way to this - https://victoriabeckham.landrover.com/INT
I have the artwork ready and have found many jquery libraries that will allow me to scroll horiz/vertical - but i'm not sure how to combine both together at a specific co-ordinate.
Could anyone please point me in a the right direction?
Edit: I did originally sign this post off having looked into Superscrolarama and thinking all was solved - but having struggled with implementing it - I dont think its quite the saviour I thought it was, I need both horizontal and vertical parallax as well as scrolling to achieve above, which it doesn't seem to support - so any other tips I'd be very grateful for!
I threw something together is jsfiddle for you.
http://jsfiddle.net/9R4hZ/40/
The script initializes the start positions of all of the objects first. Then handlers are set up for arrow key and mouse wheel. After that is the meat of the algorithm in the parallaxScroll function.
It uses the ARROWS or MOUSEWHEEL for scrolling.
There are from [left, right, top, bottom] transitions.
The HTML and CSS are really simple.
The JS/jQuery that runs it is self explanatory.
It's an interesting effect, that seems to be geared for artsy type sites.
Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?
I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.
*edit1
If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.
http://johnpolacek.github.com/superscrollorama/
This article in smashinghub.com shows a collection of JQuery plugin for scrolling and parallax effect I'm totally sure one of them will help you.
it looks like jQuery Scroll Path is the most advanced of them or suit your requirements.
I realize I'm jumping in late here, and this might seem ultra obvious, but have you tried reverse engineering what they have done on https://victoriabeckham.landrover.com/INT? It looks like the ScrollAnimator script does a bulk of the work. I would download their site & mess with it locally, subtracting parts until I figured out which components provide which pieces of functionality. Then I would read through those to understand how they made it happen.
you have use scrollpath plugin
make path
Could someone please guide me create the navigation (left and right) used for thumbnail gallery in this site -
http://office.microsoft.com/en-us/images/
Basically I want the left and right buttons to offset the thumbnails by some number (say 6 as in this example).
I do not want fancy fade in or slide in/out effects, just a simple navigation to do the offsetting part.
I'm totally new to JS.
Thanks.
As you state your totaly new to JS this might be hard to accomplish but I would suggest you look at using one of the most common JS frameworks availble, jQuery. jQuery makes building JS a lot faster but also a lot easier, and another bonus is there are multiple plugins for jQuery that has already solved your problem.
Like in your case the (MB)SCROLLABLE plugin would probably help you a lot and you'll find examples on how to use it on this site: http://pupunzi.com/#mb.components/mb.scrollable/scrollable.html
Hope that could get you started.