Foxy Bingo have just launched a new site www.foxybingo.com and it acts as a one pager, meaning you click on the main menu items and its scrolls down the page.
However when you click on a link the URL will change and not to the normal #anchor but instead bingo.html.
What else is interesting is if I visit www.foxybingo.com/bingo.html it will scroll down the to the correct part of the page on load but display a different meta title.
Edit:
How do I import multiple HTML files into one page like foxy does?
The site don't include multiple pages but use history api pushstate to change url with the name of the file like (using jQuery code):
var $win = $(window);
$('a#bar').click(function() {
anim_jump($('#bar'));
history.pushState(null, "page 2", "bar.html");
});
window.onpopstate = function(event) {
var file = document.location.replace(/.*\//, '');
$('html, body').prop('scrollTop', $('#' + file.replace(/.html$/)).offset().top);
};
function anim_jump(item) {
$('html, body').animate({
scrollTop: item.offset().top
}, 2000);
}
Related
I have a website which uses jQuery to scroll between a few sections (in page1.html). Now, I added another page to the website (page2.html).
I would like the links in the header of page2.html to link back to the corresponding section in page1.html.
In page2.html I wrote:
<li>Home</li>
This links back to page1.html#splash. But on page1, the site does not scroll to the respective section.
My JavaScript is:
$(document).ready(function(){
$('a[href=\\#]').click(function(e){
e.preventDefault();
$('nav').removeClass('visible');
$('html,body').stop().animate({scrollTop: $('.'+$(this).data('scrollto')).offset().top-65 }, 700, 'easeInOutExpo', function(){});
});
What I already tried:
I attempted to add the following code, found elsewhere, to page1.html:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
But there is no scrolling to the right section and the console put out the following error: index.html:19 Uncaught ReferenceError: $ is not defined
Frankly, I am stuck at this point due to lack of expertise in this field.
How do I manage that the site actually scrolls to the right section when coming from another page?
Once you have left the page, the JavaScript from the previous page can't control it. So, you'll need to use jQuery to handle it on the new page when it loads. Place this code on page1.html, changing the comment to the scroll command:
$(document).ready(function() {
if (window.location.href.includes('#splash')) {
let animationTime = 100;
$('html, body').animate({
scrollTop: $('.splash').offset().top
}, animationTime);
}
});
Uncaught ReferenceError: $ is not defined
gives this type of error when your page doesn't get the JQuery
Right, I've been at it for a while now. One page scroll works on home page (where the div ids are defined).
Problem: FROM blog page, if a user clicks 'contact', I want them to be redirected to the home page THEN animated scroll to the #contact-View div.
Attempt: I've tried to check if user clicks a tag, then check if there are now blog page using if statement, then redirect them back to home page (and to the div) using
window.location.href = home +sectionID;
Not working.
header.php (only the nav bit..)
<nav class="header-nav">
<!-- Create a navigation called primary in the header (front-end) -->
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu( $args) ?>
</nav>
front-page.php (home)
<div id="about-View" class="bg-1-wrapper"> #content </div>
<div id="contact-View"> #content </div>
Javascript
jQuery(document).ready(function() {
// add a click listener to each <a> tags
setBindings();
// burger nav
jQuery(".burger-nav").on("click", function() {
jQuery(".header-nav").toggleClass("open");
});
});
function redirectToHome() {
}
/* ONE PAGE NAVIGATION FUNCTION */
function setBindings() {
jQuery('a[href^="#"]').on('click', function(e) {
e.preventDefault();
var home = "http://localhost/wordpress/";
// Get the href attribute, which includes '#' already
var sectionID = jQuery(this).attr('href') + "-View";
// if you're on blog page, first redirect to home -> div: #contact-View
if(document.URL.indexOf("http://localhost/wordpress/blog") >= 0){
window.location.href = home +sectionID;
console.log(location.href);
}
// Animate the scroll
jQuery("html, body").animate({
// Find target element
scrollTop: jQuery(sectionID).offset().top
}, 1000)
});
}
Any ideas how to fix the problem?
Two things can happen when updating the value of window.location.href:
If the new value is located at the current page (by using an anchor), it will jump to that point without reloading the page
If the new value is not located at the current page, JavaScript execution will stop and the new page will be requested and loaded
The problem with the animate function not executing is the latter in this case.
A solution would be to request the new page appended by an extra non-existent anchor (#contact-View-scroll, for example). On the new page, you could use JavaScript to check for this particular anchor value in the URL and execute the scroll functionality if necessary.
Hope this helps in understanding and solving your problem.
update: added some example code below
Step 1:
On the blog page, update the links that refer to the home page by prepending the following content to the hashtag: #scroll:(Such that http://localhost/wordpress/home#contact-View becomes http://localhost/wordpress/home#scroll:contact-View)
Step 2:
Add the following code snippet to the home page. This will search for the #scroll: tag and activate the animate function if present.
jQuery(document).ready(function() {
// Get the hash from the URL
var hash = window.location.hash;
// If a hash exists && starts with "#scroll:"
if (hash.length and hash.indexOf('#scroll:') === 0) {
// Get the anchor name we are scrolling to
var selectionID = hash.substr('#scroll:'.length);
// Call the jQuery scroll function
jQuery("html, body").animate({
scrollTop: jQuery('#'+selectionID).offset().top
}, 1000);
}
});
Step 3: Enjoy!
Also, see https://jsfiddle.net/qcarmk2w for a demo.
I would like to animate my page after the page was redirected using Jquery, the problem with my code is that it only redirects but ignores the animation code, how can I resolve this issue ?
$("#menu a:first-child").click(function() {
window.location.href = "https://www.mysite/blog";
$('html,body').animate({
scrollTop: $("#mainwrapper").offset().top - 70},
'slow');
});
(The animation just scrolls down to an anchor with fluid transition.)
When you redirect, your current script will stop. If you really one to do it, I think there is a way, I DO NOT recommend it, but it will do the job.
Before you redirect to the other page; I assume the new page is still in the same app, not a totally different website), you can set a localStorage variable. Then at be beginning of the JS file of the page you redirect to, check if that localStorage variable you have set in the earlier view is there, if it is, do the animation, then remove that localStorage variable.
// js file of current view
$("#menu a:first-child").click(function() {
localStorage.setItem("animation", true)
window.location.href = "https://www.mysite/blog";
});
// js file of redirected view
if (localStorage.animation && JSON.parse(localStorage.animation)) {
$('html,body').animate({
scrollTop: $("#mainwrapper").offset().top - 70},
'slow', 'linear', function() {
localStorage.removeItem("animation")
}
);
}
I've built a scrolling homepage for my site that allows users to click a link in the header to scroll down to different sections of the site. I also have external links to new pages that allows users to view different projects.
For whatever reason, it works great, but as soon as I get to one of the project pages, then try to click the home page, or the work links it doesn't work properly. Without creating a second header.php,
how can I make the nav work globally.
<script>
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var $anchor = $(this);
href_arr = $anchor.attr('href').split("#");
$('html, body').stop().animate({
scrollTop: $('#'+href_arr[1]).offset().top - 0
}, 500); // it was -70
event.preventDefault();
});
});
});
</script>
My links looks like this...
Link
Work
Any thoughts on how to fix the jQuery so it works on external pages?
It sounds like #home and #work don't exist on your product pages, correct? If that's the case then calling event.preventDefault() will actually prevent the browser from going back to your home page. Try checking if the element exists before preventing the default behavior. If the element doesn't exist, the browser will visit the link normally. This is one way of doing it.
$(document).ready(function(){
$('a.logo, ul.nav a, #mmenu a, a.mobileLogo').bind('click',function(event){
var hash = '#' + $(this).attr('href').split('#')[1];
// check if the element exists on your page
if ($(hash).length) {
// if so, scroll to it and prevent the default behavior
$('html, body').stop().animate({
scrollTop: $(hash).offset().top - 0
}, 500);
event.preventDefault();
}
});
});
So I have a home page menu bar, that has a "features" anchor link. My features section is actually ont he same page. So when a user clicks the "features" link I have a jQuery function that scrolls them down to that portion of the page. That works as it should.
My problem is, if I'm on another separate page (say /contact-us) that is using the same menu bar, if I click "features" obviously nothing is going to happen. So I wrote this code. Which looks for the URL `http://website.com/#features', then should scroll to that DIV - which it does briefly. Problem is, once the page is FULLY loaded, the page goes back to the top.
What am I doing wrong? Let em know if the above doesn't make sense.
Here's my menu bar anchor:
FEATURES</span>
Here's my jQuery snippet that's on the home page:
home: function () {
if (document.location.href.indexOf('#features') > 0) {
$('html, body').animate({
scrollTop: ($('section.feature-set').eq(1).offset().top - 60)
}, {
duration: 1000,
easing: 'easeInOutExpo'
});
return false;
}
}
*EDIT*
So it wasn't my js code, it was this block of js. This hides iphone safari bar. Seems to be scrolling my page to the top on load. How can I prevent the conflict? I.e. run this block on iPhone only, but also not conflict with my hashtag URL
// Hides Safari Address Bar on iPhone
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
I assume there is already jQuery library is loaded in your page, here you can change interval of scroll. It is working for me.
jQuery(window).ready(function(e){
// Remove the # from the hash
var loadTarget = location.hash.replace('#','');
if(loadTarget != ''){
var $loadTarget = jQuery('#' + loadTarget);
jQuery('html, body').stop().animate({
'scrollTop': $loadTarget.offset().top
}, 1000, 'swing', function() {
window.location.hash = '#' + loadTarget;
});
}
});
I assume that code is coming from a library like jQuery mobile? Either way you can modify it to only work when there's not already a direction coming from the URL:
if (window.location.hash.length == 0){
// Hides Safari Address Bar on iPhone
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
}
Then it will only perform the scroll if a hash tag hasn't been supplied.