Author Topic: jQuery  (Read 1279 times)

Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,217
  • Reputation: +28/-1
    • View Profile
jQuery
« on: April 22, 2011, 04:34:31 AM »
I'm thinking of using more JS, only simple and light things like tooltips, slightly dynamic menu, maybe tabs, etc. So, my thoughts and questions:


1) Is there any reason to use other library than jQuery (I'm excluding here self written JS, that's not an option, only other libraries)? This is kind of rethoretical question for the sake of discussion's consistency since the answer is obvious http://www.stoimen.com/blog/2010/03/12/javascript-libraries-popularity/

2) Should I use some jQuery plugins or just stick to the standard jQuery? Are there any useful plugins *you would use when coding BBG*?

3) Is there any drawback for using the gzipped jQuery version? Is it that some browsers do not allow gzip JS (and are unable to load non gzipped version instead)? If yes, which browsers will not work?

4) Should I worry about users without enabled JavaScript? Or just assume that all legit users will have it and only cheaters won't (who disable JS when using proxy to avoid multiaccount detection)? What I should do when a user has no JS, just display "Please enable JS" and not worry if the game does not work for them?

5) Can you recommend any useful tutorials, websites, books, etc that are nice for learning jQuery?

Offline 133794m3r

  • Level 22
  • *
  • Posts: 265
  • Reputation: +2/-0
    • View Profile
Re: jQuery
« Reply #1 on: April 22, 2011, 07:38:08 AM »
I personally don't see one, i know some people prefer moo tools "make you like javascript" approach but i personally really like jquery. Jquery plugins for light boxes and such is probably the best way to go. Also if you're going to do more advanced things with your UI check out jqueryui. It's a HUGE library. But it has a lot of nice things in it. I've used it for all of the 'menus' within the game itself. Sure they're not uber-pretty but they are nice and work fine. Also the themes that they already had done, one of them perfectly matched my overall theme for the ui before it so it fit in nicely. http://jqueryui.com/

Gzipping? All browsers are required to support deflate. I am not aware of a single browser still in use today that doesn't deflate the archive before using it. Google sends all of their pages through gzip so thus I doubt you'll have any problems with it.

The next part is to make sure it still sort of works. Now i'm not saying making it ungodly pretty for them, just make sure that they can still sort of use the site. But 99.9% of people who are playing your game will have javascript enabled. Just make sure that they can login/view stuff on your forums without it just in case it is someone linking them to the site and they have noscript enabled. If the outside of the game works without it, then you should be ok. Also of course, display it and eventually phase it out since anyone playing your game will be using javascript. Just make sure that the site itself as in the indexing parts works without it since most search engine bots browse without javascript enabled.

Thus far, i've just been working in javascript and then going to the jquery site to see if that function already exists/is in a plugin. If it's not then i write my own. I don't have any but i'm sure that the jquery site has some.

Also if you're going to be using your own javascript, i'd suggest that you use google's closure compiler. https://code.google.com/closure/compiler/

Also unrelated to jquery, but i'm using the following library for keybinds within the game. http://www.openjs.com/scripts/events/keyboard_shortcuts/
« Last Edit: April 22, 2011, 07:39:41 AM by 133794m3r »

Offline Ganrakel

  • Level 3
  • *
  • Posts: 9
  • Reputation: +0/-0
    • View Profile
Re: jQuery
« Reply #2 on: April 22, 2011, 08:30:04 AM »
1. I always say, it's what you enjoy using not what other people say, i have used jquery, mootools, prototype, etc etc..
and i say i love them all, but then again if you can't choose one, then you ask your self wich is best for the project i'm working on right this moment,

2. there are some nice jquery plugins etc, but here comes the question again with same answer as before, you should use what sticks, and just have fun with it.

