abdi0987 / viajs

A JavaScript library that allows you to load HTML content dynamically

Via is a small library that allows you to load content on to a page dynamically

Demo

ViaJS Demo (click me)

Installing

This library requires jQuery

git clone https://github.com/abdi0987/ViaJS.git

Link to the app.js file

<script src='lib/app.js'></script>

Usage

Example

Specifiy were to load the content

<div class="container">
    <div id="title" via-views>Should stay hidden</div>

    <div id="content" via-views>Should stay hidden</div>
</div>

add via-views attribute to your div element to specify where to load the content

Specify your views url and a default view if the user enters an invalid hashtag url.

Then call the init function and pass it your views

var views = {
    home: [{
            selector: "#title",
            templateUrl: 'views/index-title.html'
        }, {
            selector: "#content",
            templateUrl: 'views/index-content.html'
        },
    ],
    about: [{
            selector: "#title",
            templateUrl: 'views/about-title.html'
        }, {
            selector: "#content",
            templateUrl: 'views/about-content.html'
        },
    ],
    contact: [{
            selector: "#title",
            templateUrl: 'views/contact-title.html'
        // }, {
        //     selector: "#content",
        //     templateUrl: 'views/contact-content.php'
        },
    ],
    defaultView: {
        view: 'home'
    }
};

var via = new Via();

via.init(views);

now you can use the short version:

new Via(views);

and also

Then use an a tag

<ul class="nav navbar-nav">
    <li class=""><a via-href="home">Home</a></li>
    <li><a via-href="about">About</a></li>
    <li><a via-href="contact">Contact</a></li>
</ul>

Add __via-href attribute to every tag you are using to load your content and remeber that via-href value should be the same name you gave the views object.

viajs's Issues

Demo is not running?

Trying to run this github code. Index.html on click shows no effect on Home, about or contacts. Only thing I am able to see is
should stay hidden
should stay hidden

Trying to run in localhost

Readme - requirements missing

This lib requires jQuery, but readme file does not mention about that.

README Images

remove jQuery?

Hi, thanks for sharing this nice project! I'm thinking how much would it take to rewrite this in vanilla js. Any help appreciated.

double click

when you click on the a tag with a via-link attribute twice it tries to go to a page instead of has for example

when you click on home link in the demo the link looks like this http://viajs.surge.sh/#home

but when you click on the home link again the link looks like this http://viajs.surge.sh/home
it tries to go to the /home instead of /#home therefore its redirected to a 404 page.

Multi copy views

Is possible create multi copy of object (es views1, views2 etcc)?

on load fade transition

Hi, I would like to add fade-in transition to pages when they load into container. Any hint appreciated.
I tried with all the techniques I know and no success...

Collaboration invitation

Hello, Abdi
Recently I saw your repository here and decided to use it.
I also expanded the functionality of the library.
Now it can work with many pieces of code spread on different html files.
Documentation needs more examples now as well

Won't work with a vertical nav menu

I have edited the code to work using the example, but when I try to apply it to a vertical nav menu in a three column bootstrap framework, it just fails and I can't figure out why. Has anybody been able to make it work outside of a traditional nav bar?

Image for README

Add jQuery dependency in description and README

Wouldn't have waisted my time, if there was. Thanks for your work anyways.