Simple JS Routing System

Programming CSS, JavaScript, web
Comments: 0 2017-09-07 14:48

This is a simple routing system, made with JavaScript.

I made a simple routing system with JavaScript.

You can check it HERE.

How did I made it?

Here's some code:

File: index.html [part of this file]

File: js/script.js:

var Router = {
    element: null,
    parameters: [],
    fragment: null,
    views: [],
    lasturl: '',
    url: '',
    defaultPageContent: '

Default Content...', loadDefaultContent: true, loadContentOnStart: true, init: function(element) { var self = this; self.lasturl = window.location.href; this.element = document.getElementById(element); setInterval(function() { self.geturl(); }, 100); }, addView: function(p) { this.views.push(p); return this; }, geturl: function() { this.url = window.location.href; this.fragment = this.url.match(/#(.*)/); if (this.fragment === null) this.fragment = ''; this.parameters = (this.fragment ? this.fragment[1] : '').split('/'); if (this.lasturl !== this.url || this.loadContentOnStart) { for (i = 0; i < this.views.length; i++) { if (this.parameters[0] === this.views[i]) { this.loadDefaultContent = false; this.loadContentOnStart = false; console.log('Content changed!'); this.lasturl = this.url; this.element.innerHTML = document.getElementById(this.views[i]).innerHTML; } } } if (this.loadDefaultContent || this.parameters[0] === '') { this.element.innerHTML = this.defaultPageContent; } } }; Router.init('routerdiv'); Router.addView('content1view') .addView('content2view') .addView('content3view') .addView('content4view');

File: style.css:

@import url('https://fonts.googleapis.com/css?family=Lato');

html, body {
    font-family: 'Lato', sans-serif;
    background-color: #111111;
    color: #ddd;
}

.container {
    border: 1px solid black;
    background-color: #2d2d2d;
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 15px;
}

p {
    font-size: 18px;
}

a {
    text-decoration: none;
    color: #7675f5;
}

.pagetitle {
    font-size: 72px;
    text-align: center;
    text-transform: uppercase;
    color: #202020;
    background-color: #2d2d2d;
    letter-spacing: .1em;
    text-shadow: 
      -1px -1px 1px #111, 
      2px 2px 1px #363636;
}

.views {
    display: none;
}

#routerdiv > h3 {
    color:#99e;
}

.mybutton {
    background-color: #556;
    color: #eee;
    padding: 10px;
    border: none;
    border-radius: 3px;
    display: inline-block;
    box-shadow:
        2px 2px 2px #334;
}

.mybutton:hover {
    
    background: #445;
    color: #ddd;
    -ms-transform: translate(0, 1px); /* IE 9 */
    -webkit-transform: translate(0, 1px); /* Safari */
    transform: translate(0, 1px);
}

.mybutton:active {
    -ms-transform: translate(0, 2px); /* IE 9 */
    -webkit-transform: translate(0, 2px); /* Safari */
    transform: translate(0, 2px);
}

Comment this page:

Latest comments

NO COMMENTS DETECTED