jQuery Forum

Hello,

Here's a funky demo page.

Here's my funky code:

1. $(document).ready(function() {
2.    
3.     var $this = $(this),
4.    
5.     $dog = $('#dog'),
6.    
7.     billy = function(num) {
8.        
9.         console.log('(billy ' + num + ')', 'this:', this, '$this:', $this, '$dog:', $dog);
10.        
11.     };
12.    
13.     billy(1);
14.    
15.     $('#clickme').click(function() {
16.        
17.         console.log('(1)', 'this:', this, '$this:', $this, '$dog:', $dog);
18.        
19.         var $this = $(this);
20.        
21.         console.log('(2)', 'this:', this, '$this:', $this, '$dog:', $dog);
22.        
23.         $('#what').animate({
24.            
25.             opacity: 0.25,
26.             left: '+=50',
27.             height: 'toggle'
28.            
29.         }, 500, function() {
30.            
31.             console.log('(3)', 'this:', this, '$this:', $this, '$dog:', $dog);
32.            
33.             var $this = $(this);
34.            
35.             console.log('(4)', 'this:', this, '$this:', $this, '$dog:', $dog);
36.            
37.         });
38.        
39.         billy(2);
40.        
41.     });
42.    
43. });

My question(s):

When I have nested closures/functions/other, where each has its own "this", should I be worried about re-defining "var $this = $(this)"?

In other words, when you need to create a cached version of $(this), and there's multiple nested levels of closures and functions, is it best practice to use different variable names for $(this)? Like $this1, $this2, $this3 (and so on).

Sorry if noob question. I was just working on some code recently where I was using the same variable name for all my "this" (i.e. $this = $(this)) and that got me worried that maybe doing so would cause some strange bugs in my code down the road.

Anyone know of any articles that cover this (I found some articles on jquery and this, but nothing that covered my exact question above). Does anyone have a rule of thumb for handling multiple levels of "this"?

TIA!

Cheers,
M

Hello,

Here's what I'm currently doing:

1. var $lis = $('#foo').children('li'),
2. $hrefs = $lis.children('a');
3. // Later:
4. $hrefs.on('click focus', function(e) {
5.       // ...
6.       e.preventDefault();
   
7. }

When it comes to using call(), should I do this:

1. _ = $(this);
2. myMethod.call(_, 'baz');

So I can do this:

1. var myMethod = function(arg) {
2.       // ...
3.       this.hide();
4.       // ...
5. }

Or this:

1. myMethod.call(this, 'baz');

... which would make it so I have to do this:

1. var myMethod = function(arg) {
2.       // ...
3.       $$ = $(this);
4.       $$.hide();
5.       // ...
6. }

I like consistency, and I normally expect to do $(this) to this when in the proper context (like a method), so that's why I feel like the latter is the best pick.

Could anyone clarify?

TIA!

Cheers,
M

P.S.:

I've seen some code that does this:

1. foo.call($ul); // $ul = $('ul').

Hello,

I was just curious what javascript technique jQuery Mobile is using to fix the viewport scale bug?

I've noticed that the viewport tag is this:

1. <meta name="viewport" content="width=device-width, initial-scale=1">

Which, when used by itself (i.e. without the assistance of JS), the viewport scale "bug" rears its nasty head.

I've been using this fix here, but it has this problem:

1. As soon as the user makes a gesture on the document, zooming is enabled again, so if you change the device orientation after that, the zoom bug will still occur.
2. The user can only effectively start zooming after starting a second gesture.

jQuery mobile (v 1.1.0) does not appear to have those problems (when testing using non-retina display iPad).

After beautifying this source I think I found the JS used:

1.     (function (a) {
2.         var c = a("meta[name=viewport]"),
3.             b = c.attr("content"),
4.             e = b + ",maximum-scale=1, user-scalable=no",
5.             f = b + ",maximum-scale=10, user-scalable=yes",
6.             d = /(user-scalable[\s]*=[\s]*no)|(maximum-scale[\s]*=[\s]*1)[$,\s]/.test(b);
7.         a.mobile.zoom = a.extend({}, {
8.             enabled: !d,
9.             locked: false,
10.             disable: function (b) {
11.                 if (!d && !a.mobile.zoom.locked) c.attr("content", e), a.mobile.zoom.enabled = false, a.mobile.zoom.locked = b || false
12.             },
13.             enable: function (b) {
14.                 if (!d && (!a.mobile.zoom.locked || b === true)) c.attr("content", f), a.mobile.zoom.enabled = true, a.mobile.zoom.locked = false
15.             },
16.             restore: function () {
17.                 if (!d) c.attr("content", b), a.mobile.zoom.enabled = true
18.             }
19.         })
20.     })(jQuery);

Hello,

I'm using another person's plugin as a starting point for my own plugin... Here is the basic structure (my questions are below that):

1. ;(function($) {
2.    
3.     var FB = {};
4.    
5.     FB.defaults = {
6.         'test': false
7.     };
8.    
9.     $.fn.foobar = function(method) {
10.        
11.         if (methods[method]) {
12.            
13.             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
14.            
15.         } else if (typeof method === 'object' || !method) {
16.            
17.             return methods.init.apply(this, arguments);
18.            
19.         } else {
20.            
21.             $.error('Method ' + method + ' does not exist on jQuery.foobar.');
22.            
23.         }
24.        
25.     };
26.    
27.     var methods = {
28.    
29.         init: function(opts) {
30.            
31.             return this.each(function() {
32.                
33.                 var _       = $(this);
34.                 var data    = _.data('foobar');
35.                 var options = $.extend({}, MM.defaults, opts);
36.                
37.                 if ( ! data) {
38.                    
39.                     _.data('foobar', {
40.                         target: _,
41.                         options: options
42.                     })
43.                     data = _.data('foobar');
44.                    
45.                 }
46.                
47.                 if ( ! data.initialized) {
48.                    
49.                     methods.fun(_);
50.                    
51.                 }
52.                
53.             })
54.            
55.         },
56.        
57.         fun: function(elem) {
58.            
59.             // Handle API invoked method:
60.             if (typeof(elem) === 'undefined') var elem = $(this);
61.            
62.             return elem.each(function() {
63.                
64.                 var data = elem.data('foobar'),
65.                 options = data.options;
66.                
67.                 // Do stuff here...
68.                
69.             });
70.            
71.         },
72.        
73.         destroy: function() {
74.            
75.             return this.each(function () {
76.                
77.                 if ($(this).data('foobar')) {
78.                    
79.                     var data = $(this).data('foobar'),
80.                     options = data.options;
81.                    
82.                     // Do removal stuff here...
83.                    
84.                     $(this).removeData('foobar');
85.                    
86.                 }
87.                
88.             });
89.            
90.         }
91.        
92.     }
93.    
94. })(jQuery);
    

1. I would like to see more examples... What is the name of this plugin design pattern?
2. Where you see the comment "Handle API invoked method", how does that work exactly? Could someone provide me an example? Should all of my public methods "handle API invoked methods"?
3. When you see return elem.each(function() { ... }, do I need to include this code for every public method?
4. Using this plugin design pattern, when should I make a method public/private? Any "rules of thumb" or tips?

Quick question on this quote:

Note: The $("> elem", context) selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors.

Found via the child selector docs.

To clarify (sometimes I am slow), I assume that quote doesn't mean that $('elem', context) will be deprecated, just $('> elem', context), right?

In other words, I shouldn't start converting all my code that uses $('elem', context) to $(context).find('elem')?

Sorry if dumb question.

Thanks!

Cheers,
M

Hello,

I was looking over the Superfish plugin JS, and I found this code:

1. $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() { if (o.autoArrows) addArrow( $('>a:first-child',this) ); })

I understand most of it, but I was hoping someone could explain this part of it:

1. $()[](over, out)

Could someone provide a long form version of the above code?

Thanks so much! I really appreciate it.

Cheers,
Micky

Hello,

I have a UL that looks like this (abbreviated for example's sake):

1. <ul id="nav">
2.     <li>
3.         <a href="#">Link</a>
4.         <div class="window">
5.             <p>Lots of stuff here...</p>
6.         </div>
7.     </li>
8.     <li>
9.         <a href="#">Link</a>
10.         <div class="window">
11.             <p>Lots of stuff here...</p>
12.         </div>
13.     </li>
14.     <li>
15.         <a href="#">Link</a>
16.         <div class="window">
17.             <p>Lots of stuff here...</p>
18.         </div>
19.     </li>
20.     <li>
21.         <a href="#">Link</a>
22.         <div class="window">
23.             <p>Lots of stuff here...</p>
24.         </div>
25.     </li>
26. </ul>

Using jQuery, I need to duplicate the above UL, and only it's top level links, for use on another part of the page.

This is what I have so far:

1. var $nav = $('#nav');
2. /* Method 1: */
3. var $nav_clone_1 = $nav.clone().attr('id', 'nav_clone_1');
4. $nav_clone_1.find('li > div').remove();
5. $nav.before($nav_clone_1);
6. /* Method 2: */
7. var $nav_clone_2 = $('<ul />', {'id': 'nav_clone_2'});
8. $nav.find("> li").each(function() {
9.     var $$ = $(this);
10.     $('<li />', {
11.         'class': $$.attr('class'),
12.         'id': $$.attr('id')
13.     }).html($$.find('> a').clone()).appendTo($nav_clone_2);
14. });
15. $nav.before($nav_clone_2);

I've done a little profiling, and the second example takes several MS longer than the first... I like the first better in terms of code.

I'm looking for feedback. I really want this bit of code to be as minimal, fast and robust as possible.

Room for improvements? Tips?

Many thanks in advance!

Cheers,
Micky

Hello,

Is there a plugin style guide?

For example, is there a recommended way of adding a comment "header" to a plugin? (i.e. comment that has version number, file name, author, author url, other...)

Also, what would be the recommended file name structure? For example:

jquery.my-plugin-1.2.3.min.js

Are there any docs, anywhere (official or not), that cover one or both of the above topics?

Thanks!
M

Hello,

Just curious if it is possible to open an accordion based on an anchor link found inside accordion content area?

For example, I have this FAQ section that is within an accordion. I would like to have the ability to open the accordion based on child anchor called.

Would the best way to do this be:

1. Get href/anchor from url.
var theUrl = window.location.href
var hashValue = theUrl.split('#')[1];

2. find() href with attribute value of hashValue.

3. If anchor found, open parent accordion window pane and jump to anchor value?

Is there any built-in method for doing this? If not, does my above logic make sense?

Thanks for you attention.

Cheers,
Micky

Hi,

Here's my demo.

I am trying to get the yellow bars to show on top of all the light gray boxes upon hover. The darker gray boxes (first and last children) are to be ignored by the code.

On hover out, I want the yellow box (for that row) to fade out and detach() from the DOM.

I feel like I am close to having things working, but there are a few problems:

1. If you hover over a "row", the animation of the yellow box will loop and animate-in/fade-out. Cause: The yellow div, I think, is allowing the hoverIntent plugin to think that it should call the "out" function due to the way I have things setup.

2. If I hover over multiple "rows" quickly, then the rollout function for the last row will apply to all current yellow boxes (i.e. all yellow boxes will stop(), fadeOut() and detach())... I kinda want each row to start and end independently of one another.

I would love some tips on how to handle things better.

Many thanks in advance!

Cheers,
Micky

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Gives me a 404...

Did I miss the news about the versioning changing? When I specify a specific version number, it works.

Hi,

Anyone know if there is a CSS version of the mobile theme that is just the structure?

I don't want any of the theme colors/look/feel, but I would love to have all the structural stuff. :)

Any tips?

Thanks!
Micky

Sorry, not sure where else to post this... Mods, feel free to move.

Constructive jQuery.com/plugins fedback:

1. When searching for plugins, I think the results could be styled better. Could you style them the same as the pre-defined keyword results (keywords found in sidebar). Not sure about ya'll, but I find the search results hard to quickly scan/read because of the styling.

2. I am a huge fan of star ratings. Can you save me some time and show the plugin rating on the search results page?

3. Please add commenting to a plugin detail page. The star rating is OK, but it gives me no idea why someone rated a plugin highly/poorly.

Thanks for listening.

Micky

Hi,

In my plugin, I wrote a private method to handle callbacks:

1. function _call_back($_fun, $_obj) {
2.    
3.     if ($.isFunction($_fun)) {
4.         $_fun.call($_obj);
5.     }
6.    
7. };

In the guts of my plugin, there are times where I have easy access to "this":

1. $foo.animate(..., function(){
2.       _call_back(settings.callback1, this);
3. });

But, there are other situations where $(this) is easier to return:

1. $foo = $var.filter(':eq(' + index + ')');
2. _call_back(settings.callback2, $foo);

When it comes to coding, I tend to like consistency, and don't like surprises... With that said, should I be returning the object lookup for all of my callbacks, or just the "this"?

For example, if I were to return "this" in my last example, I was thinking this would work:

1. _call_back(settings.callback2, $foo[0]);

What do ya'll think?

Many TIA!

Cheers,
Micky

Hi,

I am dissecting a plugin, and I have a few questions about this bit of code:

1. ;(function($) {
2.    
3.     $.fn.my_plug_xxxx = function(options) {
4.        
5.         var $foo = $(this);
6.         var $output = $(options.output);
7.         // ....
8.        
9.     };
10.     // ....

The plugin is called like so:

1. $.my_plug_xxxx($("#foo_div"), $("#output_div"), { // Options here ....

First, I have never seen a plugin work in this way (where the target div is the second object lookup in the plugin call.) Where in the docs could I read more about this functionality?

Second, if I opt to put my "output" option in the options object, how could I allow for both approaches? For example:

1. // This way:
2. $.my_plug_xxxx($("#foo_div"), $("#output_div"), { // Options here ....
3. // Vs. this way:
4. $("#foo_div").my_plug_xxxx({ output: '#output_div' // Other options here ....

In other words, how would the plugin account for both approaches when using a settings object? For example:

1. ;(function($) { // Hide scope, no $ conflict.
2.    
3.     $.fn.my_plug_xxxx = function(options) {
4.        
5.         $settings = jQuery.extend({
6.             output: ?????????????
7.         }, options);
8.        
9.         var $foo = $(this);
10.         // ....
11.        
12.     };
13.     // ....

I hope my question makes sense.

TIA!

Cheers,
Micky

Hello,

My goal is to avoid re-inventing the wheel on this one... :D

What I would like to do:

1. Links <a ... > on page generated by CMS
2. On page load, use Ajax to .load() content of the link's URL.

I have found several plugins, but all of them want you to click on the link.

This plugin looks great [1], but it only works when you click the link.

This plugin looks like the best option [2], but I am wondering if it work well (or at all) on page load (vs. a click).

Question: Do you think option #2 will work for my needs? Basically I want to convert the target <a>s into ajax requests, but I would like to have the ability to queue the loads().

Many thanks in advance!

Cheers,
M

[1] Simple AJAX Content Changer with EZJax
[2] AJAX Queue/Cache/Abort/Block Manager v. 2.0

Hi,

Long story short, I am using GreaseMonkey to load jQuery 1.3.2 (there is a bug with the latest version of jquery and GM) and jQuery UI 1.8.0.

I am using jQuery via GM to manipulate the GUI of a content management system. This CMS uses its own JS library to dynamically add stuff to the dom.

Question:

How can I target a dom element that was added to the dom via this other JS lib?

In other words, the CMS will add a div to the dom, and I am not sure how to tell jquery to wait for these elements to "be there" before applying the jquery goodness. :D

Specifically, I would like to do this:

1. $(function() {
2.     $('#zen1227').resizable();
3. });

But "#zen1227" does not "appear" until later via this other JS library.

I hope all that makes sense. I would love some tips. :)

Thanks!
Cheers,
Micky