Search jQuery

jQuery Forum

jQuery Mobile Anchor Linking

in jQuery Mobile • 10 years ago

Hi All,
In the jQuery Mobile Documentation it says,

PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor (index.html#foo) on a page in jQuery Mobile, because the framework will look for a 'page' with and ID of #foo instead of the native behavior of scrolling to the content with that ID.

on this page http://jquerymobile.com/demos/1.0a1/#docs/pages/docs-pages.html.

However this presents an issue because I have a client who had me build a site in jQuery Mobile however they have content already formatted using normal anchors with a page index at the top. (They're large pages).

Anyway, are there any really smart people out there that know if there's a way to disable jQuery Mobile for certain pages to allow for normal anchor linking?

Thanks,
Paul

Replies(26)

jamesb111

Re: jQuery Mobile Anchor Linking

10 years ago

See if this helps.

$(document).bind("mobileinit",function(){

$.mobile.ajaxLinksEnabled(false);

});

palkema

Re: Re: jQuery Mobile Anchor Linking

10 years ago

Hmm... This didn't seem to fix the issue.

mallo

Re: jQuery Mobile Anchor Linking

10 years ago

For now I think there is no official way to create a native anchor behaviour. For the meantime something like this should work:

$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});

mallo

Viswanath..

Re: Re: jQuery Mobile Anchor Linking

9 years ago

I try Anchor link. But it's not working.

But I have one solutions for this

Try this:

.ui-page {display:inline !important;}

Add this line in your css (Stylesheet file)

Thanks,
Vishwanathan L

Email ID: viswa.lak@gmail.com

u.schmidt

Re: Re: jQuery Mobile Anchor Linking

9 years ago

mallo's code solves my problem for anchor links on the same page, but only if inside $(document).ready(function(){}); inside $(document).bind("mobileinit", function() {}); it does not work. Also, unlike with normal anchors, the name attribute of the target is ignored, but it works with the id.

However, I found only half a solution to links on another page. The following code for a.other-page-link does only work with the "alert" and stops working if it is commented out:

<script type="text/javascript">
$(document).bind("mobileinit", function() {
//functions from below don't work here
});
$(document).ready(function(){
$('a.same-page-link').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
//alert(target);
$.mobile.silentScroll(target);
return false;
});
$('a.other-page-link').bind('click', function(ev) {
var href = $(this).attr('href');
var parts = href.split("-");
var page = parts[0];
var id = "#"+parts[1];
$.mobile.changePage($(page));
var target = $( id ).get(0).offsetTop;
alert(target); // TODO: make work without alert ....
$.mobile.silentScroll(target);
return false;
});
});
</script>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Anchors</h1>
</div>
<div data-role="content">
<p><a href="#id1" class="same-page-link">click me to reach id on this page</a></p>
<p><a href="#page-id2" class="other-page-link" >click me to reach id on other page</a></p>
<p id="id1">i am the target of your dreams, don't call me by my name, just my id is what counts<br><br><br>
don't worry if you don't see the target of your dreams after the click, it is just a little further up the page, hidden by the header if its data-position is fixed</p>
<p>TODO: adjust scroll for fixed header
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>empty space so you can see the scroll</p>
</div>
</div>
<div data-role="page" id="page">
<div data-role="header" data-position="fixed">
<h1>other page</h1>
</div>
<div data-role="content">
<p id="id2">i am the target of your dreams, don't call me by my name, just my id is what counts<br><br><br>
don't worry if you don't see the target of your dreams after the click, it is just a little further up the page, hidden by the header if its data-position is fixed</p>
<p>TODO: adjust scroll for fixed header; make work without alert; fix back button;
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>empty space so you can see the scroll</p>
</div>
</div>

I am new to jQuery and jQueryMobile and would be grateful for any help with improving this code.

u.schmidt

Re: jQuery Mobile Anchor Linking

9 years ago

With the beta 1 version and binding both to vclick and click events everything works fine in Firefox, but on iOS the silentScroll does not happen after a changePage. Does someone have an idea why this is the case? Here is some sample code (could not attach it as file for some reason):

