Using JQuery Mobile

I am experimenting with a JQuery Mobile page in a non-threatening environment: a mobile website for my daughter's softball team. You can see it at www.altman.com/softball -- touch "Practice and game schedule."
My issue is with a Google Calendar that I have embedded: The dates of events are so much bigger than the details of those events, it becomes a bit jarring to use. I might be my own culprit, as I tried to adjust the elements using CSS tags. Perhaps there is a better way, but the various JS and CSS files that were automatically created are daunting and forbidding.
I would be grateful for any advice on best practices here.
Rick A.
Pleasanton CA

Thanks to both Nancy and es73 for their replies. This line of code:
<meta name="viewport" content="width=device-width, initial-scale=1">
made a huge difference. With it, text became balanced and readable, and I could eliminate all of my CSS flailing. The Google Calendar looks great, too. HOWEVER...that line of code disabled horizontal scrolling on my Android phone and that's a deal-breaker.
Are there parameters to this code that I can adjust and fiddle with?
Can I have my cake and eat it too, please??

Similar Messages

Anchor issues using JQuery Mobile

I am having a lot of issues with getting anchors to work correctly while using JQuery Mobile Starter Page/Template. My instructor gave me a javascript to use, but that too is not working correctly. I've tried many different options on getting it to work and perform correctly and I've had no luck. This is a project that's due next week and as of right now this is the one thing that's holding me back. So basically what I'm trying to do is is when you Click on landmarks it'll bring you to a new page with different city's and when you click a city it'll take you to the anchor so you can start reading my information.
The first anchor controlled by javascript works correctly, but when I add my second anchor and test it it'll go to the first anchors position, but a few paragraphs down. If I add a third it'll only move the page down a tad bit as if it wasn't moved at all.
Much help is greatly appreciated
Explore Ohio
Landmarks
Restaurants
Attractions
Ohio Sports
Ohio's History
Hotels
   Explore Ohio ©2015 MU
Landmarks
Youngstown
Dayton
Columbus
Cleveland
Cincinnati
Akron
Toledo
Youngstown            Mill Creek Park's Lanterns Mill                      Mill Creek Park (officially known as Mill Creek MetroParks) is a metropolitan park located in Youngstown, Ohio. The Trust for Public Land ranks one part of Mill Creek as the 142nd largest park located within the limits of a US city. Mill Creek MetroParks now stretches from the near west side of Youngstown to the southern borders of the city and neighboring Boardman township. The park "encompasses approximately 4400 acres (10.5 km²), 20 mi (32 km) of drives, and 15 mi (24 km) of foot trails" as well as a variety of bridges, ponds, streams, well-tended gardens, and waterfalls. If including the total size of the park system, Mill Creek ranks among the largest metropolitan-owned parks within the city limits of any US city.
The Butler Art Institute
          The Butler Institute of American Art, located on Wick Avenue in Youngstown, Ohio, United States, was the first museum dedicated exclusively to American art. Established by local industrialist and philanthropist Joseph G. Butler, Jr., the museum has been operating pro bono since 1919. Dedicated in 1919, the original structure is a McKim, Mead and White architectural masterpiece listed on the National Register of Historic Places.                     Stambaugh Auditorium                    Stambaugh Auditorium opened in 1926 through the generosity of Henry H. Stambaugh. It is located on Fifth Avenue across from Wick Park in Youngstown, Ohio. Stambaugh is virtually equidistant from Chicago and New York, as well as from Cleveland and Pittsburgh. Cleveland Hopkins Airport and the Pittsburgh International Airport are within an hour; New York or Chicago, an hour's flight. Access to interstates 80, 76 and 11 is a block away. Over a million people live in the immediate 6 county trading area. Youngstown State University with over 14,000 students is two blocks away. There are many other universities and colleges less than an hour by car with a combined student population of over 75,000.
