Here at SOTC we have been working with Drupal as of late where we are working on updating our site. One of things that I couldn’t find a whole lot of documentation on it is getting simple basic Javascript stuff working in Drupal 6. So to get people moving in the correct direction I decided to throw out a small tutorial on this, especially since Drupal 6 has built in support for jQuery, a Javascript library - which should make adding fancy stuff pretty easy. Read More »

We’ve written several different tutorials about sliding panels, and each time we get requests for different features and functionality. The first feature I addressed was starting the panels in an up position and having them slide down. Lately we’ve been getting comments about how to put the panels inline with the rest of the content. That is, when the panel expands or contracts, the rest of the page moves with them. That’s what this tutorial will address today. Read More »

Sometimes, user interfaces can be really constraining. A whole lot of stuff to do, and not nearly enough pixels to do it in. In regular desktop applications, in is extremely common to put useful and repetitive items in a context menu, to keep them from cluttering up the screen. However, it is generally frowned upon to put context menus on a web page - because then they will interfere with the browser’s normal context menu. But, as always, there are special cases - for instance, Google Maps has its own context menu, and it seems to work pretty well.

Read More »

There’s lots of times when you might want to ask a user a simple yes or no question, or ask for some text input. In this tutorial, I’m going to demonstrate how to use the confirm and prompt functions in javascript to get feedback from your users. Read More »

So, we now have a pretty common appearance of Web 2.0 across the world, but what exactly is Web 2.0? Really there are not set definitions or rules behind Web 2.0, it is just a way of describing a new set of technologies that have recreated the web. One of the more exciting and cool technologies is asynchronous server communication, sometimes referred as AJAX. With AJAX you don’t need to refresh a page to get information from the server. You can call server pages and get the response, all with Javascript. In this tutorial I will show you the most basic way to get a response from a PHP script. Read More »

There are all sorts of fun things that you can do in javascript and html once you have a basic drag infrastructure working - and in fact we have covered a whole bunch of these possibilities here at Switch on the Code. Today we are going to take a look at another one - using a container as a sort of ‘window’ on a larger object. Almost every mapping website makes use of this technique, and Google Maps probably does it best - you only have so much space on the screen to look at the map, but you can grab and drag around the map inside of its container to view different areas.

Read More »

So a long while ago (last November), we posted some tutorials on how to create a resizeable textbox (Part 1, Part 2, and Part 3). We even did a post on how you could integrate the new textbox into Wordpress. Well, I got a request recently to expand the resizeable textbox code so that it could be a resizeable container for anything on a web page. So the result of that request is what we are going to be taking a look at today.

Read More »

I know we’ve done sliding panels in the past - in fact we’ve done it twice (here and here), but one comment that appeared a couple of times was the desire to start the panels in the up position. In this tutorial, I’m going to demonstrate how to create a simple sliding panel that starts in the up position and slides down when the user clicks a header above the panel. Read More »

Woah there, what’s this! A Javascript tutorial!? Yes, I know its been a while since a Javascript tutorial graced the pages of Switch On The Code - but what can I say? I kind of got bored with writing them. And so, after a few month hiatus (and a couple fresh ideas for tutorials), they are back. Read More »

Woohoo fading! Everyone loves fading in and out, it is an excellent way to transition between two segments of an application (unless the fade takes too long, and then it just gets annoying). Today we are going to look at a simple and robust way of creating a fade in or fade out effect using javascript and the simple css ‘opacity’ element. Read More »

A couple days ago, we took a look at how to write variable argument functions in C# using the params keyword. In that article, I mentioned that you can also write variable arity functions in javascript, but I didn’t go into any detail as to how to do that. Well, now we are about to rectify that situation. Read More »

I know, I know, you are all saying “resizeable textboxes again!?” - but don’t worry, we got some new stuff to throw out there today. So we initially covered resizeable textboxes in this post, and did a follow up just last week in this post. But one of the other guys here at Switch On The Code said that while the resizeable textbox was relatively easy to use and insert, it wasn’t easy enough. “Make it as easy as adding Google Adsense” he said. And so I poked and prodded and redid how you add resizeable textboxes to a page. Read More »

A few weeks ago, we posted a tutorial on how to make a Resizeable Textbox. It was a pretty rough example - it just showed off the raw code that made it work, and the example was pretty ugly. Well, the example ended up being quite popular (for reasons beyond our comprehension), so we decided to take another pass at the code. So this post is about our new resizeable textbox control - much easier to use, more self-contained, and a whole lot prettier. Oh, and we got rid of a couple bugs too. Read More »

So in Monday’s post (about the Spin Control), I briefly mentioned using the mouse scroll wheel in javascript. Actually, what I really said was that you could use the scroll wheel with the spin control, and it would increment/decrement the spin control value as you moved the wheel. But I didn’t go into any details at all as to how you can actually do this. Well, today, we are going to take a look at how to get scroll wheel information in javascript. Read More »

Today we have a new little javascript ui control to talk about - although the only thing little about it is its actual size on the page. It is a fully featured spin control, or, as some people call it, a numeric up-down control. We have been doing a number of tutorials on javascript user interface elements, and as you may have noticed, they can get quite long. So we thought it was time to take a different tact - where we package up the component as much as possible and instead of spending so much time on how it works, we will spend more time on how to use it. Don’t worry though, we will still go into detail on parts of the code that we think are interesting or complex. Read More »

So continuing on our current kick of making random UI components in javascript and html, today we are going to look at making a trackbar. The look and functionality is based off of the Windows common controls trackbar - although it is missing some of the features (such as tickmarks). Perhaps I’ll add those in a future tutorial. As a side note, this tutorial uses a chunk of code developed in a previous tutorial, Draggable Elements. If you have not read that tutorial previously, you should take a look at it. Read More »

A UI component common in many applications (and starting to become common on the web as well) is the accordion menu. A number of javascript libraries provide accordion menus, but today we are going to take a look at how to build our own - because that is what we do here at Switch On The Code! Read More »

Today we are going to take a look at another little nugget that many javascript libraries have these days - a drag and drop reorderable list. As usual, what we will be presenting is not a packaged solution that you should just pick up and drop on your own site (although you probably can) - it is more of an exploration on how you would go about implementing your own drag & drop list. Read More »

So something that seems to be popping up a bunch on various sites lately is the resizeable textbox. Some are implemented with a resize handle on the corner, others let you drag any of the sides. I thought they were kind of cool, so I sat down to see how hard it would be to write. And, surprisingly enough, it is actually pretty easy. So today I’m going to walk through some resizeable textbox code. It is not very pretty, either code-wise or look-wise, but it does get the job done. Read More »

Here at Switch On The Code, we’ve written several Javascript tutorials, but we didn’t realize that some of our readers might not have much experience combining HTML and Javascript into a working page. This tutorial is going remedy that. We’re going to start from the very beginning and show you how to get your Javascript and HTML to work together. Read More »

It is time again for more javascript animation! We have talked about animation in javascript multiple times before, starting with Sliding Panels, and then advancing to more complex capabilities in Generic Animation. This time we are taking the ideas in the previous Generic Animation tutorial and expanding on them in pretty much every way possible. Read More »

So we have done a number of tutorials here before that deal with javascript objects in some way, most notably Javascript Objects: A Useful Example, Using setInterval and setTimeout, and just this week Fun Object Syntax. Throughout all these you may have noticed that the this keyword can often have downright funky behavior. Today, we are going to take a look at exactly what this behavior is, and why it works this way. Read More »

So, you may have noticed that here at Switch On The Code, we like to use objects a lot in our javascript code. This is because, well, they are just so flexible and useful in javascript - there have been many times in other languages that I wished objects acted like they do in javascript. Here today we are going to give you two more reasons to like javascript objects - and these are the javascript for and with statements. Read More »

In javascript, the two functions setInterval and setTimeout and be extremely useful and important, but using either of them in complex ways can be a confusing ordeal. In this tutorial, I’m going to try and show the range of possibilities, from the very simple, to the complex, to the ‘why oh why is it working like this!?’. Read More »

Today, we are going to take a look at how to create an interactive color picker using javascript, css, and html. There are a number of color picker packages out there on the web, but there isn’t nearly as much on how to write one yourself and the mechanics behind how it works. Hopefully, after reading this article, you would be able to go off and write one yourself. This tutorial builds on a number of other javascript articles on this site, including Javascript Objects - A Useful Example (which covers some basics about how objects work in javascript - and we will be using the color object created in that tutorial), Javascript - Working With Events (which covers how to work with events and event objects), and Javascript - Draggable Elements (which covers how to do dragging in javascript). So, if you are relatively new to javascript, I would suggest at least skimming those before you continue. Read More »

If Flex can communicate with Javascript and Silverlight can communicate with Javascript, it seems like there should be some sort of transitive rule that let’s Flex communicate with Silverlight. Well there is, and this tutorial is going to show you how to use Javascript to communicate directly between a Flex application and a Silverlight application. Read More »

Draggable elements in javascript have been done hundreds of times before - from tutorials to packages to hacked up half working code files. But, hey, I have decided to throw my two cents in anyway - because we all know you wanted yet another option for dragging in javascript, right? Joking aside, what will will cover today are the detailed inner workings of a homegrown solution to draggable elements. Depending on your level of javascript knowledge, you might want to read two previous tutorials on this site: Javascript Objects - A Useful Example (which covers some basics about how objects work in javascript), and Javascript - Working With Events (which covers how to work with events and event objects). The techniques (And some of the code) from both of those articles will be used in this tutorial. Read More »

Silverlight is a relatively new client side technology released by Microsoft, but already people are finding the need to communicate between their Silverlight applications and Javascript. This tutorial will go through all the code required to call Javascript functions from Silverlight and vice-versa. Read More »

Events are, arguably, the most important part of how javascript and the DOM work together. Without events, there would be no user interactions with web pages - they would just be static. Now, pretty much everyone who has written a web page knows how do do simple eventing in javascript (and if you don’t, there is an example right below) - but what about more complex situations? Such as attaching more than one callback to an event, or removing a callback from an event? That, and some wrapper functions that allow us to do this in a cross-browser compatible way, are what we will be covering today. Read More »

In this tutorial, we’re going to combine the original tutorial on Sliding Panels with our new tutorial on Generic Animation. Using our generic animation code, making sliding panels becomes much easier. Read More »

Today, we are going to take a look at how to work with simple (and not so simple) javascript objects. The javascript object is a very misunderstood beast - quite often people don’t even know that javascript has objects. And of the people who do know about them, many think that it is a stripped down and weak object system, and so never bother to actually use it when writing any javascript. But actually the opposite of that is true - the javascript object model is extremely flexible, and allows you as the programmer to do things that can’t be done without extreme contortions in languages like C++ and C#. Today, we will only scratch the surface of that flexibility, but it should give you ideas about how to use javascript objects in your own web applications. Read More »

We have talked about animation in javascript before (notably Sliding Panels), but here we are going to take the concept one step further. This tutorial is about writing a generic animation function - a function which, given an html element, can move and resize that element over a given time period. So, for instance, you could use this function to get sliding panel functionality, or to move some text around on the screen, or pretty much any dynamic movement that you would want to do to a single element on a webpage. Read More »

Everybody loves the Web 2.0 style of no page loads and seamless transitions (almost everybody). But there are some security limitations placed on the xmlhttp callback objects that make life a little difficult sometimes. For instance, if your page originated on the server http://blog.paranoidferret.com/, you are only allowed to use the xmlhttp request object to request data from http://blog.paranoidferret.com/. If you try and request data from https://blog.paranoidferret.com/, the request will throw an exception and you’ll get nowhere. Read More »

Now that we have gone over Flex and PHP its time to get some client side interaction going on with Javascript. This tutorial will show you how to call javascript functions from flex and flex functions from javascript. There is a really nice example of the use of this on Google Finance, as well as a number of other google sites. Read More »

A classic user interface design element is the tabbed panel - in fact the browser you are using right now probably uses tabs. There are many styles and designs for tabbed panels on web pages as well, but tend to be static. Here, we are going to create a tabbed panel using javascript that you can add tabs to on the fly. Read More »

This tutorial will demonstrate how to add ellipsis (…) to text when it exceeds a desired length using Javascript. Read More »

This tutorial provides a step-by-step guide to creating sliding panels (like the one on the left) using nothing but Javascript and CSS. We used these panels on Gaming Textures so the user could hide parts of the page when they weren’t being used. Read More »