<!DOCTYPE html>

<html>
    <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Anchors</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

     $('a.scroll').bind('click vclick', function(ev) {
          var target = $( $(this).attr('href') ).get(0).offsetTop;
          $.mobile.silentScroll(target);
          return false;
    });

    $('a.other-page-link').bind('click vclick', function(ev) {
        var href =     $(this).attr('href');
        var parts = href.split("-");
        var page = parts[0];
        var id = "#"+parts[1];
        $.mobile.changePage($(page));
        var target = $( id ).get(0).offsetTop;
        $.mobile.silentScroll(target);
        return false;
    });

});
</script>

    </head>

    <body>

        <div data-role="page" id="lorem">
            <div data-role="header">
                <h1>Anchors</h1>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true">
                    <li><a class="scroll" href="#p1">Paragraph 1</a></li>
                    <li><a class="scroll" href="#p2">Paragraph 2</a></li>
                    <li><a class="scroll" href="#p3">Paragraph 3</a></li>
                    <li><a class="other-page-link" href="#ipsum-p4">Paragraph 4 on next page</a></li>
                    <li><a class="other-page-link" href="#ipsum-p5">Paragraph 5 on next page</a></li>
                </ul>

                <h3 id="p1">Paragraph 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean placerat tempus risus sed dignissim. Fusce lacinia tortor eget purus vulputate elementum. Sed ligula est, viverra nec aliquet laoreet, lacinia sagittis orci. Sed nibh ipsum, lacinia id dapibus nec, aliquet sit amet lacus. Duis at erat at ipsum ornare semper eget ac nibh. Sed sem enim, ultrices a pharetra ac, tincidunt in massa. Maecenas leo nulla, iaculis quis hendrerit at, sollicitudin quis tortor. Quisque et neque nisl, sed tristique magna. Aliquam malesuada, mi nec convallis commodo, lacus nibh gravida est, et scelerisque eros nunc eget urna. Nullam rhoncus iaculis mi et imperdiet. Morbi a sapien dolor. Nulla nec nisi lorem. Phasellus interdum tellus id ante dictum vehicula. Praesent ultrices sagittis metus sit amet semper. Nulla facilisi.</p>

                <h3 id="p2">Paragraph 2</h3>
                <p>Aliquam faucibus arcu non mauris commodo id eleifend lorem pretium. Nulla facilisi. Sed auctor quam tincidunt lectus rutrum vitae venenatis ante ultricies. In hac habitasse platea dictumst. Cras neque arcu, elementum id imperdiet vitae, congue sed ligula. Praesent gravida porttitor lacus non tincidunt. Suspendisse sed enim nulla. Quisque tellus urna, blandit non aliquet sed, facilisis vel dolor. Donec fermentum ipsum ac nulla rutrum non blandit quam molestie. Nulla facilisi. Aliquam id suscipit tellus. Curabitur pretium sapien sed libero ultricies semper ullamcorper dui dictum. Morbi vel metus quis massa tristique mattis a sit amet nulla. Maecenas convallis ante nec purus eleifend a fringilla justo vulputate. Aenean molestie lobortis erat tempus interdum.</p>

                <h3 id="p3">Paragraph 3</h3>
                <p>Morbi quis velit urna. Aliquam erat volutpat. Suspendisse at eleifend augue. Nunc lacus lorem, iaculis eu elementum in, sagittis eu nunc. Morbi vitae sem nisl, vel egestas dui. Praesent suscipit dui eleifend libero tincidunt ut sagittis erat pretium. Aliquam erat volutpat. Integer porta est in turpis molestie in aliquam dolor bibendum. Praesent sagittis est tincidunt urna sagittis ultrices eu quis tellus. In et augue felis, non sodales libero. Cras a nibh odio. Cras pharetra enim sit amet tortor convallis porttitor. Nulla facilisi. Donec arcu justo, pulvinar nec volutpat quis, fringilla vel magna.</p>

            </div>
        </div>

        <div data-role="page" id="ipsum">
            <div data-role="header">
                <h1>other page</h1>
            </div>

            <div data-role="content">
                 <h3 id="p4">Paragraph 4</h3>
                <p>Nullam adipiscing sollicitudin elementum. Proin odio urna, sagittis a cursus quis, egestas eu mauris. Donec eget arcu erat, vitae dignissim augue. Cras molestie laoreet elit, sit amet mattis diam viverra quis. Praesent eget mi vel odio faucibus ornare. Phasellus aliquet ligula quis lacus mollis luctus. Aenean nec risus eu erat dignissim laoreet. Curabitur felis diam, adipiscing at facilisis in, egestas eu lectus. Etiam et luctus justo. Integer eget neque id est commodo condimentum quis quis urna. Pellentesque rhoncus, justo vitae congue convallis, libero velit suscipit ipsum, nec sagittis augue augue dignissim est. Donec pretium ligula ac lorem accumsan accumsan. Curabitur cursus, eros eget aliquam malesuada, ligula enim sodales mauris, et scelerisque urna arcu in libero. Cras scelerisque urna quis nulla imperdiet ac facilisis nibh porttitor. Maecenas vestibulum, sapien at commodo sagittis, orci lectus vehicula neque, eu feugiat felis erat ac purus. Phasellus accumsan rhoncus adipiscing. Curabitur adipiscing consequat accumsan. Donec egestas risus eget nisi rutrum nec mollis mauris feugiat. Nam sodales rhoncus lectus et condimentum.</p>

                <h3 id="p5">Paragraph 5</h3>
                <p>Curabitur iaculis elementum dignissim. Donec tincidunt eleifend magna, in dignissim justo adipiscing et. Mauris consectetur sem et elit eleifend vitae sodales leo dignissim. Sed ut augue ac felis venenatis iaculis iaculis at tortor. Nullam vel metus in lectus dapibus suscipit eu et nulla. Donec aliquet mauris et turpis adipiscing pulvinar. Vestibulum ac eros ante. Donec auctor lectus sit amet metus semper a sodales velit consequat. Donec sagittis ligula ut augue accumsan vulputate. Sed placerat consectetur diam ac faucibus. Duis posuere risus sed sapien ultrices et fermentum ipsum aliquam. Mauris scelerisque feugiat nunc id vehicula. Fusce dapibus augue ac lectus ultricies at ornare elit bibendum. Fusce elementum porta mattis. Pellentesque molestie lobortis turpis, id euismod lectus tempus eu. Pellentesque in convallis orci. In arcu augue, porta id feugiat sed, tempor eu risus. Aenean nec purus diam.</p>
           </div>
        </div>

     </body>
