Third Mind | jQuery Research
74
post-template-default,single,single-post,postid-74,single-format-standard,ajax_leftright,page_not_loaded,,qode-title-hidden,side_area_uncovered_from_content,transparent_content,qode-child-theme-ver-1.0.0,qode-theme-ver-10.0,wpb-js-composer js-comp-ver-4.12,vc_responsive

jQuery Research

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML… Dual-licensed under the MIT License and the GNU General Public License, jQuery is free, open source software.
-http://en.wikipedia.org/wiki/JQuery

I recently started playing around with jQuery to see if it could be a useful tool for us at thirdmind. What I like about it is its consistent implementation. If you want to animate an HTML element across the screen the code is similar to the code used to do everything else. Once you learn the core jQuery function it is very intuitive to figure out all of the other neat features. The site documents all of the jQuery functions and fills in any of the missing detail points needed. You’d think that by making things easy to implement they would be sacrificing power and customization, it’s quite the opposite – working with jQuery exposes a multitude of options and to quote Jan “it is POWERFUL”. Not knowing too much JavaScript I was able to come up with these two tests:

1: Sliding Div Test: http://thirdmind.com/lucky_temp/slidediv/test.htm

  • Menu slides open when you hover over it
  • Menu closes when you hover off of it
  • DOWNLOAD links use a tool tips plug-in to display a custom HTML tool tip

2: Floating Ad Test: http://thirdmind.com/lucky_temp/floatingad/test.htm

  • Flash Ad positioned over content
  • Click CLOSE (an HTML button) to animate Ad to default closed position and width
  • Click OPEN to stretch Ad to full size and float back over content

Some jQuery feature points:

  • There are many options available when selecting and filtering HTML elements. Example of selecting all list items EXCEPT for the first AND add a css class to them:
    $(“li:not(li:first)”).addClass(“liBorder”);
  • Compatible with major browsers FF2+, IE6+, Safari3+, Opera9+, Chrome1+
  • Useful effects: animate, show/hide, fade, slideUp/Down…
  • Use events like their custom HOVER event for all HTML elements (my sliding menu works with a hover event for the div that contains the menu)
  • Dynamically add, remove, change styles and attributes
  • Compatible with AJAX
  • User generated plug-in repository
  • And much much more!

Call within the next 30 minutes and you’ll receive a sample of USHER TRUE ESSENCE EAU DE TOILETTE absolutely free!* (*maybe)

jQuery makes implementing these fancy things pretty accessible to people like me who aren’t heavy into JavaScript. I have a feeling that those who are already proficient in JavaScript will appreciate this library as well. Having these tools in our pocket can help us design more interactive/flashy HTML sites.

If anyone has any questions I’ll be happy to try and answer them, if I don’t know the answer I will look it up.

– Lucky