CODEWITHSUNDEEP
jqueryhtmljquery-mobilehyperlinkhref
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery Mobile a href not navigating to div

Hi I'm fairly new with jQuery and I am making a jQuery mobile site

I have used the data-role to define the role of each div. I have my navigation bar which I want to link to the divs that sit below the "main content" div. On my main site I can navigate to the divs below perfectly. However when I try to navigate to the divs below on the main site I get no where. The hyperlinks seem not to work.

Is there a different method to link to the divs below on the same page when using jQuery mobile as I know it works on my normal website?

Thanks in advance for any input.

Here is my code: 

<div id="header" data-role="header" data-theme="c">
    <div data-role="navbar" data-theme="c" > <!--Start Nav Div -->
        <ul>
        <li><a data-icon="home" data-rel="dialog"  href="indexmobile.php">Home</a></li>
        <li><a  data-icon="arrow-d" data-rel="dialog" href="#aboutme">About</a></li>
        <li><a  data-icon="grid" data-rel="dialog" href="#portfolio">Portfolio</a></li>
        <li><a data-icon="gear" data-rel="dialog" href="#contactform">Contact</a></li>
        </ul>
        </div> <!-- End Nav Div -->
    </div> <!-- End Header Div -->

    <div id="maincontent" data-role="content"> <!-- Main Content Div -->
    </div> <!-- End Main Content -->
     <div id="portfolio"> <!-- Start Portfolio Div -->

            </div> <!--- End Portfolio Div -->

        <div id="aboutme"> <!--- About Me Div Start -->

        </div> <!--- End About Me Div -->

Upvotes: 0

Views: 1655

Answers (2)

ED-209
ED-209

Reputation: 4746

To achieve the kind of anchor-linking to divs that you require you could simply add this to your links:

data-ajax="false"

This basically tells the framework not to use ajax, it will prompt the browser to treat the '#aboutme' anchor as it was originally intended - to identify a part of a page to display.

Using this technique you can still have lots of scrollable content on the same page and still link to it with navbars or footers or what have you.

The accepted answer isn't really solving your problem - it's telling you to create a multi-page document instead, thereby bypassing the problem, as you won't have the scrollable content you presumably required in the first place.

Upvotes: 1

Nirmal Patel
Nirmal Patel

Reputation: 5168

Each of your <div> should be a different data-role="page".

Read the section on Linking within a multi-page document in JQueryMobile docs.

Upvotes: 1

Related Questions