Search jQuery

jQuery Forum

Screen name:
John Chacko
About Me:
JavaScript Programmer
Blog:
http://www.johnchacko.net
Website:
http://www.johnchacko.net

John Chacko's Profile

26 Posts

518 Responses

3 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Button: programatic theme updates
[0Replies]
- 25-Feb-2013 06:34 AM
- Forum: jQuery Mobile
Pls see release notes....
http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/

https://github.com/jquery/jquery-mobile/commit/2e21c6b92a2fc919c46244874de9da7a52173b50

It is now possible to change button‘s data-theme programatically via _setOption.

I don't see anything on this in documentation..
http://api.jquerymobile.com/button/

does anybody know how to use this.... ?

tap and bubbling/propagation
[0Replies]
- 30-Jan-2013 09:22 AM
- Forum: jQuery Mobile
see this sample in android 2.x browser..its a sample to replicate a scenario in my application..

http://johnchacko.net/samples/tap.html

its abt listening to 'tap' and calling changePage from listener...

the second page is having some input fields, 'tap' event is bubbling/propagating to second page and focus is randomly set to input fields...

I read similar issues and want to know anybody experienced same issue and got a workaround for it....

Or I must use only 'click' ?

jquery("#") or getElementById
[2Replies]
- 25-Oct-2012 07:13 AM
- Forum: Using jQuery
this may be discussed earlier...
I read jquery internally uses document.getElementById for $("#myDiv")
1.
but below test case show huge performance difference between
$("#myDiv")
and
document.getElementById("myDiv")

http://jsperf.com/jqueryvsgetelemid/2

2.another scenario I tried is below where second part is faster.
```
$("#myDiv .blah"); vs $(document.getElementById("myDiv")).find(".blah");
```
```
http://jsperf.com/jquery-getbyid
```
```
So if somebody keen on performance, its better to use document.getElementById for selecting with id.
```
```
is it right?
```

list ui-icon bind click
[9Replies]
- 21-Aug-2012 08:33 AM
- Forum: jQuery Mobile
Got a listview with left aligned icon.
Unable to bind 'click' to icon.
Able to get all icon's span with selector.
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"/>
7. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
8. <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
9. <script>
11. $('#home').live('pageshow', function (event, ui) {
12. console.log($.mobile.activePage.children(":jqmData(role=content)").find("UL").find("span.ui-icon"));
13. $.mobile.activePage.children(":jqmData(role=content)").find("UL").find("span.ui-icon").bind("click", function (e) {
14. alert("Icon clicked");
15. e.preventDefault();
16. e.stopPropagation();
17. });
18. });
19. </script>
20. <style>
21. .ui-btn-hover-c.ui-btn-up-c.ui-btn-active span.ui-icon-arrow-r {background-position: -355px 0%;}
22. .ui-btn-up-c .ui-icon, .ui-btn-hover-c .ui-icon {
23. left: 10px;
24. }
25. li a {
26. padding-left: 35px!important;
27. }
28. </style>
29. </head>
30. <body>
31. <div data-role="page" class="type-index" id="home">
32. <div data-role="content">
33. <ul data-role="listview" data-inset="false" data-theme="c">
34. <li><a href="#">Item1</a></li>
35. <li><a href="#">Item2</a></li>
36. <li><a href="#">Item3</a></li>
37. </ul>
38. </div>
39. </div>
40. </body>
41. </html>

button 'refresh' and hover
[2Replies]
- 20-Aug-2012 04:51 AM
- Forum: jQuery Mobile
below is html
2. <div data-role="content">
3. <div style="width:250px">
4. <input type="button" data-theme="e" value="data-theme='e'" id="testButton1"/>
5. </div>
6. <div style="width:250px">
7. <input type="button" data-theme="b" value="data-theme='b'" id="testButton2"/>
8. </div>
9. </div>
changing the button theme as below

$("#testButton1").buttonMarkup({ theme: "b" }).button("refresh")
(This code can be directly tried from chrome/ff console)

it changes the theme.. but when I hover the button it returns to old theme.
And trying to change theme again wont work at all.

