asked on

jQuery Mobile - Links Have Anchor Prefixes

Hello,

I have the following sample code and want the links to behave as standard links and go to the URLs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
  <title>My Sample Site</title>   
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />  
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
  <div data-role="header" data-theme="b">

    <h1>My Sample Site</h1>
  </div>
  <div data-role="content"> 
  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
    <li data-role="list-divider">Shortcuts</li>
    <li><a href="maps.asp" data-transition="flip">Maps</a></li>
    <li><a href="revisions.asp" data-transition="flip">Revisions</a></li>

  </ul>
  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a">
    <li data-role="list-divider">Transition Effects</li>
    <li><a href="effects.asp?id=slide" data-transition="slide">Slide</a></li>
    <li><a href="effects.asp?id=slideup" data-transition="slideup">Slide Up</a></li>
    <li><a href="effects.asp?id=slidedown" data-transition="slidedown">Slide Down</a></li>
    <li><a href="effects.asp?id=pop" data-transition="pop">Pop</a></li>

    <li><a href="effects.asp?id=flip" data-transition="flip">Flip</a></li>
    <li><a href="effects.asp?id=fade" data-transition="fade">Fade</a></li>
  </ul>
  <br /><br />
  <ul data-role="listview" data-dividertheme="e">
    <li data-role="list-divider">Seamless List (margin-less)</li>
    <li><a href="#foo" data-transition="slide">Internal Link 1</a></li>

    <li><a href="#bar" data-transition="slide">Internal Link 2</a></li>
    <li><a href="#" data-transition="slide">Example Item 3</a></li>
  </ul>
    <br /><br />
    <a href="default.asp" data-role="button" data-theme="a" data-icon="back" data-inline="true">Home</a> 
    <a href="#" data-role="button" data-theme="c" data-icon="check" data-inline="true">Sign out</a> 
  </div>
  <div data-role="footer" class="ui-bar">

      <div data-role="controlgroup" data-type="horizontal">
      <a href="maps.asp" data-role="button" data-transition="flip">Maps</a>
      <a href="revisions.asp" data-role="button">Revisions</a>
      </div>
  </div>
  <div data-role="footer">
    <h1>&copy;My Site &nbsp; 2011</h1>

  </div>

</div>

</body>
</html>

Open in new window

How do I set this up so that if the list item (for example line 18 maps.asp) the browser redirects to the URL without any hash mark

So I want it to go to....
http://www.mydomain.com/maps.asp

At the moment I have to click on the exact text to fire the link.

Kiran Sonawane

>> the browser redirects to the URL without any hash mark
Please elaborate on this

ASKER CERTIFIED SOLUTION

abhisheksimion

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

sonic1234

ASKER

I was hoping that a solution could be found that uses the native API

If you refer to http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html

It seems to refer to using the $.mobile.changePage method

//transition to the "about us" page with a slideup transition 			
$.mobile.changePage( "about/us.html", { transition: "slideup"} );

Open in new window

But I could not work out how to implement this.

abhisheksimion

This link might help http://stackoverflow.com/questions/5111375/mobile-changepage-to-nextpage

sonic1234

ASKER

Sorry but I'm not looking to use the swipe function. Just want to click on the <li> and go to a new page with the transition effect.

Michel Plungjan

Does the link work if you remove the data transition?