Change browser url

You can see my demo code on

https://codepen.io/Nyarl/pen/EORXMe

$(window).on('load resize scroll', function() {

        var activeFound = false;

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

            if (!activeFound) {

                if ($(this).is( ':in-viewport( 5 )')) {

                    $("article.current-new").removeClass("current-new");

                    $(this).addClass('current-new');

                    var url = $(this).data('url');

                    var title = $(this).data('page-title');

                    document.title = title;

                    history.pushState('data to be passed', title, url);

                    console.log(url);

                    activeFound = true;

                }

            }



        });

    });

article {

      max-width:500px;

      min-height:500px

    }

    article.current-new {

      background:red;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>

<article data-url="https://stackoverflow/1" data-title="test">

      <p>

        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>

    

      </p>

    </article>

I'm working on infinite scroll feature for my blog. I could change meta settings depends on element that has .current new class.

The problem is that when I try to change url, my code does it more than one time. Because of this, users has to hit browser's previous button more than once for reaching other posts.

I'm calling those article elements from an ajax call.

Edit: script src wasn't specified:

edited Nov 26 '18 at 4:38

IbzDawg

697

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

add a comment |

You can see my demo code on

https://codepen.io/Nyarl/pen/EORXMe

$(window).on('load resize scroll', function() {

        var activeFound = false;

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

            if (!activeFound) {

                if ($(this).is( ':in-viewport( 5 )')) {

                    $("article.current-new").removeClass("current-new");

                    $(this).addClass('current-new');

                    var url = $(this).data('url');

                    var title = $(this).data('page-title');

                    document.title = title;

                    history.pushState('data to be passed', title, url);

                    console.log(url);

                    activeFound = true;

                }

            }



        });

    });

article {

      max-width:500px;

      min-height:500px

    }

    article.current-new {

      background:red;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>

<article data-url="https://stackoverflow/1" data-title="test">

      <p>

        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>

    

      </p>

    </article>

I'm working on infinite scroll feature for my blog. I could change meta settings depends on element that has .current new class.

The problem is that when I try to change url, my code does it more than one time. Because of this, users has to hit browser's previous button more than once for reaching other posts.

I'm calling those article elements from an ajax call.

Edit: script src wasn't specified:

edited Nov 26 '18 at 4:38

IbzDawg

697

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

add a comment |

You can see my demo code on

https://codepen.io/Nyarl/pen/EORXMe

$(window).on('load resize scroll', function() {

        var activeFound = false;

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

            if (!activeFound) {

                if ($(this).is( ':in-viewport( 5 )')) {

                    $("article.current-new").removeClass("current-new");

                    $(this).addClass('current-new');

                    var url = $(this).data('url');

                    var title = $(this).data('page-title');

                    document.title = title;

                    history.pushState('data to be passed', title, url);

                    console.log(url);

                    activeFound = true;

                }

            }



        });

    });

article {

      max-width:500px;

      min-height:500px

    }

    article.current-new {

      background:red;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>

<article data-url="https://stackoverflow/1" data-title="test">

      <p>

        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>

    

      </p>

    </article>

I'm working on infinite scroll feature for my blog. I could change meta settings depends on element that has .current new class.

The problem is that when I try to change url, my code does it more than one time. Because of this, users has to hit browser's previous button more than once for reaching other posts.

I'm calling those article elements from an ajax call.

Edit: script src wasn't specified:

edited Nov 26 '18 at 4:38

IbzDawg

697

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

You can see my demo code on

https://codepen.io/Nyarl/pen/EORXMe

$(window).on('load resize scroll', function() {

        var activeFound = false;

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

            if (!activeFound) {

                if ($(this).is( ':in-viewport( 5 )')) {

                    $("article.current-new").removeClass("current-new");

                    $(this).addClass('current-new');

                    var url = $(this).data('url');

                    var title = $(this).data('page-title');

                    document.title = title;

                    history.pushState('data to be passed', title, url);

                    console.log(url);

                    activeFound = true;

                }

            }



        });

    });

article {

      max-width:500px;

      min-height:500px

    }

    article.current-new {

      background:red;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>

<article data-url="https://stackoverflow/1" data-title="test">

      <p>

        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>

    

      </p>

    </article>

I'm working on infinite scroll feature for my blog. I could change meta settings depends on element that has .current new class.

The problem is that when I try to change url, my code does it more than one time. Because of this, users has to hit browser's previous button more than once for reaching other posts.

I'm calling those article elements from an ajax call.

Edit: script src wasn't specified:

$(window).on('load resize scroll', function() {

        var activeFound = false;

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

            if (!activeFound) {

                if ($(this).is( ':in-viewport( 5 )')) {

                    $("article.current-new").removeClass("current-new");

                    $(this).addClass('current-new');

                    var url = $(this).data('url');

                    var title = $(this).data('page-title');

                    document.title = title;

                    history.pushState('data to be passed', title, url);

                    console.log(url);

                    activeFound = true;

                }

            }



        });

    });

article {

      max-width:500px;

      min-height:500px

    }

    article.current-new {

      background:red;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>

<article data-url="https://stackoverflow/1" data-title="test">

      <p>

        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>

    

      </p>

    </article>

$(window).on('load resize scroll', function() {

        var activeFound = false;

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

            if (!activeFound) {

                if ($(this).is( ':in-viewport( 5 )')) {

                    $("article.current-new").removeClass("current-new");

                    $(this).addClass('current-new');

                    var url = $(this).data('url');

                    var title = $(this).data('page-title');

                    document.title = title;

                    history.pushState('data to be passed', title, url);

                    console.log(url);

                    activeFound = true;

                }

            }



        });

    });