I knowh ow to change themes by directly changing underlying css classes.
But is above 'refresh' method supposed to work? or a bug?

hitting DOM before append.
[3Replies]
- 04-Jul-2012 11:52 AM
- Forum: Using jQuery
I am trying to avoid hitting DOM in loop.
If I do below line in loop.

var d= $("<div>blah</div>");

Is it hitting the DOM or it creates object and keep only in cache until call append()

$("body").append(d);

multiple headers and header in content
[0Replies]
- 21-May-2012 07:08 AM
- Forum: jQuery Mobile
Is it ideal to have more than one header(data-role=header) or headers in content(data-role=content)

I know the use of navbars.

something like...
2. <div id="home" data-role="page" data-theme="b">
3. <div data-role="header" data-theme="c">
4. </div>
5. <div data-role="header" data-theme="d">
6. </div>
7. <div data-role="content" data-theme="d">
8. <div data-role="header" data-theme="a">
9. </div>
10. </div>
11. </div>
This works fine in normal rendering.
But headers are not seems to be enhanced right when injecting to content.

Closures and garbage collection.
[1Reply]
- 11-May-2012 04:47 AM
- Forum: Getting Started
It a general javascript question.
I am using closures a lot and want to make sure not keeping too many variables in memory.
see sample code below.
Creating 10 div and attaching click event listener.
Event listener function is using a private variable of its parent. So a closure is created.
I assume variable '_closure' will not be garbage collected.
Put a breakpoint and '_local' got no scope.
Assume its garbage collected.. right?
2. function f() {
3. var _local = 1;
4. var _closure = 2;
7. var _div;
8. for (var i = 0; i < 10; i++) {
9. _div = $("<div>" + i + "</div>");
10. _div.on("click.test", function (i) {
11. return function () {
12. alert(_closure++);
13. }
14. }(i));
15. $("body").append(_div);
16. }
17. }
19. $(document).ready(function () {
20. f();
21. });
is below a better design considering performance. It creates less anonymous functions.. ?
2. function f() {
3. var _local = 1;
4. var _closure = 2;
6. var _sub = function (i) {
7. return function () {
8. alert(_closure+++" ---- " + i);
9. }
10. }
12. var _div;
13. for (var i = 0; i < 10; i++) {
14. _div = $("<div>" + i + "</div>");
15. _div.on("click.test", _sub(i));
16. $("body").append(_div);
17. }
19. }
21. $(document).ready(function () {
22. f();
23. });

plugin or module or component or widgets or ....
[5Replies]
- 20-Apr-2012 04:09 AM
- Forum: Getting Started
I am developing reusable custom components specific to my clients.
jquery plugin pattern is followed in the development.

Simple example below.
1. (function ($) {
  var methods = {
  init: function (options) {
  
  },
  add: function () {
  
  },
  delete: function () {
  
  }
  };
  
  $.fn.ns_contactsView = function (method) {
  // Method calling logic
  if (methods[method]) {
  return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  } else if (typeof method === 'object' || !method) {
  return methods.init.apply(this, arguments);
  } else {
  $.error('Method ' + method + ' does not exist on ns_contactsView ');
  }
  };
  })(jQuery);
this will be used as
1. $("#divid").ns_contactsView({
  contacts:jsonData
  })
These are very specific to a particular industry, which will be used only by my clients.
Data input are in json format.
All are cross browser compatible.Themable...

My question is whats the right term to call these components....

