I cant link my ThemeRoller for jQuery Mobile to my my website?

StackOverflow https://stackoverflow.com/questions/17641988

Question

I mean I have a link to my website, but the link I am using inside my ThemeRoller mobile.php file, is not working. I have placed my ThemeRoller files in its own folder and not at all with my portfolio website files. In the ThemeRoller folder I have:

  • css
  • images
  • js
  • mobile.php

ect.

Inside the mobile.php I made a link to my portfolio index file:

<a href="../Portfolio-2013/index.php" data-role="button">Desktop</a></div>

I can't see what's wrong with this line, but the problem is when I load the mobile page in my browser, click on "Desktop" as shown above, it leads me to my website, but the background is white and everything is just totally misplaced! Here's a picture of my REAL WEBSITE, when I clicked on this link in the MOBILE SITE (ThemeRoller).

http://i40.tinypic.com/npmmi0.jpg

As you can see, my website has a white background and some pictures. There is also links, but this is just a part my website. I don't know why this is happening. I may have done something very wrong, which may be obvious to some of you guys. I intend to fail on the most obvious things somehow..

HTML for the ThemeRoller:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Mobil</title>
        <link rel="stylesheet" href="css/portfolio-mobil-2013.css" />
        <link rel="stylesheet" href="css/portfolio-mobil-2013.min.css" />
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css" />
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.min.js"></script>
    </head>
    <body>
        <div data-role="page" data-theme="a">
            <div data-role="header" data-position="inline">
                <h1>It Worked!</h1>
            </div>
            <div data-role="content" data-theme="a">            
            <a href="mobil.php" data-role="button">Frontpage</a>
            <a href="om-mig.php" data-role="button">About</a>
            <a href="projekter.php" data-role="button">Projects</a>
            <a href="kontakt.php" data-role="button">Contact</a>
            <a href="../Portfolio-2013/index.php" data-role="button">Desktop</a></div>
            </div>
        </div>
    </body>
</html>

The files you see below is also NOT in my website file, which is index.php. They are only inside my mobile.php as shown above.

    <link rel="stylesheet" href="css/portfolio-mobil-2013.css" />
    <link rel="stylesheet" href="css/portfolio-mobil-2013.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>

The funny thing is, when I refresh my website, it turns normal again. Everything on my website is then normal. Weird..

I'm still trying to figure it out. If anyone can answer this, I would appreciate it greatly :). Thank you for your time. I'm going back to try and solve this out now.

I moved the ThemeRoller files to the same folder as my website, so it's easier. I still got the same problem though.

Was it helpful?

Solution

Solved it!!! :)

all I needed to do, was to make a rel="external" to switch from my mobile site to my desktop site and back again. But I'm not talking just about the link.

When I only did this:

    <a href="index.php" data-role="button">Desktop</a></div>

It gave me completely white background when I switched from the mobile site to the desktop site. But it did not do it, when I switched from my desktop to my mobile!

So this:

    <a href="index.php" data-role="button" rel="external">Desktop</a></div>

The rel external made the switching from the mobile site to the desktop site without any white background! When I switch, the sites are completely normal :)

I know this should be easy, but I'm so happy to have solved this :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top