DEV'S

Mobile Ready Page Extended - Load Multiple Pages Using JQuery

index.html

<html>
    <head>
        <title>Mobile Web</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/jquery-2.1.1.min.js" ></script>
        <style>
            header,footer,section,article,aside,summary{
                display: block;
            }

            body{
                margin: 0;
            }

            .container{
                width: 900px;
                margin: 0 auto;
            }

            .headbar{

                width: 880px;
                height: 80px;
                float: left;
                background-color: gray;
                padding: 10px;

            }

            .leftbar{
                width: 180px;
                min-height: 580px;
                float: left;
                background-color: cadetblue;
                padding: 10px;
            }

            .midbar{
                width: 480px;
                min-height: 580px;
                float: left;
                background-color: coral;
                padding: 10px;
            }

            .rightbar{
                width: 180px;
                min-height: 580px;
                float: left;
                background-color: blueviolet;
                padding: 10px;
            }

            .bottombar{
                width: 880px;
                float: left;
                background-color: black;
                padding: 10px;
                color: white;
            }

            .logobox{
                float: left;
            }
            .fruit-list{
                width: 100%;
                min-height: 40px;
                background: burlywood;
                border-radius: 10px;
                cursor: pointer;
                margin-top: 5px;
                color: black;
            }
            .fruit-list:hover{
                background: black;
                color: white;
            }
            p{
                text-indent: 20px;
                display: inline-block;
            }
            .homebutton{
                width: 100%;
                text-align: right;
            } 
            .fruitimage{

                float: left;
            }
        </style>
        <script>

            var headerPadding = 10;
            var footerPadding = 10;
            var leftPadding = 10;
            var rightPadding = 10;
            var midPadding = 10;
            var containerMargin_Mobile = 0;
            var containerMargin_Normal = 0;

            $(document).ready(function() {
                homePressed();
                findViewPortSize();
            });

            $(window).resize(function() {
                findViewPortSize();
            });

            function findViewPortSize() {
                var w = $(window).width();
                var h = $(window).height();

                if (w < 500) {
                    setMobileView(w, h);
                } else {
                    setNormalView(w, h);
                }

            }

            function setMobileView(width, height) {
                width = width - containerMargin_Mobile;
                $(".container").css({'width': width});
                $(".headbar").css({'width': width - headerPadding * 2, 'padding': headerPadding});
                $(".leftbar").css({'width': width - leftPadding * 2, 'padding': leftPadding, 'min-height': 10});
                $(".midbar").css({'width': width - midPadding * 2, 'padding': midPadding});
                $(".rightbar").css({'width': width - rightPadding * 2, 'padding': rightPadding, 'min-height': 100});
                $(".bottombar").css({'width': width - footerPadding * 2, 'padding': footerPadding});

            }

            function setNormalView(width, height) {
                width = width - containerMargin_Normal; // View margin for normalview
                $(".container").css({'width': width});
                $(".headbar").css({'width': width - headerPadding * 2, 'padding': headerPadding});
                $(".leftbar").css({'width': 200 - leftPadding * 2, 'padding': leftPadding, 'min-height': 580});
                $(".midbar").css({'width': width - 400 - midPadding * 2, 'padding': midPadding});
                $(".rightbar").css({'width': 200 - rightPadding * 2, 'padding': rightPadding, 'min-height': 580});
                $(".bottombar").css({'width': width - footerPadding * 2, 'padding': footerPadding});
            }

            function loadPage(index) {
                $("#home").show();
                var page = "page" + index + ".html";
                $("#result").load(page);
            }

            function homePressed() {
                $("#home").hide();
                $("#result").load("fruitlist.html");
            }

        </script>
    </head>
    <body>
        <div class="container">
            <header class="headbar">
                <div class="logobox"><img src="image/fruits.jpg" alt="Fruits" width="130" /></div>
            </header>
            <aside class="leftbar">
                <input type="text" placeholder="Search" style="width: 100%;height: 40px" />
            </aside>
            <article class="midbar">
                <div class="homebutton"><button id="home" onclick="homePressed()">Home</button></div>
                <div id="result">

                </div>
            </article>
            <aside class="rightbar">

            </aside>
            <footer class="bottombar">

            </footer>
        </div>
    </body>