Dayton                    Dayton is the sixth largest city in the state of Ohio and is the county seat of Montgomery County. In the 2010 census, the population was 141,527; the Dayton metropolitan area had 841,502 residents, making it the fourth-largest metropolitan area in Ohio, after only the urban agglomerations of Cleveland, Cincinnati and Columbus, and the 63rd largest in the United States. The Dayton-Springfield-Greenville Combined Statistical Area had a population of 1,080,044 in 2010 and is the 43rd largest in the United States. Dayton is situated within the Miami Valley region of Ohio just north of the Cincinnati–Northern Kentucky metropolitan area.          Carillon Historical Park                              The Park immerses you in the region’s history – from Dayton’s founding in 1796 through two centuries of expansion, industrialism and innovation. Learn about these revolutionary achievements while strolling through the Park’s 25 historical buildings and interacting with the hundreds of artifacts in our exhibits.Where else can you see the original 1905 Wright Flyer III, the world’s first practical airplane and National Historic Landmark, the 1835 B&O (Grasshopper) steam locomotive, and the first automobile self-starter?                     Woodland Cemetery Arboretum                    Woodland was incorporated in 1842 by John Whitten Van Cleve, the first male child born in Dayton.[2] He was the son of Benjamin Van Cleve and Mary Whitten Van Cleve. The cemetery began with 40 acres (160,000 m2) southeast of Dayton and has been enlarged to its present size of 200 acres (0.81 km2). Over 3,000 trees and 165 specimens of native Midwestern trees and woody plants grace the rolling hills. Many of the trees are more than a century old and 9 have been designated "Ohio Champions." The highest point in Dayton is within the cemetery, and during the Great Dayton Flood of 1913, it became a place of refuge.
Columbus
Cleveland
Cincinnati
Akron
Toledo
   Explore Ohio ©2015 MU
Restaurants   Content    Explore Ohio ©2015 MU
Attractions   Content    Explore Ohio ©2015 MU
Ohio Sports   Content    Explore Ohio ©2015 MU
Ohio's History   Content    Explore Ohio ©2015 MU
Hotels   Content    Explore Ohio ©2015 MU

Just to clear up some terminology. An anchor <a> is what we all call a hyperlink. You are referring to the name attribute of the anchor tag. Named anchors are deprecated but whether you use them or element ID's they work the same. Not really sure what you posted after your question - can you just post the code?
>The first anchor controlled by javascript works correctly,
>but when I add my second anchor and test it it'll go to the
>first anchors position, but a few paragraphs down. If I add a third
>it'll only move the page down a tad bit as if it wasn't moved at all.
Is there enough room for the page to scroll? Links to specific locations within a page work by scrolling the page. If there's not enough height left on the page, it can't scroll and can give the impression that it's not working. Is this what's happening? If not, then you'll need to post the code.

Can I use jQuery mobile with Apache Cordova in VS2013?

Hi,
I'm developing my first mobile app. I just need to build a very simple form with a few text fields and a date picker. I was wondering can I use jQuery Mobile for this? I saw an example of using jQuery Mobile with Ajax to call a web service
when user clicks Submit button and wondering if I can use that in VS 2013 Apache Cordova project.
Also, is there a way for user to define data for a couple of fields, like their user id and password for the app? How can that be done so users don't have to enter credential each time they use the app.
Thank you
Thank you

No. You need an officially unlocked iPhone. Contract free DOES NOT equal officially unlocked. All contract free means is that you are not obligated to a contract, nothing more.
In the US, only Apple sells officially unlocked iPhones.

Loop through checkbox in Oracle APEX 4.2 (using JQuery Mobile)

Hello!
I want question text and a report containing the possible answers is shown on a page. An answer can be selected by clicking on the checkbox. After hitting the submit button, the selected checkboxes containing the Answer Text, an answer_id and the current session_id are to be inserted into a table within the database.
Within Oracle APEX 4.2, I am using a classic report to achieve this. Thich is actually a bad solution, because the checkboxes within the report are shown as simple HTML checkboxes, instead of neat JQueryMobile checkboxes). Anyway, this is my current solution:
Is use this code for creating the classic report:
SELECT APEX_ITEM.CHECKBOX(1,answer_id), answer_id, answer_text
FROM ANSWERS
WHERE question_ID = :P10_Question_ID;
The insert of the data is done via the on submit process "On Submit - After Computations and Validations"
This is the code for the on submit process:
DECLARE var_session_id NUMBER := :P0_SESSION_ID;
BEGIN
FOR i in 1..APEX_APPLICATION.G_F01.COUNT LOOP
INSERT INTO STUDENT_ANSWERS (answer_id, answer_text, session_id)
SELECT a.answer_id, a.answer_text, var_session_id
FROM ANSWERS a WHERE a.answer_id = APEX_APPLICATION.G_F01(i)
END LOOP;
COMMIT;
END;
But this solution does not work. Instead, nothing is inserted into the database.
I don't know why the process is not inserting into the database, maybe there is something wrong with this line here WHERE a.answer_id = APEX_APPLICATION.G_F01(i) ?
I even tried a simple update process for testing purposes, but this doesnt work either:
BEGIN
FOR i in 1..APEX_APPLICATION.G_F01.COUNT LOOP
UPDATE STUDENT_ANSWERS SET text = APEX_APPLICATION.G_F03(APEX_APPLICATION.G_F01(i))
WHERE am_id = APEX_APPLICATION.G_F02(APEX_APPLICATION.G_F01(i));
END LOOP;
COMMIT;
END;
Can anybody tell me how to loop through a checkbox within ORACLE APEX 4.2 and how to insert the values ANSWER_ID, ANSWER_TEXT and SESSION_ID into the table STUDENT_ANSWERS after hitting the submit button? If you would know how to do it without using a report but a simple checkbox, this would be even more helpful for me!

