I have been searching for hours about how to do this, trying different things and not succeeding.
All I want to do is make a one-page site that shows/hides divs and does one simple animation. I have already made it do everything I want and look the way I want it to look: When you click a link in my navbar, there is a script that runs that hides one div, shows another, and also changes the size of the header image. This is all done with simple JS and CSS, but the back button doesn't work and the URL does not change even when I make the link a hash anchor. Maybe having all the divs on the index and showing/hiding them isn't even the best way to do this.
The implementation of the HTML5 History API (If I should even be using that) has got me stumpped, and I can't seem to find a simple straightforward working example of this.
Can anyone point me to a fiddle or codepen of something like this working properly?
This is the basics of what I'm doing:
Link:
Work
Function:
function work() {
document.getElementById("work").style.cssText = 'display: block; opacity: 1;'
document.getElementById("about").style.cssText = 'display: none; opacity: 0;'
document.getElementById("hero").style.cssText = 'height: 85px; transition: 200ms ease-in-out;'
document.getElementById("introcontainer").style.cssText = 'visibility: hidden; opacity: 0; transition: visibility 200ms, opacity 200ms linear;';
}
When my "Work" link is clicked, "about" is hidden, "introcontainer" is hidden, height of "hero" is changed, and "work" is displayed. I have two other "pages" and they function the same way.
History API is made just for such scenarios , instead of scanning url hashes and running complex if else you can use pushState to keep track of application state and decide what happens at each state.
The gist of this API is when you push something using pushState it gets returned to you on popState (on hitting back button).
history.pushState(objState,title,Url);
The first argument is where we pass stuff that will help identify application state you can put anything but it has to be enclosed in an object
I will ignore the 2nd one(pass any string). 3rd one is what URL bar would show relative to current path on executing PushState()
Assuming you have nav something like this
<ul id="nav">
<li>About</li>
<li>Contact</li>
<li>Team</li>
</ul>
assign click handlers for pushing state
$('a').click(function(e){
e.preventDefault();
var targetUrl = $(this).attr('href');
history.pushState({url:targetUrl}, targetUrl, targetUrl);
applyState(targetUrl); //will show div associated with this anchor
});
Now when user clicks a link you need to push something related to this say its href or title to identify it later (I've used its href but you are free to use anything) after it gets pushed you may animate and show div associated with this link eg. If I click <a href="work"> then push “work” and show the div that holds your work details(while minimizing/hiding other divs) .Your url reads xyz/work atm
Next if I click <a href="contact"> state for contact gets pushed and same way it's associated div gets highlighted.Your url reads xyz/contact atm
Now when I hit back history will pop and url will change from xyz/contact to xyz/work popping the latest inactive state (wiz. work and not contact!)
If you have assigned handler for onpopstate you can catch the popped content
window.onpopstate = function(e) {
var popie = e.state ? e.state.url : null;
applyState(popie);
}
so popie would be “work” , applyState will do its fancy animation and show work div
applyState might look like
function applyState(url) {
$('#status').text('Current active page ' + url);
switch(url){
case "work": //show work details div hide others
break;
case "about": //show aboutdetails div hide others
break;
}
Related
I don't know if it's possible in any way to achieve, what I want to do.
I got single page website with some sections. Something like this:
<div class="page pageOne"></div>
<div class="page pageTwo"></div>
<div class="page pageThree"></div>
<div class="page pageFour"></div>
When you open up the site, pages 2, 3 and 4 got display:none and the first one display:block. When I click a link in my navigation, the current "page" fades out and whatever link you've clicked on, the belonging section fades in. The links look like this:
<a class="pageChange" href=".pageFour">Four</a>
And here's the jQuery code:
$(".pageChange").click(function(e){
e.preventDefault();
var href = $(this).attr("href");
$(".page").fadeOut(200);
setTimeout(function(){
$(href).fadeIn();
}, 200);
});
What's pretty obvious is when I click the browsers back button, it won't fade the previous section in. It will just return to the previous site I've opened.So my question is: Is there a way to add a history entry in the browser, when clicking on a link? So I can press the back button and it fades the previous section in?
To get the visible section before clicking a link, I've done this:
var currentPage = $(".page:visible").attr('class').split(' ')[1];
But unfortunately that's no use to what I want to achieve.
I'd be incredibly happy if someone could provide me some help of how I could approach this (or if it's even possible)
You have to use the browser History API to update the URL. Then you can detect the back and forth movement with onpopstate and call your fadeIn and fadeOut methods accordingly.
I had the super similar situation! The best solution my friend would be to use https://alvarotrigo.com/fullPage/ You can read the code how he's doing on github. Basically you have to record the scrolling and later handle using a function for back and forth browsing.
Easiest way to explain it is if you have a look at the site - haloespresso.com.au/working/
If you click the "menu" option in the top menu, it scrolls to the menu id #pg-9-4, which is what I want. On the other pages, the menu is slightly different and the same link is changed to link to the home page with #pg-9-4 added to the end of it. The point here is clearly to get the link from another page to open the home page but scroll to the menu part of it. I don't even need it to smooth scroll or anything, just go to that spot. It looks like it does go there for like, one frame, as it's loading, but it keeps jumping to the top. It's simply beyond me to try and figure out what is causing it to lose this basic HTML (afaik) functionality and keep forcing me to the top of the page...
Any help would be really great, as I'm a bit of a noob when it comes to anything other than html/css and simple jquery.
Just append the anchor to the end of the link.
Simply insert a link like:
Link to section on another page
Edit: Just noticed you're not getting this to work. What do your links look like, and what's the HTML with the ID on the target page?
Try this jQuery code:
$(document).ready(function() {
function hashScroll() {
// get URL Hash
var hash = window.location.hash;
// check if hash is set and not empty
if (hash != '') {
// scroll to hash ID after 10ms delay
setTimeout(function() {
$(document).scrollTop( $(hash).offset().top );
}, 10);
// debugging
console.log(hash);
console.log('offset:'+ $(hash).offset().top );
}
}
hashScroll(); // fire hash scroll function
});
Explanation:
This function will capture the URL hash (www.example.com/#hash), checks if it's not empty and then scrolls the page to the element with the ID which matches the hash after 10 ms. The delay is there to make sure browsers don't mess up the loading process.
I'm making a book-website with a jQuery-plugin. Every time a link is clicked, the book-page switches to the next page and the .active class switches from link. The problem is that if you click fast between the pages, the active class switches but the movement of the book is too slow so you don't hop to the next page.
I'm trying disable the link after u clicked on one. My idea was just removing an attribute for a couple of seconds like this:
$('.button').click(function(e){
.. switch page using id
.. switch .active
$(".button li a").removeAttr("id");
}
So when the page is loaded, and the active class is switched. U cannot click on another link until the attribute is put back on.
How can remove an attribute for a couple of seconds? Or are there other options to disable a link for a period of time without removing the attribute?
An easy (but a bit hacky) way to accomplish this is returning early out of the handler if the action is already in progress:
var pageIsTurning = false;
$('.button').click(function(e){
if (pageIsTurning) { return; }
// do your stuff and change the page
}):
According to the docs of the booklet plugin you can bind to the bookletstart and bookletchange events which are where you'd update the pageIsTurning variable.
$(".selector").bind("bookletstart", function(event, data) {
pageIsTurning = true;
});
$(".selector").bind("bookletchange", function(event, data) {
pageIsTurning = false;
});
Note that this approach wouldn't work if you have more than one booklet on the page but could easily be adapted.
I am a beginner and have searched thoroughly, finding not a solution for this problem.
I've written a code where a css style changes when you click on a link, such as the one below:
function spHome(){
document.getElementById("btnHome2").style.background = "url(../images/btn_navHoverArrow.png) no-repeat center bottom";
document.getElementById("btnAccount").style.background = "0";
}
function spAccount(){
document.getElementById("btnHome2").style.background = "0";
document.getElementById("btnAccount").style.background = "url(../images/btn_navHoverArrow.png) no-repeat center bottom";
}
This code works perfectly fine. The problem for me is that when I refresh the page, the click state is no longer active. Is there a code that can allow the function to stay active only when the user is at a certain anchor point of the page. For example, if we have an anchor location called index.html#home, the home button will be active and when index.html#account is clicked, the account button will stay on clicked even after page refresh.
The example below doesn't seem to be working on jsfiddle but it is fine on all browsers:
http://jsfiddle.net/JoshuaWaheed/HZLVt/3/
Is there a way to make this happen?
Add href hashes and return false onclick to avoid page reloading
You need to execute js at page load, check the url's hash, and put the button's state accordingly to the hash.
Using jQuery, it would be something like (not tested):
$(function() {
if (document.location.hash == "#home")
spHome()
else
if (document.location.hash == "#account")
spAccount()
})
If you don't want to use jQuery, you can put that code on docuent event "load"
Alright, I'm using the UberMenu Plugin for Wordpress. When you click the parent item in a menu, the child-menu slides down into position underneath and stays put. After clicking on a child-menu link, the normal function is for the child-menu to disappear and be reactivated by click on the parent item again.
So, I wanted the child-menu to stay visible after going to a child-page and afterwards continue with the original functionality after that very first instance. Miraculously, I've gotten this far with success.
You can view the working menu/sub-menu here: http://goo.gl/MC8Aw
I added this code to the UberMenu.dev.js:
jQuery('document').ready( function($){
var id = $( '#megaMenu ul.megaMenu > li.current-menu-item, #megaMenu ul.megaMenu > li.current-menu-parent, #megaMenu ul.megaMenu > li.current-menu-ancestor' ).live().first().attr( 'id' );
uberMenu_openMega( '#' + id );
});
You can see the entire .js file here: http://goo.gl/xZd6g
Alright, so the only issue is that when the child-page loads and the child-menu is triggered immediately by the above code, it's retaining the slide transition from the primary functionality. This gives a delayed look/experience to the child-menu that I want to avoid/minimize.
Is it possible to amend the above code (which seems already set up to only affect the first appearance of the menu) so that it also ignores the slide transition needed throughout the rest of the plugin?