Parse & JS: Install the Parse Javascript SDK

This entry is part 3 of 25 in the series Parse & Javascript

Now that the FirstApp is created in Parse, you need to set up the SDK.

Now try to look for the web version of the SDK in Parse.com. The page that will guide you on downloading a Javascript project and installing the SDK to the code.

The guide from Parse will look similar to the page below.

first_app_sdk

Click on the Download the blank Javascript/HTML 5 project.  A zip file will be donwloaded to your PC.

Open the zip file and you will see an index.html file and 2 css file.

I have copied the index.html file into jsbin.com and set the path for the 2 CSS files.

<link rel=”stylesheet” href=”https://codecrawl.com/code/parse/css/reset.css”>
<link rel=”stylesheet” href=”https://codecrawl.com/code/parse/css/styles.css”>

Look for this line in index.html:  Parse.initialize(“APPLICATION_ID”, “JAVASCRIPT_KEY”);

You need to replace APPLICATION_ID and JAVASCRIPT_KEY.  You can find them by clicking on Settings->Application Keys as shown in the screenshot below.

first_app_keys

I have set up the FirstApp in jsbin.com, you can try the code here.

Try The Code

If you set up the SDK in your web server, you will see a page similar to this.

parse_result

If you look at Data Browser in FirstApp, you should see a record created in TestObject similar to the screenshot below.

test_object1

HTML: Images

This entry is part 4 of 34 in the series HTML

To specify a image, we use the <img> tag.

<!DOCTYPE html>
<html>
<head>
        <title>First Example</title>
</head>
<body>
<h1>An Image</h1>
<img src='http://upwhere.com/code/images/flappy.png'>
</body>
</html>
Try The HTML

We can also specify the the size of the image by using width and heights attributes.

<!DOCTYPE html>
<html>
<head>
    <title>First Example</title>
</head>
<body>
<h1>An Image with a smaller size</h1>
<img src='http://upwhere.com/code/images/flappy.PNG' width='100' height='150'>
</body>
</html>
Try The HTML

jQuery Mobile: Tabs

This entry is part 73 of 73 in the series jQuery Mobile

The jQuery mobile tabs is an extension of the jQuery ui tabs widget and takes all the same options and methods.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>jQM Tabs</h1>
    </div>

    <div data-role='tabs' id='tabs'>
        <div data-role='navbar'>
            <ul>
                <li><a href='#one' data-ajax='false'>one</a></li>
                <li><a href='#two' data-ajax='false'>two</a></li>
                <li><a href='http://jsbin.com/cinip/1' data-ajax='false'>three</a></li>
            </ul>
        </div>
        <div id='one' class='ui-body-d ui-content'>
            <h1>First tab contents</h1>
        </div>
        <div id='two'>
            <ul data-role='listview' data-inset='true'>
                <li><a href='#'>Acura</a></li>
                <li><a href='#'>Audi</a></li>
                <li><a href='#'>BMW</a></li>
                <li><a href='#'>Cadillac</a></li>
                <li><a href='#'>Ferrari</a></li>
            </ul>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

 

 

jQuery Mobile: Table column toggle

This entry is part 72 of 73 in the series jQuery Mobile

The column toggle table mode selectively hides columns when you resize the page to a narrower width.  

It also offers a menu to let users manually control which columns they want to see.  In the 

try the code page, you can click on column button on the top right to select the columns for display in the table.

The column chooser mode requires a table element with two attributes: data-role=”table” and data-mode=”columntoggle”.

An ID attribute is also required on the table to associate it with the column chooser popup menu.

<!DOCTYPE html>
<html>
<head>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
    <title>Upwhere</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>Table Column Toggle</h1>
    </div>

    <div data-role='content'>
        <table data-role='table' id='table-column-toggle' data-mode='columntoggle' class='ui-responsive table-stroke'>
                 <thead>
               <tr>
                     <th data-priority='2'>Rank</th>
                     <th>Movie Title</th>
                     <th data-priority='3'>Year</th>
                     <th data-priority='1'><abbr title='Rotten Tomato Rating'>Rating</abbr></th>
                     <th data-priority='4'>Reviews</th>
                   </tr>
             </thead>
                 <tbody>
               <tr>
                     <th>1</th>
                     <td><a href='http://en.wikipedia.org/wiki/Citizen_Kane' data-rel='external'>Citizen Kane</a></td>
                     <td>1941</td>
                     <td>100%</td>
                     <td>74</td>
                   </tr>
               <tr>
                     <th>2</th>
                     <td><a href='http://en.wikipedia.org/wiki/Casablanca_(film)' data-rel='external'>Casablanca</a></td>
                     <td>1942</td>
                     <td>97%</td>
                     <td>64</td>
                   </tr>
               <tr>
                     <th>3</th>
                     <td><a href='http://en.wikipedia.org/wiki/The_Godfather' data-rel='external'>The Godfather</a></td>
                     <td>1972</td>
                     <td>97%</td>
                     <td>87</td>
                   </tr>
               <tr>
                     <th>4</th>
                     <td><a href='http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)' data-rel='external'>Gone with the Wind</a></td>
                     <td>1939</td>
                     <td>96%</td>
                     <td>87</td>
                   </tr>
               <tr>
                     <th>5</th>
                     <td><a href='http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)' data-rel='external'>Lawrence of Arabia</a></td>
                     <td>1962</td>
                     <td>94%</td>
                     <td>87</td>
                   </tr>
               <tr>
                     <th>6</th>
                     <td><a href='http://en.wikipedia.org/wiki/Dr._Strangelove' data-rel='external'>Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
                     <td>1964</td>
                     <td>92%</td>
                     <td>74</td>
                   </tr>
               <tr>
                     <th>7</th>
                     <td><a href='http://en.wikipedia.org/wiki/The_Graduate' data-rel='external'>The Graduate</a></td>
                     <td>1967</td>
                     <td>91%</td>
                     <td>122</td>
                   </tr>
               <tr>
                     <th>8</th>
                     <td><a href='http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)' data-rel='external'>The Wizard of Oz</a></td>
                     <td>1939</td>
                     <td>90%</td>
                     <td>72</td>
                   </tr>
               <tr>
                     <th>9</th>
                     <td><a href='http://en.wikipedia.org/wiki/Singin%27_in_the_Rain' data-rel='external'>Singin' in the Rain</a></td>
                     <td>1952</td>
                     <td>89%</td>
                     <td>85</td>
                   </tr>
               <tr>
                     <th>10</th>
                     <td class='title'><a href='http://en.wikipedia.org/wiki/Inception' data-rel='external'>Inception</a></td>
                     <td>2010</td>
                     <td>84%</td>
                     <td>78</td>
                   </tr>
             </tbody>
               </table>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

In the table above, we have the priority of the column set as follow.

So if you narrow down the width of the page, the Reviews column will be the first one to go since it has the lowest priority.

                     <th data-priority='2'>Rank</th>
                     <th>Movie Title</th>
                     <th data-priority='3'>Year</th>
                     <th data-priority='1'><abbr title='Rotten Tomato Rating'>Rating</abbr></th>
                     <th data-priority='4'>Reviews</th>