|
jQuery is a Javascript framework that gets a lot of love in CoC but doesn't have it's own thread so I decided to make one. While there are lots of other Javascript libraries out there, jQuery is quickly becoming the standard library for web development. Both Microsoft and Nokia have announced they are integrating it with their development environments. The two areas where I find jQuery to be most useful are presentation and AJAX. The presentation layer of a website can be quite complex - especially if you have customers who want advanced effects. More and more websites are replacing Flash functionality with jQuery for SEO purposes. AJAX doesn't really require a strong library to be good and the syntax for AJAX in jQuery is very simple. I have worked at quite a few places over the last year and I have taught a lot of coworkers how to use jQuery. I think that many folks in CoC would benefit greatly from learning jQuery. I'll update this post over time to make it more informative and add good examples of jQuery code. This documentation is very easy to use. Sometimes the docs on jQuery.com go down or get slow. http://www.visualjquery.com/1.1.2.html Ned fucked around with this message at 22:30 on Sep 30, 2008 |
# ? Sep 30, 2008 19:16 |
|
|
# ? Apr 24, 2024 21:02 |
|
I'm in the midst of a javascript-crazy project and jquery is definately helping. The simplicity of DOM navigation and modification has greatly simplified my life. But I get a bit concerned when I have to delve into using a "plugin". Like using jquery.canvas. Sometimes things just don't work and using a hack on top of a hack on top of a hack makes me nervous.
|
# ? Sep 30, 2008 20:24 |
|
I took 2 years out of web programming (trained to be a teacher) and in that period Javascript seems to have gone from something that I (honestly) advised people to avoid where possible to a (reasonably) mature system that forms a third leg of "delivered to client side" code. The reason is that jQuery (with some caveats) makes the DOM something that is actually useful and workable. Being able to access page elements in .js via css selectors is SO sensible! Oh yeah; and jQuery is actually documented in reasonably clear english! There are some caveats though; you have to be careful with the syntax as it can quickly devolve into a LISP-like parenthesis orgy, and javascript itself still suffers from a failure mechanism that strongly resembles a deaf-mute flipping you the bird. And as said above, the quality of plugins is seriously variable (jquery.timers is a goddamn joke, for instance - its actually less intuitive than the standard timeout system) I've found that the best thing to do is to build my own components with jQuery - I work with PHP (LAMP+CodeIgniter+jQuery basically) so I code up PHP to generate xhtml for a given component, using standardised markup, css classes and ids with a seperate .css for the component, then a seperate .js file for the component's jQuery stuff. (then at depoyment time I can aggregate the .css and .js files together) Makes 'add an image rotator' or some such a much more straight forward process. Some specifics I found / issues I'd be interested in work arounds for: you can't attach hover events to areas in image maps (don't do anything in IE) you need to set onMouseOver and onMouseOut manually (in the xhtml) jquery.timers doesn't work properly if you want multiple items with independant timers (or at least; I 'attached' timers to two elements, with different 'labels' and got 2 timers firing on one of them...) Reviews of plugins that we've used and found to be good / bad would be a nice feature for this thread. Oh; and OP; link to https://www.visualjquery.com drat fine documentation.
|
# ? Sep 30, 2008 22:21 |
|
What's the deal with the MIT license, is complying with it really as simple as just including the license?
|
# ? Oct 1, 2008 00:16 |
|
triplekungfu posted:What's the deal with the MIT license, is complying with it really as simple as just including the license? Yes.
|
# ? Oct 1, 2008 00:42 |
|
If you didn't see it, jQuery is going to be integrated with ASP.NET in the near future, including IntelliSense in Visual Studio.
|
# ? Oct 1, 2008 00:46 |
|
mintskoal posted:If you didn't see it, jQuery is going to be integrated with ASP.NET in the near future, including IntelliSense in Visual Studio. It was posted in the OP? Ned posted:Both Microsoft and Nokia have announced they are integrating it with their development environments.
|
# ? Oct 1, 2008 02:50 |
|
triplekungfu posted:What's the deal with the MIT license, is complying with it really as simple as just including the license? MIT is pretty much a "do whatever the gently caress you want" type license. jquery is amazing, and the heavy use of lispy closures really helps clarify readability and helps encourage functional programming styles. The fact that you can *mostly* push all the javascript, including hooking triggers, outside the HTML gives me a hardon. This is great stuff. And yes, the plugin quality is very hit and miss. But its javascript, whatya expect.
|
# ? Oct 1, 2008 06:49 |
|
And within a few days of using jquery, I have filed my first bug . If an element is positioned using the css "bottom" property, then jquery.ui.draggable() is applied to it, the bottom will remain fixed while you drag it around. It's not the most common use case, but it's hurting me right now. Still way better off for using jquery than I would be without it though
|
# ? Oct 1, 2008 14:03 |
|
http://lsrc2008.confreaks.com/10-yehuda-katz-using-jquery-with-ruby-web-frameworks.html That's a good (once he gets past the first bit of live coding failure) presentation on doing BDD with screw unit and jquery.
|
# ? Oct 1, 2008 16:13 |
|
Dromio posted:And within a few days of using jquery, I have filed my first bug . The great thing is there is a team of people who will actually look at the code. I have write access to the jQuery repo, I really need to get back to fixing some bugs in it!
|
# ? Oct 1, 2008 19:35 |
|
Is there some way to insert conditionals into one of these jquery chains? I'm using the jquery html canvas plugin to draw a curved box around an element like this:code:
Edit: Oh crap, forgot that I'd switched to this "polygon" function that isn't even a chain. Ugh. Dromio fucked around with this message at 20:20 on Oct 3, 2008 |
# ? Oct 3, 2008 20:16 |
|
Dromio posted:Is there some way to insert conditionals into one of these jquery chains? I'm using the jquery html canvas plugin to draw a curved box around an element like this: Why dont you prepare some variables with the location of the tail thingo, and *then* use your canvas to do it. Or just not nest it.
|
# ? Oct 4, 2008 12:29 |
|
duck monster posted:Why dont you prepare some variables with the location of the tail thingo, and *then* use your canvas to do it. Making the tail requires that I replace one of the quadratic curves with two lines: code:
code:
Maybe I can make a variable for each corner, and then replace the one I need to with a single switch statement or something.
|
# ? Oct 4, 2008 13:44 |
|
I re-wrote it as a jquery chain like so:code:
Edit: Maybe I can define my own function, .drawCorner() to use in place of the .quadraticCurveTo() calls? Something like: code:
quote:canvasArea.style(style).beginPath().moveTo([tr, t]).drawCorner([r, t], [r, tt]) is undefined Edit 2: Aha, jquery functions have to return a jquery object! I'm closing in on this! Dromio fucked around with this message at 16:03 on Oct 6, 2008 |
# ? Oct 6, 2008 15:14 |
|
And finally to finish my spamming of this thread, here's how I got it working:code:
Dromio fucked around with this message at 16:48 on Oct 6, 2008 |
# ? Oct 6, 2008 16:45 |
|
Dromio posted:I don't really like using the switch() to determine the relation of the target to the bubble, but it's the best I could come up with. You are the ninja now, dog!
|
# ? Oct 6, 2008 18:43 |
|
Woah look what I found.... http://plugins.jquery.com/project/jqcouch CouchDB bindings for jQuery. I genuinely think schemaless databases like couch are the future, but looking at that, holy poo poo would couch make a loving amazing local end store for offline JS apps.
|
# ? Oct 7, 2008 11:15 |
|
Time for another problem: Any ideas on how I can animate typing text into a textbox one letter at a time, pausing 1 second between each letter? My current (ugly) code isn't working for IE for some reason: code:
|
# ? Oct 7, 2008 15:34 |
|
duck monster posted:Woah look what I found.... Holy crap, my two favorite things, combined! There's some talk of packaging couchDB with gears as a browser plugin to take advantage of couch's replication in offline apps. That, plus jQuery, could be a seriously killer app.
|
# ? Oct 8, 2008 06:23 |
|
Theres another jquery plugin called 'notemplate' that basically takes a data dictionary (nested if need be) and uses it as a templating system. You combine that with couch, and you have a cms in a few lines of javascript. An *absurd* and *insecure* cms, granted. But a CMS none the less. Wild stuff.
|
# ? Oct 9, 2008 16:55 |
|
Dromio posted:Some sort of setTimeOut() call maybe? It scares me that you even have to ask whether you should use the builtin "wait until" function or simply hammer around in a tight loop until the time is up. Of course you should be using setTimeout. Summat like; code:
So you specify the input and the text to add, and it'll loop through it. The closure in the timeout is non optional AFAIK, as you need the parameters.
|
# ? Oct 10, 2008 01:27 |
|
KuruMonkey posted:Of course you should be using setTimeout. I'm still a little shaky in javascript, so I plead ignorance. When I asked, I was (mistakenly) led to believe that setTimeout only took strings. I learned the truth and implemented it properly. On the other hand, having to chain setTimeout inside setTimeout inside setTimeout in order to simulate a mouse-click then typing text is UGLY
|
# ? Oct 10, 2008 03:59 |
|
Dromio posted:I'm still a little shaky in javascript, so I plead ignorance. When I asked, I was (mistakenly) led to believe that setTimeout only took strings. I learned the truth and implemented it properly. 1; sounds like you need to take a long hard look at whoever you asked, and reassess whether they are worth asking questions of. Try asking http://www.w3schools.com/jsref/default.asp instead. 2; chaining whaaaaa? Example and context/reason/rationale for doing this please?!?
|
# ? Oct 10, 2008 08:23 |
|
KuruMonkey posted:2; chaining whaaaaa? Example and context/reason/rationale for doing this please?!? Less "chaining" than nesting, so I could have it pause appropriately between each step. I needed to move the "cursor.png" to the textbox, blink it black then back to indicate a click, then start typing the text out char by char. I can't copy+paste the code right now, but here's pseudocode what it ended up like: code:
Dromio fucked around with this message at 13:22 on Oct 10, 2008 |
# ? Oct 10, 2008 13:17 |
|
Dromio posted:Less "chaining" than nesting, so I could have it pause appropriately between each step. http://blog.napkindrawing.com/fansipans/playin/js/nestFuncs.html That was good practice. Heh, kinda forgot this was the jQuery thread though, I intentionally took out my little $ and map helpers. It's neat what you can do when functions are objects.
|
# ? Oct 10, 2008 19:02 |
|
Dromio posted:Less "chaining" than nesting, so I could have it pause appropriately between each step. I needed to move the "cursor.png" to the textbox, blink it black then back to indicate a click, then start typing the text out char by char. I can't copy+paste the code right now, but here's pseudocode what it ended up like:
|
# ? Oct 10, 2008 19:25 |
|
fansipans posted:I'm gonna go ahead and steal that, got a name/url or email you want in the source for, like, credit due and such?
|
# ? Oct 10, 2008 20:14 |
|
fansipans posted:http://blog.napkindrawing.com/fansipans/playin/js/nestFuncs.html Couldn't you accomplish something similar with the decorator pattern?
|
# ? Oct 10, 2008 20:38 |
|
I braindumped my thoughts here: https://napkindrawing.com/blog_view/nehssaieyseitdeaKuruMonkey posted:I'm gonna go ahead and steal that, got a name/url or email you want in the source for, like, credit due and such? Sure, I just added license text to it, go ahead ashgromnies posted:Couldn't you accomplish something similar with the decorator pattern? I guess, but the original intent was to chain one function to the next, and so on. I'm not sure how you'd decorate a function to do that, asides from what would seem to me to be monkey-patching. I'd say Decorator would be warranted if I was doing this in a properly object oriented environment (JOOSE PLUG!) and I was dealing with actual objects, and not more low-level things like functions (yes I'm aware functions in JavaScript are objects - what did I say about monkey-patching?) Actually this is a great example of why things like Joose will help so much. We'll finally have fully-capable modern object-oriented programming facilities available to us in the browser. Then again, if all we're talking about is pretending a typewriter is typing out keys on the keyboard, hacks like this are nice too
|
# ? Oct 10, 2008 22:14 |
|
fansipans posted:http://blog.napkindrawing.com/fansipans/playin/js/nestFuncs.html javascript can be disturbingly functional sometimes.
|
# ? Oct 11, 2008 07:17 |
|
Is this pretty much the JavaScript questions thread now, or should I start a separate JavaScript/ECMAScript thread? Edit: OK, it can probably wait till my lunch break if we've gone this long without one. Munkeymon fucked around with this message at 17:12 on Oct 13, 2008 |
# ? Oct 13, 2008 16:59 |
|
Munkeymon posted:Is this pretty much the JavaScript questions thread now, or should I start a separate JavaScript/ECMAScript thread?
|
# ? Oct 13, 2008 17:06 |
|
LOLLERZ posted:A separate one will probably fare better. I think it would be fine to put regular javascript questions in here. The topic isn't that different and the people who read this thread should be able to give you good answers.
|
# ? Oct 13, 2008 18:34 |
|
Ned posted:I think it would be fine to put regular javascript questions in here. The topic isn't that different and the people who read this thread should be able to give you good answers. Too late: http://forums.somethingawful.com/showthread.php?threadid=2983298 I link here from there in the OP, though
|
# ? Oct 13, 2008 22:05 |
|
I have a report that generates a big table of stuff. I have added columns to show hourly data, so that's 24 extra columns. Now the table is quite wide, so I wanted to have those hour columns hidden by default, and have a toggle to show/hide them. The problem is my implementation executes very very slowly and even makes the browser appear to be frozen for some seconds. Every table cell I want to toggle has the class 'hour'. code:
|
# ? Oct 14, 2008 06:00 |
|
Could you just toggle a class on the table itself, rather than on each cell? Something like this? (This is mootools, should be able to do something similar in jQuery) code:
code:
|
# ? Oct 14, 2008 14:04 |
|
indigoe posted:I have a report that generates a big table of stuff. I have added columns to show hourly data, so that's 24 extra columns. Now the table is quite wide, so I wanted to have those hour columns hidden by default, and have a toggle to show/hide them. The problem is my implementation executes very very slowly and even makes the browser appear to be frozen for some seconds. See code at: http://paste.ifies.org/110 You can play with it by pasting the code into the demo page at w3schools.com I'm assuming all the hidden cells in your table each individually have the class hour_block. $(".hour_block") probably matches hundreds, if not thousands, of elements, each one having to be toggled individually, by jQuery, with JavaScript, back through the browser... (eons) You'd be much better off putting all of those cells into one table, with the same # of rows as the original table, and placing it into the original table in a single cell with a rowspan that matches the # of rows you have. But yeah, selectors can be deceiving, because with an unoptimized design it's easy to call a selector that forces the browser to do hundreds or thousands of individual renders, as opposed to just one. I'm also assuming here that jQuery isn't smart enough when given 1000 DOM changes to do all its work in private, then give the new DOM as a single object to the browser, it may be. But I doubt it
|
# ? Oct 14, 2008 14:39 |
|
Thanks, that really helped. It's much faster now. There were thousands of cells to display.
|
# ? Oct 15, 2008 01:54 |
|
|
# ? Apr 24, 2024 21:02 |
|
I'm trying to integrate my jQuery-heavy page into a site that was already using scriptaculous/prototype. I've put "jQuery.noConflict();" so it runs immediately and I've replaced all instances of "$" with "jQuery" in my code. But I'm still getting an error in jquery.js claiming "this.cloneNode is not a function". It's coming from somewhere inside one of one of my jquery plugins. Any suggestions on how to hunt it down?
|
# ? Oct 15, 2008 20:52 |