Web_Designer_Issue_262_2017

Create a draggable left and right navigation panel
DOWNLOAD TUTORIAL FILES
www.filesilo.co.uk/webdesigner
EXPERT ADVICE
Function follows theme
As this site is named The Poli-Graph
it sticks fairly rigidly to a polygraph
for the site’s theming. Using the
polygraph idea for the news
checking means that the graph itself
becomes the navigation, and
therefore the functionality follows
out of the concept. This even
dictates how the site content will
look as the user browses the news.
T
here has been no end of controversy
following the election of President
Trump to the White House. One of the
biggest areas of pontification has been
around the subject of ‘fake news’, with even the President
himself claiming that news outlets are making stories up.
Simultaneously there have been a number of facts
claimed by the President that have later been disputed,
leading to a cat-and-mouse game of fact checking that
seems to constantly pervade our news feeds.
Into this space comes the hilarious website, The
Poli-Graph, which aggregates disputed President Trump
What our
experts think
of the site
facts by some of the largest global news outlets. The
site was created by Camilla Ploug and Martin Furze who
have day jobs as art directors, but they represent no
organisation with this production.
Using the polygraph theme users get to browse the
facts of President Trump in a timeline representing the
graph line from a polygraph. Over the top of this is a
fantastic PNG image with Trump’s head, Photoshopped
up with Pinocchio styling to show the extent of his lies.
While this project is just a bit of fun, it does show some
very disturbing realities about the state of the world in
which we live.
Detecting porky pies
“The Poli-Graph is an online lie detector, hooking Trump up to it 24/7. Every
false claim will be detected automatically via an AI and posted to our site the
moment it is posted on the web. This was something we produced in our
spare time, to highlight something we thought was important.”
Camilla Ploug, Art director
Technique
1. Create the draggable timeline
The poligraph.live site has a draggable timeline that
enables the user to drag a graph line back and forth. To
recreate this efect, add the CSS on FileSilo to your
page to hide the overflow content on the x axis to stop
left to right scroll bars.
2. Draggable area
The draggable area is styled up now. It’s been created
much wider than the screen at 3,000 pixels wide. This is
so that it can be dragged left and right. The background
image is placed in to fill the background, and the cursor
changes to a pointer when the mouse is over this.
#drag {
position: absolute;
width: 3000px;
height: 300px;
background: url(img/line.png) no-repeat;
cursor: pointer; }
3. HTML content
The HTML part of the code is very sparse, it really is just
a nested div tag. The outer div is named ‘container’ and
the inner element is ‘drag’. There are mouse events on
here for mousedown and mouseup to handle the
mouse being pressed.
4. Add the functionality
Before the closing HTML tag on your page, add the script
tags and enter the code here. The main part of this is to
work out the screen’s width and then take the 3,000-
pixel width of the draggable div of this. This sets up how
much we can then drag in each direction.
var drag = document.getElementById(‘drag’);
var absRight = window.innerWidth - 3000;
drag.style.left = absRight + ‘px’;
function startMoving(evt) {
evt = evt || window.event;
var posX = evt.clientX;
var divLeft = drag.style.left;
divLeft = divLeft.replace(‘px’, ‘’);
var diffX = posX - divLeft;
5. Move the mouse
When the mouse is pressed on the draggable div, the
function here is added to it. This works out the position of
the div by taking its current position and taking of the
current position of the mouse. The if statements stop it
being dragged too far left and right.
document.onmousemove = function(evt) {
evt = evt || window.event;
var posX = evt.clientX;
var newX = posX - diffX;
if (newX > 0) newX = 0;
if (newX < absRight) newX = absRight;
drag.style.left = newX + ‘px’;
}
}
6. Release the mouse
Once the mouse is released the mousemove function
is wiped out so that it doesn’t keep firing. Save the
document and try the page in your browser so that
you can see the draggable content. To improve this you
could add an event listener to check for the browser
resizing and update the absRight variable with the
new window width.
function stopMoving() {
document.onmousemove = function() {}
}
59