We Keep Coding

Is there a way to make an animated scroll up transition between two different pages?

I am currently designing a website in which I have a first page that shows a language selector, which should take you to the corresponding version of the homepage depending on the chosen language. I would like to animate the transition between these pages so that the 'language selector' page scrolls up and gives way to the appropriate 'homepage'.
I am really new to coding, but I can understand the very basics of jQuery and got some jQuery-based solutions to work, though I haven't succeeded yet in finding a method that fits what I want.
If you have a look at my working website, http://bauti.tk, you'll see the 'language selector' page has a black background. I would like to join that as seamlessly as possible with the black menu bar on top of the 'homepage' as it scrolls.
The way the contents other than the menu in the 'homepage' load is not really important for me. I've seen many solutions based on scrolling through sections of a same webpage, but I guess that won't work for me, as the target webpage depends on the language choice.
Any working solutions are welcome, regardless of their difficulty!

You may want to look into ajax for this solution. Basically load the selected language homepage underneath the landing page upon selection, then scroll down to reveal the loaded content.
Something like:
var lang;
$(".ThumbGroup span").find("a").off("click","a").on({
click: function(e){
e.preventDefault();
if(($(this).attr("id") == "u2008-4") || ($(this).attr("id") == "u2003")){
lang = "cat-home.html"
}else if($(this).attr("id") == "u2009"){
lang = "en-home.html";
}else if($(this).attr("id") == "u2005"){
lang = "zh-home.html";
}
$.get({"http://bauti.tk/"+lang, function(data) {
$("#page").append(data);
//Add scroll effect here using .scroll() method.
//https://api.jquery.com/scroll/
});
}
},"a");
There's some customizing you'll have to do with this code but it could serve as a boilerplate for you.
Keep in mind, however, when using ajax the url will not actually change when you click the links unless you put the necessary code in place to change it.

How To Trigger Fancybox When User Reaches Certain Div (On Scrolling)

quick question:
1) I have got the standard Fancybox (V2) setup working and I want it to fire the modal when the user is reading the page and then reaches a certain div (or any other element).
2) So it's not a 'delay', its when the user reaches a certain part of the page.
Can someone throw some coding light on how to do this please? :)
(Note: I AM NOT a programmer, but can handle mediocore js/html/css...)

The easiest way is to check the scroll height versus the height of the element you wish to trigger, then simulate a click on the Fancybox link you want to open.
UPDATE: This fiddle should give you an idea how to do it. http://jsfiddle.net/eKF4f/2/. It is not the most complete example, but should give you a starting point.
This is the part that does the work
$(document).scroll(function () {
if($(document).scrollTop() >= $('#box').offset().top && !fired)
{
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
}]);
}
});
NOTE: As far as UX is concerned, this is generally bad practice. Unless you have a good reason to open a modal, you should not block page content unless the user takes an action that triggers the modal.

How can I Detect when a Firefox WebPanel is closed?

I am interested in opening a webPanel on the right side of the Firefox window. Based on an MDN article, I determined that this could be done by setting the browser element's direction style. However, I wish to clear out this setting after the webPanel is closed. Is there a way I can detect this? Thus far, the only way I can think of is to poll sidebarWindow.location.href (to detect if the sidebar is changed) and sidebarHidden (to detect if the sidebar is closed).
var browser = document.getElementById('browser');
browser.style.direction = "rtl";
var sidebarWindow = document.getElementById("sidebar").contentWindow;
var sidebarBox = document.getElementById('sidebar-box');
var sidebarHidden = sidebarBox.collapsed || sidebarBox.hidden;
sidebarWindow.addEventListener("unload", function (event) {
alert("1"); //This code fires when the web panel is opened
//but not when it is closed.
});
sidebarBox.addEventListener("unload", function (event) {
alert("2"); //This code does not fire.
});
sidebarWindow.addEventListener("close", function (event) {
alert("3"); //This code does not fire.
});
sidebarBox.addEventListener("close", function (event) {
alert("4"); //This code does not fire.
});
openWebPanel('Test', 'http://www.google.com');

IIRC there are essentially three ways a sidebar can be "closed":
The user closes it using the GUI (X-box) or keyboard shortcut. In this case, the web panel will not necessarily get unloaded, so there is no unload event.
Another document is loaded into the web panel. In this case you might get an unload.
The user opens another panel. There is not necessarily an unload.
Should you go forward with your implementation, you need to make sure your code handles all three correctly.
and 3. should be observable by the <broadcaster id="viewWebPanelsSidebar"> changing the checked attribute (see the implementation of toggleSidebar()), so you could have another element observing and acting on onbroadcast.
should listen for unload and act accordingly.
To get proper unload events, I think the following should do the trick:
sidebar.contentDocument.getElementById("web-panels-browser")).
addEventListener("unload", ...);
But my memory there is a bit wonky, so you might need to fiddle with that a bit. (The sizebar has a <xul:browser id="web-panels-browser"> which displays the actual content...)
After having said all that: I think it is a bad idea to mess with the sidebar like this.
The MDN wiki(!) has bad advice in this case.
The sidebar was not designed to be messed with like this.
There are other add-ons "competing" with yours when it comes to messing with the sidebar.
The sidebar code is, for the most part, pretty archaic and under-maintained. Getting things like your requirement to work correctly is pretty hard. There still might be other code (in add-ons) that could dismiss the sidebar that you and I didn't think of.
The sidebar might not be the best place to display your content in the first place (what that content would be you didn't say). If it's something like context-help, dictionary/definition lookup results, login forms, then it won't be a good fit.
Some users might not like that their always-on bookmarks/history sidebar gets replaced by yours. You could handle this by re-opening the previous one, but that will only complicate matters further.
You might be better off using some other way to display information - e.g. a new tab, a panel, a new sidebar like the social sidebar... E.g the social sidebar is not only on the right, it actually is a standalone sidebar not part of the "main" sidebar.

jQuery Accordion nav issue

So finally, I was able to create a simple accordion nav but it's making me nuts that when a user goes from second nav to third one( Future Generations to Israel Overseas) it doesn't work properly. The animation happens twice, sometimes even three times based on how fast you mouse is moved. Moreover, when a nav is open and if you exit the div and come back the animation happens again.
A) Is there a way to fix the issue with going from second to third navigation
B) how do I write a conditional statement so that if a user is with in a section lets say Future Generation and goes outsize the div and comes back it doesn't repeat the close and opening thing again.
CODES at
http://jsfiddle.net/rexonms/Hj9my/1/
Note: I cannot use a different jQuery beside 1.2.6 and sorry for the messy HTML code, wanted to make sure it worked on the site, when it works here.

Fixed your accordion , had to lose some of you html as it was a bit confusing .
updated fiddle:
http://jsfiddle.net/Hj9my/3/
The code :
$(function() {
$(".menu").hover(function() {
$('.dropdown').removeClass('current').addClass('notcurrent');
$(this).find('.dropdown').removeClass('notcurrent').addClass('current');
$('.notcurrent').slideUp();
$('.current').slideDown();
}, function() {
});
});

How to prevent page's scroll position reset after DOM manipulation?

I've got two JS functions, one that is adding options to a select box
function addOption(selectId, text, value) {
var selectbox = document.getElementById(selectId);
var optNew = document.createElement('option');
optNew.text = text;
optNew.value = value;
try {
selectbox.add(optNew, null); //page position resets after this
}
catch(ex) {
selectbox.add(optNew);
}
}
and another that is doing a document.getElementById(formId).appendChild(newHiddenInput) in a similarly simple function.
They both work, elements are added as expected. However, upon calling either of them, the page resets its scroll position to the top of the page in both IE6 and FF. There is no postback, this is purely clientside manipulation. I've set breakpoints in Firebug, and it occurs immediately after the element.appendChild or select.add gets executed. I know I can use JS to manually set a scroll position, but I didn't think it was necessary when the page isn't being re-rendered.
I'm no expert with JS or the DOM, so I may very well be missing something, but I've looked here and ran through their examples with the Try it Here options and I can't replicate the problem, indicating the codebase I'm working with is the culprit.
Any ideas why the scroll position is being reset? jQuery is available to me as well, if it provides a better alternative.

If the functions are being called from a link you might have an internal anchor in your link:
http://www.website.com/page.html#
This is causing said behavior. The default behavior is that if an anchor does not exist, the page scroll position jumps to the top (scrollTop = 0).
If this happens on every function call regardless of the source, then this can be crossed off the list.

What is activating the event?
If it's an anchor then on the click event you need to "return false;" after the call to your jQuery/Ajax/jScript code.
If it's a button you may need to do the same.
I had this issue yesterday and this was the resolution.
So My link