Helping ordinary people create extraordinary websites!
 
Blog Feed

Posts Tagged ‘JavaScript’




Create a Custom Firefox Search Tool in Five Minutes

in General by JonGos


site:yourblogname.com searchterm

This is an example how to search your blog as a query in Google. But have you ever wanted to learn how to make your own ‘Search Tools’ for Firefox so that you can look-up information on your own blog quickly, from anywhere on the internet? Or do you want to hack Google Custom search to improve your earnings and it’s functionality?

(more…)





What is sIFR?

in Design, JavaScript, Web by JonGos


There’s a buzz spreading through the web design community like a virus. It’s called sIFR (Scalable Inman Flash Replacement). What is sIFR? Essentially, it’s a technology that replaces short passages of plain browser text with text rendered in the typeface of your choice, regardless of whether or not your users have that font installed on their systems.

It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

(more…)





Designing and Coding a Wordpress Theme From Scratch (Part 5)



Image heavy websites have one problem: load time. So if you’re designing a Wordpress theme that relies heavily on images like one made in Photoshop, you want to do everything you can to increase speed. a) You want the images to display as shortly after the text does as possible and b) you want to do everything to help users on slower connections.

One way to do this is with javascript, the other way is with CSS.

(more…)





Understanding Scripting in Photoshop

in JavaScript, Photoshop by JonGos


Whether you want to automate tedious tasks, customize commands, or add new features, scripting takes the world of Photoshop to another level. In this tutorial I’ll make you aware of what scripts are capable, where to find them, how to edit them and how to use them. Eventually I’ll follow up with how to make your own scripts but for now that’s a topic for another day.

If you use Photoshop on a daily basis you’ve probably found yourself doing the same tasks over and over again and it would be nice to have the ability to automate those things to save yourself some time, right? Well scripts make that just a tad bit easier.

First things first, to speed up your understanding of scripting, you should probably download some existing scripts from the various repositories and websites that offer them. Here’s a list of places that offer free Adobe scripts for Photoshop and other Adobe products.

Adobe Exchange Repository

Ps-Scripts

Graphicsoft

You may have noticed that some of these sites offer ‘Actions’ as well and you might be asking yourself, how does an ‘action’ differ from a ’script’? Actions (in Photoshop) are a means to record all commands used to generate an effect in Photoshop for the purpose of re-application later. Many people say that scripts are similar to actions because they can both be used to automate tasks, but scripts can do so much more then what was possible with actions. For starters scripts have conditional logic which makes it possible to automate different outcomes based on various inputs. Essentially scripting Photoshop is programming and thus it uses various programming languages for results.

So what can you do with scripts? A few examples are using Photoshop to snatch frame grabs from a video source, turning a photo into a rainy day or to turn RGB values in an image into swatches automatically.

For the purposes of this tutorial I’ll only deal with JavaScript since it is platform independent (Mac and Windows). Also available are Visual Basic (Windows) and AppleScript (Mac) commands.

Adding and Using Scripts

  • After downloading scripts you’ll need to install by navigating to Applications >> Adobe Photoshop CS2 >> Presets >> Scripts.
  • Drop your file into the ‘Scripts’ folder and launch (or relaunch) Photoshop.
  • Open your image in Photoshop.
  • Select File > Scripts and select the script you wish to use.
  • A dialog window may pop open asking if you want to apply the script. Click ‘yes’.

Bam you’re done. Scripting is really that easy. Now for the harder part.

Writing or Editing Scripts

Regardless of whether you install a single CS3 application or the entire Creative Suite, two other applications are installed by default: Adobe Bridge and the ExtendScript Toolkit. The ExtendScript Toolkit is a coding environment that aims to allow you to add new features to Adobe products through scripting.

  • Find the ExtendScript Toolkit. Go to Applications >> Utilities >> Adobe Utilities >> ExtendScript Toolkit2. In some rare cases this may not have been installed or deleted. No worries, the toolkit can be downloaded for Macs here and PCs here.
  • You’ll see a window with Photoshop-like palettes on the left and a text editor on the right.
  • Choose File > New JavaScript. This will create a blank file with an area on the right ready for you to type. If you’re editing a script, instead of creating a new file you would simply open that script instead.
  • Understanding the window in front of you is critical. First, the ‘Select Target Application’ option tells ExtendScript which application you are writing the script for. In the top left dropdown menu select Adobe Photoshop CS2 or 3 (depending on your version). When asked if you want to start the application, choose ‘yes’.
  • If you aren’t familiar with scripting or you’d like a reference guide, download the Photoshop JavaScript Reference Guide.

This concludes our tutorial. Stay tuned to this column because in a future lesson I’ll help you go beyond these steps to actually writing and creating your own scripts from scratch.





Yahoo! UI File Uploader Library

in JavaScript, Web by Omi Azad


The web developers who use Flickr always dream about a file uploader on their site like Flickr, which will upload multiple files together and show the upload status simultaneously. One of my developer friend told me that the feature will be added on PHP6 where a multithread data transfer and file uploaded data status on server will happen simultaneously. In that case when user will upload a file through a PHP6 script, a file upload status can be displayed at the same time.

But Developers doesn’t need to wait for PHP6 for this feature because YUI JavaScript Framework 2.51 added this Flickr like file upload feature (though it’s experimental inclusion).

Let’s have a look at the component’s features-

  1. Multiple file selection in a single “Open File” dialog.
  2. File extension filters to facilitate the user’s selection.
  3. Progress tracking for file uploads.
  4. A range of file metadata: filename, size, date created, date modified, and author.
  5. A set of events dispatched on various aspects of the file upload process: file selection, upload progress, upload completion, etc.
  6. Inclusion of additional data in the file upload POST request.
  7. Faster file upload on broadband connections due to the modified SEND buffer size.
  8. Same-page server response upon completion of the file upload.

Beside JavaScript and Cookie support, the users also need Adobe Flash Player support in their browser to use the feature.

YUI Home Page: http://developer.yahoo.com/yui/





jQuery: Interaction Design for PHP Developers

in JavaScript, PHP, Web by Akash Mehta


It doesn’t advertise itself as such, but the jQuery JS framework is quite possibly one of the best JS frameworks for PHP developers. Most of the frameworks out there are designed for developers with JavaScript experience, and understandibly so. But when I first started using jQuery, my JavaScript experience was something along the lines of “take the dollar symbol out and your PHP is magically syntactically valid JS”. (Pitiful, I know.)

The main advantage of jQuery for us PHP developers is that it utilises our existing knowledge. When PHP code brings you closer to the HTML and other UI needs – CSS, for instance, – jQuery leverages that knowledge. It takes a little while to get used to functional programming, of course, but with CSS selectors, basic method chaining, and an approach to event handling that just works, jQuery is an ideal framework for PHP developers getting started with JavaScript interaction design.

So, next time you’re looking to get your hands dirty with DOM, DHTML and AJAX, head over to jQuery.com and give it a go.







GET OUR NEWSLETTERS