jquery plugin like components pattern
[0Replies]
- 13-Apr-2012 06:59 AM
- Forum: Using jQuery Plugins
developing components (don't think its right to call them plugin).

Saw different patterns all describing about only one component/plugin.

These components use jquery core.
And its very much custom components released to use by specific clients.

Assume I have 2 components comp1 & comp2.

Pattern One
2. //component1
3. (function ($) {
4. var methods = {
5. init: function (options) {
6. var _this = this;
7. var _options = { //defaults
8. }
9. if (options) {
10. $.extend(_options, options);
11. }
12. _privateForComp1();
13. },
14. publicMethod: function () {}
15. };
16. //private for Comp1
17. var _privateForComp1 = function () {}
18. $.fn.Comp1 = function (method) {
19. // Method calling logic
20. if (methods[method]) {
21. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
22. } else if (typeof method === 'object' || !method) {
23. return methods.init.apply(this, arguments);
24. } else {
25. $.error('Method ' + method + ' does not exist on Comp1');
26. }
27. };
28. })(jQuery);
29. //component2
30. (function ($) {
31. var methods = {
32. init: function (options) {
33. var _this = this;
34. var _options = { //defaults
35. }
36. if (options) {
37. $.extend(_options, options);
38. }
39. _privateForComp2();
40. },
41. publicMethod: function () {}
42. };
43. //private for tab
44. var _privateForComp2 = function () {}
45. $.fn.Comp2 = function (method) {
46. // Method calling logic
47. if (methods[method]) {
48. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
49. } else if (typeof method === 'object' || !method) {
50. return methods.init.apply(this, arguments);
51. } else {
52. $.error('Method ' + method + ' does not exist on Comp2');
53. }
54. };
55. })(jQuery);
Pattern Two
2. (function ($) {
3. $.fn.Comp1 = function (tabOptions) {
4. // support mutltiple elements
5. if (this.length > 1) {
6. this.each(function () {
7. $(this).comp1(tabOptions)
8. });
9. return this;
10. }
11. }
12. })(jQuery);
13. (function ($) {
14. $.fn.Comp2 = function (tabOptions) {
15. // support mutltiple elements
16. if (this.length > 1) {
17. this.each(function () {
18. $(this).comp2(tabOptions)
19. });
20. return this;
21. }
22. }
23. })(jQuery);
I am not worried about chaining...So these components can return object which contains public methods as below.
2. (function ($) {
3. var methods = {
4. init: function (options) {
5. var _this = this;
6. var _options = { //defaults
7. }
8. if (options) {
9. $.extend(_options, options);
10. }
11. _privateForComp1();
12. return {
13. publicMethod: function () {}
14. }
15. }
16. };
17. //private for Comp1
18. var _privateForComp1 = function () {}
19. $.fn.Comp1 = function (method) {
20. // Method calling logic
21. if (methods[method]) {
22. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
23. } else if (typeof method === 'object' || !method) {
24. return methods.init.apply(this, arguments);
25. } else {
26. $.error('Method ' + method + ' does not exist on Comp1');
27. }
28. };
29. })(jQuery);
jQueryUI is using $.widget as below
2. (function ($) {
3. $.widget("ui.menu", {
4. _create: function () {
5. this.refresh();
6. },
7. refresh: function () {},
8. activate: function (event, item) {},
9. deactivate: function () {}
10. // TODO merge with previousPage
11. nextPage: function (event) {},
12. // TODO merge with nextPage
13. previousPage: function (event) {},
14. hasScroll: function () {
15. return this.element.height() < this.element[$.fn.prop ? "prop" : "attr"]("scrollHeight");
16. },
17. select: function (event) {
18. this._trigger("selected", event, {
19. item: this.active
20. });
21. }
22. });
23. }(jQuery));
My question is which is the best approach to develop components/widgets which will be used by specific clients only.
Assuming all components in one single js file.

jquery custom plugin documentation
[1Reply]
- 03-Apr-2012 04:46 AM
- Forum: Using jQuery
I am developing some custom jquery plugins which may be distributed to some third party developers to use.
So want to know is there any tool available to generate documentation from comments.

I know ext-doc, JsDoc ...
anything specific for plugins?

IE date object
[3Replies]
- 21-Mar-2012 12:32 PM
- Forum: Getting Started
new Date("2012-03-09T16:03:48.16+00:00")

is NaN for IE and a date object in other browsers....

is IE returning as per standard? or other browsers are right...

whats best way to tackle this.

in w3schools I can see below

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

Is JavaScript wrong or me -Strange?
[4Replies]
- 15-Mar-2012 09:54 AM
- Forum: Getting Started
2. alert(1.11 + 0.01) gives 1.12
4. alert(1.12 + 0.01) must idealy give 1.13
6. but all browsers are giving me 1.1300000000000001
8. alert(1.13 + 0.01) gives 1.14
11. I tried calculators, 1.12 + 0.01 = 1.13
Edit: doing some googling shows this is reported and something to do with
"standard IEEE double-precision arithmetic " which I dont understand clearly....

swapnode in jquery
[2Replies]
- 06-Mar-2012 04:57 AM
- Forum: Getting Started
Using jquery 1.7.1

I know there is native javascript swapNode method.....

is there swapNode in jQuery. Which will be more cross browser compatible...

Ed: adding below code.
2. $("._parent").children().on("click", function (event) {
3. var _emptyClone = $("._empty").clone();
4. $("._empty").replaceWith($(this).clone());
5. $(this).replaceWith(_emptyClone);
6. });
1. <div class="_parent">
  <div class="_child">child 1</div>
  <div class="_child">child 2</div>
  <div class="_child">child 3</div>
  <div class="_empty">empty</div>
  </div>
intention is to retain event listener....
tried..

$("._empty").replaceWith($(this).clone()).on("click", function (event) {
alert("new listener")
});

I tried live
2. $("._parent").children().live("click", function (event) {
3. var _emptyClone = $("._empty").clone();
4. $("._empty").replaceWith($(this).clone())
5. $(this).replaceWith(_emptyClone);
6. });
7. Uncaught Error: Syntax error,
8. unrecognized expression: )

