jQuery Forum

Multipage templates
[13Replies]
- 24-Nov-2011 09:11 AM
- Forum: jQuery Mobile
I've been struggling with some problems with multipage templates. For some reason it doesn't load the second page at all. It's there in the code, but when clicking the button - nothing happens.

See it for yourself: http://jeroen.tirato.biz/

When clicking an article on the main page, it shows you an article view with a share option at the bottom navbar. When clicking share, nothing happens, while it should the slide in the sharepage.

Any ideas or clues?

Multi-page templates
[0Replies]
- 06-Oct-2011 11:49 AM
- Forum: jQuery Mobile
I'm currently updating a news app which has the following structure:
- Dashboard (Shows the latest news)
- Categories (Overview of all categories)
- Categories detail (Overview from a category with their articles)
- News article (Content, but... with Multi-page template support)
The news article page supports Multi-page templates for displaying the actual content, slideshows & a dialog for sharing

For some reason, the multi-page templates aren't working as supposed... It doesn't work all the time.. which is driving me nuts. Sometimes it works, sometimes it doesn't. When it doesn't work, it loads the "Dashboard-page" for no reason while it has to load the share dialog or the slideshow page.

See my code below:
2. 
3. <section data-role="page" id="xml-article">
5. <header data-role="header">
6. <h1>Category name</h1>
7. </header>
9. <section data-role="content" style="overflow: scroll;-webkit-overflow-scrolling: touch;">
10. <header id="article-title">
11. <h2>Article title</h2>
12. </header>
13. <article id="post">
14. <figure>
15. <% if Thumb %><img class="thumbnail" src="$Thumb" width="80" height="80" /><% end_if %>
16. </figure>
17. <h3>$Intro</h3>
18. <p><strong>Gepubliceerd: <% if Datum %><span class="time">$Datum</span><% end_if %></strong><br />
19. Author: $Auteur</p>
20. $Content
22. <% if Fotos %>
23. <a href="#gallery-1" data-role="external">Open slideshow</a>
24. <% end_if %>
25. </article>
26. <ul data-role="listview" id="categorie">
27. <li data-role="list-divider">Meer $Title</li>
28. <% control Artikelen %>
29. <li><a href="$Link"> <% if Thumb %><img src="$Thumb" width="80" height="80" /><% else %><img src="$ThemeDir/images/article/article-img.gif" /><% end_if %> $Title</a></li>
30. <% end_control %>
31. </ul>
32. </section>
34. <footer data-role="footer" data-position="fixed">
35. <nav data-role="navbar">
36. <ul>
37. <li><a href="/home/" data-iconpos="top" data-icon="home">Dashboard</a></li>
38. <li><a href="#share" data-rel="external" data-icon="grid" data-transition="slideup">Share</a></li>
39. </ul>
40. </nav>
41. </footer>
43. </section>
44. 
46. 
47. <section data-role="dialog" id="share">
48. <header data-role="header">
49. <h1>Share this article</h1>
50. </header>
52. <section data-role="content">
53. <article data-role="controlgroup">
54. <a data-theme="c" data-rel="external" href="http://www.facebook.com/share.php?u={$AbsoluteLink}" data-role="button" data-icon="ipers-facebook">Facebook</a>
55. <a data-theme="c" data-rel="external" href="http://twitter.com/share?url={$AbsoluteLink}" data-role="button" data-icon="ipers-twitter">Twitter</a>
56. <a data-rel="back" href="" data-role="button" data-theme="a">Cancel</a>
57. </article>
58. </section>
59. </section>
60. 
62. 
63. <section data-role="page" id="gallery-1" class="gallery-page">
64. <header data-role="header">
65. <h1>Gallery</h1>
66. </header>
67. <section data-role="content">
68. <% if Fotos %>
69. <ul class="gallery">
70. <% control Fotos %>
71. <li><a href="$Link"><img src="$Link" alt="Afbeelding-{$Pos}" /></a></li>
72. <% end_control %>
73. </ul>
74. <% end_if %>
76. </section>
77. </section>
78. 
I'm not sure, but is anything going wrong? The rest of the webapp is working perfectly on RC 1.0

- Jeroen

Listviews with thumbnails
[1Reply]
- 04-Oct-2011 07:00 AM
- Forum: jQuery Mobile
Something goes wrong on iOS 5 beta 7 with listviews + thumbs.
When having a long title, it ussually crops the text with a few dots (...) But with touchOverflowEnabled on:
1. $.mobile.touchOverflowEnabled = true;
it doesn't crop the text and the width of page changes which causes a horizontal scrollbar.
See attached images: good = touchOverFlowEnabled = false, wrong = touchOverFlowEnabled = true
Attachments
- Download
  Delete
  good.jpg
  Size: 145.73 KB Downloads: 1597
- Download
  Delete
  wrong.jpg
  Size: 279.15 KB Downloads: 1604

True fixed headers/footers rc1.0
[0Replies]
- 30-Sep-2011 03:44 AM
- Forum: jQuery Mobile
Has anyone found out yet how the make the header/footer true fixed using jquery mobile rc 1.0? data-position fixed doesn't do the job well. The header/footer still fade's in/out when scrolling.

Is there any fix or workaround for this? Thanks.

Splash screen
[2Replies]
- 14-Apr-2011 04:25 AM
- Forum: jQuery Mobile
Is there a possibility to use a start up/ splash screen like iPhone allows, on android devices?
Like this: <link rel="apple-touch-startup-image"

Or is there a JS workaround?

Listviews
[2Replies]
- 04-Apr-2011 05:54 AM
- Forum: jQuery Mobile
I think it's great jQuery uses text-overflow:ellipsis; in order to keep layout issues out, but in my case i want titles to be as large as possible. I've attached a screenshot to this post to show what i mean.

I want my listview titles to be as long as possible and use linebreaks and it needs to be vertical-centered. I don't want to set line-height to 80px since i want linebreaks. Margin or padding doesn't seem to be a solution too, since some lists may have a short title on one line and some of them long with 2 or 3 lines.

The second listview in my attachment is what i'm aiming for.
Attachments
- Download
  Delete
  listview.jpg
  Size: 26.8 KB Downloads: 1615

Alpha 4 - Getting error on changing page.
[6Replies]
- 01-Apr-2011 08:07 AM
- Forum: jQuery Mobile
Hi folks, great job the release of A4! I've updated my webapp today but i'm getting some errors while changing pages. Some of my pages wont load and the loading screen with spinner keeps spinning, nothing is happening. I've listed the error below, any idea?
1. 1. Uncaught TypeError: Cannot call method 'replace' of undefined

jQuery mobile and iframes to load external websites
[1Reply]
- 01-Apr-2011 07:44 AM
- Forum: jQuery Mobile
I'm using some kind of modal window with an iframe to load external websites into my webapp. If somebody clicks an external link, the modal window will pop-up and the source of the iframe changes to an URL.

In my example i'm using Google as an external URL:
1. <a href="http://www.google.com/" rel="external" data-ajax="false">Link to Google.com</a>
My modal window:
2. <div id="modal">
3. <header>
4. <span class="close">Close</span>
5. <h1>External webpage</h1>
6. </header>
7. <iframe id="external" src="about:blank" width="100%" height="100%" style="background:#FFF; overflow:scroll"></iframe>
8. </div>
My JS to actually open the modal window:
2. // Opening
3. $('a[target*="_blank"]').removeAttr('target').addClass('ExternalLink');
4. $('a.ExternalLink,').click(function() {
5. $('#external').attr('src',this);
6. $('.ui-page, .ui-body-a').hide();
7. $('#modal').show();
8. $("html, body").animate({ scrollTop:0 });
9. return false;
10. });
12. // Closing
13. $('.close').click(function() {
14. $('.ui-page, .ui-body-a').show();
15. $('#modal').hide();
16. $('#external').attr('src','about:blank');
17. });
The problem is when hitting the close button jQuery mobile keeps showing the loading screen with the spinner. The iframe doesn't seem to work at all on mobile devices (iOS 4.3.1 + iphone 3gs & HTC Desire HD with android) but it does work in a webbrowser on a PC.

Does anyone of you had issues with using iframes and jquery mobile too?

Portrait mode only
[5Replies]
- 22-Mar-2011 05:32 AM
- Forum: jQuery Mobile
Is there a way to let people only use portraitmode? When they are rotating their screens to landscape, the site/app should still be displayed in portraitmode instead of landscape.

Are there any possibilities to do this?

Response title

Attachments

jQuery Forum

Activity Trend