We Keep Coding

Hyperlinks slide new pages rather than opening them

My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.

I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content

When loading, the page goes on the bottom of it

I have an issue with my website. My page loads normally in Firefox, but when I use either Chrome or Safari, it goes to the bottom of the page and I don't understand why. I tried putting the following snippet at the beginning of the page, but no luck.
<script>
$(document).ready(function() {
$(document).scrollTop(0);
});
</script>
Why does the page go to the bottom on loading?

When going to your site, I get redirected to http://www.ondinevermenot.fr/#start. That means the page will try to jump to the start element.
However, the start element is absolutely positioned. Therefore, when the page tries to jump down, the start element moves down with it. Therefore the page tries to jump down again. Then the start element moves down more. They keep going down until the bottom of the page, when there is no more room.
To fix it, don't redirect to #start when your page loads.
Because of the strangeness of jumping to something that's absolutely positioned, it's probably handled differently in different browsers.

Try to have your image and other contents put inside div and set the box attribute of the div to margin:auto. works well with HTML5.

i have an alturnative work around for you and incase you ever need to get to the top of the page - you can use this javascript as an alturnative:
((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");
however the other option would be to set a start up property: for example document.start("body.height = 0") something along those lines may work.
preferably id use option one as a code to start the broswer at a set height may not work so well for every browser. hope this helps.

I had 2 links to my home page in my footer. When I removed the links from my footer the problem went away.

jquery AJAX backbutton problems

This is a bit weird to explain so ill do my best.
Im working on a mobile site that im trying to shape into an ios app (eventually).
On this page i have a menu button that on click, shows/hides menu.
Everything for the most part is working but, the problem is that when you click on the "back" button and the browser runs out of previous locations to go back to, the menu button breaks. When you click it, nothing happens. it behaves as though nothing is there.
The errors go like this, if on index(or first page), you click ONE link to go forward, and then on the browser hit the back button, it breaks instantly.
If your on the index, and hit for example, 5 links in any order(essentially you went forward 5xs) and thereafter, you hit back up to 4xs, the menu still works....you can essentially keep pressing links forward and be fine, hit back as far as you want and stop short one less than the total times you went forward and still be fine.
As soon as you hit the maximum backs, and theres nothing left in the history of page locations to go back to, the menu then breaks.
here is the link of this dummy site im working on (on my server)
NOTE: to test, when it loads, manually shrink the browser to about 400 width so you can see the page take effect.
EDIT** woops forgot the link
http://somdowprod.net/4testing/mobile/less1.html
and here is my code
javascript:(i left comments in there, so you can see where my logic is at...maybe im going about it wrong?)
// JavaScript Document
$(document).ready(function(){
var newHash = "";
var menuBtn = $('.leftButton');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~menu show/hide
menuBtn.click( menuShowHide);
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~MENU SHOW / HIDE
function menuShowHide(){
$('#menu').toggleClass();
// if($('#menu').css("display") == "none"){
// $('#menu').css("display","block");
// } else {
// $('#menu').css("display","none");
// }
scroll(0,0);
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE is-loaded trick.
function isLoaded(){
$('#progress').remove();
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~ACTIONS FOR THE HOME PAGE
if(newHash == ""){
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load('index.html #content', isLoaded);//load the content div from the index.html file
}
//===========================//
//~~~~~~~~~~~~~~~~~~~~~~~~~~~Load the clicked content into my container via jQuery AJAX
$('#menu a').click(function(){
menuShowHide();
window.location.hash = $(this).attr('href');
return false; //doesnt let the link jump to a new page
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
$('body').append('<div id="progress">Loading...</div>');//attach this div which is made to look like a loading bubble.
$('#contentHere').load(newHash, isLoaded);
//console.log(newHash);
});
//===========================//
});
Anyone have any ideas as to whats making the menu break? Thanks in advanced.

The hashchange event is known to be unpredictable with the browsers back button.
Here's what's happening. When you back all the way to the beginning, the whole less.html page is being loaded into its own 'contentHere' container, and since document.ready won't be called on this subpage, no menuButton.click handler will be assigned to the links, so clicking them will not do anything.
Although being able to use your browsers back and forward buttons on asynchronous changes would be a neat feature, I don't think people would miss it enough for you to try to hack a workaround. People are used to not being able to use the back and forward button on asynchronously loaded content. They would try it once, see that it takes them to your site's referrer, hit forward, and subconciously make a mental note to use your menu instead of the back and forward buttons.
Probably a better suggestion, however, is to get rid of the AJAX feature altogether and let the links act the way that people expect them to. Okay, so you lose the cool 'Loading' modal and you save the user a tiny bit of time, but then you aren't confusing people's expectations about your interface.
Edit: to answer your question below, instead of using load() to get static content (which is overkill), put all of the content as sections in your less.html file and hide/unhide it using the menu selections. Here are two ways to accomplish this, each with their own advantages and disadvantages:
Fix your header with CSS (including the menu) (example: lifeinthegrid.com/simple-css-fixed-header/) and then make your menu links normal anchor links with no JavaScript event handler. When you click a link in the menu, the content jumps to that section and because your header is fixed, it has the feel of being a very fast httpRequest. Advantages: minimal JavaScript, the browser's back and forward buttons will work. Disadvantages: fixed elements are a nuisance on older smartphones, the next section might sneak into the bottom of the viewport and ruin the illusion. Solution: put more space between them.
The other method is to use show()/hide() on the different content sections. So let's say you click 'about us'. All of the sections are hidden and the 'about us' content is shown. Advantages: It's not as annoying as a fixed element, you can spice it up with FadeIn()/FadeOut() or other JQuery animation effects. Disadvantages: your browsers history will not track these changes unless you do some window.location hackery.

javascript entire page fly in and out effect?

Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.

Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)

that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.

You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want

Repainting a page in Chrome?

I've been looking at using a script I've found online (here) as a basis for a website I'm looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page "repaints" - I think this is the right term - and all is well again.
Is there anyway to do a repaint like this? I don't mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you'll see the problem when trying to then scroll.
Initially I'm thinking there might be some javascript I can call at the end of switching pages that repaints the page.
Thanks

You could try doing something like this after the slide has completely transitioned to a new page:
Since you've commented that it didn't work as I originally suggested, here's a way to "encourage" Chrome to do the hide/display trick:
$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
$(".slide.loaded.prev").css("display","");
});
or you could try this:
var slide=$(".slide.loaded.prev");
slide.css("display", "none").height(); // just get the height to trigger a relayout.
slide.css("display", "");
The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.
It appears that the scroll bar is for the previous "slide" in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current "slide's" content.