scroll width of div
[2Replies]
- 29-Feb-2012 04:55 AM
- Forum: Getting Started
I am trying to resize width of child divs inside a parent div.
So that there will not be any horizontal scrollbars.

Is there any jquery method to get scroll width of a particular div.

native this and jquery this
[1Reply]
- 23-Feb-2012 12:15 PM
- Forum: Getting Started
This should have discussed earlier.
2. <!DOCTYPE html>
3. <html>
5. <head>
6. <title>Page Title</title>
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
9. <script type="text/javascript">
10. $(document).ready(function () {
11. $("body").find("div").each(function (index) {
12. console.log(this); //native html element div.
13. //We cannot call jquery methods on this.
14. console.log($(this)); //array of jquery objects. //My question is why this is an array.
15. //can I get a sample where this arrays length > 1
16. console.log($(this)[0]); // native html element div.
17. });
18. });
19. </script>
20. </head>
22. <body>
23. <div>
24. <span>Div 1</span>
25. </div>
26. <div>
27. <span>Div2</span>
28. </div>
29. <div>
30. <span>Div 3</span>
31. </div>
32. </body>
34. </html>

to know if handler attached already

[5Replies]

15-Feb-2012 04:43 AM
Forum: Getting Started

$('#foo').bind('click', fnhandler);

 function fnhandler() { alert('User clicked on "foo."'); }

how to know if a handler already attached or not?

edit: or do I do unbind and bind every time to avoid multiple.

pagebeforechange and event source
[2Replies]
- 07-Feb-2012 09:59 AM
- Forum: jQuery Mobile
listening to pagebeforechange event...

$(document).bind("pagebeforechange", function ( event , data) {

//event is triggered from an anchor tag...
//Is it possible to get reference to anchor( or event.srcElement) here

});

<a href='#somepage' type='button'>
or
.....

A simple sample below if somebody want to try it out...
2. <head>
3. <title>Main menu</title>
4. <meta name="viewport" content="width=device-width, initial-scale=1">
5. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"/>
6. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
7. <script type="text/javascript">
8. $(document).bind("pagebeforechange", function (event, data) {
9. if (typeof data.toPage === "string") {
10. //event is triggered from an anchor tag...
11. //Is it possible to get reference to anchor( or event.srcElement) here
12. event.preventDefault();
13. }
14. });
15. </script>
16. <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
17. </head>
18. <body>
19. <div data-role="page" id="home">
20. <div data-role="header" data-theme="a">
21. </div>
22. <div data-role="content">
23. <ul data-role="listview" data-inset="true">
24. <li><a href="#category-items?category=animals">Animals</a></li>
25. <li><a href="#category-items?category=colors">Colors</a></li>
26. <li><a href="#category-items?category=vehicles">Vehicles</a></li>
27. </ul>
28. </div>
29. </div>
30. </body>
31. </html>