I would start by putting this after submit, to check the contents of the array.
apex_debug.message('count:'||apex_application.g_f01.COUNT);
FOR i IN 1..apex_application.g_f01.COUNT LOOP
apex_debug.message('i:'||i||':'||apex_application.g_f01(i));
END LOOP;
Then compare the contents with your answers table.

Background image inside a div that rescales to the size of the browser in jquery mobile

I want to place a background image in my content area using Jquery mobile, however i want the image to re-scale itself to the size of browser and different devices. How would i go about this ??

jQuery Mobile is essentially a one page site. Background gradients are determined by the jQuery Mobile Theme you use (a, b, c, etc..). I don't know if it's possible to use a scaling background with jQMobile. I've never tried it. But you'll find the relevant code in your Theme.css file. Look for ui-body-a, ui-body-b, ui-body-c, depending on which Theme you're using.
Nancy O.

JQuery Mobile with Adobe Spry?

Hi everyone,
I'd like to use a Spry dataset in a jQuery Mobile page. At the moment it doesn't work, only displaying the field names instead of actual data. It seems like nothing Spry works on the page, I wondered if the two are compatible?
I created a separate page with minimal code with a Spry dataset and it works OK, so I guess the code is OK? When it's copied to the jQuery Mobile page no data is displayed, just the field names.
Can anyone help? I'd really like to have Spry functionality in the mobile application!
Thanks

I have this problem also, as posted in the jquery mobile forum:
What would cause Spry Validation to allow my Form to be submitted when the "Required" fields are left blank? Here is what is happening:
- I leave the fields blank and click my "Submit" button
- I briefly see the fields go Red with message "A Value is required"
- Then the Form submits anyway (tables update/no errors)
Here is the full code listing: http://cerberus.clearwave.com/jerry/spry_example_ctt1b.pdf
Notice:
- I'm using jquery mobile 1.1.0 on my page
- I'm inserting data into two tables at one time (Lines 8, 196, 203)
- I have Spry text Validation on only a few fields for now (ex. Line 483)
Here is a design view of my page:

JQuery Mobile with Trinidad/ADF Faces

Hi
Is it possible to use JQuery Mobile with Trinidad/ADF Faces? I tried using JQuery Mobile with Trinidad, but the trinidad components are not rendering on the page. Is there a way out?
Below is my code:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:trh="http://myfaces.apache.org/trinidad/html"
xmlns:tr="http://myfaces.apache.org/trinidad" xmlns:dvtt="http://xmlns.oracle.com/dss/trinidad/faces">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<trh:html>
<trh:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css"/>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</trh:head>
<trh:body>
<div data-role="page" data-theme="c" id="page">
<div data-role="header" data-theme="e" id="header">
<h1>Wireless > Logon</h1>
<a href="../../ data-icon="home" data-iconpos="notext" data-direction="reverse"
class="ui-btn-right jqm-home">Home</a>
</div>
</div>
<tr:form>
<tr:commandButton id="cbt" text="command button"/>
</tr:form>
</trh:body>
</trh:html>
</f:view>

</jsp:root>
Regards
Navin

