Search jQuery

jQuery Forum

Screen name:
boblan70

boblan70's Profile

11 Posts

7 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

setting size of grid yo 25%/75%
[4Replies]
- 18-Jan-2013 03:49 PM
- Forum: jQuery Mobile
I want to use the grid to layout a page content. I wish to have the first block to 25% and second block to 75%. I do not wish to use tables if can avoid it. Is CsSS allowed to modify it or will thwJQM over-ride?

Anyone have a solution?

A suggestion on using background images
[0Replies]
- 16-Jan-2013 08:58 PM
- Forum: jQuery Mobile
With the problem I am having with specifying a background image in my CSS file, It would be a nice touch if Theme generation would allow the ability to specify a background image. I know that you can apply a color but not an image. Would really simplify things.

Best method in JQM to use background image?
[0Replies]
- 16-Jan-2013 08:43 PM
- Forum: Developing jQuery Mobile
I want to use a background using a .png graphic I have to compliment the theme I'm using. I have tried placing styling the body attribute on the external CSS file without luck. I also created a CSS file in the header a page and again no luck.

I ran diagnostics on the CSS and page through Firefox and did not find anything in error. I hope someone can provide me with a solution. I also checked to ensure the correct folders where the graphic resides is correct.

Thanks in advance

Code Snippit of external CSS:
2. /* Marri's CSS Stylesheet */
3. @charset "utf-8";
5. /* general styles */
6. body {font-family: Arial;
7. /* sets the base font size */
8. font-size: 16px;
9. margin-left: 0px; padding: 0px;
10. /* srts the page background color to white */
11. background-color: #fff;
12. /* sets background */
13. background-image: url(images/bgrounds/beige227.png);
14. background-repeat: repeat;
15. }
17. /* Text Formatting */
18. /* set page font size */
19. .page { font-size: .8em;}
20. /* causes the header banner to stretch the lenght of the screen */
21. page .banner {width: 100%; height: 125px;}
23. hr {width:50%; align:center;}
24. .alignCtr {text-align: center;}
25. h1 {font-size: 2em; text-align:center;}
26. h2 {font-size: 1.5em; text-align:center;}
27. h3 {font-size: 1.2em; text-align:center;}
28. h4 {font-size: 1em;}
30. .notes { font-size: .8em;"}
31. .notesCntr { font-size: .8em; text-align: center;}
32. .phonrLink {color:#000; text-align:center;}
34. /* Layout */
35. /* centers the page o screen center */
36. .page { position: relative; margin: 0 auto 0 auto; max-width: 61.2em;}
37. /* displays the header graphics */
38. .page content{
39. margin: .93em 1,25em 1.25em 0;
40. padding: 1.25em;
41. border: 1px solid #bdbdbd;
42. background: #f1f1f1;}
43. .subHeader {font-size: 1.3em;font-weight: bold; text-align:center;}
45. .bottomMenu { font-size:.6em;
48. /* positiong */
49. #flt-l {float:left; margin-left: .93em;}
50. #flt-r {float:right; margin-right: .93em;}
51. .alignMap {text-align:center; margin: 0 auto 0 auto; padding: 4 4 4 4;}
53. .footer {
54. text-align:center;
55. font-size:.8em;
56. font-weight:400;
57. color:#000;}
59. /* image sizing and positioning */
60. .img_left {height:2em; width:2em; float:left; margin:0; padding: 4 4 4 4;}
61. .img_right{height:2em; width:2em; float:right;margin:0; padding: 4 4 4 4;}
63. .imgCtr {display: block; margin-left: auto; margin-right: auto }
64. .footerAlignCtr {text-align:center; font-size: .8em; color:#000;}

Need clarification the use of data-inset
[3Replies]
- 08-Jan-2013 05:04 PM
- Forum: Developing jQuery Mobile
URL: http://mobilehost.me/MP/
Version JQM 1.2.0

Hate to tap into your busy day for a simple question, however I have tried ti implement data-inset on several pages of my site I'm building as a learning experience. It works great and as explained in the doc, but, on one page it will not work, no matter what I do. I know it's me but I can't figure out what I did. I referenced several books I purchased,and looked at my working pages.

My understanding on inst is if not specified, the default is true. Is that correct? I tried removing data-inset from the collapsible and still had no inset.

I do not want you to solve my problem, but point me in the right direction.

Code collapsible-set:
2. 
3. 
4. <div data-role="collapsible-set" data-inset="true">
5. <div data-role="collapsible" data-iconpos="right" data-mini="true">
6. <h2>Chicken Cacciatore</h2>
7. <p>
8. Fresh Chicken Tenders sauteed with fresh Mushrooms, Peas, Green Peppers, and Black
9. Olives in a Red or Marsella Wine served with Spaghetti.
10. </p>
11. <table class="alignCtr">
12. <tr>
13. <td>Lunch: </td><td><strong>$12.00</strong> </td>
14. <td>Dinner: </td><td><strong>$15.00</strong></td>
15. </tr>
16. </table>
17. </div>
18. <div data-role="collapsible" data-iconpos="right" data-mini="true">
19. <h2>Chicken Sorrentino</h2>
20. <p>
21. Chicken Breast Bacon, Mushrooms and Olives, baked with Mozzarella Cheese in a Marsela
22. Wine Sauce served with Spahgetti.
23. </p>
24. <table class="alignCtr">
25. <tr>
26. <td>Lunch: </td><td><strong>$12.00</strong> </td>
27. <td>Dinner: </td><td><strong>$15.00</strong></td>
28. </tr>
29. </table>
30. </div>
31. <div data-role="collapsible" data-iconpos="right" data-mini="true">
32. <h2>Chicken Marsala</h2>
33. <p>
34. Chicken Breast, and sliced Mushroons sauteed in a Marsala Wine Sauce
35. Three Fresh Italian Cheeses with Homemade Meat or Mariana Sauce.
36. </p>
37. <table class="alignCtr">
38. <tr>
39. <td>Lunch: </td><td><strong>$12.00</strong> </td>
40. <td>Dinner: </td><td><strong>$15.00</strong>/td>
41. </tr>
42. </table>
43. </div>
Thans for taking time to check-out my problen.

Linking Problem when page contains static Google map
[4Replies]
- 05-Jan-2013 01:49 PM
- Forum: jQuery Mobile
Version JQM: 1.2.0
URL: http://mobilehost.me/MR/

Desired results:
I have created a collapse button on the Index.html page to display contact information. This includes a link to a page containing a Google static map. When the user taps the link, the page containing the map will be displayed.

Problem:
Sounds like an easy enough link, but when I tap the link, it works intermittently. Sometimes if I continue tapping the button or other times if I hold the link button down it will display. I have checked the forum and have not found a solution. The map itself, when displayed is fine, so I no the static map call is correct. Can you suggest a solution I can try?

Code from home page calling the map:
2. <div data-role="collapsible" data-iconpos="right" data-inset="true" data-mini="true">
3. <h2>Contact us</h2>
4. <p style="text-align:center; font-weight:bold;">
5. <h3 class="alignCtr">
6. <a href="714-533-1631">Phone: 714-533-1631</a>
7. <br />
8. (Touch number to dial)
9. </h3>
10. <p class="alignCtr">
11. Address: 1194 W. Ketella Ave.<br/>
12. Anaheim, CA 92802<br />
13. (across from Disneyland)<br /><br />
14. PC Website: www.marrispizza.com<br />
15. Email address: marrispizza@gmail.com<br /><br />
16. <div data-role="button" data-icon="arrow-r" data-iconpos="right">
17. <a href="find.html" data-prefetch data-inline="true" data-icon="arrow-r">Map</a>
18. </div>
The code for page being called:
2. <div data-role="content">
3. 
4. <p class="alignMap">
5. <img src="http://maps.googleapis.com/maps/api/staticmap?center=1194+Ketella+ave,
6. +Anaheim,CA&zoom=13&size=130x160&scale=2&maptype=roadmap&markers=label:H%7C1194
7. +Katella+Ave,+Anaheim,CA&sensor=false">
8. </p>
9. 
10. <p>
11. We are located across from <strong>Disneyland Resort</strong> A great Famly Restsurant to
12. have Lunch or Dinner while visiting the park.
13. </p>
14. <p class="alignCtr">
15. <strong>1194 Ketella Ave.<br/>
16. Anaheim, CA<br/>
17. 92802</strong>
18. </p>
19. </div>
I have placed this up on my server for testing and review. URL shown above.

Problem with using a linked list in a collapsible button.
[3Replies]
- 01-Jan-2013 07:31 PM
- Forum: jQuery Mobile
Jqm version: 1.2.0

Desired Result:
Upon setting a collapsible button, links to data-mini="true", wish to have buttons
should use data-mini="true"

Problem:
No matter what I do, I can not get the buttons to be minimize. I have been to the docs several times and tried every combination. I am providing the code snippet and a picture of the un-collapsed output. hope this helps.
2. 
3. <div data-role="collapsible">
4. <h3><div data-iconpos="top">Pasta Dishes</div></h3>
5. <h3 align="center">Great Italian Famly Receipts"</h3>
6. <div>
7. <ul data-role="listview">
8. <li><a href="specPasta.html" daata-role="button" data-mini="true">Speciality Pasta</a></li>
9. <li><a href="Italian Pasta.html" daata-role="button" data-mini="true">Italian Pasta</a></li>
10. <li><a href="Casseroles.html" daata-role="button" data-mini="true">Casseroles</a></li>
11. <li><a href="tortellini.html" daata-role="button" data-mini="true">Tortellini</a></li>
12. </ul>
13. </div>
14. </div>
15. 
Pasta button in opened state

Notice that Pasta and expanded links are not minimized.

Thank you for any assistance.

Theme displaying themes
[3Replies]
- 31-Dec-2012 08:17 PM
- Forum: jQuery Mobile
Version JGM: 1,2.0
URL: http://mobilehost.me/MP/

Problem:
Adding a ThemeRoller Theme to my project, does not display.

Steps :
1. Created themes A, B, C
2. Down loaded to my download folder
3. Moved the theme folder from download folder to my project.
4. Wrote the Link to the themes folder to get theme.

My Code::
2. <link rel="stylesheet" href="themes/marrisPizza.min.css" />
3. <link rel="stylesheet" href="styles/myStyles.css">
4. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
5. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
6. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Could you please tell me what I did wrong!
Thanks

Trouble displaying background image
[1Reply]
- 27-Dec-2012 04:07 PM
- Forum: jQuery Mobile
Version: jQuery Mobile: 1.2.0
URL: mobilehost.me/MP/menu.html

To Do:
Display graphic for the header and overlay some text.

Problem:
This is a very simple process and did it on PC site many times, however can't seem to locate why it's not showing up. I don't know if this makes any difference, I code using Dreamweaver CS5.5

This site is under development to learn jQuery so will look rough.

CSS for myheader:
2. .myHeader {
3. background-image:url(images/Header.jpg);
4. width:380px;
5. height:175px;
6. padding:4px
7. background-repeat: no-repeat;"
8. }
styleshhet linksHeader code:
3. <link rel="stylesheet" type="text/css" href="myStyles.css">
4. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
5. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
6. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
7. </head>
10. <body>
12. <div data-role="page" id="menuPage">
14. <div data-role="header" data-theme="e">
15. <div class="myHeader">
16. <h1 align="center">Marri's Italian</h1>
17. <p style="font-size:14px;
18. text-align:center;
19. padding-top:-50px;
20. padding-left:10px;">
21. Family Restaurant<br>circa 1957
22. </p>
23. </div>
24. </div>

Keeping same text alignment on different button types
[0Replies]
- 26-Dec-2012 05:57 PM
- Forum: jQuery Mobile
Version jQuery: 1.2
URL: http://www.mobilehost.me/MP/

I'm using both collapsible and link buttons on the same page. The issue I'm having is the text position on linked centered and collapsible text on the left.

How can I place the test in the same position on the buttons?
2. <div data-role="controlgroup" data-inline="true" data-mini="true">
3. <a href="appetizers.html" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Appetizers</a>
4. <a href="soups-salads.html" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Soups & Salads</a>
5. <a href="pizza.html" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Pizzas</a>
6. <a href="#" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Sandwiches</a>
7. </div>
9. <div data-role="collapsible" data-icon="plus" data-iconpos="right" data-inset="yes" data-mini="true">
10. <h2 align="center">Pasta Dishes</h2>
11. <ul data-role="listview" data-inset="true">
12. <li><a href="specPasta.html">Speciality Pasta Dishes</a></li>
13. <li><a href="pasta.html">Italian Pasta Dishes</a></li>
14. <li><a href="casseroles.html">Baked Casseroles</a></li>
15. <li><a href="tortellini.html">Tortellini</a></li>
16. </ul>
17. </div>
18. 
19. <div data-role="collapsible-set">
20. <div data-role="controlgroup" data-inline="true" data-mini="true">
21. <a href="seafood.html" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Seafood</a>
22. <a href="hicken.html" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Checken Entrees</a>
23. <a href="veal" data-role="button" data-theme="c" data-iconpos="right" data-icon="arrow-r">Veal Entrees</a>
24. </div>
I hope this is enough information for someone to help?

Error loading Chrome when using jQuery
[1Reply]
- 26-Dec-2012 04:58 PM
- Forum: Developing jQuery Mobile
When viewing my page in Chrome, selecting a link produces a loading error. However sing FireFox does not and works as designed.

I have checked other post and none have been replayed too. Some are from a year ago. Could you please res[pond as this problem is driving me crazy.

Auto dial when phone icon touched
[1Reply]
- 26-Dec-2012 04:31 PM
- Forum: jQuery Mobile
I'm creating my first Mobile Web using JQuery Mobile, for a restaurant. and wish to place a phone icon on the contact page that will auto dial when touched.

Can anyone please help.

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend