If you want to trigger (fire) an event on say a link with id=test from jQuery you can use the
jQuery(‘#test’).trigger('click')
which will simulate that a click event has occured and will execute any jQuery attached events. This is fine, but what if you have not assigned an jQuery event handler? You can simply call the native click() method on the element like this:
jQuery('#test').each(function() {this.click();})
Sometimes you need to load some javascripts in a syncron way and then when they have loaded do something. This is exactly what I try to address with this function. It requires jQuery. It will take an array of URLs to the scripts (aScripts) you want to load-and-execute. After it has finished with that it will call an optional function “callWhenFinished”.
The code has XML comments which works with Microsoft Visual Studio 2010.
function loadScripts(aScripts, callWhenFinished) { ///
Requires jQuery. Will load the scripts specified in the Array aScripts one after the other (syncron). After that has been done it will optional call the callWhenFinishedFunction ///
An array of script URLs which will be loaded an executed using jQuery.getScript ///
After all scripts has been loaded and executed this function will be called jQuery.getScript( aScripts[0], function(data, textStatus) { aScripts = aScripts.splice(1,2); if (aScripts.length>0) { loadScripts(aScripts, callWhenFinished) } else { if (typeof callWhenFinished!='undefined') { callWhenFinished.call(this) } }; });}
When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:
<link rel="stylesheet" href="Blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="Blueprint/print.css" type="text/css" media="print" />
As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.
Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a javascript window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a jQuery based fix for this situation.
The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:
1: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
2: <script type="text/javascript">
3: /* STH: 2011-07-07 Make any stylesheets target for "print" media active on "all" media types (including screen)
4: Also disable any layouts for screen
5: */
6: jQuery(function() {
7: var bPrint = (window.location.toString().indexOf('#print')!=-1);
8: if (bPrint) {
9: // The user wants to print this page
10: jQuery('link[media*="print"]').attr('media', 'all'); // Enable the print styling for all media types, including screen.
11: jQuery('link[media*="screen"]').remove(); // remove any styling related to screen
12: }
13: })
14: </script>
The fix above has a link to jQuery, you do not have to include it if you allready have jQuery on your webpage.
Xara is the name of a British company which has been living in the shadow of Adobe for many years with its all-in-one graphics application. This version has been around since ARM was a custom chip running a desktop computer called Acorn Risc PC. Perhaps this is a good thing to relate to, as ARM now is properly the most successful chipset around in the world, taking every from Google Cromebooks over Apple iPads, Android “pads”, TV sets and even windows 8 by storm. The same should happen to this graphics application called Xara Designer Pro 7 ! It’s fast, rich featured, easy to use, compatible with other main graphics packages like Adobe Photoshop, it produces SVG, webpages and I could go on! You should at least go and download a free trial from: www.xara.com!
The program has many basic things build into one application, I like that. Everything you create in it is vector based, except of cause if you work with pixel based elements like photos. At my work where I implement websites in CMS systems I use Xara for many types of graphics operations. I might design buttons where I get automated scaled versions which also have mouse hovering and selected states. They are vector based, so scaling them up and down is very easy. I can use theme colors which makes it possible to reuse them on other websites. I can add popup layers to them and links. I simply export it, and Xara Designer Pro 7 produces a HTML page in seconds containing exactly what I need in the CMS system.
At a later state when I need to document the use of the website I can create a manual with working buttons inside it, the same buttons as I just used on the website. I can even export the pages to PDF, giving the customer both an offline manual (PDF) and a full featured HTML website with the documentation.
I have collected some of the features on two webpages. They of cause have been created in Xara Designer Pro 7!
Xara Designer Pro 7 has been packed with a lot of enhancements to the way that you use the program. Many of them relate to the program trying to a more “mainstream” Windows 7 application. For instance the tabbed document windows and the fly-out and docking option for the gallery system. Those enhancements are nice to new users but for me not essential, because I know my way around the application with or without such standard windows 7 UI.
Xara Designer Pro 7 offers new paste options allowing you to paste different properties to objects. If you for instance need one object to have same size as another you simply select the first object which is placed where you want to position both object, press Ctll+C. Now a lot of information from that object is on the clipboard and you can select any other to copy various properties from it onto other objects. In this case, the position. Some of the many paste options which Xara Designer Pro 7 now offers are:
Another great enhancement is the ability to edit groups in a separate window, allowing you to focus on the elements in the group. You simply double click on the group and a new “inside editing window” is opened. I like that feature.
Some of the existing functions have been arranged differently or made easier/quickly to access. For instance the alignment function can now be accessed directly by right clicking on your mouse. Small changes, but I guess that it all adds to Xara Designer Pro 7 being even faster to use.
Live copies – you can have objects where changes to the properties of each copy will apply to all the live copies of the element. Size, rotation, opacity and other properties however will be local to each copy. An interesting new feature which I for one am looking forward to use.
Magic snap – visual help and snapping when aligning objects allows you to create good looking designs much easier. Take a look at this example:
The alignment of the text above was easily done, as Xara Designer Pro 7 showed lines indicating where I could align two objects. This makes a design better in balance. What the illustration also shows is that I add a mouse over effect with a popup layer fading in. Xara Designer Pro 7 can save anything which you produce as webpages and in the HTML you can easily add things like mouse over, links, menus, and popups. Xara Designer Pro 7 has added transition effects and other nice things.
Photo magic erase allows you to easily remove elements of a photo in a way which makes look like the element was never there. This is an example of the pixel related editing of Xara Designer Pro 7. It appears to work like similar features in other pixel based application like for instance Adobe Photoshop, but actually it is not working on the original image and you can work with it as if it was vector based changes.
As you can see below the way that Xara Designer Pro 7 created the magic erase effect was in fact to slice out part of the photo and fill it with pixels making the element disappear. I have selected the slice, added a glow shadow (which can be added to any element in Xara Designer Pro 7! and is editable at any time) and applied opacity. You can then see through the sliced element and the diapered part of the original picture is again visible.
Many other things have been added especially to the HTML part of Xara Designer Pro 7. I suggest that you see the videos and press F1 (Yes, windows help – it’s okay to use it!). Locate the “What’s new in Xara Designer Pro 7?” and spend some time reading it and seeing the examples. I simply could not find the time here to mention all of them. But a short list of new features I can offer:
If you have not tried previous versions of Xara Designer Pro you have a lot to look forward to! Of cause there will be a learning curve, but just visit some of the many online resources – I have listed some of them below. Actually this is one of the areas where I find that Xara is taking good care of its customers – take this statement for instance:
From e-mail: “Information about Xara Designer Pro 7” which you receive when you have registered your Xara product.
“Don’t miss the intro movies on our website (or click the Movies option in the Help menu). There are over 100 movies covering features and techniques and they are a great place to start learning about Designer Pro.”
Do not hesitate to ask “stupid” questions on the various talkgraphics.com forums – we were all beginners at one time
Open and take a look at all the examples included in the gallery:
An example is this extreme drawing, all vectors:
Remember that any drawing you do can contain pages, layers, objects which can all be exported to various formats, including complete HTML pages, PDF files, Adobe PSD files, SVG. You can publish directly to an FTP site. You have unlimited undo/redo, auto save (backup). The undo/redo history is saved together with your document. Xara is extremely good at packing its files – I have tried to load a JPEG (from Adobe) into Xara Designer Pro and save it, leading to file size much smaller than the original JPEG file!
You also get a lot of “free” fonts and clipart, website templates and ready-to-use elements like buttons and navigation elements. Xara supports many color modes, from HEX to CMYK and Pantone. You can create serious print related output including color separation handling. You can easily use Xara Design Pro 7 as a DTP program! The advanced way you can let text flow from textboxes to textboxes and around object is so cool. And yes it works fine if you export your work into a webpage! Xara produces valid HTML and will not change your text into graphics! Oh and for us website developers: Ctrl+Shift+L will give you instant Lorem Ipsum text I love it!
I know it’s nerded: but build in Lorem Ipsum is a feature well worth mentions:
Ad veniam ad minim aliquip, voluptate cupidatat. Sint ex velit in. Sunt enim pariatur sit non, dolore, ut occaecat consequat non ad non aute ullamco sed aute excepteur. Enim dolore exercitation ex nisi cupidatat culpa.
Navigation bar builder making it very easy to construct navigations bars:
Two panorama creating tools – the build simple and the advanced Magix PanoramaStudio 2. Here is a simple example from Aarhus, Denmark. Only 4 images were used.
The Magix PanoramaStudio 2 can even generate an interactive panorama using Flash and HTML. The above view can be seen online here: Aarhus, Denmark
I could go on… But visit the links below to see good tutorials!
With the release of Xara Designer Pro 7 the world’s best one-in-one graphic package have just gotten closer to being perfect! As we all know nothing is perfect, so I can’t call it perfect. There is still room for improvements, but the history tells that Xara is listening to its users, and follow trends in the world surrounding the Xara world. With internet being a very powerful media to communicate and emerging technologies like the CANVAS element of HTML5 and the powerful features of CSS3, my guess is that Xara Designer Pro 8 when it comes will be much more focused on bringing content to the new taking into account things like CSS3 based gradients, round corners, custom fonts and transitions. The current version Xara Designer Pro 7 have put a lot of effort into this, and to Xara Designer Pro 7 super users who understand this application and all it offers like Wizards for internet the sky is the limit.
Every time – actually ever since my first version of Xara Designer called Artworks – I have shown people this application to my friends they have been blown away and impressed by its abilities, features, ease of use and speed. Nothing has changed there in Xara Designer Pro 7 – everything has just gotten even more smart and nice to use!
I think that Xara Designer Pro 7 deserves even more attention, and I would like to end where I started: I hope that Xara Designer Pro 7 like the ARM chip will get the deserved success in the years to come! I am looking forward to seeing the Xara Designer Pro run on an ARM based Windows 8, bringing the old palls together again!
I have coded a simpel jQuery addIn/plug-in 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’).reflectStatusOn(‘#Arsenal, #Chelsea, #Fulham, #QPR, #TottenhamHotspur’);
You may download and see example of use on my code area:
http://code.netsi.dk/jquery.reflectStatusOn/default.html
Many times I have tried to implement cool jQuery plug-ins and many times I have read the descriptions about all the options and settings for each and every plug-in. 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. “jquery.plugInReflector” plug-in is the outcome of these thoughts.
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% novice, but the plug-in with examples will be available out there.
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 image 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 website 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):
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).
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 ideas for improvements here are some:
This will make it possibel to save and use the new settings on the plug-in reflected on.
This will make it possibel for you to play-around and instantly see changes to the plug-in relected upon.
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…
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.
If you are working with Visual Studio 2010 and do frontend development using jQuery, you can find a very usefull package of 131 jQuery code Snippets!
You can find them here:
http://jquerysnippets.codeplex.com/documentation?referringTitle=Home
Sometimes I have wondered just what the h**l they were thinking over at Microsoft: their flagship development tool just didn’t perform and deliver what you would expect from a tool of that caliber. That was before the Microsoft Visual Studio 2010 (VS 2010)! I will try to write about features in VS 2010 which makes me happy as a frontend web developer, hoping that you will gain something from it – and please do comment and share your experiences.
I have during my 15 years career as web developer tried various development tools, and have touched the “backend” development side of web applications also. It seems that many rich development tools focus on the heavier backend development part of web application development with things like intellisense, snippets and so on. I have often wondered: Why should it be so difficult and not possible – especially in VS – to automate things, processes which is done many times every day? Rich development tools RDTs should support the “web craftsmen” trying to produce quality work. In real life “real” tools for craftsmen like a carpenter have evolved. Quality tools make the fundament for quality work! Anyway, we might just have got a piece of quality tool in VS 2010!
In this part I focus on javascript in VS 2010.
jQuery embedded from local “standard” API javascript file.
It is near perfect now! The intellisense engine in VS 2010 seems to “think” nearly perfect. Say you want to use jQuery. If you include your jQuery API using a local version, you will get basic intellisense – that is objects inside the jQuery API will appear as you start typing. You will get relevant methods shown together with basic information about which parameters you can use. Okay, but it gets better!
jQuery embedded from Microsoft at: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Using the MS CDN to get even a minified version of jQuery, you still get extensive intellisence!
Note:
After you have added any external script file you can update the javascript intellisense using[Shift]+[Ctrl]+J. For big APIs like jQuery this might take perhaps 20 seconds.
Extra jQuery plug-ins added will also get intellisense, as expected, but also at the correct place
below you can see that I have added a script reference to the jQuery Cycle plug-in for jQuery. The “cycle” method now exists after I have used a jQuery selector $(‘#test’). The description of the method “cycle” however is not very useful – but that is because that the jquery.cycle.all.min.js file does not contain JavaScript documentation (more about that later).
If you think about it – VS 2010 is quit smart! It scans the cycle plug-in and sees that it extends the jQuery API. That is how it can figure out – I guess – that the cycle method fits in as a method on a found elements of the “$” (or jQuery) method. Nice feature!
Automatic dropdown file list when adding HTML code like “script”. Previously you had to click the “Pick URL…” and then point to the file which you wanted to use in your HTML document. Now you simply click on the file, if it is located at the same place as the current document. Nice.
”
I have written about snippets in Visual Studio in a previous post: Find Visual Studio Snippets ready for download on my DropBox folder, but it is first in VS 2010 that it is actually possible to execute snippets in HTML mode! (Why, why, why?). Anyway you can now! And VS 2010 comes with a few snippets installed.
Snippet types “Surround with” and “Insert snippet”
If you do not know how to activate them try the “surround with snippet” by pressing [Ctrl]-K, [Ctrl]-S. By doing that you get the chance to automate things like creating a JavaScript function using just two keyboard clicks and a mouse click. The Insert snippet can be archived using [Ctrl]-K, [Ctrl]-X. And remember: You can always create your own!
Just discovered that in fact Microsoft has not made it possibel to use snippets within CSS… Why, why, why???
Say you define a string “effect” and assign it a string value. This will make VS 2010 execute the assignment and then “guess” that your variable is of the type String. So at a late point in your code you try to use the variable, the suggestions given by intellisense will be relevant to that type (string). Look at the example below. To the left a variable “effect” and to the right an “int”, the suggestions are not the same. Smart! and you can do some pretty nice things when your code is dynamically executed – try visiting the JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog and have a look at those examples.
Now there is no excuse why you do not document your JavaScript code! VS 2010 offers easy documentation using snippets and XML comments! It is so easy, simply press [Ctrl]+K, [Ctrl]+X, choose “XML Comments” and what type of comment you want to insert. After having done and (of cause) filling out the marked fields, your code will be providing intellisense and suggestions when other people use it! Cool!
You can see below a simple function called “myhide”, The 3 lines below the function have been inserted using the above mentioned XML comments snippet. I defined a summary, a return definition and a param description. Voila! My function now has intellisense and build in help – which will without doubt be useful for me and others at a later state. You can make this part quit advanced with references to documentation files, assemblies and more.
[Ctrl]while rolling the wheel of you mouse up and down. Guess that woud be nice for elderly people like me 
Today I came across a JSON file, hmm… I love the opportunities that JSON gives you as a developer, but it is very compressed and not especially human friendly. Unlike XML, which on the other hand calls for a lot of coding inside a program to convert it into anything other that just data. JSON can contain actual code, functions, objects and ofcause data.
I then googled for JSON viewer and found a very cool tool! “JSON viewer” at codeplex.com. It comes in three variants:
I will not go any further into how to install it, I believe that the readme.txt inside the ZIP file should explain that part. And how to use it – well, try downloading this JSON: http://www.netsi.dk/wordpress/wp-content/uploads/2010/05/exampleJSON.js and play around with it!
The javascript API jQuery is a very powerfull libray which have revolutionised the use of clientside javascript in browsers. Along the side of jQuery exists jQuery UI a library of strongly customizable widgets. It offers a wide range of "easy-to-implement" widgets for your website. I will try in this post to implement a datepicker and conclude in the end if it is easy!
Read the article and post your comments here on this page.