Hi, this blog is no longer maintained, my new blog is here

Ruby On Rails and a Conning Israeli entrepreneur

Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts

Beautiful Javascript Date Pickers

Source: Woork! - Beautiful Javascript Date Pickers
Great list of Date Picker plugins and scripts, for several Javascript frameworks.

Elliott Kember: Sexy Page Curl JQuery plugin

Just one of those fun-and-no-real-use things you might want to put in your blog/personal-homepage.
Elliott Kember created this Page Curl plugin for JQuery which shows a page curl on the corner of your website, with the option to set an image below it.
Check the demos.

Noura Yehia: 45+ JQuery user interface plugins you must use

The web is different these days, i remember the days when anchoring (<a name="jumphere">) were considered as magic.
These days, following the overwhelming outburst of javascript frameworks, it's getting easier and simpler to generate extended, usable, fun and sexy interface.
This 45+ JQuery user interface plugins you must use list, is packed with some slick design and usability supplements that should be strongly condered when choosing a javascript framework and user interface guidelines for your application.

David Walsh: The most preferred Javascript Framework

David Walsh, one of my favorite RSS destinations, posted a poll a while ago in order to get a quick look over the preferred javascript framework in use these days.
Well the winner is JQuery, but not in a too wide margin from MooTools at the back, at least not as i thought it would be.
I personally voted for JQuery at that time, but since i switch frameworks depanding on the project nesecities, i think my vote is divided equally by MooTools and JQuery. Dojo was well at the back with only 2 (!!) votes and a close to 0% of vote share, kind of a surprise to me, i was really impressed by Dojo and was considering using it, or at least benchin' it out a little bit.

An alternative to MochaUI: a JQuery based virtual desktop

I am personally using mochaUI is my current projects, and it was one of the main reasons a started working with MooTools at all, but this alternative to a web based desktop implementation is also something to pay attention too.
Although MochaUI is far more feature-packed, i think that this basic JQuery implementaion can be a good start for starting off a new web based desktop application (Add some plugins, and ding! ready).

Drew Douglass: The 20 Most Practical and Creative Uses of jQuery


  • James Padolsey Color Switcher

    Screenshot 1
    One of our sporadic writers, James Padolsey, has a nice feature on his website. A "customize" bar in the top right portion of the screen allows you to change the background color of the header.
    Visit Site

  • Dragon Interactives jQuery Navigation

    Screenshot 1
    These guys are pretty much Gods of web design, and their site really proves it. Just have a look at the custom jQuery navigation they used on their homepage. Have you ever seen such a sexy navigation in your life?
    Visit Site

  • FamSpams FaceBox

    Screenshot 2
    FamFamFam needed a custom lightbox like script for FamSpam (whew, say that three times). They ended up building what is now know as FaceBox, which replicates the effects of lightbox, but goes above and beyond by allowing you to load in static html pages, contact forms, anything you wish really! FaceBox is now a jQuery plugin after all the demand for their script.
    Visit Site

  • Grooveshark Widget Creator

    Screenshot 3
    Instead of going with a typical flash menu/control menu, Grooveshark mixed it up a bit and built a custom jQuery script to allow you to make your own music widgets; pretty nifty indeed.
    Visit Site

  • CSS-Tricks Fade-In Navigation

    Screenshot 4
    CSS-Tricks, by Chris Coyier, is next up on the list with a wonderfully simple and creative jQuery navigation. When the links are hovered over, instead of immediately changing colors, jQuery is used to help the color fade slowly to the desired color.
    Visit Site

  • David Walsh Link Nudge

    Screenshot 5
    Developer David Walsh of DavidWalsh.name implements an extremely simple to use script to give your links a little nudge on hover. The script utilizes the strong animation capabilities of jQuery triggered on hover. Check out the links in the sidebar and in the footer to see the effect in action.
    Visit Site

  • CarrotCreative-Custom Sites Lightbox

    Screenshot 6
    If you check out the CarrotCreative website, you will actually notice two really unique jQuery effects. Firstly, if you click on sites in the upper left, you will see a unique application of a 'lightbox' like effect listing their sites and icons. Secondly, if you click on any navigation links, you will notice there is no refresh, but that the new page just slides in from the right. Cool stuff!
    Visit Site

  • BrightCreative Portfolio

    Screenshot 7
    Another "two for one" special, Bright Creative uses an extremely subtle glow effect in their navigation that is very calming and warm. In addition, all of their portfolio pages have a tabbing effect, so their is no need for the user to refresh the page every time - thanks to AJAX and jQuery.
    Visit Site

  • Incredible Login Form

    Screenshot 1
    Not too long ago, Connor Zwick wrote us a nice tutorial that demonstrates exactly how to build an amazing drop-down login form.
    Visit Site

  • Application Scroller by Aviary

    Screenshot 8
    It would be an insult to call this a type of 'marquee' (shivers uttering that word). Instead, Aviary came up with a very nice looking and functioning 'scroller' to showcase a lot of text in a small amount of space. Even better is that the scroller will degrade gracefully is javascript is disabled.
    Visit Site

  • Featured Fade Effect by DesignFlavr

    Screenshot 9
    DesignFlavr, known for their great sources of design inspiration, put together a simple fadeIn/fadeOut script to showcase their featured artwork and corresponding descriptions. Also, they've used the lavalamp plugin quite well on their main navigation.
    Visit Site

  • Hv-Designs Fade In RSS Icon

    Screenshot 11
    On the Hv-Designs homepage, you will notice the the RSS icon starts off as an outline/sketch of the actual image. Then, when hovered, the rss icons 'glows' into place.
    Visit Site

  • Asylums Custom Scroller

    Screenshot 12
    Besides being an absolutely hilarious website, Asylum has their own sweet 'featured articles' scrolling script. It's hard to put a finger on why this one is so nice, but that is probably because it behaves slightly differently than most scrolling scripts. It almost seems to snap into place after you give it a click.
    Visit Site

  • 5 Javascript Tricks Made Easy with jQuery

    Screenshot 14
    Brian Reindel created a webpage showcasing 5 custom scripts you can use however you like. The article takes ideas and previous javascript techniques frequently used and utilizes jQuery to make them powerful, compact, and easy to read.
    Visit Site

  • Codas Entire Website

    Screenshot 15
    Coda is well known for its amazing UI and site design. It set a fire under the jQuery plugin community by inspiring many developers to re create their page tabbing effect. In addition, they have a wonderful on hover effect on the links located in the header.
    Visit Site

  • Clark Lab Fading Effect

    Screenshot 16
    ClarkLab is a well known and very successful author on ThemeForest. If you visit his portfolio below, you will notice the large header images eventually fade to the next, showcasing all of his latest work. The fade effect is so well done and subtle, you barely notice the new image showing up.
    Visit Site

  • Rob Young | E is for Effort

    Screenshot 17
    Designer and Art Director Rob Young used a unique idea of displaying his artwork on a simulated Mac screen. Then using jQuery scrolling effects, each new page slides into the page view as if it is being loaded on a computer.
    Visit Site

  • Web Designer Wall

    Screenshot 18
    Besides being a visually stunning website, WDW features some unique custom jQuery scripting to add classes to certain elements on hover. Check out the effects when the rss and navigation items are hovered over.
    Visit Site

  • KomodoMedia

    Screenshot 19
    I've saved my absolute favorite site for last. First, just look at that design, it's wonderfully unique and comforting. Using one of the most creative jQuery scripts I have ever seen, KM has a 'foliage-o-meter' slider where sliding it either increases or decreases the foliage and design of the theme, depending on the direction the slider is moved. For an easter egg be sure to check out the source code!
    Visit Site