article {

      max-width:500px;

      min-height:500px

    }

    article.current-new {

      background:red;

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/is-in-viewport/3.0.4/isInViewport.min.js"></script>

<article data-url="https://stackoverflow/1" data-title="test">

      <p>

        <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente aliquam suscipit dolore non consequatur saepe provident vel molestias sequi, accusamus nemo consequuntur nisi ducimus aperiam illum cum expedita cumque tempora?</span>

    

      </p>

    </article>

javascript jquery

edited Nov 26 '18 at 4:38

IbzDawg

697

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

edited Nov 26 '18 at 4:38

IbzDawg

697

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

edited Nov 26 '18 at 4:38

IbzDawg

697

edited Nov 26 '18 at 4:38

IbzDawg

697

edited Nov 26 '18 at 4:38

IbzDawg

697

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

asked Nov 25 '18 at 23:22

Tugce Aksoz

375

add a comment |

1 Answer
1

active

oldest

votes

You can prevent pushState to add url to history more than one time by using this:

if(!history.state || history.state.url != '/yourUrl'){

    // then push state

}

By history.state we will check if theres a history set or no, if yes, we need to make sure that this state not equal pushState url....

Note: pushState most be like this:

history.pushState({ url: "/yourUrl" }, title, url);

edited Nov 26 '18 at 8:16

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

Its still run that code block everytime i scroll. And when i tried the log history.state.url it returns undefined.

– Tugce Aksoz
Nov 26 '18 at 6:55

Sorry for this mistake, I updated my answer now, Url is an identifier set in pushState object, so that, you will see url now if you set history.state.url, you can pass any data you want too....or flag any variable nested-of url..

– Anees Hikmat Abu Hmiad
Nov 26 '18 at 8:17

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473012%2fchange-browser-url%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You can prevent pushState to add url to history more than one time by using this:

if(!history.state || history.state.url != '/yourUrl'){

    // then push state

}

By history.state we will check if theres a history set or no, if yes, we need to make sure that this state not equal pushState url....

Note: pushState most be like this:

history.pushState({ url: "/yourUrl" }, title, url);

edited Nov 26 '18 at 8:16

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

Its still run that code block everytime i scroll. And when i tried the log history.state.url it returns undefined.

– Tugce Aksoz
Nov 26 '18 at 6:55

Sorry for this mistake, I updated my answer now, Url is an identifier set in pushState object, so that, you will see url now if you set history.state.url, you can pass any data you want too....or flag any variable nested-of url..

– Anees Hikmat Abu Hmiad
Nov 26 '18 at 8:17

add a comment |

You can prevent pushState to add url to history more than one time by using this:

if(!history.state || history.state.url != '/yourUrl'){

    // then push state

}

By history.state we will check if theres a history set or no, if yes, we need to make sure that this state not equal pushState url....

Note: pushState most be like this:

history.pushState({ url: "/yourUrl" }, title, url);

edited Nov 26 '18 at 8:16

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

Its still run that code block everytime i scroll. And when i tried the log history.state.url it returns undefined.

– Tugce Aksoz
Nov 26 '18 at 6:55

Sorry for this mistake, I updated my answer now, Url is an identifier set in pushState object, so that, you will see url now if you set history.state.url, you can pass any data you want too....or flag any variable nested-of url..

– Anees Hikmat Abu Hmiad
Nov 26 '18 at 8:17

add a comment |

You can prevent pushState to add url to history more than one time by using this:

if(!history.state || history.state.url != '/yourUrl'){

    // then push state

}

By history.state we will check if theres a history set or no, if yes, we need to make sure that this state not equal pushState url....

Note: pushState most be like this:

history.pushState({ url: "/yourUrl" }, title, url);

edited Nov 26 '18 at 8:16

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

You can prevent pushState to add url to history more than one time by using this:

if(!history.state || history.state.url != '/yourUrl'){

    // then push state

}

By history.state we will check if theres a history set or no, if yes, we need to make sure that this state not equal pushState url....

Note: pushState most be like this:

history.pushState({ url: "/yourUrl" }, title, url);

edited Nov 26 '18 at 8:16

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

edited Nov 26 '18 at 8:16

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

answered Nov 26 '18 at 5:22

Anees Hikmat Abu Hmiad

1,5821027

Its still run that code block everytime i scroll. And when i tried the log history.state.url it returns undefined.

– Tugce Aksoz
Nov 26 '18 at 6:55

Sorry for this mistake, I updated my answer now, Url is an identifier set in pushState object, so that, you will see url now if you set history.state.url, you can pass any data you want too....or flag any variable nested-of url..

– Anees Hikmat Abu Hmiad
Nov 26 '18 at 8:17

add a comment |

Its still run that code block everytime i scroll. And when i tried the log history.state.url it returns undefined.

– Tugce Aksoz
Nov 26 '18 at 6:55

Sorry for this mistake, I updated my answer now, Url is an identifier set in pushState object, so that, you will see url now if you set history.state.url, you can pass any data you want too....or flag any variable nested-of url..

– Anees Hikmat Abu Hmiad
Nov 26 '18 at 8:17

Its still run that code block everytime i scroll. And when i tried the log history.state.url it returns undefined.

– Tugce Aksoz
Nov 26 '18 at 6:55

Sorry for this mistake, I updated my answer now, Url is an identifier set in pushState object, so that, you will see url now if you set history.state.url, you can pass any data you want too....or flag any variable nested-of url..

– Anees Hikmat Abu Hmiad
Nov 26 '18 at 8:17

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl