I want to do something similar to the rotating banners with links that is triggered with clicks. I would like to create either a url or a button that points to a different webpage after it is clicked on. For example.
If someone visited my site and click on the url/button they get sent to webpage-A.html
The next time someone visits the site the url/button if clicked on will send that person to webpageB.html and so on.
Once it reaches the end of the list it then starts over.
Unfortunately, I don’t think this can be done on the client side, as JavaScript running in the context of your webpage has no concept of how many times it has been executed by other visitors (i.e. it has no way of knowing which link it should display).
You could of course remember your individual visitors, so that links rotate for them as they visit the site. That would be quite simple using some kind of client side storage.
I would probably keep a reference to the last link shown in a database (or I guess you could save it to a text file if you aren’t otherwise using a DB in your project). Then on page load, fetch the reference (this could just be an integer, for example), display the correct link, update the reference to point to the next link in the array and save that back to the db.
If the someone you’re talking about is the same person, you could do it with javascript, by saving a cookie with the index of the last url in the list. If that someone is a different person you could save that index in a file of database and read it out, but it would be easier to send them a random link (which would once again be easy with javascript)…
The backend can handle PHP or JavaScript. I can handle uploading a CGI script and some flat file with the URL’s I want it to rotate through. A flat file with just the list of things I want to rotate through is the simplest way to go I think.
Thanks but no it will not be the same person. I want to direct each new visitor to my site to a different location. This would need to be done on the backend from what I am told.
Okey dokey, here’s a simplistic implementation using Node. This relies on you having a directory named logic containing the linkRotator.js script and a file named counter initialized with the number 0 (or any other whole integer really). As per the express templating tutorial, I used pug for the view.
app.js
var express = require('express');
var link = require('./logic/linkRotator');
var app = express();
app.set('views', './views')
app.set('view engine', 'pug');
app.get('/', function (req, res) {
res.render('index', { link: link.getNextLink() });
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
linkRotator.js
var fs = require("fs");
function getCounterValue(callback) {
var counterVal = Number(
fs.readFileSync('./logic/counter').toString()
);
callback(counterVal);
}
function incrementValue(val, callback){
var newValue = val + 1;
fs.writeFile("./logic/counter", val+1 );
callback(newValue);
}
function getNextLink(){
var links = [
{
"url": "http://sitepoint.com/javascript",
"text": "SitePoint JavaScript"
},
{
"url": "http://sitepoint.com/ruby",
"text": "SitePoint Ruby"
},
{
"url": "http://sitepoint.com/html-css",
"text": "SitePoint HTML/CSS"
}
];
var currNum;
getCounterValue(function(val){
incrementValue(val, function(val){
currNum = val % 3;
});
});
return links[currNum];
}
exports.getNextLink = getNextLink;
index.pug
html
head
title My App
body
h1 My Awesome App
p Be sure to click this:
a(href= link.url)= link.text
Oh Wow. That is great.
can this run as a cgi script or as an app? I don’t know much about app programming but that doesn’t matter since this is for a website not an app.
It’s using Node and Express. When you said the backend can handle JavaScript, I supposed you’d have that running. If you’re just looking for something you can embed in a regular HTML page, PHP might be the way to go. The concepts should translate one for one, though …
I want to be able to give someone a url like join.domain.com and that will send then to one of the URL’s in the list. If I have to put join.domain.com in an HTML page as a hyperlink that is fine too.
Pullo, I was wondering how this code can be executed from an HTML or PHP file. I tried to a use the following in the header of an HTML file so when it is called the script runs and redirects it to some other URL.
I am able to get other js code to run just not this one.