</html>

fruitlist.html

<div class="fruit-list" onclick="loadPage(1)"><p>Apple</p></div>
<div class="fruit-list" onclick="loadPage(2)"><p>Mango</p></div>
<div class="fruit-list" onclick="loadPage(3)"><p>Pineapple</p></div>
<div class="fruit-list" onclick="loadPage(4)"><p>Grapes</p></div>

page_1.html

<h1>Apple</h1>
<figure class="fruitimage"><img src="image/apple.jpg" alt="Apple" width="150" /></figure>
<section>
    The apple is the pomaceous fruit of the apple tree, Malus domestica of the rose family (Rosaceae). It is one of the most widely cultivated tree fruits, and the most widely known of the many members of genus Malus that are used by humans. Apples grow on deciduous trees which are large if grown from seed, but small if grafted onto roots (rootstock). The tree originated in Central Asia, where its wild ancestor, Malus sieversii, is still found today. Apples have been grown for thousands of years in Asia and Europe, and were brought to North America by European colonists. Apples have been present in the mythology and religions of many cultures, including Norse, Greek and Christian traditions. In 2010, the fruit's genome was decoded as part of research on disease control and selective breeding in apple production.

    There are more than 7,500 known cultivars of apples, resulting in a range of desired characteristics. Different cultivars are bred for various tastes and uses, including cooking, eating raw and cider production. Apples are generally propagated by grafting, although wild apples grow readily from seed. Trees and fruit are prone to a number of fungal, bacterial and pest problems, which can be controlled by a number of organic and non-organic means.

    About 69 million tons of apples were grown worldwide in 2010, and China produced almost half of this total. The United States is the second-leading producer, with more than 6% of world production. Turkey is third, followed by Italy, India and Poland. Apples are often eaten raw, but can also be found in many prepared foods (especially desserts) and drinks. Many beneficial health effects are thought to result from eating apples; however, two forms of allergies are seen to various proteins found in the fruit.
</section>

page_2.html

<h1>Mango</h1>
<figure class="fruitimage"><img src="image/mango.jpg" alt="Mango" width="150" /></figure>
<section>
    The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics. The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India.[1] While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica—the "common mango" or "Indian mango"—is the only mango tree commonly cultivated in many tropical and subtropical regions. It originated in Indian subcontinent (present day India and Pakistan) and Burma.[2] It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh.[3] In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies

    Mango trees grow up to 35–40 m (115–131 ft) tall, with a crown radius of 10 m (33 ft). The trees are long-lived, as some specimens still fruit after 300 years. In deep soil, the taproot descends to a depth of 6 m (20 ft), with profuse, wide-spreading feeder roots; the tree also sends down many anchor roots, which penetrate several feet of soil. The leaves are evergreen, alternate, simple, 15–35 cm (5.9–13.8 in) long, and 6–16 cm (2.4–6.3 in) broad; when the leaves are young they are orange-pink, rapidly changing to a dark, glossy red, then dark green as they mature. The flowers are produced in terminal panicles 10–40 cm (3.9–15.7 in) long; each flower is small and white with five petals 5–10 mm (0.20–0.39 in) long, with a mild, sweet odor suggestive of lily of the valley. Over 400 varieties of mangoes are known, many of which ripen in summer, while some give double crop.[4] The fruit takes three to six months to ripen.

    The ripe fruit varies in size and color. Cultivars are variously yellow, orange, red, or green, and carry a single flat, oblong pit that can be fibrous or hairy on the surface, and which does not separate easily from the pulp. Ripe, unpeeled mangoes give off a distinctive resinous, sweet smell. Inside the pit 1–2 mm (0.039–0.079 in) thick is a thin lining covering a single seed, 4–7 mm (0.16–0.28 in) long. The seed contains the plant embryo.
