Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

URL Renaming via JavaScript

URL Renaming via JavaScript

Problem

I’m developing a website based on this tutorial and would like to rename the URLs from /?chapter=# to their respective navigation names, e.g. /work, /about, /services etc.

index.php:


    
... ...
... ...
... ...

jquery.page.js:

(function(window, undefined) {

    var Page    = (function() {

        var $container          = $( '#container' ),
            // the scroll container that wraps the articles
            $scroller           = $container.find( 'div.content-scroller' ),
            $menu               = $container.find( 'aside' ),
            // menu links
            $links              = $menu.find( 'a' ),
            $articles           = $container.find( 'div.content-wrapper > article' ),
            // button to scroll to the top of the chapter
            // only shown when screen size  960.
                // If not the articles will be expanded
                if( $(window).width() > 960 ) {

                    $articles.jScrollPane( scrollOptions );

                }
                // add custom scroll to menu
                $menu.children( '#scroll' ).jScrollPane( scrollOptions );

            },
            _goto               = function( chapter ) {

                    // get the url from history state (e.g. chapter=3) and extract the chapter number
                var chapter     = chapter || History.getState().url.queryStringToJSON().chapter,
                    isHome      = ( chapter === undefined ),
                    // we will jump to the introduction chapter if theres no chapter
                    $article    = $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );

                if( $article.length ) {

                        // left / top of the element
                    var left        = $article.position().left,
                        top         = $article.position().top,
                        // check if we are scrolling down or left
                        // is_v will be true when the screen size  0 ),
                        // animation parameters:
                        // if vertically scrolling then the body will animate the scrollTop,
                        // otherwise the scroller (div.content-scroller) will animate the scrollLeft
                        param       = ( is_v ) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight( true ) } : { scrollLeft : left },
                        $elScroller = ( is_v ) ? $( 'html, body' ) : $scroller;

                    $elScroller.stop().animate( param, animation.speed, animation.easing, function() {

                        // active class for selected chapter
                        $articles.removeClass( 'content-active' );
                        $article.addClass( 'content-active' );

                    } );

                }

            },
            _saveState          = function( chapter ) {

                // adds a new state to the history object
                // this will trigger the statechange on the window
                if( History.getState().url.queryStringToJSON().chapter !== chapter ) {

                    History.pushState( null, null, '?chapter=' + chapter );

                }

            },
            _layout             = function() {

                // control the overflow property of the scroller (div.content-scroller)
                var windowWidth = $(window).width();
                switch( true ) {

                    case ( windowWidth  1024 ) : $scroller.css( 'overflow', 'hidden' ); break;

                };

            },
            _initEvents         = function() {

                _initWindowEvents();
                _initMenuEvents();
                _initArticleEvents();

            },
            _initWindowEvents   = function() {

                $(window).on({
                    // when resizing the window we need to reinitialize or destroy the jScrollPanes
                    // depending on the screen size
                    'smartresize' : function( event ) {

                        _layout();

                        $('article.content').each( function() {

                            var $article    = $(this),
                                aJSP        = $article.data( 'jsp' );

                            if( $(window).width() > 960 ) {

                                ( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();

                                _initArticleEvents();

                            }   
                            else {

                                // destroy article's custom scroll if screen size 

How would I be able to do this?

Thanks

Problem courtesy of: user1752759

Solution

Well, this line is what's writing your history state:

 History.pushState(null, null, '?chapter=' + chapter);

So you would need to modify that Function to do what you want. If you have a small site then you could make conditionals to swap the state to whatever you want easily. If you have a large dynamic site you don't want to do this unless you love horrible, tedious maintenance...

_saveState = function(chapter) {

    // adds a new state to the history object
    // this will trigger the statechange on the window
    if (History.getState().url.queryStringToJSON().chapter !== chapter) {
        var page;
        if(chapter == 1)
            page = "/about";
        else if(chapter == 2)
            page = "/services";
        else
            page = '?chapter=' + chapter;

        History.pushState(null, null, page);

    }
},

I may have missed the point of your question though. If so I can update this answer

Solution courtesy of: Kai Qing

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

URL Renaming via JavaScript

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×