$page vs page- simple question
[1Reply]
- 07-Feb-2012 08:48 AM
- Forum: Getting Started
In a JQM sample page
http://jquerymobile.com/test/docs/pages/page-dynamic.html

I can see variables starting with $.
Is it anything to do with jquery's $ or is it just a variable whose name starts with a legal character,ie, '$'

fixed footer position and dynamic content
[2Replies]
- 06-Feb-2012 09:14 AM
- Forum: jQuery Mobile
I am updating content onclick of a button.
After updating fixed footer is jumping up a bit..
I know there is some issue related to scroll and fixed footers...

Below is a sample replication...
2. <html>
4. <head>
5. <title>Main menu</title>
6. <meta name="viewport" content="width=device-width, initial-scale=1">
7. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"
8. />
9. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
10. <script type="text/javascript">
11. function ContentUpdate() {
12. var _page = $.mobile.activePage;
13. var _content = _page.find(":jqmData(role=content)");
14. _content.children().remove();
15. var _nav = $("<div data-role='navbar'> <ul> <li><a href='a.html' class='ui-btn-active'>One</a></li> <li><a href='b.html'>Two</a></li> </ul> </div>");
16. _content.append(_nav).trigger('create');
17. }
18. </script>
19. <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
20. </head>
22. <body>
23. <div data-role="page" id="pagina">
24. <div data-role="header">
25. <h3></h3>
26. </div>
27. <div data-role="content">
28. <div data-role="navbar">
29. <a href="#" onclick="ContentUpdate()" data-role="button">ContentUpdate</a>
30. </div>
31. </div>
32. <div data-role="footer" data-position="fixed">
33. <h3></h3>
34. </div>
35. </div>
36. </body>
38. </html>

Proper use of $.mobile.showPageLoadingMsg();
[6Replies]
- 25-Jan-2012 04:46 AM
- Forum: jQuery Mobile
Below sample trying to build a dynamic List.
Actual call will be an Ajax. But I used settimeout to replicate the issue.
Requirement is to use $.mobile.showPageLoadingMsg before making ajax and hide it after building list.
2. <!DOCTYPE html>
3. <html>
5. <head>
6. <title>My Page</title>
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"
9. />
10. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
11. <script>
12. $(document).bind("mobileinit", function () {
13. $.mobile.ajaxEnabled = true;
14. });
15. $("#home").live("pageinit", function () {
16. $.mobile.loadingMessage = "pagebeforehide Page...";
17. $.mobile.showPageLoadingMsg();
18. setTimeout("buildUi()", 2000);
19. });
20. //doing ajax and ui building....
21. function buildUi() {
22. var $page = $("#home");
23. var $header = $page.children(":jqmData(role=header)");
24. var $content = $page.children(":jqmData(role=content)");
25. var html = "";
26. for (var i = 1; i < 6; i++) {
27. html += "<li><a href='#child" + i + "'>parent " + i + "</a> </li>";
28. }
29. $header.find("h1").html("List Header");
30. $content.html("<ul data-role='listview' data-inset='true'>" + html + "</ul>");
31. $page.page();
32. // Enhance the listview we just injected.
33. $content.find(":jqmData(role=listview)").listview();
34. $.mobile.hidePageLoadingMsg();
35. }
36. </script>
37. <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
38. </head>
39. </head>
41. <body>
42. <div>
43. <div id="home" data-role="page" data-url="menuDialog">
44. <div data-role='header'>
45. <h1>menuDialog</h1>
46. </div>
47. <div data-role='content'></div>
48. </div>
49. </div>
50. </body>
52. </html>

multiple levels of dynamic listview
[1Reply]
- 20-Jan-2012 11:03 AM
- Forum: jQuery Mobile
Working and modifying below sample, to make it dynamic.
http://jquerymobile.com/demos/1.0/docs/pages/dynamic-samples/sample-reuse-page.html