3. http://stackoverflow.com/questions/5347629/drawbacks-of-using-jquery
http://old.nabble.com/%22Uncompressed%22,--%22Minified-and-Gzipped%22-and-%22Packed%22-td18491423s27240.html
http://www.google.com/#q=Is+there+any+drawback+for+using+the+gzipped+jQuery+version%3F&bih=961&biw=1920&fp=db5e43dcf579ea5a&hl=sv&prmd=ivns&start=10
-In, short, gzipped is the best way to go.

4) Should I worry about users without enabled JavaScript? Or just assume that all legit users will have it and only cheaters won't (who disable JS when using proxy to avoid multiaccount detection)? What I should do when a user has no JS, just display "Please enable JS" and not worry if the game does not work for them?
Answer: what i did before, was add a none js enabled page, saying that hello user you know that your game play will not be as great or even worth playing if you don't enable javascript,
or you just make a double mirror effect as i call it, just one without js, and one with. so even does without js can play as well, but that is a lot of extra work!
or you just block users with no js, add them by account or ip or something to a session, and after like 2-3 visits without js, then send them to block.


5. now here comes the fun part :D enjoy!
http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html

http://www.instantshift.com/2009/02/05/40-excellent-jquery-tutorials/

http://speckyboy.com/2009/03/11/25-powerful-and-useful-jquery-tutorials-for-developers-and-designers/

http://acrisdesign.com/2010/05/35-jquery-tutorials-you-must-know/

http://www.1stwebdesigner.com/tutorials/53-jquery-tutorials-resources-tips-and-tricks-ultimate-collection/

http://webdesignledger.com/tutorials/19-unique-jquery-tutorials-for-web-developers

http://pelfusion.com/tutorials/25-excellent-collection-of-jquery-tutorials/

http://www.digital-web.com/articles/jquery_crash_course/

http://www.designzzz.com/new-jquery-tutorials-plugins-css/

http://davidwalsh.name/jquery-mootools

http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html

http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/

http://www.1stwebdesigner.com/freebies/uniquely-cool-jquery-plugins-tutorials/

http://paulirish.com/2010/10-things-i-learned-from-the-jquery-source/

http://mark.agileanimal.com/post/97096502/40-exceptional-jquery-interface-techniques-and

http://css-plus.com/2010/05/jquery-if-else-statements/

http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/

http://www.catswhocode.com/blog/8-awesome-jquery-tips-and-tricks

http://designbeep.com/2009/11/21/free-amazing-jquery-plugins-and-tutorials-with-demos/

http://pelfusion.com/tutorials/45-useful-jquery-tutorials-and-techniques-for-better-ui/

http://www.viget.com/inspire/jquery-presentation-plugin/

http://stylishwebdesigner.com/46-excellent-jquery-tutorials-for-web-developers/

http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/

http://papermashup.com/simple-jquery-showhide-div/

http://www.webdesignshock.com/showcase/jquery-forms-plugins-tutorials/

http://designm.ag/resources/5-reasons-why-i-love-and-am-sticking-with-jquery/

http://www.ferdychristant.com/blog//articles/DOMM-7LZJN7

http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

http://css-tricks.com/jquery-robot/

http://www.reynoldsftw.com/2009/01/top-10-jquery-plugins-for-form-usability/

http://www.learningjquery.com/2008/02/simple-effects-plugins

http://net.tutsplus.com/articles/web-roundups/the-20-most-practical-and-creative-uses-of-jquery/

http://www.tripwiremagazine.com/2011/03/165-awesome-jquery-sliders-and-other-useful-jquery-effects.html

http://www.devirtuoso.com/2009/06/how-to-create-a-table-row-highlighter-using-jquery/

http://www.google.com/#q=jquery+tooltip&bih=961&biw=1920&fp=db5e43dcf579ea5a&hl=en

http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/

http://tympanus.net/codrops/2010/10/18/custom-animation-banner/

http://www.switchonthecode.com/tutorials/jquery-custom-tooltips

http://www.denbagus.net/jquery-ui-developers

http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/

http://www.noupe.com/jquery/all-about-jquery-plugins-tutorials-and-resources.html

http://www.heinmaas.com/all-the-jquery-resources-youll-ever-need/


