What are benefits of accordion over tabs and vice-versa?
Although both of them are supported in many Javascript UI frameworks/libraries,
you can see example here: http://jqueryui.com/demos/
For me they serve pretty same purpose (to hide complexity), except accordion is IMHO better for "continuous-reading", it's easier to quickly go to next section, while Tabs seems to be more "random-access"
What's their benefits, when should I prefer one over the latter one?
(from the UX point of view, I don't care about horizontal/vertical and html code differences)
According to repost on UX, accordions has fixed height and they has to fit in whole screen (see example) - this is important because of easiness of selecting diferrent sections any time (we don't want to scroll up/down to select other section as I thought). I've completely missed that.
Tabs on the other hand can have different heights (although it's better idea to have them fixed too and provide scrollbars). Tab headers unlike accordion ones stays at their place after selecting.
Accordions are best suited for mobile devices, where is not enough space for horizontal tabs and vertical tabs would need user to spin his head in order to read headers. "moving headers" are the form of necessary evil in this case.
The one advantage that an accordion has over tabs is that if you are splitting information into ordered steps or content that leads to the next bit of content and so on, when you finish reading, the tab to view the next part is right where your eye is, rather than having to go back to the top and click the next tab. This may not seem like a big deal, but it is similar to the reason vertically stacked forms are easier to use and cause less confusion than horizontally aligned ones. It is not always the best choice, but when you have ordered content, it is a lot easier to read it, and if you want to continue on, click immediately below where your eye already is.
The esthetic difference is that tabs represents clear separators of parts of the content while an accordion divides content.
All of that +
An accordion is animated and tabs aren't. And since accordions are lame and animations annoying... Tabs are your friends. Just make sure the URL defines whcih tab is opened.
Related
Im not sure how to find what I need (name it) so I count on you to explain it for me.
I need to create javascript content navigation based on "post" or "comment" system. First of all I want to emphasize that content is not plain text but It contain HTML, images and other objects that can resize during usage.
How does it look?
One container for content divided to sections and one for dedicated navigation scroll - this scroll is snapped relatively to sections.
Whole system is very simillar to discourse posts navigation -
check discourse here
Most important thing for me is to keep synchronization for scroll and content.
If you click 3th post in scroll, content should scroll to this post - this is easy.
If you scroll by mouse content is scrolled + dedicated navigation is automatically synchronised - this is my problem I think.
What is the best* way to check which one section is my current section.
Should I find visible element? bounding rectangle? calculate it based on heights of all sections?
PS If you have any library working in similar way you can post it as addition - it can be helpful for me.
//edit
*best - simple, not too slow if I get more elements (100-1000), takes into consideration dynamic content (resize) and also supported by all modern browsers. Probably there is more than 3 methods but if you post more alternatives, Me or someone else can pick suitable solution.
I want to do an independent scrolling between 3 columns on a Wordpress site, but I really don't know how can I do that, and what is the better langage to use (JS, CSS?).
I have two sidebar with content, you have to scroll to see the last content in the sidebars.
I have a container at the center with news and when you are at the bottom, you have an infinite loading.
What I want to do it's when user scroll on the page, the sidebars and the news content are scrolling, but, when there are no more contents in the sidebars, they become "fixed" and just the news container is scrolling.
Like this :
Can you help me please ?
All you'd simply have to do to create an independant scrollbar for each of these is to set an overflow: scroll; property on the right selectors however, the downside is that just setting overflow could potentially cause a horizontal scrollbar too.
There is an unstable yet broadly adopted alternative which is overflow-y - overflow-y works like overflow but only vertical.
So setting overflow-y: scroll; will allow at best a vertical scrollbar to appear.
Doing this with JS is not recommended as it will clog your scroll which CSS doesn't.
The reason JS clogs your scroll is because in JS you'll have to listen for a scroll event, when the user scrolls these are fired usually multiple times per second, and with 'multiple' I actually mean 10 to 100 times. So imagine executing even a little bit of code, if that code is bugged anywhere you can say goodbye to your users because they will have such slow scrolling.
The mechanism for having custom scrollbars on a page exists but it's not widely adopted either - just because of this reason. The concept was good but it was just detrimental to the end-user.
The downside for CSS scrollbars is that they will default to the browser scrollbar which will be different in every browser and unfortunately styling these is implemented differently across all of them and quirky at best.
NOTE
If your website is fullscreen and all three columns scroll independently the user will have to do 3 times the amount of scrolling before he or she sees ALL the content on the page, this might not be what you want. Also if you're stacking these constructions vertically on the same page you'll only be able to scroll down further once you've scrolled past the end of atleast one block of content.
This will agitate your users when they don't want to see the top content but just the bottom content for example.
IMO I wouldn't go for a solution like this if my website is full-width since it will annoy your users but then again, I do not know the entire context of what you're trying to achieve.
Good luck!
I've been trying to analyse how this is done for the past few hours and just can't get it working.
Here's an example: http://vpthemes.com/preview/Modality/
If you go there, look at the 4 boxes under the text "CLEAN DESIGN & GREAT FUNCTIONALITY". If you resize your browser window, you'll notice that the boxes will go 2 side by side, and then if you go even smaller, they'll all go one under the other. The WHOLE website is like that; everything seems to resize perfectly depending on the size of the window.
How the HELL is that done? I've tried so many CSS styles it's boggling my mind.
Thanks!
As kumar said its done by media querys. You could take off the responsive css classes or overwrite it with '!important'
This is Bootstrap magic. You can configure each element in order to stay still, push right, left, etc. In the end, you have a layout that magically reorganize itself according to the size of the window and the configuration you've done. The mechanics of Bootstrap are partly in JS.
Amazing, isn't it?
But, wait. There will be a time at which you will be really pissed off of magic.
With #media rules and CSS3 possibilities, you can manage to reproduce Boostrap features in order to kill the magic with fire!
I'm building a single-page website with a few sections that each fill out the user's window; I've got that working.
What I want to do is:
When the user scrolls up or down he/she would ease-up or down (accordingly) to the section before or after. My sections each have a anchor at the top of them.
Here is an example of what I'm trying to achieve. Each article fills the page. Once you scroll you jump to the next article.
http://www.made-my-day.com/
I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.
Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.
Cheers!
You should take a look at scrollorama and superscrollorama.
They are lots of cool effects that you can use for scrolling, including the one just like the site you provided.
--UPDATE--
After some talking with OP, I realized that both libraries don't do what he wants.
So, my new suggestion is reveal-js, a js presentation library.
You don't really want to do this on an onscroll. Consider that onscroll isn't really anything except an event which says "the view of the page is moving".
That doesn't mean that they're using the mousewheel to do it.
On a phone, your plan can make sense: then it would be like making a drag movement equal to a swipe movement. Great.
My preferred method for scrolling is to click the middle-mouse button, and then position the mouse just below the anchor point, so that I can read each block of text as it scrolls past the screen.
I don't even need a hand on the mouse, for long blocks.
So in my case, onscroll will fire at something like 60 events/sec, and if you auto-jump the articles, I'm going to be teleporting through your entire site's content.
Other people still drag the actual scrollbar.
Listening to the mousewheel and keys (up/down, pg-up/pg-down), rather than just any method of moving the page, is safer... ...but are you sure all articles are going to be small enough so that all content fits in all browser windows, even at stupid-small resolutions (iPhone 3)?
Because if people need to scroll to read content, then all of a sudden you're dealing with a much, much more complex solution:
You would be required to listen to regular (or customized) scroll requests of any kind, to get to the bottom of the current content... ...and then you'd have to provide some sort of visual queue to the user that they are now at the very bottom of the content, and continuing to use a trigger method (swipe/drag/keys/mwheel) would switch articles.
The first two are fine... ...make it feel spring-loaded, like smartphones do.
...what about the other two, where people might expect to hit them multiple times in a second, to get where they're going?
I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.
I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...
So the top image would be what it might look like with 1024 width, and below is the 768 width.
The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.
Any tips would be greatly appreciated, just not sure where to start at the moment.
Thanks
Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; #skip405's example is a really good solution in this case (+1).
If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. #skip405's approach executed on every event) would be too slow/expensive.
I'd solve the problem as follows:
Calculate and add up the outer width of all links at the beginning.
Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.
Here's my implementation: http://jsfiddle.net/vNqTF/
Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.
Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu
Also be sure to check out a great article providing a step-by-step instructions on how to organize this kind of flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/
I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)
My starting point is here: http://jsfiddle.net/skip405/yN595/1/
To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.
In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.
NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.