Above sample got only one level of list.My requirement to have some more level down.
So trying to create 'head','header','content' dynamically.
But its ending in error
Uncaught TypeError: Cannot call method '_trigger' of undefined
3. <!DOCTYPE HTML>
4. <html>
5. <head>
6. <meta charset="utf-8">
7. <meta name="viewport" content="width=device-width">
8. <title>changePage JSON Sample</title>
9. <link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
10. <script src="//code.jquery.com/jquery-1.6.4.js"></script>
11. <script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
12. <script>
14. // Some sample categorized data. This data is in-memory
15. // for demonstration purposes, but could be loaded dynamically
16. // via ajax.
17. var categoryData = {
18. animals: {
19. name: "Animals",
20. description: "All your favorites from aardvarks to zebras.",
21. items: [
22. {
23. name: "Pets",
24. },
25. {
26. name: "Farm Animals",
27. },
28. {
29. name: "Wild Animals",
30. }
31. ]
32. },
33. colors: {
34. name: "Colors",
35. description: "Fresh colors from the magic rainbow.",
36. items: [
37. {
38. name: "Blue",
39. },
40. {
41. name: "Green",
42. },
43. {
44. name: "Orange",
45. },
46. {
47. name: "Purple",
48. },
49. {
50. name: "Red",
51. },
52. {
53. name: "Yellow",
54. },
55. {
56. name: "Violet",
57. }
58. ]
59. },
60. vehicles: {
61. name: "Vehicles",
62. description: "Everything from cars to planes.",
63. items: [
64. {
65. name: "Cars",
66. },
67. {
68. name: "Planes",
69. },
70. {
71. name: "Construction",
72. }
73. ]
74. }
75. };
77. // Load the data for a specific category, based on
78. // the URL passed in. Generate markup for the items in the
79. // category, inject it into an embedded page, and then make
80. // that page the current active page.
81. function showCategory( urlObj, options )
82. {
85. var html = "<div id='category-items' data-role='page'><div data-role='header'><h1></h1></div><div data-role='content'></div></div>";
87. $("#home").insertAfter(html);
90. var categoryName = urlObj.hash.replace( /.*category=/, "" ),
92. // Get the object that represents the category we
93. // are interested in. Note, that at this point we could
94. // instead fire off an ajax request to fetch the data, but
95. // for the purposes of this sample, it's already in memory.
96. category = categoryData[ categoryName ],
98. // The pages we use to display our content are already in
99. // the DOM. The id of the page we are going to write our
100. // content into is specified in the hash before the '?'.
101. pageSelector = urlObj.hash.replace( /\?.*$/, "" );
103. if ( category ) {
104. // Get the page we are going to dump our content into.
105. var $page = $( pageSelector ),
107. // Get the header for the page.
108. $header = $page.children( ":jqmData(role=header)" ),
110. // Get the content area element for the page.
111. $content = $page.children( ":jqmData(role=content)" ),
113. // The markup we are going to inject into the content
114. // area of the page.
115. markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
117. // The array of items for this category.
118. cItems = category.items,
120. // The number of items in the category.
121. numItems = cItems.length;
123. // Generate a list item for each item in the category
124. // and add it to our markup.
125. for ( var i = 0; i < numItems; i++ ) {
126. markup += "<li>" + cItems[i].name + "</li>";
127. }
128. markup += "</ul>";
130. // Find the h1 element in our header and inject the name of
131. // the category into it.
132. $header.find( "h1" ).html( category.name );
134. // Inject the category items markup into the content element.
135. $content.html( markup );
137. // Pages are lazily enhanced. We call page() on the page
138. // element to make sure it is always enhanced before we
139. // attempt to enhance the listview markup we just injected.
140. // Subsequent calls to page() are ignored since a page/widget
141. // can only be enhanced once.
142. $page.page();
144. // Enhance the listview we just injected.
145. $content.find( ":jqmData(role=listview)" ).listview();
147. // We don't want the data-url of the page we just modified
148. // to be the url that shows up in the browser's location field,
149. // so set the dataUrl option to the URL for the category
150. // we just loaded.
151. options.dataUrl = urlObj.href;
153. // Now call changePage() and tell it to switch to
154. // the page we just modified.
155. $.mobile.changePage( $page, options );
156. }
157. }
160. // Listen for any attempts to call changePage().
161. $(document).bind( "pagebeforechange", function( e, data ) {
162. // We only want to handle changePage() calls where the caller is
163. // asking us to load a page by URL.
164. if ( typeof data.toPage === "string" ) {
165. // We are being asked to load a page by URL, but we only
166. // want to handle URLs that request the data for a specific
167. // category.
168. var u = $.mobile.path.parseUrl( data.toPage ),
169. re = /^#category-item/;
170. if ( u.hash.search(re) !== -1 ) {
171. // We're being asked to display the items for a specific category.
172. // Call our internal method that builds the content for the category
173. // on the fly based on our in-memory category data structure.
174. showCategory( u, data.options );
176. // Make sure to tell changePage() we've handled this call so it doesn't
177. // have to do anything.
178. e.preventDefault();
179. }
180. }
181. });
184. </script>
185. </head>
187. <body>
188. <div id="home" data-role="page">
189. <div data-role="header"><h1>Categories</h1></div>
190. <div data-role="content">
191. <h2>Select a Category Below:</h2>
192. <ul data-role="listview" data-inset="true">
193. <li><a href="#category-items?category=animals">Animals</a></li>
194. <li><a href="#category-items?category=colors">Colors</a></li>
195. <li><a href="#category-items?category=vehicles">Vehicles</a></li>
196. </ul>
197. </div>
199. </div>
201. </body>
202. </html>

