locked
Use div as link - keeping default.html

    Question

  • I find out of I could make my <div> into a link, by adding <div id="div0" onclick="location.href='/pages/bmi/bmi.html'"> but the problem is that, when I press the link (the div element) I can't see the topbar with the backbutton in the top left corner (on page2). I tried just to follow the guide (http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx), but because I'm not using an <a> tag it doesn't worked at all. And I can't use an <a> tag because it's a div and not a <p> element.

    So what can I do? I just want the default.html to overlap my page2.html .

    Thursday, February 7, 2013 4:04 PM

Answers

  • Gotcha, if you are using the Naivgation project template mentioned in that link, then you actually want to navigate between pages using WinJS.Navigation.navigate like this:

    <div onclick="javascript:WinJS.Navigation.navigate("/pages/bmi/bmi.html")"></div>

    However, I would highly recommend you separate your JavaScript from your HTML and just attach an event handler rather than placing the JavaScript inline in the HTML. This will make it 100x easier to debug.

    • Marked as answer by Potices Friday, February 8, 2013 4:02 PM
    Friday, February 8, 2013 3:44 PM

All replies

  • In this scenario the click event handling for DIV is fine, now what you have to do is, just place the second page on another DIV2(in same default.html) and make it invisible by moving it in to our boundaries of screen. so when you click on the link(DIV1) then slide that div from outer boundaries to visible area using WinJS animations. Then this div with second page can overlap the default page.
    Friday, February 8, 2013 6:09 AM
  • I don't want to use single-page navigation. I want multipage-navigation but I can't figure out how to do it. Can anybody please help?

    Friday, February 8, 2013 2:46 PM
  • Did you have an issue with the Navigation template that is provided with Visual Studio? Is that somehow not an option for you?
    Friday, February 8, 2013 3:00 PM
  • What do you exactly mean? I tried to follow the guide for Javascript (http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx), but I'm using some <div> elements and I want them to be the links. So when you click inside it, you will go to the new page. I do have 6 of these <div>'s and each of them contains 1 image and 1 little text. The problem is just that if I make the divs a link by simply adding <a> arround it and then, add a eventhandler for it in my home.js, the div doesn't hold it's posision . Everytime I load the home.html all the divs as is a link (<a>), just jump about 100px down, even when I use -ms-grid.

    So that's why I use onclick="location.href='/pages/bmi/bmi.html'". What can I do for keeping the default.html when I go to the next page(bmi.html)

    Friday, February 8, 2013 3:37 PM
  • Gotcha, if you are using the Naivgation project template mentioned in that link, then you actually want to navigate between pages using WinJS.Navigation.navigate like this:

    <div onclick="javascript:WinJS.Navigation.navigate("/pages/bmi/bmi.html")"></div>

    However, I would highly recommend you separate your JavaScript from your HTML and just attach an event handler rather than placing the JavaScript inline in the HTML. This will make it 100x easier to debug.

    • Marked as answer by Potices Friday, February 8, 2013 4:02 PM
    Friday, February 8, 2013 3:44 PM
  • That did it! Thank you man. I tried to do something like that lots of times, but it just didn't work. I can now continue working on my app. :-)
    Friday, February 8, 2013 4:03 PM