I want to navigate inside the page with an animation using Javascript, but also change the URL so the user can click "back" to go back to the previous "page".
I have no idea how to approach this. Do I put the content I'm navigating to on a new html page, or on the same page?
What I've tried so far:
Some Other Page
This will completely reload to someOtherPage, and won't allow animations.
Some Other Page
<script>
function animateToOtherSection() {
//things like fade in/out or scroll
}
</script>
This works if the content I'm navigating to exists in this page, which is okay, but the URL won't be changed (except for the additional #).
If i try to change window.href in Javascript, the entire page reloads, which is not desired.
This question was inspired by some websites like this. When the See our projects button is clicked, although it as an anchor element, the page doesn't reload, but a fade out/in executes and the navigation bar above stays throughout. If I click the 'back' button in my browser, another animation takes me back to the splash screen.
Note: This is not an option:
Some Other Page
I don't want to just scroll to an element, but manipulate and show/hide a lot of elements on the screen.
Thanks in advance for the answers!
The DOM window object provides access to the browser's history through the history object. It exposes useful methods and properties that let you move back and forth through the user's history, as well as -- starting with HTML5 -- manipulate the contents of the history stack.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
Load data from the server and place the returned HTML into the matched element.
http://api.jquery.com/load/
You can make it easy here is example:
HTML:
<button id="changeUrl">See our projects</button>
JavaScript:
$('#changeUrl').click(function () {
history.pushState({}, 'Title', '/Url/Test');
$(document).load('/url html');
});
Also you can add animation for example :
$('#changeUrl').click(function () {
$('body').fadeOut();
history.pushState({}, 'Title', '/Url/Test');
$(document).load('/url html', function () {
$('body').fadeIn();
});
});
You may also add a JavaScript "fadeout" animation when "unloading" the current page, and a "fadein" animation executing at the begining of the next page load.
If you prefetch most of your content, the transition will be smooth.
To avoid a page load when you click on a link, attach an onclick event to your link, and finish your JavaScript callback by a e.preventDefault(); as explained in this question : How to stop default link click behavior with jQuery from Mozilla Dev Network : https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault
Cancels the event if it is cancelable, without stopping further propagation of the event.
About link prefetching : https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
<link rel="prefetch" href="/images/big.jpeg">
Or even really loading <img with a style=display:none; to hide them…
Related
Ok, I have a few issues... I'm building my site with bootstrap/jquery. I'm using bootstrap nav and all nav links are hash links to different containers on the same page.
Issue #1
When using the method below to 'hijack' the link I lose the URL address thus look the ability for people to grab the link and share or link to it later.
Issue #2
There are a few other pages with content that aren't on the homepage. So obviously when users click on the link /somepage/#photography doesn't work. Is the only solution here to not use relative links?
<nav>
Photography
</nav>
// smooth scroll from navigation
$('nav a').click(function(evt){
evt.preventDefault();
var $section = $($(this).attr('href'));
scrollToObject($section);
});
Issue 1: the reason for losing the hash at the end of the URL is because the call to evt.preventDefault() is preventing the hash from being added.
I am not 100% sure on the inner-workings of the scroll effect in scrollToObject(), but if you can provide a callback function when the scrolling is complete you could then add location.assign( evt.target.hash ); which will add the hash to the URL (and it will show up in the user's history.) Of course, you can get the hash value from the anchor object, event, etc.
You can read about the location interface in js on MDN here: https://developer.mozilla.org/en-US/docs/Web/API/Location
Issue 2: You could actually accomplish this once again using location.assign(). Once again, without seeing all of your code, you can create a conditional in a callback and then send the user back to the page with the scrolling anchors: location.assign( location.origin + '/' + evt.target.hash ).
I have looked around, but I'm not seeing anything that specifically addresses this. My goal is to have a link, which can be clicked to either add content or "undo" the act of adding that content. I am trying to us the following:
function ShowDiv() {
if (null == window.set) {
document.getElementById("box2").innerHTML = "Some Content";
window.set = "set";
} else
location.reload();
}
Link
<div id="box2"></div>
This allows me to click the link to show some content inside some div. And then to click the link again to remove that content.
However, I am wondering if there is a way to achieve this result, that also allows the user to click the browser's back button to return the page to the state it was in before triggering the function (e.g., to reload the page).
You are looking for the HTML5 history API. This allows you to push state onto the history as if the browser loaded a different location without actually sending a request and replacing all content and javascript state. This allows the back and forward buttons to work, as long as your JavaScript code shows the correct content according to the current URL.
Resources:
W3C
MDN
Dive Into HTML5
I want to change the way that content is displayed on my website:
var FNav = {
init: function() {
$("a[href*=#]").click(function(e) {
e.preventDefault();
if($(this).attr("href").split("#")[1]) {
FluidNav.goTo($(this).attr("href").split("#")[1]);
}
});
this.goTo("home");
},
goTo: function(page) {
var next_page = $("#"+page);
var nav_item = $('nav ul li a[href=#'+page+']');
$(".page").fadeOut(500);
next_page.fadeIn(500);
How do I change this JavaScript, so I can have a proper back button functionality?
What I have tried (Unsuccessfuly). These are the solutions that I tried but without changing the javascript above. That is why I think none of them seem to work.
Using the History.js method described here:
https://github.com/browserstate/history.js/ I fill out all the steps and
enter the scripts to the header, however only the URL in the URL bar
changes when I click on a link. When I click the Back button, the URl
changes accordingly, but content doesn't load. When I enter a URL in
the URL bar, I get sent to the home page.
Ajaxify and Gist method
described here: https://github.com/browserstate/ajaxify Achieves the
same as above, same issues as well
Davis.js method described here:
https://github.com/olivernn/davis.js Achieves nothing upon completion
of the installation instructions. No change.
jQuery BBQ Plugin method
described here: http://benalman.com/projects/jquery-bbq-plugin/
Achieves nothing, no change upon loading the .js file in the header
of the website.
I read this article and understood it:
http://diveintohtml5.info/history.html
I'm not sure why you couldn't get Davis.js to work for you? Perhaps open an issue on the GitHub page.
If you want to use hash based routing with davis you need to include the hash routing extension. You then just need to include it in your page after davis.
The following setup should then allow you to handle routes
Davis.extend(Davis.hash)
Davis(function () {
this.get('/:page', function (req) {
FluidNav.goTo(req.params.page);
})
})
Assuming you have links in your page with the following
Page1
Page2
Davis will take care of handling the back button for you, so that if you click on the link for Page1 and then Page2, clicking on the back button will navigate to Page1 again.
If you have any problems please open an issue on the GitHub page detailing what you have and what isn't working and I can take a look at it.
The back button does not magically work. You need to code and listen for the event change!
In history.js, it shows you right on the front page:
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
var State = History.getState(); // Note: We are using History.getState() instead of event.state
History.log(State.data, State.title, State.url);
});
I'm designing an HTML page which has one button. The user clicks the button and a simple jQuery script animates that div away, revealing lower page content. You can see it here.
I've noticed that it looks/works fine the first time, but if I refresh the page with the browser button, it doesn't fully reset. The initial container is only half on the page. If I enter the URL again and load the page, it resets as expected.
NOTE: This only happens if you scroll down a bit after clicking the initial button... which seems weird.
I had no idea that there was any difference between these two operations, but there clearly is. What is the difference and how can I fix this problem from happening?
Here's my jQuery code, in case it's relevant:
$(document).ready(function(){
var faqs = $("#FAQ");
$("#learnmore").click(
function(){
$("#home").animate({top:'-=1066px'},600);
$("#more").animate({top:'-=1066px'}, 600, function() {$("#background").hide();} );
$("body").css('overflow-y', 'scroll');
//$("#home").slideUp();
console.log("jquery loaded");
}
);
});
It happens because it is cached by the browser.
If you styles are regularly modiefied, then as easy fix is to attach a unique id on the end of the reference, like
<link href="style.css?time=168768234928" ..../>
What it does, it makes the browser think it is a new request everytime it loads.
It happens because browser trying to scroll to the same position, what was before page reload. To check it, try press button and don't scroll to bottom of page and then reload page.
Okey, the reason is clear.
Now we need solution. Try this:
#more {display:none}
in your css. And then use
$("#more").show().animate(...
in your $("#learnmore").click() function. I hope this will solve the problem.
I have a anchor tag that when you click on the "Up to the Top", it will move the web page to the top of the page. My anchor tag is #PAGETOP.
My question is, I am using the jQuery UI Dialog and basically would like to programmatically activate this #PAGETOP anchor so whenever the page always loads at startup, would like to ensure that the page moves immediately to the top of the page.
I would like to emulate the way stackoverflow moves to the top of all your questions when you paginate to the next page (if possible).
Thanks.
To move to the 'PAGETOP' anchor in Javascript, use this:
location.hash = 'PAGETOP';
If you're wanting to do it on page load, in jQuery it'd be like this:
$(function() {
location.hash = 'PAGETOP';
});
Or take #Kip's idea and go pro with the scrollTo jQuery plugin. This plugin has additional options for different animations etc
<script>
$.scrollTo( "#PAGETOP", 1000 );
</script>