Combining id,class & data for selection
[10Replies]
- 17-Jan-2012 05:36 AM
- Forum: Using jQuery
Have a html like below.
2. <div id="parentDiv">
3. <div class="child">child1</div>
4. <div class="child">child2</div>
5. <div class="child">child3</div>
6. <div class="child">child4</div>
7. <div class="child">child5</div>
8. <div class="child">child6</div>
9. <div class="child">child7</div>
10. <div class="child">child8</div>
11. </div>
doing loop & setting an index to all child.
2. $("#parentDiv .child").each(function (index) {
3. $(this).data("_index", index);
4. });
Have a variable
1. var activeIndex=2;
Is it possible to get div using a combination of id,class and data for selection.
Something like
2. $("#parentDiv .child:data(_index = "+ activeIndex +")");
3. //or
4. $("#parentDiv .child[_index = "+ activeIndex +"]");

calculating height of elements
[1Reply]
- 16-Jan-2012 12:32 PM
- Forum: Using jQuery
Looping through div using css class selector.
eg:
2. $(".listDiv").each(function (index) {
3. alert($(this).innerHeight());
4. });
some div's are display:none
How to skip them. InnerHeight gives Hidden div's also.
Intention is to calculate total height of visible div's

Accordion and scroll
[1Reply]
- 13-Jan-2012 05:17 AM
- Forum: Using jQuery UI
Below is the code with which I am trying to get vertical scroll bar for accordion panel contents.

Accordion div is inside another div whose height is 200px.

So requirement is accordion must not take more than 200px and do vertical scroll for specific panel if its more.
1. <html>
  
  <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
      rel="stylesheet" type="text/css" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script>
      $(document).ready(function () {
        $("#accordion").accordion();
      });
      </script>
      <style>
      .content {
        height: 200px;
        width:200px;
        background-color:Yellow;
      }
      </style>
  </head>
  
  <body style="font-size:62.5%;">
      <div class='content'>
        <div id="accordion">
          <h3>
            <a href="#">Section 1</a>
          </h3>
          <div>
            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
              ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
              amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
              ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
          </div>
          <h3>
            <a href="#">Section 2</a>
          </h3>
          <div>
            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
              purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
              velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
              faucibus urna.</p>
          </div>
          <h3>
            <a href="#">Section 3</a>
          </h3>
          <div>
            <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
              Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
              ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia
              ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
            <ul>
              <li>List item one</li>
              <li>List item two</li>
              <li>List item three</li>
            </ul>
          </div>
          <h3>
            <a href="#">Section 4</a>
          </h3>
          <div>
            <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
              malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
              orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel
              est.</p>
            <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
              inceptos himenaeos.</p>
          </div>
        </div>
      </div>
  </body>
2. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend