jQuery Forum

Popup with CSS triangle
[9Replies]
- 20-Feb-2013 09:23 PM
- Forum: jQuery Mobile
Hi all,

I'm trying to add a triangle tooltip thingo above my popup box to make it look cool.

I have both the popup to work in the correct position below the button pressed and the CSS triangle to use but I don't know how to merge the two parts together to make it look nice.

My CSS (found on the web) for the triangle is:
1. div.tooltip-arrow-up {
2. width: 0px;
3. height: 0px;
4. border-left: 5px solid transparent;
5. border-right: 5px solid transparent;
6. border-bottom: 5px solid #2f2f2f;
7. }
I tried putting the arrow all over the place but it just doesn't look right. Does anyone have any recommendations or tutorial online that I can look at?
BTW. I place the tool tip on the HTML like so:
1. <div class="tooltip-arrow-up"></div>
if that makes any different. I just now need to figure out where to put it.

JQM 1.3 panel + iscrollview + dynamically loaded pages
[23Replies]
- 12-Feb-2013 07:03 PM
- Forum: jQuery Mobile
Hi all,

I'm trying to implement a listview that has data-iscroll enabled where pages are loaded dynamically on pageinit.

I currently have 2 external pages where there is a listview with data-iscroll set and on pageinit; one page get's loaded into the index.html's content and the other to a panel.

Basically; it's like this for my index.html page:
1. <html>
2. <head>
3. <meta charset="utf-8" />
4. <meta name="viewport" content="width=device-width, initial-scale=1" />
6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
8. <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
9. <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
11. <script src="iscroll.js" type="text/javascript"></script>
12. <script src="jquery.mobile.iscrollview.js" type="text/javascript"></script>
14. <script type="text/javascript" charset="utf-8" src="my.js"></script>
15. </head>
16. <body>
17. <div data-role="page">
18. <div id="mainPageWrapper">
19. <div data-role="content" id="content">
20. 
21. </div>
22. </div>
24. <div data-role="panel" id="sidePanel" data-position="right" data-display="overlay">
25. 
26. </div>
28. </div>
29. </body>
30. </html>
I then have 2 separate HTML pages that consists of the same thing except for the listview ID:
listviewPage1.html has the listview ID of listview1
listviewPage2.html has the listview ID of listview2
1. <html>
2. <body>
3. <div id="listviewPage1Wrapper">
4. <ul data-role="listview" data-iscroll="scroller" id="listview1">
5. ...lots of data goes here...
6. </ul>
7. </div>
8. </body>
9. </html>
Javascript code (my.js):
1. $(document).live('pageinit', function(){
2. loadPages('content', 'listviewPage1.html');
3. loadPages('sidePanel', 'listviewPage2.html');
4. }
6. function loadPages(loadToDivID, pageToLoad){
7. $("#"+ loadToDivID).empty();
9. $.get(pageToLoad, function(data) {
10. var $tempElement = $(data).appendTo($('#' + loadToDivID));
11. $tempElement.trigger('create');
12. });
13. }
All libraries are also properly included and I know this because when I have the listviews directly in the content and side panel; they work perfectly.

Does anyone know what I'm doing wrong and how to fix it?

Thanks.

data-role button doesn't work
[8Replies]
- 11-Feb-2013 11:22 PM
- Forum: jQuery Mobile
Hi all,

New to the forum so if I'm doing something wrong please tell me.

I'm trying to make a row of buttons and I've found that this works:
1. <center>
2. <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" onclick="FunctionToDoTask1();">BTN1</a>
3. <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" onclick="FunctionToDoTask2();">BTN2</a>
4. <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" href="#popUp1" data-rel="popup">BTN3</a>
5. <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" data-iconpos="notext" href="#popUp2" data-rel="popup" onclick="FunctionToDoTask3();">BTN4</a>
6. </center>
All the buttons display properly and the last three buttons does what its suppose to.

The issue is; button 1 doesn't. It seems I can't even click on the button and as if the button's not even there because it doesn't get highlighted when I hover over it. What does that mean then?
I'm using JQuery mobile 1.3 (with all libraries properly included as everything else seems to work fine) and was wondering if anyone can help.

Tell me if I'm not being clear or if you need more information.

Response title

Attachments

jQuery Forum

Activity Trend