With out the JQuery mobile settings ie the css and js entries. The trinidad components are rendering. Below is my web.xml file.
<?xml version = '1.0' encoding = 'windows-1252'?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.PARTIAL_STATE_SAVING</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>
<param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
<param-value>false</param-value>
</context-param>
<filter>
<filter-name>trinidad</filter-name>
<filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>trinidad</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>FORWARD</dispatcher>
<dispatcher>REQUEST</dispatcher>
<dispatcher>ERROR</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>resources</servlet-name>
<servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/adf/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>resources</servlet-name>
<url-pattern>/afr/*</url-pattern>
</servlet-mapping>
</web-app>

How to create the animation div dyanimcally using jquery+javascript

Hello,
after a week of researching and without getting the full result i decided to upload new discussion here and maybe some of you guys will help me.thanks in advance.
include the file:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script type="text/javascript" charset="utf-8" src="animate_edgePreload.js"></script>

html code:
<div id="Stage" class="EDGE-70798230"></div>    if i put it like this of course everthing works fine..i can put more with different id's and they will work fine...
my problem:
i dont know how many of this animation i will need...depends of what my server will give me in the response...so i need to create them dynamically...
i tried lots of things:
$("#newAnimation").append('<div id="Stage2" class="EDGE-70798230"></div>');    of course with this nothing happend...it even dont get the symbols under stage..and not any of the css...
$(".EDGE-70798230#Stage").clone().appendTo("#newAnimation");
$("#newAnimation").children('#Stage').prop('id','Stage2');   then mroe css changes and just then i can see the animation but it doesnt work..."play is not defind" when i try to run the animations..
i know there is some function that called createChildSymbol/createSymbolChild but none of them work for me...
i use jquery mobile..so to start the animation for example i do $.Edge.symbol.get($("#Stage")).play();
i tried to use the loadResources etc....doesnt work too..
anyone have some idea what i can do? it is possible?

joel pau thank you for all the support.
now i will explain the anwer if anyone else will be stuck with the same problem.
first of all in edge animate need to mark all the things that created and "convert to symbol"(mark all and right click).
second:
in the top of your html file you got the script to the edge_preLoad.js .....
so now in your js code:
lets say we use append to add new div to our code and now we got <div id="new"</div>.
$.Edge.getComposition("yourCompositionID").createSymbolChild("yourSymbolThatCreatedInStepO ne","#new");
like this you can get new animation of the same composition.
if you want to conroll the animation you just need to take the id of the new symbol your created using jquery or any way you like.
and example of control it:
$.Edge.symbol.get("#theNewID").play();

JQuery mobile for eCommerce

Hi,
Has anybody some good sample websites that use jQuery Mobile and are shopping carts using Business Catalyst?
I feel strongly that Responsive Design is not the way to go for bigger shops, but have found so far no evidence that at this point in time a shop with jQuery mobile for BC can be accomplished.
Thanks!

Moving this discussion to the Dreamweaver extensions forum.

Phonegap Build service for jquery mobile themed page not showing on mobile

I am trying to use jQuery mobile inside the Adobe Dreamweaver CC and then use phonegap build service to deploy the application to my phone. The issue here is that the Dreamweaver design panel is showing the jQuery Mobile UI but the application APK which is deployed over the phone does not.
Please find below the screenshot of Dreamweaver CC with design and code panel.
http://stackoverflow.com/questions/17334492/adobe-dreamweaver-cc-phonegap-build-service-is sue
Find below the entire index.html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#page2">Accenture</a></li>
            <li><a href="#page3">Digital</a></li>
            <li><a href="#page4">CASF RIA</a></li>
            <li><a href="#page5">Hybrid Applications using PhoneGap</a></li>
        </ul>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>ACCENTURE Page</h1>
    </div>
    <div data-role="content">
      <div data-role="fieldcontain">
        <label for="selectmenu" class="select">Select Technology Areas:</label>
        <select name="selectmenu" id="selectmenu">
          <option value="option1">Digital</option>
          <option value="option2">Oracle</option>
          <option value="option3">Mobile</option>
        </select>
      </div>
      <div data-role="fieldcontain">
        <label for="slider">Value:</label>
        <input type="range" name="slider" id="slider" value="0" min="0" max="100" />
      </div>
      <div data-role="fieldcontain">
        <label for="flipswitch">Option:</label>
        <select name="flipswitch" id="flipswitch" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select>
      </div>
      <div data-role="collapsible-set">
        <div data-role="collapsible">
          <h3>Header</h3>
          <p>Content</p>
        </div>
        <div data-role="collapsible" data-collapsed="true">
          <h3>Header</h3>
          <p>Content</p>
        </div>
        <div data-role="collapsible" data-collapsed="true">
          <h3>Header</h3>
          <p>Content</p>
        </div>
      </div>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<div data-role="page" id="page3">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>DIGITAL Page</h1>
    </div>
    <div data-role="content">
    <div id="Accordion1">
      <h3><a href="#">Section 1</a></h3>
      <div>
        <p>Content 1</p>
      </div>
      <h3><a href="#">Section 2</a></h3>
      <div>
        <p>Content 2</p>
      </div>
      <h3><a href="#">Section 3</a></h3>
      <div>
        <p>Content 3</p>
      </div>
    </div>
Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<div data-role="page" id="page4">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>CASF RIA</h1>
    </div>
    <div data-role="content">
      <ol data-role="listview" data-inset="true" data-split-icon="arrow-d">
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
        <li><a href="#">
          <h3>Page</h3>
          <p>Lorem ipsum</p>
          <span class="ui-li-count">1</span></a><a href="#">Default</a></li>
      </ol>
Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<div data-role="page" id="page5">
    <div data-role="header">
        <a href="#page"><label style="color:white; font-weight:bolder">BACK</label></a><h1>HYBRID APPLICATIONS using PhoneGap</h1>
    </div>
    <div data-role="content">
      <div data-role="fieldcontain">
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" value="" />
      </div>
Content </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
<script type="text/javascript">
$(function() {
    $( "#Accordion1" ).accordion();
</script>
</body>
</html>
This is how it looks in device:
This is how it looks in the mobile devices:
Could anyone please help?

Try defining a site and then create the mobile themed page within that site and DW will copy all the assets relative to the site path and will not be as its in your current page.
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CC/Configuration/Third%20Party%20Source%20Code/jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
HTH
--Bhawna

Export for jquery mobile 1.2.0

Exporting my theme from Fireworks to a document using jquery mobile 1.2.0 (final) breaks several elements. I also tried including the CDN for 1.2.0 while including my fireworks exported css after. That was better, but elements were still rendering incorrectly.
Does there needs to be an update for the fireworks exported css to jive with 1.2.0?

Moving this discussion to the Dreamweaver extensions forum.

Page transitions using jQuery and responsive

I have a page linking to another page and when you click between each page (pages) I want to add jQuery so each page slides either left or right as a transition.
I can only slide individual elements such as the logo, however I want to slide the whole page, but I think as the page is responsive so no pixels are given height or width, the page is not defined so it does not know where to slide to and from.
Basically I want to slide my whole "wrapper" div but can't, but I can only slide individual divs inside the wrapper.
Any ideas?
Thanks

Thanks Nancy.
That's what all my research was coming out as. I'm making a web app in HTML5 and wanted to reproduce the page transitions.
I don't really want to use jquery mobile just for this functionality as I want to use a more custom stylesheet (rather than JQM stuff) and use bootstrap. Could you suggest anything else or just forget those types of transitions?
Thanks

Cannot get background image to appear in app made with jquery mobile

Not sure where to post this issue but i thought here might be a good place as it is related to Dreamweaver.
I am using jquery mobile and phonegap to develop an app and i'm a noob at this.
I just want to make a scalable image as a background. After searching stack overflow it seems this problem comes up alot but I've tried all solutions and they do not work! When viewing it in a web browser...all looks fine but when i run it on the emulator or download the test build to my android phone it does not show at all!!
I know that the jquery mobile stylesheets overwrite anything i try to custom style so i have gone in directly and targeted those elements
CSS:
.ui-page.ui-body-c {
background: url(jquery-mobile/images/phone-bg.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
margin: 0; padding: 0;
Like I said, this works fine in a web broswer when testing and fine in Live mode but in the app build i can see nothing at all.
Has anyone got a good workaround/solution for this??? Because all suggestions i see in stack overflow just don't work...

This is where your SpryHorizontal12.css file is looking for that image. It's 404 not found at that location (notice the path):
http://eappromotions.healthandperformancesolutions.net/eappromotions/EAP%20Promo%20Kit/htm l/images/top_nav_button.gif
Also, don't use spaces in file & folder names. It creates problems when spaces are converted to %20.
Nancy O.

How do i change the path of data ajax false from returning to homepage, when using a PHP mail form in jquery mobile?

I have a put a php mail form in the quote page of my mobile site. However when i send the form it returns to the route page rather than the quote page, i have used the data ajax false action as i dont want to send via ajax. i have left the thanks page blank as i want it to remain on the same page showing sent or declined message. Can someone help please?
<?php
// OPTIONS - PLEASE CONFIGURE THESE BEFORE USE!
$yourEmail = "[email protected]"; // the email address you wish to receive these mails through
$yourWebsite = "www.firstcalltransport.co.uk"; // the name of your website
$thanksPage = ''; // URL to 'thanks for sending mail' page; leave empty to keep message on the same page
$maxPoints = 4; // max points a person can hit before it refuses to submit - recommend 4
$requiredFields = "name,email,collection,delivery,comments"; // names of the fields you'd like to be required as a minimum, separate each field with a comma
// DO NOT EDIT BELOW HERE
$error_msg = array();
$result = null;
$requiredFields = explode(",", $requiredFields);
function clean($data) {
$data = trim(stripslashes(strip_tags($data)));
return $data;
function isBot() {
$bots = array("Indy", "Blaiz", "Java", "libwww-perl", "Python", "OutfoxBot", "User-Agent", "PycURL", "AlphaServer", "T8Abot", "Syntryx", "WinHttp", "WebBandit", "nicebot", "Teoma", "alexa", "froogle", "inktomi", "looksmart", "URL_Spider_SQL", "Firefly", "NationalDirectory", "Ask Jeeves", "TECNOSEEK", "InfoSeek", "WebFindBot", "girafabot", "crawler", "www.galaxy.com", "Googlebot", "Scooter", "Slurp", "appie", "FAST", "WebBug", "Spade", "ZyBorg", "rabaz");
foreach ($bots as $bot)
if (stripos($_SERVER['HTTP_USER_AGENT'], $bot) !== false)
return true;
if (empty($_SERVER['HTTP_USER_AGENT']) || $_SERVER['HTTP_USER_AGENT'] == " ")
return true;
return false;
if ($_SERVER['REQUEST_METHOD'] == "POST") {
if (isBot() !== false)
$error_msg[] = "No bots please! UA reported as: ".$_SERVER['HTTP_USER_AGENT'];
// lets check a few things - not enough to trigger an error on their own, but worth assigning a spam score..
// score quickly adds up therefore allowing genuine users with 'accidental' score through but cutting out real spam
$points = (int)0;
foreach ($badwords as $word)
if (
strpos(strtolower($_POST['comments']), $word) !== false ||
strpos(strtolower($_POST['name']), $word) !== false
$points += 2;
if (strpos($_POST['comments'], "http://") !== false || strpos($_POST['comments'], "www.") !== false)
$points += 2;
if (isset($_POST['nojs']))
$points += 1;
if (preg_match("/(<.*>)/i", $_POST['comments']))
$points += 2;
if (strlen($_POST['name']) < 3)
$points += 1;
if (strlen($_POST['comments']) < 15 || strlen($_POST['comments'] > 1500))
$points += 2;
if (preg_match("/[bcdfghjklmnpqrstvwxyz]{7,}/i", $_POST['comments']))
$points += 1;
// end score assignments
foreach($requiredFields as $field) {
trim($_POST[$field]);
if (!isset($_POST[$field]) || empty($_POST[$field]) && array_pop($error_msg) != "Please fill in all the required fields and submit again.\r\n")
$error_msg[] = "Please fill in all the required fields and submit again.";
if (!empty($_POST['name']) && !preg_match("/^[a-zA-Z-'\s]*$/", stripslashes($_POST['name'])))
$error_msg[] = "The name field must not contain special characters.\r\n";
if (!empty($_POST['email']) && !preg_match('/^([a-z0-9])(([-a-z0-9._])*([a-z0-9]))*\@([a-z0-9])(([a-z0-9-])*([a-z0-9]))+ ' . '(\.([a-z0-9])([-a-z0-9_-])?([a-z0-9])+)+$/i', strtolower($_POST['email'])))
$error_msg[] = "That is not a valid e-mail address.\r\n";
if (!empty($_POST['url']) && !preg_match('/^(http|https):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\ /?/i', $_POST['url']))
$error_msg[] = "Invalid website url.\r\n";
if ($error_msg == NULL && $points <= $maxPoints) {
$subject = "Automatic Form Email";
$message = "You received this e-mail message through your website: \n\n";
foreach ($_POST as $key => $val) {
if (is_array($val)) {
foreach ($val as $subval) {
$message .= ucwords($key) . ": " . clean($subval) . "\r\n";
} else {
$message .= ucwords($key) . ": " . clean($val) . "\r\n";
$message .= "\r\n";
$message .= 'IP: '.$_SERVER['REMOTE_ADDR']."\r\n";
$message .= 'Browser: '.$_SERVER['HTTP_USER_AGENT']."\r\n";
$message .= 'Points: '.$points;
if (strstr($_SERVER['SERVER_SOFTWARE'], "Win")) {
$headers   = "From: $yourEmail\r\n";
} else {
$headers   = "From: $yourWebsite <$yourEmail>\r\n";
$headers .= "Reply-To: {$_POST['email']}\r\n";
if (mail($yourEmail,$subject,$message,$headers)) {
if (!empty($thanksPage)) {
header("Location: $thanksPage");
exit;
} else {
$result = 'Your mail was successfully sent.';
$disable = true;
} else {
$error_msg[] = 'Your mail could not be sent this time. ['.$points.']';
} else {
if (empty($error_msg))
$error_msg[] = 'Your mail looks too much like spam, and could not be sent this time. ['.$points.']';
function get_data($var) {
if (isset($_POST[$var]))
echo htmlspecialchars($_POST[$var]);
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/stylesheetnew.css" rel="stylesheet" type="text/css">
<link href="../jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">
<script src="../jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="../jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<style type="text/css">
p.error, p.success {
font-weight: bold;
padding: 10px;
border: 1px solid;
p.error {
background: #ffc0c0;
color: #F00;
p.success {
background: #b3ff69;
color: #4fa000;
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
   <h1>FIRSTCALL TRANSPORT</h1>
</div>
    <div data-role="navbar" data-position="fixed">
                                <ul>
                                  <li><a href="#about">About</a></li>
                                  <li><a href="#services">Services</a></li>
                                  <li><a href="#contact">Contact</a></li>
                                  <li><a href="#quote">Quote</a></li>
                                </ul>
</div>
<div data-role="content"> </div>
     <div data-role="footer" data-position="fixed" > </div>
</div>
</div>
<div data-role="page" id="quote">
<div data-role="header" data-position="fixed">
    <h1>GET A QUOTE</h1>
</div>
<div data-role="content">
   <?php
if (!empty($error_msg)) {
echo '<p class="error">ERROR: '. implode("<br />", $error_msg) . "</p>";
if ($result != NULL) {
echo '<p class="success">'. $result . "</p>";
?>
<form action="<?php echo basename(__FILE__); ?>" method="post" data-ajax="false" >
<noscript>
<p><input type="hidden" name="nojs" id="nojs" /></p>
</noscript>
<p>
<label for="name">Name: *</label>
<input type="text" name="name" id="name" value="<?php get_data("name"); ?>" /><br />
<label for="email">E-mail: *</label>
<input type="text" name="email" id="email" value="<?php get_data("email"); ?>" /><br />
        <label for="company">Company:</label>
<input type="text" name="company" id="company" value="<?php get_data("company"); ?>" /><br />
<label for="collection">Collection: *</label>
<input type="text" name="collection" id="collection" value="<?php get_data("collection"); ?>" /><br />
    <label for="delivery">Delivery: *</label>
<input type="text" name="delivery" id="delivery" value="<?php get_data("delivery"); ?>" /><br />
<label for="comments">Message: *</label>
<textarea name="comments" id="comments" rows="5" cols="20"><?php get_data("comments"); ?></textarea><br />
<input type="submit" name="submit" id="submit" value="Send" <?php if (isset($disable) && $disable === true) echo ' disabled="disabled"'; ?> />
</p>
</form> </div>
     <div data-role="footer" > </div>
</div>
</div>
</body>
</html>

My wife has left me for four weeks, favouring to be with our son who lives 4,000 km away. I now have to cook for myself and the steaks taste horrible. What am I doing wrong?
If you do not know what I have (not) done to make the steak taste horrible, my question is as hard to answer as your question above.
Please give us more info like giving us the code that sends the page to the homepage rather than to the previous page.

Problem using items with jQuery mobile

I currently encountered two issues with the jQuery mobile template in APEX.
- Textfield with autocomplete is not supportet and doesn't work
- Date field should be supportet but doesn't work in most browsers
Is there anything planned in APEX 5 to find workarounds for this? Or do we have to build our own solutions?
My current APEX version is "4.2.2.00.11".

Regarding the date picker - what about it doesn't work? I haven't found any issues with using date pickers on many different devices.

Using JQuery Mobile

Similar Messages

Maybe you are looking for