</html>

u.schmidt

Re: Re: jQuery Mobile Anchor Linking

9 years ago

I made the silentScroll() after changePage() work also on iOS by calling it in 'pageshow':

    var scrollTarget = 0;

    $('a.other-page-link').bind('click vclick', function(ev) {
        var href =     $(this).attr('href');
        var parts = href.split("-");
        var page = parts[0];
        var id = "#"+parts[1];
        $.mobile.changePage($(page));
        scrollTarget = $( id ).get(0).offsetTop;
        return false;
    });

   $('div').live('pageshow',function(event, ui){
        if (scrollTarget != 0) {
            $.mobile.silentScroll(scrollTarget);
            scrollTarget = 0;
        }
    });

mikhail.nz

Re: jQuery Mobile Anchor Linking

9 years ago

This worked for me (on desktop and iOS Safari):

$('.container a[href^=#]').bind('click vclick', function (ev) {
location.hash = $(this).attr('href');
return false;
});

Vivek Sir..

Re: jQuery Mobile Anchor Linking

9 years ago

Mikhael,

I think your suggestion works incase you are having a fairly simple article page as such, if you use multipage template the above method with silent scroll is the way to go . Especially if you are heavy on changepage events ect.

kristina...

Re: jQuery Mobile Anchor Linking

