www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Tag Archives: jquery

Bind the checkbox checked status from one checkbox to other checkboxes using jQuery plugin “reflectStatusOn”

I have coded a simpel / which will bind the checked status from checkboxes to others. Lets say that you have a rule saying that:

If people choose football clubs in London area they should automatically get Arsenal, Chelsea, Fulham, QPR, Tottenham Hotspur and so on…

Then the code might look like this:

jQuery(‘#london’).(‘#Arsenal, #Chelsea, #Fulham, #QPR, #TottenhamHotspur’);

You may download and see of use on my code area:

http://code.netsi.dk/jquery.reflectStatusOn/default.html

Share

“plugInReflector” a new jQuery plug-in targeted at using and implementing jQuery plug-ins

Many times I have tried to implement plug-ins and many times I have read the descriptions about all the options and settings for each and every . Sometimes many examples and good documentation exists, but in every case for a long time now I have had this idea to build a tool which can do a standardalized auto discovering of plug-ins. “.” plug-in is the outcome of these thoughts.

“If you take something from the net, you must give something back”

My philosophy perhaps is simply just a definition of the word “share”, but I feel that I need to write it – this plug-in is also put to the internet with the sharing in mind, so feel free to use the plug-in! I have even put it so github.com, a place with structured filesharing (find the link below). I am new to github.com and feel 100% , but the plug-in with examples will be available out there.

Why should you use plugInReflector?

If you are a person working with the internet implementing websites and use jQuery plug-ins you find on the net, you will probertly find plugInReflector usefull. Lets say that you apply a jQuery based gallery (like jQuery Cycle) to an UL list called “gallery”. You can do it like this for instance:

jQuery('.gallery').cycle();

This will activate the gallery, but what about the settings? On the for jQuery Cycle you will get the authors documentation, telling you that you need to change “easing” if you need to choose another way to do the animated sliding. But what if you could simply add “.plugInReflector()” and then get a “disassembled” look at the actual settings, properties, objects and functions used by the plug-in to accive the current effect? Would that not be handy? Simply add the plugInReflector plug-in and change your gallery inserting code to:

jQuery('.gallery').cycle().plugInReflector();


You will now get a full list of any settings bound to the gallery. Something like this (in plugInReflector 0.01):

An example of the output from plugInReflector when doing reflection on jQuery Cycle image gallery

The above output is auto generated HTML which is appended to the body, if you do not specify an element using the “output” option. The output option should be a jQuery selector (for instance #output).

What to expect in next versions

The current version – at the time of writing this post – is 0.01, which indicates the beta-alike state of the plug-in. I allready have several for improvements here are some:

  • Generate settings object.

    This will make it possibel to save and use the new settings on the plug-in reflected on.

  • Dynamically update plug-in with the changed settings.

    This will make it possibel for you to play-around and instantly see changes to the plug-in relected upon.

  • Reposetory with known settings for plug-ins.

    Imagine that you not just get a row saying that “easing” is a string. Imagine that when we talk about “easing” we could put a selectbox in the output from the reflection process. Such a service could be accived if people start to share the relected output on a reposetory – leaving “fingerprints” would make it possibel to get more friendly help for the outputed reflection result. Perhaps even ask plug-in developers to help with more information about which settings is relevant and a friendly description about it. What a wonderful world it would be…

..what will you share with me?

So please do leave your comments here, on plugInReflector at github, on twitter: netsi1964 or simply drop me an e-mail. If you have any comments or ideas they are welcome.

Links
Share

Example illustration created using “Xara Designer Pro 6”

“An says more that 1000 words”, in this post I will show just hos easy it is creating simple illustrations using Xara Designer Pro 6 (XDP6).

The illustration which I made for Jeppe as I tried to support him on adjusting options for his gallery

The background

The is where I need to tell a friend how to change settings in a gallery. He wanted the controls for his reference gallery to show above instead of below the gallery it’self. As many other jQuery based plug-ins things are controlled using options, and if you know how – it’s very simple to alter the behavior of such a . So all he needed was to change a value from “false” to “true”.

Creating the graphics

Creating the graphics was simple:

  • Open the webpage containing the gallery which I needed
  • Open Firebug plug-in for Firefox, and in the HTML tab, locate the place where the source code was located
  • Take a screenshot using the screen capture of XDP6, Ctrl+Q
  • Cropping the screenhoot inside XDP6 using the Photo Tool. The Photo Tool will let you crop without losing the original, which makes it an operation (like most XDP6 operations) where you relax as you know: You can always return to original!
  • I then found the marker pen in the in the Designs gallery of XDP6, which comes free with the program. Here you can see it together with other gallery items – all of them are vector graphics, as you can see to the right. Here I have changed them using standard vector tricks.The Designers gallery of Xara Designer Pro 6, and some examples of how to use clipart
  • I placed a resized version of the marker pen clipart on top of the cropped screenshot. Placed a shadow (using shadow tool), then I only needed to simulate a transparent line on top of the source code. Piece of cake (with XDP6!).
  • A rectangle made transparent, transformed it and finally did some dynamic blur on it.
  • I then copied it to the e-mail for Jeppe, and voila – I hope that my “illustration saying more than 1000 words” could help Jeppe :-)

About the of Jeppe K Graphix

Here is the gallery as it looked before I explained it to him:

The gallery at the website of Jeppe K Graphix

You can see the live version at his “portiofolio page” – his company webpage is here: www.jeppe-k.dk

Links
Share

Google Closure javascript API – good or bad?

Since I first started to juse jQuery javascript API I have been a happy programmer! Things like cross browser, easy widget implementation and animation were suddently very easy to use. It was fast to implement, ran fast and as mentioned were rock solid accross browsers on various platforms! Finally: It started a trend of worldwide unity amoung developers – people very moving as a group.

Javascript frameworks – a litle background
Last year Microsoft realized that jQuery was a very powerfull and solid javascript framework, the simply decided to adapt it and use it as their prefered javascript API. Not a thing which done often by such a big player! The company which perhaps has as many people who hate it as it has followers realized that open source code is something to respect and adapt!

Google Colsure on the other hand – what is it? As I understand the framework is something which Google has developed for internal use, and now has opened up, so that everyone are free to use it. I must admit that I am not totally into all the terms of use and the history of this framework. However IMHO:

We don’t need Google to put one more player on the field of javascript frameworks! When it comes to javascript frameworks we need the unity amoung javascript developers – and a framework like provides all the extensibility for any Google special needs. 

What to do with “the new Microsoft” :-) ?
It would be unrealistic to expect Google to “drop” its Google Colsure framework, but us – the javascript developers – might put presure on Google (the new Microsoft?). I for one do not need another javascript framework. So I will continue using jQuery.

I do not see Google as the new Microsoft – and Microsoft is not a bad company in my eyes. What however is bad is when one company is too big and can ignore other players without getting into trouble. Google is probertly not trying to push other javascript frameworks out of the field… Right Google? :-) Perhaps Google could try to convert their into extentions/plug-ins to jQuery?

Other opinions about Google Closure
Using TweetDesk I set up a search for “Closure Library” to follow the tweets about the Google Closure Library. Just followed one of them to: http://www.sitepoint.com/blogs/2009/11/12/google-closure-how-not-to-write-javascript/

image

That was written by Kevin Yank and he referes to some Google Colsure critism spoken by Dmitry Baranovskiy. I myself have coded many lines of javascript and learned things just by reading this article! I also saw some scary “mistakes” which Dmitry pointed out in the new Google Closure framework. One of them was testing if a var was of the type String (From base.js, line 742):

1
2
3

goog.isString = function(val) {
  return typeof val == 'string';
};


The problem with that method (isString) is simply that it fails if you call it with a String object! Not ! If you call it like this: goog.isString(new String(‘My string’)) it will return false!

Ofcause nothing is perfect, and the points by Dmitry Baranovskiy could easily be changed as a normal bug is fixed in any javascript framework. What scares me is the fact that many people seem to think that Google equals perfect, and if many people are non-sceptical about things developed by Google (Yahoo, Microsoft or anyone!) then perhaps they will leave jQuery and start using Google Colsure Library… I hope not!

Share

It’s a dream: Serverside javascript!

I know that nothing is perfect, but today I saw a server running ! It is based on the mozilla javascript engine which means that it understands the same level of javascript that Firefox does!

So is this a dream?
Well to start with I love javascript! It’s so flexible and fits very well for the internet. With the many very APIs appearing nowadays – like , prototype and other – you would be able to use the same terms, methodes and datastructures on both client- as well as server-side! Google and Yahoo are building serious javascript free APIs which you simply use on the server rather than on the browser.

I just watched a video showing an where a RSS feed is fetched as XML, transformed using XSLT and added to the DOM using various javascript APIs. Server side that is!

You would be able to manipulate the DOM using javascript syntax and APIs before the page is returned to the browser.

But how do I get it?
Well you can get locally by downloading Aptana framework, which is also very powerfull in general – even if you do not want to play around with serverside javascript.

It is mentioned that it has its own JAXER server, not sure if it means that you will be able to host it only some places… time will show! For now I keep on dreaming!

Share