Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    history.pushState how to detect change in url upon clicking back?

    Live Demo: Untitled Document

    Okay, so I've got my JQuery history.pushState working upon clicking a button and if then someone copies the new URL and sends it to a friend, they will then see the same content. however, when I click to navigate back, no change is happening, so I'd like to ask how to resolve. Below you can view a snippet of the relevant code;

    JQuery Code:
    Code:
                $("#Fundraiser_Categories .button").click(function () {
                    var slidedown = '#' + $(this).attr('id').replace('_Btn', '_Fundraising_Content');
                    DomainPush = $(this).attr('id').replace('_Btn', '_Fundraising');
                    $("#Fundraiser_Categories").slideUp(2000);
                    $(slidedown).slideDown(2000);
                    history.pushState(null, null, "?Category=fundraising&content=" + DomainPush);
    
                });
                var sParameterName;
    
                function GetQueryStringParams(sParam) {
                    var sPageURL = window.location.search.substring(1);
                    var sURLVariables = sPageURL.split('&');
                    for (var i = 0; i < sURLVariables.length; i++) {
                        var sParameterName = sURLVariables[i].split('=');
                        if (sParameterName[0] == sParam) {
                            return sParameterName[1];
                        };
                    };
                };
    
                var PageCategory = GetQueryStringParams('Category');
                PageContent = GetQueryStringParams('content') + '_Content';
                //alert(PageContent);
    
                if (GetQueryStringParams('Category')) {
                    $('.ContentInner #Fundraiser_Categories').css('display', 'none');
                    $('.ContentInner #' + PageContent).css('display', 'block');
                };
    Thank you for any help in advanced as always,
    Best Regards,
    Tim

    Update:

    Half way there, works upon hitting the back button but I do not know how to detect if the back button or the forward button has been hit.

    New Implementations:
    Code:
                var PreviousLocation;
                var CurrentLocation;
                $("#Fundraiser_Categories .button").click(function () {
                            var slidedown = '#' + $(this).attr('id').replace('_Btn', '_Fundraising_Content');
    					PreviousLocation = '#' + $(this).parent().parent().attr('id');
    					CurrentLocation = '#' + $(this).attr('id').replace('_Btn', '_Fundraising_Content');
                    	DomainPush = $(this).attr('id').replace('_Btn', '_Fundraising');
                            $("#Fundraiser_Categories").slideUp(2000);
                            $(slidedown).slideDown(2000);
                            history.pushState(null, null, "?Category=fundraising&content=" + DomainPush);
    
                });
    
                var sParameterName;
    
                function GetQueryStringParams(sParam) {
                            var sPageURL = window.location.search.substring(1);
                            var sURLVariables = sPageURL.split('&');
                            for (var i = 0; i < sURLVariables.length; i++) {
                                        var sParameterName = sURLVariables[i].split('=');
                                        if (sParameterName[0] == sParam) {
                                                    return sParameterName[1];
                                        };
                            };
                };
    
                 var PageCategory = GetQueryStringParams('Category');
                PageContent = GetQueryStringParams('content') + '_Content';
    
                if (GetQueryStringParams('Category')) {
                            $('.ContentInner #Fundraiser_Categories').css('display', 'none');
                            $('.ContentInner #' + PageContent).css('display', 'block');
                };
    
                window.onpopstate = function() {
                            $(PreviousLocation).css('display', 'block');
                            $(CurrentLocation).css('display', 'none');
                };
    Last edited by MrTIMarshall; 04-24-2014 at 04:00 AM.

  • #2
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Updated the window.onpopstate and it now works

    Code:
                window.onpopstate = function () {
    				var PageContent = GetQueryStringParams('content') + '_Content';
                    if (GetQueryStringParams('Category')) {
                        $('.ContentInner #Fundraiser_Categories').css('display', 'none');
                        $('.ContentInner #' + PageContent).css('display', 'block');
                    }else{
                        $('.ContentInner ' + PreviousLocation).css('display', 'block');
                        $('.ContentInner ' + CurrentLocation).css('display', 'none');
                    };
                };


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •