hash support about iscroll

[cubiq]

Not easy to work on hash changes, but I'm working on it. Thanks for the heads-up

[lifeiscontent]

cool, again, great work! :)

[MattRogish]

+1 on hash support. This is the way many "single page" apps are designed, so this is a killer. Thanks!

[cubiq]

Hash change support will be added to 4.1

[rmurphey]

First, I've been using the library and it's hard to put into words how useful it is. Please don't take this as a criticism:

Unless the app is built entirely around iScroll, I'm not sure it's really iScroll's responsibility to deal with hashchange support. There are tools that provide app-wide hashchange support, and hooking iScroll into these tools is pretty trivial considering the API that iScroll provides. I'd rather see iScroll focus on its core competency of delivering a solid scrolling interface and a solid API for other, targeted tools to connect to.

[cubiq]

Generally speaking I'd agree with you, but the hashchange support is pretty hacky and goes deep into the iScroll code. I believe it would be very hard to develop such a connection API.

[CMBurnett]

Does anyone know if the hash support has been integrated. Having some trouble with mine and was thinking it might be the hash change.

Did any of you get it working another way?

Any help would be very much appreciated! Thanks in advance.
Cory

[cubiq]

it is planned for 4.1

[pyotr]

+1 Yep please how to get it working other way? Help!

[kahi]

@CMBurnett
I made it work by destroying & recreating iScroll on each pseudo-page-change:
iscroll.js

• line 23: that.scroller = $('#' + el + ' > :visible:eq(0)')[0];

my.js

• onPageSwitch: myScroll.destroy(); myScroll = new iScroll('wrapper');

[pyotr]

Hi men

What about hash support in 4.1? Looks nothing changed?

[cubiq]

Milestone 4.2, sorry

[pyotr]

Please man - we really need "hash support" :))

[tomschouteden]

Any news on the hash support?
Is there a way to work around this? Or should I change my "app" to a multi-page app?

[tmsimont]

I used an & instead of the # for hash tags, and then used this script, where "cic" is the ID of my iscrollable element..

This is pretty hackish, but it works... you'll need to put a ?blah=fake&hash in order for this to work, where hash is your anchor name.

if($("#cic").length>0){
PRIMARYiSCROLL = new iScroll('cic');
if( location.search.indexOf("&") !== -1){
var fauxHash = location.search.substring((location.search.indexOf("&")+1), location.search.length);
PRIMARYiSCROLL.scrollToElement("#cic a[name='"+fauxHash+"']");
}
}

[loic-huguet]

@tmsimont
Hello, Could you explain further this code you gave us?
It seems to be what I'm looking for, but I don't know where to put this or how to implement it.

thanks

[tmsimont]

hi -- yes:

that code should be used at the document ready event or where-ever you are creating a new instance of the iScroll that you want to scroll on load.

the code checks the "search" parameter of the JavaScript "location" object, so that means the url needs to look like this:

www.example.com?q=foo&hash-id

it's a hackish method because the "hash-id" parameter in the above example has no value as it should in a standard query string.

the code will have to be modified if you're already using the query string with multiple parameters for anything server side, because it simply takes a substring of the & to the end of the query string. (it reads everything after the & symbol as a faux 'hash')

the "?q=foo" part (or "?blah=fake" in the previous example) is necessary because the presence of the "?" indicates to JavaScript that you've got a "search" string attached to your "location"

Then in your scrollable area you set up a normal a tag with a name in it that matches your final query string parameter...

I know this is very backwards and odd, but it works where actual hash tags cause the iScroll to break

[loic-huguet]

@tmsimont
Sorry I haven't had time to answer back.
Thanks a lot, this would have worked fine but unfortunately, due to other aspects of my project, I'm not gonna use this hackish hack. But I'm keeping it in a corner of my "work-arounds" folder, and I'll surely have another opportunity to use it.

Thanks again, and again sorry to have seemed ungrateful for a few days

Take care

[ianmh]

@tmsimont how does this code jump to the anchored page? I've got an iScroll navigation with lots of anchor links in it.

[tmsimont]

please see the reply to loic-huguet above

[jamestomasino]

I've written up a workaround that utilizes the scrollToElement function of iScroll with link hijacking via jQuery. You can find it over on this stackoverflow question.

[wmg481]

@jamestomasino where do you add the bit of code mentioned above in the markup? Would it be in the iscroll.js file, and if so, where?

[jamestomasino]

@wmg481 you can put that code in a $(document).ready(). You'll want to change "scroller" to be whatever name your iScroll instance has. If you aren't using iScroll on the whole page, you may want to change the anchor targeting as well.

[okor]

The example by @jamestomasino seems like it would work well, if you're only linking on the same page. But in my case, many links are to different pages.

Is there still no good solution?

[joefurniss]

You can get around this problem by using window.scrollTo(0, 0) before initialising iScroll and then using the iScroll method scrollToElement to jump down to the anchor. Here is the code I used:

if (location.hash) {
window.scrollTo(0, 0);
}

myScroll = new iScroll('wrapper');

if (location.hash) {
myScroll.scrollToElement(location.hash, 0);
}

[o-l-e]

Hey @joefurniss, i can't seem to get your suggestion to work, hopefully you or someone can guide me.

What i am trying to do is:

1. enter page from another page with http://mysite.com/variable-page#one
2. when page is loaded, scroll to the relative position (smoothly) within the iScroll container, not scrollTop
3. add a class to the final destination #id (this i have yet to try)

What happens is that an #id in the url goes to the location, but prevents me from scrolling up + adds some height at the bottom (i realise that this is a problem related to the height vs scrollTop, and that it does not update the position). Note i am a real novice at javascript, and i am using jQuery on the site i am working on, which may seem too much to most of you. Also i have pasted together a jquery snippet that smooth scrolls all internal links (this because i am only using iScroll on touch screens, and will be using a scrollTop-based snippet for smooth scrolling on desktop/qwerty).

Basically how would i achieve this with the following code?

<body>
    <div id="wrapper">
        <header>
            <ul>
                <li><a href="#one">Link Text #one</a></li>
                <li><a href="#two">Link Text #two</a></li>
                <li><a href="#thr">Link Text #thr</a></li>
            </ul>
        </header>
        <div id="main"> 
            <h3 id="one">Target #one</h3>   
            <h3 id="two">Target #two</h3>               
            <h3 id="thr">Target #thr</h3>   
        </div>
    </div>
    <script src="jquery.js"></script>
    <script src='iscroll-zoom.min.js'></script>
    <script>
        $(window).load(function() {
            // Add scroller (no-js will not need plugin anyway)
            $('#wrapper').wrapInner('<div id="scroller"></div>');

            var myScroll;
            myScroll = new IScroll('#wrapper', { click: true, zoom: true });

            document.addEventListener('touchmove', function (e) { 
                e.preventDefault(); 
            }, false);

            // scrollToElement all anchor links
            $('a[href^="#"]').on('click touchstart', function(e) {
                e.preventDefault();
                var target = this.hash,
                $target = $(target);
                myScroll.scrollToElement(target);

                // if has class already, remove class before new target
                // $(".target").removeClass("target");
                // add a class to the target #id after scrollToElement
                // $(target).addClass("target");

                return false // because hash in url currently breaks my iScroll
            });
        });
    </script>
</body>

Hope this is a valid question, and you understand my question(s) and my markup.
Thanks for any help, and nice plugin :)

[awilman]

Has hash been implemented yet ? I'm having the same issue as o-l-e

[davidpfahler]

@cubiq how is this still a concern? I run many single page apps using iScroll (both 4 and 5) and never had a problem.

[cubiq]

would be nice to have a way to automatically scroll to an element based on hash. very low priority but still...

[davidpfahler]

To scroll to a certain element on hash change, you can do (pseudo-code):

var scroll = new IScroll();
// ...
app.on('hashChange', function(hash) { // hash = '#idOfElement'
  scroll.scrollToElement(hash);
});

See the definition of scrollToElement in 5.0.9 for more info.

Out-of-the-box hash change support is still planned for a future release.

[o-l-e]

@davidpfahler, i am trying to get your example code to work, but i am stuck.
I would be very greatful if you (or anyone else) could show me how to implement your example into this:

<body>
    <div id="wrapper">
        <header>
            <ul>
                <li><a href="#one">Link Text #one</a></li>
                <li><a href="#two">Link Text #two</a></li>
                <li><a href="#thr">Link Text #thr</a></li>
            </ul>
        </header>
        <div id="main"> 
            <h3 id="one">Target #one</h3>   
            <h3 id="two">Target #two</h3>               
            <h3 id="thr">Target #thr</h3>   
        </div>
    </div>
    <script src="jquery.js"></script>
    <script src='iscroll-zoom.min.js'></script>
    <script>
        $(window).load(function() {
            // Add scroller (no-js will not need plugin anyway)
            $('#wrapper').wrapInner('<div id="scroller"></div>');

            var myScroll;
            myScroll = new IScroll('#wrapper', { click: true, zoom: true });

            document.addEventListener('touchmove', function (e) { 
                e.preventDefault(); 
            }, false);

            // scrollToElement all anchor links
            $('a[href^="#"]').on('click touchstart', function(e) {
                e.preventDefault();
                var target = this.hash,
                $target = $(target);
                myScroll.scrollToElement(target);

                // if has class already, remove class before new target
                // $(".target").removeClass("target");
                // add a class to the target #id after scrollToElement
                // $(target).addClass("target");

                return false // because hash in url currently breaks my iScroll
            });
        });
    </script>
</body>

Thanks in advance, i would love to get this working :)

[o-l-e]

Hi, would still appreciate some advice on this issue.
Anyone?

[joefurniss]

Hi @o-l-e,

Which bit are you having a problem with? Everything above the hash anchor being cut off or scrolling to anchors when internal links are clicked?

If it's the former, have a go of this:

<script>
        $(window).load(function() {
            // Add scroller (no-js will not need plugin anyway)
            $('#wrapper').wrapInner('<div id="scroller"></div>');

            //Scroll to top of page before initialising iScroll, otherwise it cuts off everything above the hashed anchor
            if (location.hash) {
                window.scrollTo(0, 0);
            }

            //Initialise iScroll
            var myScroll;
            myScroll = new IScroll('#wrapper', { click: true, zoom: true });

            //Scroll to hash using the scrollToElement method
            if (location.hash) {
                myScroll.scrollToElement(location.hash, 0);
            }

            document.addEventListener('touchmove', function (e) { 
                e.preventDefault(); 
            }, false);

            // scrollToElement all anchor links
            $('a[href^="#"]').on('click touchstart', function(e) {
                e.preventDefault();
                var target = this.hash,
                $target = $(target);
                myScroll.scrollToElement(target);

                // if has class already, remove class before new target
                // $(".target").removeClass("target");
                // add a class to the target #id after scrollToElement
                // $(target).addClass("target");

                return false // because hash in url currently breaks my iScroll
            });
        });
    </script>

Does that help?

For reference, I'm using iScroll lite based on iScroll v4.1.6

[o-l-e]

Hi @joefurniss and thank for helping out!
I tried your suggestion on my project, but i still didn't work. I will try to set up a public example later so that you can see what it looks like. I bet there are many others who would like to see this work.
I am using v5.0.5 at the moment, but will set up the new example with 5.0.9 like @davidpfahler suggested.

I will get back to this later today.

[o-l-e]

Hi @joefurniss, i just noticed your initial question about what problem i am having.
The answer is "everything above the hash anchor being cut off".

I have set up an example here:
https://dl.dropboxusercontent.com/u/4927668/iscroll5-hash-test.html(See working solution below)
This example is using v5.1.1, but still no luck.

Try this link, and you can see that the position is off when you swipe up or down:
https://dl.dropboxusercontent.com/u/4927668/iscroll5-hash-test.html#two(See working solution below)

Any suggestions would be appreciated :)

[joefurniss]

Hi @o-l-e ,

Have a go at putting the window.scrollTo(0.0) inside a setTimeOut - it seems to do the trick.

setTimeout(function () {
                if (location.hash) {
                    window.scrollTo(0, 0);
                }
            }, 50);

[o-l-e]

hi @joefurniss i just updated my test, and sorry but it is still cutting of the content above the hash, check it out https://dl.dropboxusercontent.com/u/4927668/iscroll5-hash-test.html#two (See working solution below).
I simply don't understand it.

[joefurniss]

The iScroll plugin isn't linked correctly, by the look of things. It might be worth saving it to your dropbox and linking to that, rather than the Github version, as Chrome is blocking it for being the wrong MIME type. Have a look at the console errors.

[o-l-e]

I just updated the example with a local version, but still not working.

[joefurniss]

That's working for me now. You could try increasing the delay from 50ms,

Also, please note the page doesn't scroll with a mousewheel - you'll need to drag the page down.

[o-l-e]

hm, i have increased it to 500ms but still nothing.
I am using OSX v10.9.3 with the latest Safari, Chrome, Opera and Firefox. My iphone5 is running on ios7 (latest) with Safari ios. The only browser it is working in is actually Firefox, but that doesn't help me much :) All other browsers cut of the content above the hash, as i assume it is adding the height at the end (below) the content.

I am aware of the dragging. Just to explain again, what happens is that when entering the page with #two in the url, the page(iscroll) scrolls to #two, but after scrolling to the target, i am not able to drag/scroll up again.

[joefurniss]

Give this a go:

<script>
        $(window).load(function () {
            // Add scroller (no-js will not need plugin anyway)
            var wrapper = $('#wrapper');
            wrapper.wrapInner('<div id="scroller"></div>');

            if (location.hash) {

                // Scroll to top of page before initialising iScroll, otherwise it cuts off everything above the hashed anchor
                wrapper.scrollTop(0);
                setTimeout(function () {
                    wrapper.scrollTop(0);

                    loadiScroll();
                }, 1);

            }
            else {
                loadiScroll();
            }

            function loadiScroll() {
                //Initialise iScroll
                var myScroll;
                myScroll = new IScroll('#wrapper', { click: true, zoom: true });


                if (location.hash) {
                    //Scroll to hash using the scrollToElement method
                    setTimeout(function () {
                        myScroll.scrollToElement(location.hash, 0);
                    }, 50);
                }

                // scrollToElement all anchor links
                $('a[href^="#"]').on('click touchstart', function (e) {
                    e.preventDefault();
                    var target = this.hash,
                    $target = $(target);
                    myScroll.scrollToElement(target);

                    return false // because hash in url currently breaks my iScroll
                });
            }

            document.addEventListener('touchmove', function (e) {
                e.preventDefault();
            }, false);

        });
    </script>

The key is have your content at the top before iScroll is initialised, and then scroll to hash after. In this case, it was the #wrapper that needed the scrollTop, not the window, as in my earlier example.

Hopefully this one will work for you.

[o-l-e]

Wow, thanks @joefurniss it works!
I posted this question a half a year ago, and you solved it. I really appreciate this.
I am going to attach the result, so anyone else looking for a similar solution can get started (i will probably delete the shared link referenced above at some point).

Thanks again @joefurniss!

Working solution:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iscroll5 hash test</title>
    <style>
        /* EXAMPLE  */
        *                       { margin: 0; padding: 0; }
        a,a:visited             { text-decoration: none; }
        body                    { line-height: 1.5; font-size: 1.25em; font-family: sans-serif; }
        img                     { max-width: 100%; }
        p,ul                    { margin: 1em 0; list-style: none; }

        /* ISCROLL  */
        *                       { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
        html                    { -ms-touch-action: none; }
        body                    { overflow: hidden; /* this is important to prevent the whole page to bounce */ }

        /* position nav outside scroller wrapper */
        #nav-wrap               { position: absolute; z-index: 2; left: 0; right: 0; background: #222; color: whitesmoke; -webkit-backface-visibility: hidden; }
        nav, header, #main, footer{ margin: 0 auto; max-width: 648px; min-width: 200px; padding: 0 24px; }
        nav                     { line-height: 24px; height: 24px; }

        /* absolute wrapper in markup - minus the nav top */
        #wrapper                { position: absolute; z-index: 1; width: 100%; top: 24px; bottom: 0; left: 0; overflow: hidden; background: lightyellow; }
        #scroller               { position: absolute; z-index: 1; width: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -o-text-size-adjust: none; text-size-adjust: none; }

    </style>
</head>
<body>
    <div id="nav-wrap">
        <nav>Absolute</nav>
    </div>
    <div id="wrapper">
        <header>
            <h1>Header</h1>
            <ul>
                <li><a href="#one">Link #one</a></li>
                <li><a href="#two">Link #two</a></li>
                <li><a href="#thr">Link #thr</a></li>
            </ul>
            <h3 id="one">Target #one</h3>   
            <p>If Chuck Norris is late, time better slow the f*ck down Chuck Norris eats transformer toys in vehicle mode and poos them out transformed into a robot. Ironically, Chuck Norris’ hidden talent is invisibility. When his martial arts prowess fails to resolve a situation, Chuck Norris plays dead. When playing dead doesn’t work, he plays zombie.</p>
        </header>
        <div id="main"> 
            <h3 id="two">Target #two</h3>               
            <img src="http://placehold.it/600/600" />
            <h3 id="thr">Target #thr</h3>   
            <p>Chuck ipsum. If you can see Chuck Norris, he can see you. <a href="http://google.com">Link to Google here</a>. If you can't see Chuck Norris you may be only seconds away from death. Chuck Norris once commented, "There are few problems in this world that cannot be solved by a swift roundhouse kick to the face. In fact, there are none."Chuck Norris once ate an entire ream of rice paper and shat out origami swans and Mister Miyagi from Karate Kid. Chuck Norris sold his soul to the devil for his rugged good looks and unparalleled martial arts ability. Shortly after the transaction was finalized, Chuck roundhouse kicked the devil in the face and took his soul back. The devil, who appreciates irony, couldn't stay mad and admitted he should have seen it coming. They now play poker every second Wednesday of the month. Chuck Norris doesn’t eat. Rather he kicks ass until he’s full. Chuck Norris isn’t lactose intolerant. He just doesn’t put up with lactose’s sh*t. God offered Chuck Norris the gift to fly, which he swiftly declined for super strength roundhouse ability. If Chuck Norris is late, time better slow the f*ck down Chuck Norris eats transformer toys in vehicle mode and poos them out transformed into a robot. Ironically, Chuck Norris’ hidden talent is invisibility. When his martial arts prowess fails to resolve a situation, Chuck Norris plays dead. When playing dead doesn’t work, he plays zombie. There is no such thing as tornados. Chuck Norris just hates trailer parks. Chuck Norris isn’t lactose intolerant. He just doesn’t put up with lactose’s sh*t. Chuck Norris built a time machine and went back in time to stop the JFK assassination. As Oswald shot, Chuck Norris met all three bullets with his beard, deflecting them. JFK's head exploded out of sheer amazement. Chuck Norris was the fourth Wiseman. He brought baby Jesus the gift of “beard”. Jesus wore it proudly to his dying day.</p>
        </div>
        <footer>
            Footer
        </footer>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript' src='iscroll-zoom.js'></script>
    <script>
        $(window).load(function () {
            // Add scroller (no-js will not need plugin anyway)
            var wrapper = $('#wrapper');
            wrapper.wrapInner('<div id="scroller"></div>');

            if (location.hash) {
                // Scroll to top of page before initialising iScroll, otherwise it cuts off everything above the hashed anchor
                wrapper.scrollTop(0);
                setTimeout(function () {
                    wrapper.scrollTop(0);
                    loadiScroll();
                }, 1);
            } else {
                loadiScroll();
            }

            function loadiScroll() {
                //Initialise iScroll
                var myScroll;
                myScroll = new IScroll('#wrapper', { click: true, zoom: true });

                if (location.hash) {
                    //Scroll to hash using the scrollToElement method
                    setTimeout(function () {
                        myScroll.scrollToElement(location.hash, 0);
                    }, 50);
                }

                // scrollToElement all anchor links
                $('a[href^="#"]').on('click touchstart', function (e) {
                    e.preventDefault();
                    var target = this.hash,
                    $target = $(target);
                    myScroll.scrollToElement(target);
                    return false // because hash in url currently breaks my iScroll
                });
            }

            document.addEventListener('touchmove', function (e) {
                e.preventDefault();
            }, false);
        });
    </script>
</body>
</html>

[chrilith]

HI everyone,

I had a similar hash issue but your code doesn't seem to work for me, mainly because of the async loaded comments system which may make the browser jump into the DIV.

I've implemented another way to deal with anchors here:
http://www.gamalto.com/documentation/

The main idea here is to always have a #_top anchor at the top of the scrolling region so that we can always return to the real top of this DIV (not the one computed by iScroll whoch may be roken be cause of the anchor jump). Also, the href# selector is slightly different to handle different anchor cases.

The script is here (you should of ccourse remove all the theme related stuff):
http://www.gamalto.com/documentation/scripts/gamalto.js

Hope this helps.
Chris