We Keep Coding

Bootstrap 'Affix' wont affix on the right

I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});​
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns

Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.

How to know when you scrolled down?

Just visit http://techcrunch.com/ and scroll down. How do they do it? How that top line appears with a new logo? Is there any jQuery trick? How to determine when person scrolled down certain amount of pixels and show to him new html?

They might just use jQuery-Waypoints which lets you trigger events if the user "passes" a certain HTML-Element.
Example ( taken from page ):
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});

They are using jquery sonar plugin[1] which defines special jquery events[2].
The trick is putting a static positioned top element, on a very high z-index layer, with the part to be occupied by the dynamic logo initially transparent. When the jquery event is thrown, they just make the new logo visible above any underlying content.
[1] http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js
[2] http://benalman.com/news/2010/03/jquery-special-events/#api

Maybe they use window.pageYOffset and there is also document.documentElement.scrollHeight and finally they use the window.onscroll event.

They use the window.scroll() function to listen for the scroll event, then use window.scrollTop() to determine the offset of the logo from the top of the page.
see: http://jsfiddle.net/XkMrc/2/

How to make an element slide with the viewport as it scrolls?

I've Googled for this but must be using the wrong keywords.
Basically I want to use the effect that Magento and now Stack Overflow uses. That is, there is an element in a column, and when you scroll down, it sticks to the top of the viewport. And once scrolled up again, it goes back into the normal page flow.
This Ask A Question is a good page for example. Scroll down and watch the "How to Format" element come down (might need to make your viewport smaller if you have a large screen to see the effect).
I've noticed it is setting position: fixed in the CSS. The JavaScript however is obfuscated.
What's the easiest way to achieve this effect? Is there a jQuery plugin available?

Here is an article that should help: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/

I noticed google doing this in certain places, like here http://news.google.com/nwshp?hl=en (the left side navigation bar). From what I can tell, they checking the position on the page and then setting the item to a fixed position once the page is scrolled down enough for the element to start scrolling off the screen.
It looks like the other method, using jQuery to set the top margin will allow the element to lag behind and get choppy (if you don't use animation) since the javascript must continue to position the element.
Here is an example in Ext, it would probably help a lot if I didn't have the select in the event handler, but it works.
Ext.fly(document).on("scroll", function(e,t,o){
Ext.select(".pinnable").each(function(el,c,idx){
var y = window.scrollY;
if(!el.hasClass("pinned")){
var ypos = el.getY();
if(y>ypos){
el.addClass("pinned");
el.set({
originalY:ypos
});
}
} else {
var origy = el.getAttribute("originalY");
if(origy && y<origy){
el.removeClass("pinned")
}
}
});
});

Center a xul dialog to screen

In a dialog, I resize some images and then force the window to sizeToContent. Then, I want the dialog to center itself to the screen. How can I do this?

I also searched around and looked to the MDC for anything which would center it but found nothing so I created this! This will work both on window and dialog.
var w=(screen.availWidth/2)-(document.getElementById('windowID').width/2);
var h=(screen.availHeight/2)-(document.getElementById('windowID').height/2);
window.moveTo(w,h);
The only thing you must change is windowID to the ID value of your window.
It will work on all screen resolutions as it takes the total screen width and height then divides it in half thus giving the center of the screen then it subtracts your width and height settings to take them into account but divides them by half as well to offset the window as without the offset it will not be centered.
I hope this has helped!

The end result would be a window that moves itself? Please don't make it too annoying :)
Anyway, you'll have to do it manually using window.moveTo and various screen properties (see https://developer.mozilla.org/en/DOM/window)
Here's an interesting example, although it doesn't center the window, it ensures it's visible:
http://www.koders.com/javascript/fid3F51B87DFD457428278627805CCA8D39ADC13455.aspx?s=window#L3

A <dialog> element defines the moveToAlertPosition() and centerWindowOnScreen() convenience methods for you, and also copies them to the global scope so you don't have to scope them with document.documentElement.

Resizing a div to fill the browser

I have a page with many divs and style, with my div buried somewhere inside.
I am trying to have a button that automatically makes my div, that includes a video player, resize and capture the whole browser.
In order to do that I am trying to get the current position of the div and then position it relatively so that it'll get to the top-left corner so I could then use document.body.clientHeight/clientWidth.
Can't get this to work.
I tried the approach of moving my div to the first div and then resizing however this messes up the flash player.
Any ideas? any different approaches?
Thanks,
Guy

Use one of the lightbox clones that can handle DIVs. They usually copy the DIV in question into their own view DIV, which helps with positioning issues and you don't have to do anything to the buried div.
I find Multi-Faceted lightbox to be very easy for customizations:
http://www.gregphoto.net/lightbox/
but there are lots of others around as well.

Why relative?
You should rather use fixed instead of relative. Then set positon to 0,0 and width and height to 100%.
Simple js can do this.

On click, just set the div's style to 'fixed', and position 0,0. Like:
var theDiv = document.getElementById('yourDivsId');
theDiv.style.position = 'fixed';
theDiv.style.top = 0;
theDiv.style.left = 0;

This should do the trick:
<div style="position:absolute;top:0;left:0;width:100%;height:100%">
some content here
</div>