</section>

page_3.html

<h1>Pineapple</h1>
<figure class="fruitimage"><img src="image/pineapple.jpg" alt="Pineapple" width="150" /></figure>
<section>
    The pineapple (Ananas comosus) is a tropical plant with edible multiple fruit consisting of coalesced berries,[2] and the most economically significant plant in the Bromeliaceae family.[3] Pineapples may be cultivated from a crown cutting of the fruit,[4] possibly flowering in 20–24 months and fruiting in the following six months.[4][5] Pineapple does not ripen significantly post-harvest.[6]

    Pineapples are consumed fresh, cooked, juiced, and preserved, and are found in a wide array of cuisines. In addition to consumption, in the Philippines the pineapple's leaves are used to produce the textile fiber piña- employed as a component of wallpaper and furnishings, amongst other uses.[7]

    The word "pineapple" in English was first recorded in 1398, when it was originally used to describe the reproductive organs of conifer trees (now termed pine cones). The term "pine cone" for the reproductive organ of conifer trees was first recorded in 1694. When European explorers discovered this tropical fruit in the Americas, they called them "pineapples" (first so referenced in 1664 due to resemblance to what is now known as the pine cone).[8][9]

    In the scientific binomial Ananas comosus, ananas, the original name of the fruit, comes from the Tupi word nanas, meaning "excellent fruit",[10] as recorded by André Thevet in 1555, and comosus, "tufted", refers to the stem of the fruit. Other members of the Ananas genus are often called "pine", as well, in other languages. In Spanish, pineapples are called piña ("pine cone"), or ananá (ananás) (example, the piña colada drink).
</section>

page_4.html

<h1>Grapes</h1>
<figure class="fruitimage"><img src="image/grapes.jpg" alt="Grapes" width="150" /></figure>
<section>
    A grape is a fruiting berry of the deciduous woody vines of the botanical genus Vitis. Grapes can be eaten raw or they can be used for making wine, jam, juice, jelly, grape seed extract, raisins, vinegar, and grape seed oil. Grapes are a non-climacteric type of fruit, generally occurring in clusters.

    The cultivation of the domesticated grape began 6,000–8,000 years ago in the Near East.[1] The earliest archeological evidence for a dominant position of wine-making in human culture dates from 8,000 years ago in Georgia.[2][3]

    Yeast, one of the earliest domesticated microorganisms, occurs naturally on the skins of grapes, leading to the innovation of alcoholic drinks such as wine. The earliest known production occurred around 8,000 years ago on the territory of Georgia.[4] During an extensive gene-mapping project, archaeologists analyzed the heritage of more than 110 modern grape cultivars, and narrowed their origin to a region in Georgia, where wine residues were also discovered on the inner surfaces of 8,000-year-old ceramic storage jars.[5] The oldest winery was found in Armenia, dating to around 4000 BC. By the 9th century AD the city of Shiraz was known to produce some of the finest wines in the Middle East. Thus it has been proposed that Syrah red wine is named after Shiraz, a city in Persia where the grape was used to make Shirazi wine. Ancient Egyptian hieroglyphics record the cultivation of purple grapes, and history attests to the ancient Greeks, Phoenicians and Romans growing purple grapes for both eating and wine production. The growing of grapes would later spread to other regions in Europe, as well as North Africa, and eventually in North America.

    In North America, native grapes belonging to various species of the Vitis genus proliferate in the wild across the continent, and were a part of the diet of many Native Americans, but were considered by European colonists to be unsuitable for wine. Vitis vinifera cultivars were imported for that purpose.
</section>

HTML5

2018-11-27 21:35:02
1) Ionic - Angular Videos
2018-06-29 05:46:32
2) Service - Broadcast Receiver
2018-06-28 03:55:43
3) Activity - Bundle - Option Menu - ActionBar
2018-06-27 03:27:57
4) Relative Layout
2018-06-25 03:14:55
5) LinearLayout Calc
2018-02-08 05:14:15
6) PHP HelloWorld
2018-01-19 04:57:25
7) Angular 5 - Material Design - Reactive Form - Continued
2018-01-19 04:06:05
8) Feedback
2018-01-19 02:07:18
9) Angular 5 - Material Design
2018-01-18 03:05:47
10) Angular 5 - Custom Directives,Pipes - Promise And Observables
2018-01-17 22:51:45
11) Angular 5 - Component Interaction
2018-01-17 03:14:26
12) Angular 5 - Registration Form - WebService
2018-01-17 01:46:34
13) Angular 5 - Directives
2018-01-16 23:13:47
14) Angular 5 - Lifecycle Hooks - Routing
2018-01-16 21:36:25
15) CRUD Example - TS - LocalStorage - Delete
2018-01-16 13:34:40
16) Shopping App - Api Calls - JSON
2018-01-16 03:17:09
17) CRUD Example - TS - LocalStorage - View - Add
2018-01-15 23:57:32
18) TypeScript - Part 2
2018-01-15 23:02:07
19) TypeScript - Part 1
2018-01-15 04:46:29
20) TypeScript To JavaScript
2018-01-15 00:48:22
21) First Angular5 App
2016-01-17 23:47:13
22) JQuery Mobile - My Account Page Addon
2016-01-16 02:38:09
23) HTML5 - CSS - JavaScript Exam Preparation
2016-01-14 02:34:08
24) JQuery Validation Plugin - Basics
2016-01-13 02:35:46
25) Final - JQuery Mobile - IndexedDB Addon
2016-01-12 03:23:20
26) JQuery Mobile - IndexedDB Addon
2016-01-11 00:08:42
27) Students Record - JQuery Mobile App
2016-01-09 04:03:04
28) JQuery Mobile PageChange Event
2016-01-08 03:51:55
29) Beginning JQuery Mobile
2016-01-07 03:47:24
30) WebWorker Example
2016-01-06 04:11:18
31) IndexedDB - ObjectStore - Tansaction - Cursor - Part 2
2016-01-05 03:46:35
32) Student Record - IndexedDB Migration
2016-01-04 23:47:55
33) IndexedDB - ObjectStore - Tansaction - Cursor
2016-01-04 04:48:33
34) Single Page Design And Geolocation Example With Ajax
2016-01-03 23:39:19
35) Drag And Drop Example
2016-01-03 01:57:50
36) Beginning Responsive WebDesign Using JQuery
2016-01-03 01:56:17
37) HTML5 Canvas Simple Example
2016-01-03 01:55:11
38) JQuery Object - Context - Function Callbacks
2015-12-29 23:28:49
39) JQuery DOM Manipulation And LocalStorage
2015-11-30 23:50:59
40) JavaScript EventListeners
2015-11-30 04:34:08
41) MultiPage Design
2015-11-28 03:02:52
42) HTML Box Design
2015-07-03 03:09:55
43) KO Custom Component
2015-07-02 23:25:36
44) KO Custom Binding And Template Binding
2015-07-01 23:27:04
45) KO Simplelist
2015-07-01 01:44:40
46) KO Introduction And JQuery Simple List
2015-01-29 00:34:17
47) Canvas - DragDrop - Video - Audio Example
2015-01-28 03:57:05
48) CSS Media Type - IndexedDB WHERE And LIKE Clause
2015-01-27 02:24:12
49) IndexedDB Simple Example
2015-01-24 00:11:32
50) Students Record - JQueryMobile - GeoLocation - Ajax Addon
2015-01-24 00:08:19
51) GeoLocation And Ajax Example
2015-01-21 05:23:32
52) Students Record - JQueryMobile - SessionStorage - Login State
2015-01-19 23:33:29
53) JQueryMobile - Page Change - Popup Addon
2015-01-19 00:21:28
54) JQueryMobile - Data-Role Introduction
2015-01-17 03:22:07
55) Handle PageLinks
2015-01-16 04:28:20
56) Simple HTML5 Calculator
2015-01-16 03:03:45
57) Load External DOM - Ajax In Simple Way
2015-01-16 03:01:48
58) JQuery Document Ready - Placement Of Script Tag
2015-01-13 22:54:25
59) Dynamic Layout Technique Using JQuery
2015-01-13 04:04:19
60) JQuery - Introduction
2015-01-12 23:45:02
61) LocalStorage - CRUD
2015-01-12 00:06:03
62) JSON - LocalStorage Example
2015-01-11 22:47:24
63) JavaScript - Data Persistency Using LocalStorage - SessionStorage
2015-01-10 03:17:01
64) HTML - JavaScript - Dynamic Table
2015-01-10 00:32:26
65) JavaScript Introduction
2015-01-09 04:07:47
66) CSS - Continued
2015-01-08 03:26:39
67) CSS - Margin - Padding - HTML5 Semantic Elements
2015-01-07 22:44:01
68) HTML-CSS Introduction
2014-11-25 14:27:00
69) Angular JS Simple Example
2014-10-16 05:01:39
70) CSS Media Example - Different CSS For Desktop - Tablet - Phone Screen Sizes
2014-10-15 04:20:11
71) Miscellaneous In Addition To Previous Exercises
2014-10-15 04:13:45
72) Some Useful RegEx
2014-10-14 02:57:45
73) Shopping List App Using IndexedDB
2014-10-14 00:04:10
74) IndexedDB Introduction
2014-10-14 00:00:01
75) JavaScript Prototyping
2014-10-11 03:50:47
76) Introduction To Canvas Drawing - Tabs - Popup Warning Dialog
2014-10-11 00:03:50
77) Popup - Validation - Shopping List App Updated
2014-10-10 22:34:42
78) RegEx Pattern For Validation - Shopping List App
2014-10-10 05:12:13
79) Password Lock-Shopping List App
2014-10-09 22:49:34
80) JQuery Shopping - Updated
2014-10-09 05:10:00
81) JQuery Mobile Forms - Save Checkbox - Radio Button Checked States
2014-10-08 22:18:40
82) JQuery Mobile Forms - Additional Data-role Attribute Values
2014-10-08 02:17:48
83) JQuery Shopping List Alternate Approach. JQ Append & Pagechange
2014-10-07 03:02:43
84) JQuery Mobile Page Change Events
2014-10-06 02:19:53
85) JQuery Mobile Data- Attribute Reference
2014-10-06 00:13:01
86) Shopping List Using LocalStorage
2014-10-06 00:10:02
87) JQuery Mobile Introduction
2014-10-06 00:07:40
88) JQuery Page Loading Technique
2014-10-06 00:05:39
89) Mobile Ready Page Extended - Load Multiple Pages Using JQuery
2014-10-06 00:00:27
90) A Mobile First Design Using JQuery - Window-Size
2014-10-05 23:58:01
91) JavaScript Array - Create - Update - Delete
2014-10-05 23:55:43
92) JQuery CSS Capabilities - A Mobile Ready Page
2014-10-05 23:52:42
93) JQuery Introduction - Unit Conversion Using JQuery
2014-10-05 23:49:58
94) JavaScript - DOM Manipulation-Table-Calculator
2014-10-05 23:40:06
95) GeoLocation
2014-10-05 23:37:36
96) Margin And Border Radius
2014-10-05 23:34:06
97) HTML5 Semantic Elements, CSS,SVG Examples
2014-10-05 23:28:45
98) HTML,CSS Selectors

© Vasudev.H / Email: tech3in@live.com