NETTUTS: JQuery for beginners

http://nettuts.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/
great great tutorial, although i am (currently) a MooTools fan, i think this is a very good guide collection for JQuery.

IE Testing: Internet Explorer cannot open the Internet site. Operation aborted.


haaah... the joy of working with IE never ceases to amaze me. I was trying to test one of my pages on IE7 when this ruthless message arrived uninvited, needless to say that the immediate action that IE preforms is to redirect you to a 404 default page, discarding from you the option of viewing some Javascript errors and basically take care of the problem.

The Issue:
Internet Explorer 6 and 7 are getting really upset when you don't give them the chance to render the entire HTML, and preform a DOM related actions (appending/removing child elements for an instance).
This is mostly a response to a >script< tag containing a DOM changing javascript.

Solution:
If you are using JQuery like i am, use the document.ready function around your inline

Dynamically adding a text field, with autocomplete

We all love auto complete. It makes our lives a little less complicated and classy. I decided to (as a complimantry to my new JS beloved framework) to use the JQuery autocomplete plugin, problems began when I needed to use dynamically added text fields with autocomplete. Since the plugin assumes that you use a single and unique DOM ID, was unable to setup the autocomplete feature to newly dynamic fields.
One solution was to add the fields by javascript and Dom manipulation, but I prefered to use a partial in order to keep the code simple and Rubish. The other solution was to add a javascript script tag in the end of the partial which traverses the DOM and adds a unique and random id, and of course setting the auto complete feature for each one of them.
Bottom line, it is working and even working well, but I would like to hear new ideas if anyone has.
Over and out.

Finally Decided: JQuery, not Prototype

JQuery (for those of you just landed from Mars) is an unobtrusive javascript framework. read more at the JQuery home page.
jQuery supports Behavior driven development and is based on traversing HTML documents by CSS Selectors.
vs.
Prototype,
Prototype is also JavaScript library for Class driven development which makes life easier working with JavaScript. Prototype library has a good support in Ruby on Rails via helper functions and is basically well embedded in.

i decided to try to match both of these libraries (and dojo for the matter of fact, but the project was halted), and here are my conclusions.


  • BDD


    JQuery is very similar to CSS by assigning the HTML element behaviour out-side the HTML, so it is generally more adequate for MVC.
    for ex:

    $(element).click(function() {
    alert("warning");
    });

    simple.

  • Chaining
    Chining methods is as simple as ruby. period

  • CSS Selectors

    Since JQuery is based upon CSS, you can access any element by it's CSS path, and avoid these annoying pesky ID's you have to put using Prototype.


for some more comparisons, visit the Ajaxian article

Finally:
Jquery and prototype are both great. For me, i prefer JQuery since it's approach appeals to me more than Prototype's, Although prototype is kinda Rubish and has inbound support from Rails, JQuery is still cleaner to me.
Did someone said JQuery to Rails integration?


The Web Ask eizesus.com

Subscribe

    follow me on Twitter

    Twiters Around

    About Me

    My photo
    I am a web developer for more than 9 years, managed, cried, coded, designed and made money in this industry. now trying to do it again.

    Labels