Hope i have helped at least i hope i did :)
Let me know if you need anymore help!

Offline raestlyn

  • Level 29
  • **
  • Posts: 463
  • Reputation: +9/-5
    • View Profile
Re: jQuery
« Reply #3 on: April 24, 2011, 11:28:31 AM »
1. If you aren't doing your own, jQuery is a great choice.
2.http://flowplayer.org/tools/index.html has everything you need. Its jQuery based UI library, small, fast and simple to use. Oh, and 100% free for everything.
3. and 4. are already answered.
« Last Edit: April 24, 2011, 11:30:14 AM by raestlyn »


I can send you pics of my cocks if you want reference.


Offline Chris

  • Game Owner
  • Level 35
  • *
  • Posts: 2,217
  • Reputation: +28/-1
    • View Profile
Re: jQuery
« Reply #4 on: May 07, 2011, 06:02:59 AM »
How to make simple jQuery tooltips?

Ideal solution would:
* use standard "title" methods of a HTML tag, without any other changes in the page code (except for adding .js files)
* not require any additional library except for basic jQuery.js

Offline Nox

  • Level 35
  • **
  • Posts: 767
  • Reputation: +12/-2
    • View Profile
Re: jQuery
« Reply #5 on: May 07, 2011, 09:19:16 AM »
it might require CSS, but I'd rather say it "should", unless you want appearance to be hardcoded into JS. Don't like the html there either, but...dunno of a nice and lite solution
Code: [Select]
var titleHtml = $('<span />', { "class": "title" });

$("[title]:not(.disable-js-tooltip)").each(function(){
  var self = $(this);
  self.append( titleHtml.text( self.prop("title") );
  self.parent().hover(function(){ $(this).find(".title").show(); }, function(){ $(this).find(".title").hide(); });
}).removeProp("title");
(for older than 1.6 replace "prop" with "attr")
« Last Edit: May 07, 2011, 11:59:39 AM by Nox »
Meet us at an IRC irc.freenode.net #bbg as well
https://vimeo.com/36579366 (a must-watch) | Join BOINC - no longer a hype, but you can help never the less

Offline BlackScorp

  • Level 15
  • *
  • Posts: 123
  • Reputation: +6/-0
    • View Profile
    • Cruel Online
Re: jQuery
« Reply #6 on: May 09, 2011, 03:40:07 PM »
1) Is there any reason to use other library than jQuery (I'm excluding here self written JS, that's not an option, only other libraries)? This is kind of rethoretical question for the sake of discussion's consistency since the answer is obvious http://www.stoimen.com/blog/2010/03/12/javascript-libraries-popularity/
i saw that some ppls using Prototype and YUI JS Framework but i personally could learn jQuery much faster , since i saw that big Browsergame publisher (like tribe wars) use jQuery , i decided to use it as well.
2) Should I use some jQuery plugins or just stick to the standard jQuery? Are there any useful plugins *you would use when coding BBG*?
i am actually using jQuery UI and thinking about to use GameQuery
3) Is there any drawback for using the gzipped jQuery version? Is it that some browsers do not allow gzip JS (and are unable to load non gzipped version instead)? If yes, which browsers will not work?
uhm.. maybe Netscape(old ones from Win 98):D not really sure..
4) Should I worry about users without enabled JavaScript? Or just assume that all legit users will have it and only cheaters won't (who disable JS when using proxy to avoid multiaccount detection)? What I should do when a user has no JS, just display "Please enable JS" and not worry if the game does not work for them?
I think that all Browsergames players have enabled JS, i think there is no reason today to worry about ppl without JS.

5) Can you recommend any useful tutorials, websites, books, etc that are nice for learning jQuery?

i use mostly the jQuery documentation with sample codes.

just to see how powerful it is, you can check my small Map Editor(http://dev.cruel-online.de) its in German but there you can see jQuery with jQuery UI functions.

Greetz BlackScorp

Sorry for my bad English

 


SimplePortal 2.3.3 © 2008-2010, SimplePortal