8 years ago

I was able to get anchor tags by using this:

<script type="text/javascript">
$(document).ready(function() {
$('a.anchor').click(function(e) {
obj = e.target;
str = String(obj);
var lett = str.charAt( str.length-1 );
document.getElementById(lett).scrollIntoView();
e.preventDefault();
});
});
</script>

I was had an alphabetically list - and I gave them as anchor tags with the class "anchor"

<a href="#A" class="anchor">A</a>
<a href="#B" class="anchor">B</a>
<a href="#C" class="anchor">C</a>

Then I had divs on the page ID'd with each letter...

<div id="A">My Div for A</div>
<div id="B">My Div for B</div>
<div id="C">My Div for C</div>

It works perfect! So you can essentially just use it with your href having a # sign with then your div's id you want it to jump too....

pravinkmrr

Re: jQuery Mobile Anchor Linking

8 years ago

Try to use $(this).data('href'); instead of $(this).attr('href'); . Hope this helps you.

radimuspr..

Re: jQuery Mobile Anchor Linking

8 years ago

This is my solution :

john60178

Re: jQuery Mobile Anchor Linking

8 years ago

Hello, my name is John and I am currently developing a mobile web app. I am having an issue with the internal multipage structure. The issue is on my homepage I have 4 anchor links (internal links) and I have had success with 3 of the anchor links working correctly and displaying the page correctly. The issue I am having is the 4th anchor link when clicked displays a blank (all white) page. I have even tried taking all the excess code away with just the basic div structure with a couple words inside the div data-role="content" section. I have checked everything time and time again. Is there a limitation to the amount of internal pages or internal links? Any help would be greatly appreciated. Also, if anyone is willing to help I will post the code, its just lengthy.

thefly73

Re: jQuery Mobile Anchor Linking

8 years ago

I have been struggling with this problem, too...

I read and tried all the possible suggestions on this thread, but none of them seemed to really solve my problem.

I also tried this workaround: instead of using anchors, I tried to use $.mobile.silentScroll(100); to scroll page to a definite number of pixels and to emulate the anchor feature.

Unfortunately, this works only partially. In fact, when I put the silentScroll inside the $(document).bind("mobileinit", function() { }); it does scroll page, but, when all pictures and text are fully loaded, the page goes to the top again :-\

Another workaround is to set a Timeout to the silentScroll function, in order to wait some seconds, hoping the page will be fully loaded, before operating the scroll.

It's not a good solution, because different pages may take different time to load, also depending on internet bandwith, so it becomes difficult to predict page loading time.

I give some example code below:

$(document).bind("mobileinit", function(){

/* this one scrolls page to top on button click and works good */

$('#uptotop').live('click', function() {

$('body, html').animate({scrollTop: '0px'}, 1000, function(){ $('body').clearQueue(); });

/* below the (in)famous silentscroll with timeout */

setTimeout(function(){$.mobile.silentScroll(800);}, 4000);

});

</script>

thefly73

Re: jQuery Mobile Anchor Linking

8 years ago

I found something that seems to potentially work here:

http://www.raymondcamden.com/index.cfm/2012/2/24/Getting-URL-parameters-in-a-jQuery-Mobile-page

I am still trying to figure out how to implement it on my page, hope can be useful for someone else

thefly73

Re: jQuery Mobile Anchor Linking

8 years ago

Hello,

getting back to this question as I solved some issues recently.

Using the $.extend function below, I was able to totally disable jquery mobile navigation behaviour,

so that I could use ordinary html anchors to make page scroll to a specific html anchor.

This works fine inside the single page, so I don't need silentscroll anymore.

My problem is when I need to link to a specific anchor from a different page of the same website.

So, to explain it better, if I have a button or link to www.mywebsite.com/mywebpage.php?item=1234#myanchor inside the same mywebpage.php it works and scrolls page to #myanchor id.

But if I put a link or button at www.mywebsite.com/anotherpage.php pointing to www.mywebsite.com/mywebpage.php?item=1234#myanchor it brings me on top of page, without scrolling to #myanchor id.

Note that both mywebpage.php and anotherpage.php have the same $extend function enabled (which means jquery mobile ajax navigation disabled).

Thank you so much, hope I helped someone to solve this issue, at least partially.

$(document).bind("mobileinit", "#mypage", function(){
$.extend($.mobile, {
hashListeningEnabled: false,
pushStateEnabled: false,
ajaxEnabled: false,
linkBindingEnabled: false
});
});

thefly73

Re: Re: jQuery Mobile Anchor Linking

8 years ago

Moving the question about anchor from another page to a different forum post, for better clarity...

trashstuff

Re: jQuery Mobile Anchor Linking

7 years ago

could you please elaborate some more about the difference between mikhail.nz's solution (based on location.hash) and mallo's solution (based on silentScroll)

mikhail.nz's solution:

$('.container a[href^=#]').bind('click vclick', function (ev) {
location.hash = $(this).attr('href');
return false;
});

mallo's solution:

$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});

cmusicfan

Re: jQuery Mobile Anchor Linking

7 years ago

Reviving this old thread because I didn't find any of the replies useful.

This simple delay allows the anchor hash links to work like traditional links with jquery mobile:

$(document).ready(function(){
var anchor_id = window.location.hash;
if(anchor_id != ""){
var new_position = $(anchor_id).offset();
setTimeout(function(){window.scrollTo(new_position.left,new_position.top)}, 500);
}
})

Mark O.

Kate Edge..

Re: Re: jQuery Mobile Anchor Linking

6 years ago

The setTimeout worked for me. I set it to 100 rather than 500 as you could really see the page move. I tried 50 but it didn't work for that.

watusiware

Re: jQuery Mobile Anchor Linking

7 years ago

$(document).ready() is fired only once, though - when the very first page is loaded. You would need to also disable Ajax navigation, and at that point you have to ask yourself why you are using jQuery Mobile at all.

cmusicfan

Re: jQuery Mobile Anchor Linking

7 years ago

and at that point you have to ask yourself why you are using jQuery Mobile at all.

The built-in AJAX aspect of jquery mobile is not the sole reason to use it.

Besides that, the OP says

Anyway, are there any really smart people out there that know if there's a way to disable jQuery Mobile for certain pages to allow for normal anchor linking?

My answer works with or without jquery mobile.

Mark O.

Julian

Re: Re: jQuery Mobile Anchor Linking

6 years ago

My answer works with or without jquery mobile.

Yes, I can absolutely confirm this, been looking around a while and finally found this solution, thanks Mark!

Omar

Re: jQuery Mobile Anchor Linking

6 years ago

Adding data-ajax="false" to an anchor makes it work normally. The page will scroll to target hash without changing pages.

ccouper

Re: jQuery Mobile Anchor Linking

6 years ago

data-ajax="false" is true works for all but Windows phone 8/8.1 when running on Cordova. For that setup you still need Mallo's approach above.

Nothing else works.

watusiware

Re: jQuery Mobile Anchor Linking

6 years ago

Omar, I'm surprised that works, as this has been a long-standing problem, and it is always been understood (or so I thought) that the only solution was to use some JS code to select the element and scroll to it.

I wonder if there was some change in some JQM version or some change in browser behavior that made this stop working?

I'll do some experiments. t'd be very odd (though not beyond possibility) that this "feature" went this long without being noticed! (At least by me.) But I avoid IDs.

We do have some pop-up help in apps that I work on that uses the "find the element and scroll to it" technique. That's still needed in our case, though, because we use iScroll to scroll the help inside the popup. Since I always use iScroll, I always need to use some code to scroll, and so I haven't given this problem much thought.

Top Reply

Response title

Attachments

jQuery Forum

jQuery Mobile Anchor Linking

Replies(26)

Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Re: jQuery Mobile Anchor Linking

Statistics

Tags

Actions