CODEWITHSUNDEEP
jqueryhtmllistviewjquery-mobile
Mikey
Mikey

Reputation: 697

List view in jquery

I am following this youtube video https://www.youtube.com/watch?v=ZwqTsxyhQAU and trying to make a simple webpage with a listview. However, I have followed the video exactly and have the same code, however I am not getting the same listview as in the video. Please can someone help me out; Below are my screenshots:

What I should have:

What I should have

But instead, I am getting this:

But instead, I am getting this

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    </head>
    <body>
        <header data-role="header">
            <h1>List App</h1>
        </header>

        <!--Article, main text for the web page-->
        <article data-role="content">
            <ul data-role="listview">
                <li>
                    <a href="#test">
                        <h1>This is a test</h1>
                        <img src="Images/test.png" alt="Test image" />
                        <p>This is a image test to see if it works</p>
                    </a>
                </li>
                <li>
                    <a href="#test">
                        <h1>This is a test 2</h1>
                        <img src="Images/test.png" alt="Test image" />
                        <p>This is a image test 2 to see if it works</p>
                    </a>
                </li>
            </ul>
        </article>


        <!--Footer here-->
        <footer data-role="footer">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Photos</a></li>
                    <li><a href="#">Info</a></li>
                </ul>

            </nav>
        </footer>

    </body>
</html>

Upvotes: 3

Views: 1440

Answers (1)

Ciccolina
Ciccolina

Reputation: 514

The version used in the video is old and you're using latest release 1.4. The image should be first child of the anchor.

<li>
  <a href="#test">
    <img src="test.jpg" alt="Welcome to JS Bin">
    <h1>This is a test 2</h1>
    <p>This is a image test 2 to see if it works</p>
  </a>
</li>

Upvotes: 1

Related Questions