Develop Reference

Most efficient way to detect current element in scroll navigation

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.

Variable column page

Alright here is my dilemma. I have a bunch of divs with the same width
(but variable heights). I want them to be displayed on the page one on top of the next UNTIL the bottom of the page, if there is space for a second column of these items on the page without scrolling then I want it to continue in the second column, third column, etc. If there is no available space left on the page then it goes off the page requiring a scrollbar to see things underneath.
This would essentially be akin to having float:top if it existed (which it sadly doesn't). Also I want this to change dynamically with the window size. If I shrink my window to one column width I want the data to go straight down one column. If I resize to two columns wide then it divides the data between the two columns.
Lastly the order of the divs MUST be preserved. I am willing to use jQuery and CSS including CSS3 to do this, anything else and I will have to look at it. I am sure that if I worked at it I could write some custom jQuery script to do this but I can't help but feel like it should be easier. I have looked at css3 columns but couldn't get them to do what I want so if they can do it the be specific as to how they do it.

Have you heard of media queries? At specific break points you can apply different CSS rules, so you could change the layout of your columns.
Have a read.

Split Ajax animation

I am developing a mobile web application using jQuery and i have been requested to have each page transition into the next with an animation where the page is "split in half", then have the upper part slides up and the bottom part slides down, thus revealing the next page.
I have a small idea, but i dont seem to have the knowledge to get trough:
2 Canvas with display: none, each width width: 100%, height: 50%. - Check
Have the actual display be rendered into said canvas's - I have not the slightest of ideas.
Ajax the next page in a div below both canvas's - Check
Slide the canvas's in the respective directions - Check
Set the canvas's to display: none and restore them to their original positions - Check
Any thoughts? I'm open to use any other framework appart from jQuery, if that's the need. I am also open to change my canvas idea into something else.
EDIT:
As for clarification imagine the page to be a closet, but a vertical one so its doors (the actual page) will slide into the roof and the floor respectively (Its not the greatest of comparisons, but please bear with me) and thus let you see and interact with the content of the closet (The next page). This will go on and on until the application's workflow ends at the last screen, as there will be no back button.

I'm pretty sure I know what you want. You have multiple pages in your registration/form process and instead of having the old fadein/fadeout or sliding effects, you want the top half to slide up and the bottom half to slide down. In order to do this, I'd dump the canvas idea. I don't think that there's an easy way to do it using canvas as of right now. You could try using the html2canvas script, but it's not 100% accurate when it comes to rendering things like this.
As an alternative, I'd recommend using the following process. As a preface, make sure that every step in your form has its own container div (called something obvious like "step-wrap" or "step-container"). Then, when you begin the animation, the first thing to do is to duplicate the current step-wrap, calling it something like step-wrap-animation. Give the original wrap, step-wrap, a height of 50% and position the duplicate below the first with the same height of 50%. Both of the divs should have styling that has an overflow of hidden. Make sure, also, that you set the scrollTop of the duplicate div to scroll to the bottom so that it looks like a continuation of the first div. Everything from here should be smooth sailing.
Second, once you have everything in the first step working, start the animation process. You can do this however you want now that we have the splitting functionality figured out. Make sure that before you start splitting the two divs apart you put the next step behind the previous so that it unravels.
Essentially, what you need to do is:
Duplicate the div
Position both divs (the original and the duplicate) so that both the heights equal 50% and they look like continuations of each other
Animate the top div up, bottom div down
Here's a basic fiddle illustrating how something like this should work. Click on the rendered screen to get the animation going.

Take a look at backbone.js and marionette.js based on backbone.js.
backbone.js is MVC framework where you can define separate views. Marionette is an extension which supports regions and switching views based on whatever you want. Inside switching logic you can easily implement your transitions. Very generic answer but perhaps it will help you to get started.

Floating various shaped divs together into rows

I have a large containing element with around ten DIVs inside - most are about 300px in width on average and are all set to float left. The end result is a widget/grid type layout. However, this style has been specifically built with responsive design in mind - we're using media queries to adjust the size and column count depending on device.
The issue is that we may have one or two boxes that are double-wide or double-tall. The double-wide doesn't really cause a problem with floating (that I can't solve anyway) but the issue is the double-tall. The double-tall would expand into the next row, but prevents other boxes from floating on the left of it. Float-right isn't an option because the tall box can't always be on the right.
I'm trying to find a way to dynamically figure out where each block can float to, like solving a puzzle. I've looked at a few javascripts like Masonry, jLayout, etc but they either don't work, or don't solve the problem of irregular boxes.
So:
I want to avoid absolutely positioning anything because we'd have to re-do that every time, for every element and they won't feel fluid.
I need to allow for double-wide and double-tall, but they may not always be present and eventually, users should be able to determine their location so we can't always just write javascript based on a known location.
I've tried moving around the elements via jQuery which does work, but has to be done on window resize, which is too much activity and results in elements flickering back and forth when you transition over the width that requires three columns to four.
Using css3 columns won't work because the DIVs are treated as text and are broken into two when they pass to the next column, and that doesn't allow for double-wide either.
Does anyone have any ideas or suggestions?

Use Jquery Masonry or Isotope, it'll arrange all the containers into the most space saving arrangement ( or if your using isotope, you can fiddle it around to prioritise other forms of arrangement)

Well, if you don't care too much about the order of your elements, a simple solution would be this:
Add your items to #main so that all .tall widgets are added first. Float .tall widgets to the right.
Likewise, make sure that all .wide widgets are added last and float these to the left.
It works in this case and I think will give you the most optimal use of space for any set of these elements.

I still have not found any real way to handle the situation. For now I've just written some custom javascript to swap around a few DIVs when the page resizes.

difference between accordion and tabs

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.