• Basics,  JavaScript/Ajax

    JavaScript Basics Part 7: Loops

    Loops are used to execute the same statement of code a set number of times, which can be hardcoded or based on variable. Loops are very common within programming, as they solve the problem of having to write more code to do the same thing multiple times. There are two different types of loops: for and while loops, which both perform looping tasks but in different ways, suitable for different problems. for The for loop will run for a set number of times then stop. [js] var I = 0; for(I = 0; I < 5; i++) { Alert("My number"+ I); } [/js] If you had to write out a…

  • Basics,  JavaScript/Ajax

    JavaScript Basics Part 6: Conditionals

    Logic is a part of our everyday lives – it’s a very familiar concept, therefore one of the easiest to understand. We are faced with questions all the time, with the “If” question being the most common. If I go to sleep early, I will be able to get up early. If I take this job, I will make more money. If I go to school, I will learn JavaScript. Using JavaScript, you can answer all of these questions using conditional statements. Conditional statements allow you to setup the question or logic within your script, and if it is a true statement, then actions can be taken which are defined…

  • Basics,  JavaScript/Ajax

    JavaScript Basics Part 5: Arrays

    An array is a variable which can store many values inside it. A variable can only store one value. Those values can be accessed at any time using the array’s index. The values stored within the array are called the members. Creating an array To create an array, declare a variable to hold values of the array, and declare the new Array object. [js] var navArray = new Array(); [/js] Alternately, you can also use a shorthand version, which will achieve the same outcome, where you wont have to declare the new array object. [js] var navArray = []; [/js] Similar to variables, you can setup a new array and…

  • Basics,  JavaScript/Ajax

    JavaScript Basics Part 4: Variables

    Variables offer a way to store values of strings, numbers, and boolean data types, as well as being able to reuse at any point within your script. Declaring or creating variables is a common practice when writing any sort of script or program. I will setup variables to store different bits of data that I want to access multiple times. They allow you to create cleaner, more readable, and more organized code. There are two ways to use variables, the first is by just declaring a variable as show below: [js] var numClicks; [/js] You can also declare a variable and set a value to it. The “var” syntax is…

  • Basics,  JavaScript/Ajax

    JavaScript Basics Part 3: Strings

    A string is anything enclosed within quote marks – it can be made up of letters, numbers, and/or symbols. Strings will work with either single or double quotes. [js] “hello world”; ‘I have 5 pears’; [/js] When creating strings, there are often times when you will want to join one or more strings together. This is call concatenation, and is used by adding a “+” (plus sign) in between the strings you want to join together. [js] “hello” + “world”; [/js] Jake Rutterhttp://www.onerutter.com

  • Basics,  JavaScript/Ajax

    JavaScript Basics Part 2: Comments

    JavaScript comments are a way to keep your code clean and easy to read. Comments cannot be rendered because the browsers skip them. Most web designers are probably familiar with HTML comments, which are similar to JavaScript comments with the exception of the syntax. There are two types of comments that you can use in JavaScript: single and multiple line comments. Single line comments are created using two slashes “//” in front of the line of text. Multiple line comment blocks are created by wrapping the text with a slash and an asterisk “/*” and closing the comment block by adding an asterisk and a slash “*/”. In CSS, comments…

  • JavaScript/Ajax,  jQuery

    How to setup Bronto Tracking Pixels with JavaScript

    Recently at my job, I had to setup Bronto email tracking pixels on our order confirmation page. The tracking pixels came in the form of an image tag and had to be populated with some values from our shopping cart. The values (invoice number and order amount) are passed from the order confirmation page using hidden fields. [html] <input name="InvID" type="hidden" id="InvID" value="12345" /> <input name="Tot" type="hidden" id="Tot" value="69.9900" /> [/html] I then used JavaScript to extract the values in the hidden inputs and assigned them variables. [js] var InvoID = document.getElementById("InvID").value; var SubTotal = document.getElementById("Tot").value; [/js] Then, I used document.write to create an image tag on the fly with…

  • CSS/Web Standards,  JavaScript/Ajax,  jQuery

    jQuery Image Cloning Script

    I recently ran into an issue at work where we have been spending countless hours making 6 and 12 bottle shots by hand in Photoshop. We would take one bottle and copy/clone it over 6 or 12 times, then save and resize the image for the web. It became so repetitive that I created a little script that would do the same thing, but only using one image and some fancy jQuery. Here is my script: JavaScript and jQuery CSS to float the images left: HTML to display the images: See it in action: jQuery Bottle Clone Example Jake Rutterhttp://www.onerutter.com

  • JavaScript/Ajax,  jQuery,  Open Source,  Web

    JS Conf 2009

    Last weekend I attended JS Conf 2009 in Washington D.C. with a good friend of mine, we actually brought our wives too. The plan was to attend the conference while our wives saw the sites and toured the town. We couldnt have asked for better weather, all 3 days the temperatures were 80-90 and not a cloud in the sky. The JS Conference itself was pretty awesome, I have never been to a web conference before so I dont have much to compare it with. It was a small conference of about 150 people, but all the rockstars were there including John Resig, Jeff Haynie, and Richard D. Worth among…

  • CSS/Web Standards,  JavaScript/Ajax,  jQuery,  Open Source,  Web

    jQuery Highlight Navigation Menu v.01 Script

    A few months ago, I created a little script using the jQuery library which will add class=”current” to tabs, allowing you to highlight your menu for you users. Its pretty basic, but it searches the URL, if it finds a match with the link that was clicked – then it add’s class=”current” to that particular tab. You can then use that class in your css, to make a highlighted state. Here is the code: // Highlight Tab v.01 by Jake Rutter // Website: http://www.onerutter.com // Feel free to use and adapt, please just give credit where credit is due. // ----------- highlight tab function ----------- var path = location.pathname; var…