{"id":18243,"date":"2013-09-30T21:01:28","date_gmt":"2013-09-30T13:01:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=18243"},"modified":"2025-04-04T01:37:33","modified_gmt":"2025-04-03T17:37:33","slug":"mobile-panel-with-jquery","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/","title":{"rendered":"Building a Mobile Panel with jQuery Mobile"},"content":{"rendered":"<p>In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated to accommodate this screen limit. Commonly, there is a button at the right or left, which will reveal hidden elements when it is tapped.<\/p>\n<p>Take the <a href=\"https:\/\/apps.apple.com\/us\/app\/facebook\/id284882215\">Facebook app for iOS<\/a> as an example; if you tap the icon on the left side, it reveals the link menus to navigate the app, while if you tap the icon on the right side, it will reveal your online contacts. Most of today\u2019s apps apply a similar approach.<\/p>\n<p>In our previous post, Jake has shown you <a href=\"https:\/\/www.hongkiat.com\/blog\/building-mobile-app-navigation-with-jquery\/\">how to build this kind of function from scratch using jQuery<\/a>. Today, we will explore another way of using jQuery Mobile.<\/p>\n<p><strong><a href=\"https:\/\/jquerymobile.com\/\">jQuery Mobile<\/a><\/strong> is a framework that is specifically designed to build user interface and interaction for mobile devices \u2013 like iOS, Android, Windows Phone, Blackberry and Symbian. In the context of our discussion, it provides a component called Panel Slide to build that function in a much easier way.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/webapp-design-resources\/\" class=\"ref-block__link\" title=\"Read More: 40+ Resources and Freebies For Mobile Web App Design\" rel=\"bookmark\"><span class=\"screen-reader-text\">40+ Resources and Freebies For Mobile Web App Design<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webapp-design-resources.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17128 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webapp-design-resources.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">40+ Resources and Freebies For Mobile Web App Design<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe advancements of smartphones have improved the quality of mobile web development. It is now possible to generate...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Requirement<\/h2>\n<p>First, you need to download jQuery, jQuery Mobile Library, and jQuery Mobile Stylesheet. Then link them to your HTML document, like so.<\/p>\n<pre>\r\n &lt;link\u00a0rel=\"stylesheet\"\u00a0href=\"http:\/\/code.jquery.com\/mobile\/1.3.0-beta.1\/jquery.mobile-1.3.0-beta.1.min.css\"\u00a0\/&gt;\r\n &lt;script\u00a0src=\"\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n &lt;script\u00a0src=\"http:\/\/code.jquery.com\/mobile\/1.3.0-beta.1\/jquery.mobile-1.3.0-beta.1.min.js\"&gt;&lt;\/script&gt;\r\n <\/pre>\n<h2>HTML Markup<\/h2>\n<p>Depending on the App you build, Panel can be anything. In this example, I will just follow Facebook to make it easy.<\/p>\n<p>In this post I will be creating two panels, left and right. The left panel is for placing the app menu navigation, and the left one is for listing the people that are currently online.<\/p>\n<p>Our demo page consist of four sections, the header, the content and two panels. In <strong>jQuery Mobile<\/strong>, these sections are defined using HTML5 <code>data-role<\/code> attributes, as follows.<\/p>\n<pre>\r\n&lt;div data-role=\"page\"&gt;\r\n  &lt;div class=\"header\" data-role=\"header\"&gt;\r\n    &lt;span class=\"open left\"&gt;&lt;a href=\"#panel-01\"&gt;&#61641;&lt;\/a&gt;&lt;\/span&gt;\r\n    &lt;span class=\"title\"&gt;Hello World&lt;\/span&gt;\r\n    &lt;span class=\"open right\"&gt;&lt;a href=\"#panel-02\"&gt;&#9776;&lt;\/a&gt;&lt;\/span&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"content\" data-role=\"content\"&gt;\r\n    &lt;h3&gt;This is the content&lt;\/h3&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\r\n     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam [...].&lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"panel left\" data-role=\"panel\" data-position=\"left\" data-display=\"push\" id=\"panel-01\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li class=\"newsfeed\"&gt;&lt;a href=\"#\" title=\"Home\"&gt;News Feed&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"profile\"&gt;&lt;a href=\"#\" title=\"Profile\"&gt;Profile&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"setting\"&gt;&lt;a href=\"#\" title=\"Setting\"&gt;Setting&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"logout\"&gt;&lt;a href=\"#\" title=\"Logout\"&gt;Logout&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li class=\"report\"&gt;&lt;a href=\"#\" title=\"Report\"&gt;Report Bug&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"panel right\" data-role=\"panel\" data-position=\"right\" data-display=\"overlay\" id=\"panel-02\"&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;&lt;a href=\"#\" title=\"John Doe\"&gt;&lt;span class=\"avatar\"&gt;&lt;img src=\"img\/mambows_120.jpg\" width=\"30\" height=\"30\"&gt;&lt;\/span&gt;John Doe&lt;\/a&gt;&lt;\/li&gt;\r\n      &lt;li&gt;&lt;a href=\"#\" title=\"Jessy Doe\"&gt;&lt;span class=\"avatar\"&gt;&lt;img src=\"img\/mkalalang_120.jpg\" width=\"30\" height=\"30\"&gt;&lt;\/span&gt;Jessy Doe&lt;\/a&gt;&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n <\/pre>\n<p>jQuery Mobile provides three methods to show the panel namely <code>reveal<\/code>, <code>push<\/code>, and <code>overlay<\/code>; these methods are specified with <code>data-display<\/code> attribute.<\/p>\n<p><code>reveal<\/code> will show the panel by sliding the content page. It is the default method applied if the attribute is not specified explicitly. The <code>push<\/code> method will display the panel by sliding both the panel and the content at the same time, while the overlay method will show the panel at the top of the page content.<\/p>\n<h2>CSS and Theme<\/h2>\n<p>As we have linked the jQuery Mobile stylesheet, our page has also been styled up without the need of additional style rules.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg\" width=\"500\" height=\"205\"><\/figure>\n<p>You can apply the themes that are provided using <code>data-theme<\/code> attribute. But, in this example, we will just leave the header style as shown in the above screenshot, then style the page and the panels on our own. Here are our style rules.<\/p>\n<pre>\r\n .open a, .open a:hover {\r\n  padding: 7px 15px;\r\n  background-color: #000;\r\n  border-radius: 3px;\r\n}\r\n.open { \r\n  color: #fff;\r\n  position: absolute;\r\n}\r\n.open.left {\r\n  left: 20px;\r\n  cursor: pointer;\r\n}\r\n.open.right {\r\n  right: 20px;\r\n  cursor: pointer;\r\n}\r\n.panel {\r\n  background: #7F8C8D;\r\n  color: #ECF0F1;\r\n}\r\n.panel a {\r\n  color: #FFF !important;\r\n  text-shadow: 0 0 0 rgba(0,0,0,0);\r\n  font-size: 14px;\r\n  padding: 15px 20px 15px 60px;\r\n  display: block;\r\n  text-decoration: none;\r\n  border-bottom: 1px solid #475657;\r\n  border-top: 1px solid #95A5A6;\r\n  position: relative;\r\n  font-weight: 400;\r\n}\r\n.panel ul {\r\n  padding: 0;\r\n  margin: 0;\r\n  list-style: none;\r\n  border-bottom: 1px solid #95A5A6;\r\n}\r\n.panel .avatar {\r\n  position: absolute;\r\n  top: 8px;\r\n  left: 20px;\r\n}\r\n.ui-panel-inner {\r\n  padding: 0;\r\n}\r\n.panel a:hover {\r\n  background-color: #95A5A6;\r\n}\r\n.panel.right a:before {\r\n  content: '';\r\n  display: block;\r\n  width: 12px;\r\n  height: 12px;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  background-color: #2ECC71;\r\n  right: 20px;\r\n}\r\n.panel.left a:before {\r\n  content: '';\r\n  display: inline-block;\r\n  position: absolute;\r\n  width: 24px;\r\n  height: 24px;\r\n  top: 15px;\r\n  left: 20px;\r\n  font-family: 'hk-demo';\r\n  text-align: center;\r\n  font-size: 18px;\r\n}\r\n.panel.left .newsfeed a:before { \r\n  content: '\\f09e';\r\n}\r\n.panel.left .profile a:before { \r\n  content: '';\r\n}\r\n.panel.left .setting a:before { \r\n  content: '\\2699';\r\n}\r\n.panel.left .logout a:before { \r\n  content: '\\e78e';\r\n}\r\n.panel.left .report a:before { \r\n  content: '\\f0e0';\r\n}\r\n\r\n <\/pre>\n<p>I will not slice how these styles work bit per bit, as we already discussed this in our previous posts \u2013 such as <a href=\"https:\/\/www.hongkiat.com\/blog\/pseudo-element-before-after\/\">Pseudo-elements<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/\">Font Icons<\/a>.<\/p>\n<p>That\u2019s all we need. We don\u2019t need to add extra pieces of JavaScript as it all has been handled by the framework, and the panel is now workable.<\/p>\n<p>You can see it in action from this demo; you can click the icons on the header, or if you view it in a touch-enabled device, you can also swipe the screen to display the panels.<\/p>\n<p><a href=\"https:\/\/hongkiat.github.io\/mobile-panel-with-jquery\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  View demo <\/span><\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/mobile-panel-with-jquery\/\" class=\"su-button su-button-style-flat\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:0px\" target=\"__blank\" rel=\"noopener nofollow\"><span style=\"color:#FFFFFF;padding:7px 20px;font-size:16px;line-height:24px;border-color:#6cadf4;border-radius:0px;text-shadow:none\"><i class=\"sui sui-external-link\" style=\"font-size:16px;color:#fff\"><\/i>  Download source <\/span><\/a> <\/p>","protected":false},"excerpt":{"rendered":"<p>In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated to accommodate this screen limit. Commonly, there is a button at the right or left, which will reveal hidden elements when it is tapped. Take the Facebook app for&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[911,3214,4646],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create a Mobile Panel with jQuery Mobile<\/title>\n<meta name=\"description\" content=\"In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Mobile Panel with jQuery Mobile\" \/>\n<meta property=\"og:description\" content=\"In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-09-30T13:01:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:37:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Building a Mobile Panel with jQuery Mobile\",\"datePublished\":\"2013-09-30T13:01:28+00:00\",\"dateModified\":\"2025-04-03T17:37:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/\"},\"wordCount\":583,\"commentCount\":29,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-panel-with-jquery\\\/header-page.jpg\",\"keywords\":[\"jQuery\",\"Mobile App Development\",\"Mobile Website Design &amp; Dev\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/\",\"name\":\"How to Create a Mobile Panel with jQuery Mobile\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-panel-with-jquery\\\/header-page.jpg\",\"datePublished\":\"2013-09-30T13:01:28+00:00\",\"dateModified\":\"2025-04-03T17:37:33+00:00\",\"description\":\"In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-panel-with-jquery\\\/header-page.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/mobile-panel-with-jquery\\\/header-page.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/mobile-panel-with-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Mobile Panel with jQuery Mobile\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Mobile Panel with jQuery Mobile","description":"In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Building a Mobile Panel with jQuery Mobile","og_description":"In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated","og_url":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-09-30T13:01:28+00:00","article_modified_time":"2025-04-03T17:37:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Building a Mobile Panel with jQuery Mobile","datePublished":"2013-09-30T13:01:28+00:00","dateModified":"2025-04-03T17:37:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/"},"wordCount":583,"commentCount":29,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg","keywords":["jQuery","Mobile App Development","Mobile Website Design &amp; Dev"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/","url":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/","name":"How to Create a Mobile Panel with jQuery Mobile","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg","datePublished":"2013-09-30T13:01:28+00:00","dateModified":"2025-04-03T17:37:33+00:00","description":"In terms of screen size, mobile devices have smaller screens than a PC monitor. When viewing webpages or apps, there are some elements that are translated","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/mobile-panel-with-jquery\/header-page.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/mobile-panel-with-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Mobile Panel with jQuery Mobile"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4Kf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=18243"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18243\/revisions"}],"predecessor-version":[{"id":73627,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/18243\/revisions\/73627"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=18243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=18243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=18243"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=18243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}