I am using Sammy.js for my website and I want to send a link to a page on the website to someone in an email. I have set up links like this:
this.get('#/', function(context) {
$("#main").load("sections/home.html");
});
this.get('#/:page', function(context) {
$("#main").load( "sections/" + this.params['page'] + ".html" );
});
The first one is default, so that when you type in my website, it goes to the home.html section first and if I take that out, when I go to my website, nothing loads in #main. Now, if I were to just type into my URL bar mywebsite.com/#/contact, it will load mywebsite.com/#/, in other words, straight to the home page.
I will say that if I go to the homepage first, mywebsite.com/#/, and then modify the URL to the page I want, it will work. If I hit enter to reload the page, or if I try to modify it again, it will go back to the homepage. Please help.
Try wrapping it in a document.ready and run the default route - like this:
$(document).ready(function () {
Sammy('#main', function() {
$("#header").load("templates/header.html");
$("#nav-bar").load("templates/nav-bar.html");
$("#footer").load("templates/footer.html");
this.get('#/', function(context) {
$("#main").load("sections/home.html");
});
this.get('#/:page', function(context) {
$("#main").load( "sections/" + this.params['page'] + ".html" );
});
}).run('#/');
})
That seems to work on my end.
Related
Here's the issue:
Got multiple internal links on the web, still not connected to actual html files.
Im working with local files for the time being
Wanna make js redirect all of the dead links to one particular page (let's call the file: 404-error-page.html) up until I will finish the rest of html files to make those dead links active again
Purpose: wanna keep user away from seeing 404 blank page and instead show em some temporary page (404-error-page.html)
Sorry if that's messy - 1st time adding a question here.
HTML
<html><body><a href="random-link-directing-to-a-non-existing-page"></body></html>
JS
$('a').on('click', function(event) {
var $element = $(event.target);
var link = "404-error-page.html";
if(result.broken) {
if(result.http.response && ![undefined, 500].includes(result.http.response.statusCode)) {
event.preventDefault();
document.location.href = link;
}
}
});
I've already tried some alterations of this code but it's not working for me.
Firstly, need to make this functional on local files and then ofc online.
Any ideas?
Set the data-dead-link attribute to all your unfinished link tag as the follow.
Correct Link
<a data-dead-link>Dead Link</a>
<a data-dead-link>Dead Link</a>
Before the </body> tag insert the follow script
var deadLinks = document.querySelectorAll(`[data-dead-link]`)
deadLinks.forEach(el => {
el.href = "404-error-page.html"
})
I have created a webpage that uses jQuery to show and hide elements. The obvious problem now arose; the back and forward browser buttons don't work anymore as everything is loaded within a single location.
I know the answer lies within jQuery History but after busting my head for several hours on their website and examples given here on stackoverflow, I still cant manage to:
A) create a history entry (I think i got this covered but not 100% sure)
B) animate the page transition with my own function (displayed beneath)
This is the website: www.grommit.nl
There are 4 sub-pages that require a history entry when called upon.
This code shows the transition of the "wordpress page". The other pages work in a similiar way. (so far I have only managed to generalize the last part of the pageload with the "LoadPageContent" function, the bit before that is different with every page)
var LoadPageContent = function() {
$(".sceneBody").slideDown(function() {
$(".aftertitle").css('width', '4em');
$(".mediacontainer").fadeTo('0.3s', 1,)
});
$("#goWordpress").click(function () {
$("#homeScene").fadeOut(function () {
$("#wordpressMessage").fadeIn(function() {
$(this).delay(300).slideUp(function() {
$("#wordpressPage, #grommitFixed").slideDown(function() {
LoadPageContent();
});
});
});
});
});
this is the function that is currently working as a previous button within the DOM. I would like this function to execute when the previous button is clicked.
var goBack = function() {
$(".aftertitle").css('width', '0em')
$(".mediacontainer").fadeTo('0.3s', 0, function() {
$(".scenebody, #grommitFixed").slideUp(function() {
$("*[id*=Page]:visible").each(function() {
$(this).slideUp(function() {
$("#homeScene").fadeIn();
});
});
});
});
};
In html5 you have something called pushstate, that you can use to tell the browser what to go back to. Check out:
html pushstate
Recently set up a theme running bootstrap to run as our website. Everything works fine, including external URLs that have been placed in the HTML.
The thing is, the actual navigation bar does not register the external URLs and will not open them when you click. It's being stopped by the JS "Magnific Popup" but I do not know why specifically. Any help would be greatly appreciated.
Here is a link to the website, and the navigation bar with the error is top-right.
Rustoria Website
This is usually caused by preventDefault() method inside the javascript. I believe the navigation originally intended for anchor scrolls. Inside the main.js file, you will find the following code in line 62.
// Page Nav
var clickMenu = function() {
$('#navbar a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section'),
navbar = $('#navbar');
if ( $('[data-section="' + section + '"]').length ) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top
}, 500);
}
if ( navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded', 'false');
$('.js-fh5co-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
As you can see the function is preventing the default action. After reading this function, you can see the jquery selector is looking for the a tags without "external" class. Simply adding "external" class to the a tag will fix the issue.
I want to use intro.js with more than two pages.
Is it a simple way to do it?
Yes, you can. If you look at code for intro.js example with multiple pages https://github.com/usablica/intro.js/tree/master/example/multi-page you can see that first page has code that redirects to second page after user click the button:
<script type="text/javascript">
document.getElementById('startButton').onclick = function() {
introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
window.location.href = 'second.html?multipage=true';
});
};
</script>
And on the second page we use regex to check if user is going through intro. You will need to add code like that to each page, with url address to the page that should be shown next.
If you want to have more than one "intro flows" (since the question title said multiple), you can give them names or numbers. Then, instead of adding multipage=true you can use multipage=beta_version or multipage=1 and use reqex to check if user should see intro, and if yes, which one.
<script type="text/javascript">
if (RegExp('multipage', 'gi').test(window.location.search)) {
document.getElementById('startButton').onclick = function() {
introJs().setOption('doneLabel', 'Next page')
.start().oncomplete(function() {
if (RegExp('multipage=2', 'gi').test(window.location.search)) {
window.location.href = 'third.html?multipage=2';
}
else {
window.location.href = 'unicorn.html?multipage=3';
}
});
};
}
</script>
That might be not the nicest code ever :), but ( like Rich said ) without more information I can only guess this is what you want to do? But hopefully, it will give a general idea.
if (RegExp('multipage', 'gi').test(window.location.search)) {
introJs().setOption('doneLabel', 'Next Page →').start().oncomplete(function() {
window.location.href = 'nextpage?multipage=true';
});
}
I was able to use intro.js for a complex multipage use (more complete than their official multipage example). See the issue I opened about it associated to my React solution on Codesandbox.
I've got a problem I'm having trying to append a bannercode to the end of an URL. The customer journey is as follows:
Person receives an email which contains a link to a site (SITE1), the URL will contain a banner code e.g. www.site1.com?banner=helloworld
Once the person is on this site, there are 2 buttons which take the customer to a second site:
Button 1 goes to https://www.site2.com/page1
Button 2 goes to same URL/page2
$(document).ready( function () {
var banner = String($.query.get('banner'));
if(banner){
href = $('a[href^="https://"]').attr("href") + "?banner=" + banner;
$('a[href^="https://"]').attr("href", href);
}
});
Basically what happens is, the piece of code I have makes both buttons go to the same URL for example button 1. How can I get the script to not change the URL for all buttons? Thanks in advance.
Do I understand you right: you want to add banner part for every link, but keep the original part unchanged?
$(document).ready(function(){
var banner=String($.query.get('banner'));
if(banner){
$('a[href^="https://"]').attr('href',function(){
return this+'?banner='+banner;
});
}
});
or in shorter:
$(document).ready(function(){
(banner=$.query.get('banner'))?$('[href^=https]').attr('href',function(){
return this+'?banner='+banner}):null;
})