Solved

Jquery Mobile popupPanel in a Wordpress PHP Page

Posted on 2013-01-13
1
381 Views
Last Modified: 2013-01-13
I can create a basic HTML page using the example http://jquerymobile.com/test/docs/pages/popup/popup-panels.html and it works as designed.  I'm attempting to produce the same popup functionality with this code in a Wordpress homepage with zero luck.  The Open Panel button is at the top right of http://test2.dfigdesign.com and my panel should appear after the <div id="main" data-role="content">.  I have the the CSS and scripting included in the page.

How should this be handled differently to have the page return a panel, please?


<div data-role="popup" id="popupPanel-popup" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">

    <button data-theme="a" data-icon="back" data-mini="true">Back</button>
    <button data-theme="a" data-icon="grid" data-mini="true">Menu</button>
    <button data-theme="a" data-icon="search" data-mini="true">Search</button>
     
</div>
0
Comment
Question by:danfiggolf
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
ID: 38772516
It seems that you're closing the panel on button click, try to remove the line

//$("#popupPanel").popup('close');

here:

              $("#popupPanel button").on("click", function () {
                  $("#popupPanel").popup('close');
              });
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question