Archive for the ‘Ajax – Javascript’ Category

Flash CS6 goes HTML5

Friday, April 27th, 2012

Hi,

As predicted, Flash has now gone HTML5 – yes, you can now export your Flash work to HTML5 using the new Flash CS6.

I haven’t had a chance to look at it, so I have no comment with regards to how well it works. Nonetheless, this is more evidence that HTML5 is going to be huge in the future of web design and web development – if it isn’t already!

Flash CS6 basically uses the CreateJS open source framework, to output animations in Flash. I don’t know how powerful this conversion process is yet … we will soon see how complex the Flash projects can be and still be able to output them via HTML5.

Whatever the case, you should still be learning HTML5 and JavaScript.

I created a video blog on this:

Stefan Mischook

Beginners Javascript Video Tutorial

Saturday, October 10th, 2009

beginner-javascript

Hi,

Today, the Web is a much more sophisticated place (dynamic shopping carts, blogs, DOM scripting, Ajax etc) … a Web that requires much more sophisticated web designers. To be a competitive and modern web designer these days, you have to learn more than just HTML and CSS .

The ‘foundation’ languages of web design today are:

1. HTML
2. CSS
3. Javascript
4. PHP

You don’t have to become a full-fledged nerd coder but you should at least understand the basic concepts and be able to read and write basic scripts. This way, when a client or your boss comes to you with some shopping cart script that he wants you to install … you wont be freaking out because you don’t understand a thing.

So in keeping with my goal of training you guys and girls up, I just wanted to announce my latest video tutorial; a course on Javascript: Beginners Javascript.

… OK, not the most exciting title, but the video tutorials are perfect for people new to programming. Some details:

Beginners Javascript is designed to teach total beginners Javascript programming. By the end of the 5 hrs of video training (over 39 individual videos) you will feel comfortable reading and writing usable Javascript code for everyday web tasks like spawning windows, validating forms and creating simple page effects.

The table of contents:

Introduction (10:09)
First Javascript (10:21)
What is a programming language (6:18)
Javascript event handlers part 1 (8:58)
Javascript event handlers part 2 (6:40)
Javascript event handlers part 3 (4:50)
Javascript errors part 1 (6:39)
Javascript errors part 2 (4:39)
Javascript variables part 1 (10:53)
Javascript variables part 2 (10:01)
Javascript execution (4:21)
Javascript functions part 1 (8:46)
Javascript functions part 2 (6:22)
Javascript functions part 3 (6:32)
Javascript functions part 4 (9:27)
if statements part 1 (7:33)
if statements part 2 (6:52)
if statements part 3 (8:55)
Javascript loops part 1 (8:25)
Javascript loops part 2 (5:58)
Javascript object; a birds eye view (8:31)
Javascript arrays part 1 (3:36)
Javascript arrays part 2 (7:44)
Javascript arrays part 3 (5:28)
Javascript functions cont. part 3 (8:13)
Javascript functions cont. part 4 (10:16)
Javascript functions cont. part 4-b (9:57)
Javascript functions cont. part 5 (9:18)
Introduction to the DOM part 1 (8:31)
Introduction to the DOM part 2 (3:37)
Javascript forms part 1 (14:50)
Javascript forms part 2 (15:10)
Javascript forms part 3 (6:58)
Javascript forms part 4 (8:51)
Creating a toggle menu part 1 (6:59)
Creating a toggle menu part 2 (10:39)
Linking to external Javascript files (5:46)
Spawning windows with Javascript (9:24)
Javascript frameworks, conclusion to course (4:24)

That’s it for now.

Stefan Mischook
www.killersites.com

Introduction to the Javascript DOM

Sunday, September 20th, 2009

Hi,

The DOM is short for: Document Object Model. This is basically a virtual map of the currently loaded web page. You can use this map along with the help of Javascript, to travel about your web page and do things like:

  • Insert tags
  • Remove tags
  • Insert text

… And a whole lot more.

The DOM is the key to all those cool Javascript and Ajax affects that we now see all over the Web. Check out my new video that introduces you to the DOM and I also teach you an exercise I came up with to help you better understand the DOM:

You can find the entire Javascript beginners course at killerjavascript.com.

Thanks for watching.

Stefan Mischook

www.killersites.com

Javascript Object Hierarchy Video Tutorial.

Monday, September 7th, 2009

Hi,

In this video I introduce you to two things:

1. Basic object oriented concepts.
2. The Javascript object hierarchy.

The goal of this video is to give you a birds eye view of Javascript, to hopefully make it easier to understand how to use this language in later videos.

This video is from my very soon to be released Javascript basics video tutorial course.

Thanks,

Stefan Mischook
www.killersites.com

New jQuery Video Tutorials

Friday, September 4th, 2009

Screen shot 2009-09-04 at 1.39.34 PM

Hi,

I just released and brand new course on the Javascript framework called jQuery. JQuery is a very popular Javascript library that many web designers will find themselves working with.

You can find about 40 minutes of free videos from the course here:

www.killerjavascript.com/beginners-jquery/

Thanks,

Stefan Mischook
www.killersites.com

New Beginners Javascript Video Tutorials

Saturday, April 11th, 2009

Hi,

I just wanted to make a quick announcement: I’ve released about 40 minutes of new video tutorials on beginners Javascript. Check out my new micro-site:

www.killerjavascript.com

This is a ‘sneak peak’ of a new video tutorial course that targets total beginners to Javascript and programming in general. If you want to learn Javascript, I think these videos will be helpful.

Let me know what you think.

Stefan Mischook

www.killersites.com

Ajax vs Flash Podcast

Tuesday, August 26th, 2008

Hi,

I just released a podcast where discuss the differences between Ajax and Flash.

You can read more about it in the killersites.com Magazine.

Ajax Video Tutorials

Wednesday, January 23rd, 2008

Hi,

I just wanted to announce that I am now giving away a series of video lectures on Ajax – about 3 hrs worth.

The Videos:

Ajax Videos

These videos are not designed to be a tutorial, but rather, they are a lecture. None the less, these videos can help give you at least a basic understanding of what Ajax is all about.

Anyway, they are free, so what do you have to loose!

;)

If you guys want a proper killersites style (simple, practical and to the point) video tutorial, please let me know.

Thanks,

Stefan Mischook

www.killersites.com
www.killerphp.com

Automatic Table Styling with Javascript.

Thursday, January 10th, 2008

A while back a wrote a JavaScript script that automatically styled an HTML table. In a nutshell, the script automatically changes the background color of every 2nd row in an HTML table.

Anyway, someone recently sent me an updated version of the script. You will probably want to read the original article before looking at these changes.

From the email:

I did some simplification on the code for zebrastripes. I don’t bother with the last array bit because TR elements have the bgColor attribute.

trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;

Greetings,

tarjei

The complete function:

function stripe_table(id_name) {

var my_table = document.getElementById(id_name);

/* For debugging */
if ( !my_table ) {
alert(“The ID ” + id_name + ” is not found.”);
return;
}

/* Table may have more than one tbody element */
var tbodies = my_table.getElementsByTagName(“tbody”);

for (var cnt = 0; cnt < tbodies.length; cnt++) {
var trs = tbodies[ cnt ].getElementsByTagName("tr");

/* Walk table row for row */
for (var i = 0; i < trs.length; i++) {
if (! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
trs[i].bgColor = ( i & 1 ) ? stripe_colour_even : stripe_colour_odd;
}
}
}
}
}

CIAO.

Stefan Mischook

Matching Columns Script – Update.

Saturday, February 17th, 2007

Hi,

I decided to create another blog post to make it easier to find the updated version of the important matching columns script – it was buried in the originals article’s comments.

Notes:

Updated script by: Jonathan del Mar

I have modified the script to work with multiple class groups also with elements with multiple class names

/*
Derived from a script by Alejandro Gervasio.
Modified to work in FireFox by Stefan Mischook for Killersites.com

Modified to work with multiple class groups also with elements with multiple class names
by Jonathan del Mar (dec-14-2006)

How it works: just apply the CSS class of ‘column’ to your pages’ main columns.

to work with different classes
add

var columns = new Array(’class_name1′, ‘class_name1′…);

by Jonathan del Mar

by default the script will call
matchColumns();
and the default class_name is ‘column’
(see the bottom of this script)
by Jonathan del Mar

*/
matchColumns=function(my_class){

var divs,contDivs,maxHeight,divHeight,d;

// get all elements in the document

divs=document.getElementsByTagName(’div’);

contDivs=[];

// initialize maximum height value
maxHeight=0;
if (!my_class) {
my_class = ‘column’;
}

my_regex = new RegExp(’(.* |^)’ + my_class + ‘( .*|$)’);

// iterate over all elements in the document

for(var i=0;i elements with class attribute ‘container’

//if(/\bcolumn\b/.test(divs[i].className)){
// modified by Jonathan del Mar to match ‘column’ in multiple classes

if(my_regex.test(divs[i].className)){
d=divs[i];

contDivs[contDivs.length]=d;

// determine height for element

if(d.offsetHeight){

divHeight=d.offsetHeight;

}

else if(d.style.pixelHeight){

divHeight=d.style.pixelHeight;

}

// calculate maximum height

maxHeight=Math.max(maxHeight,divHeight);

}

}

// assign maximum height value to all of container elements

for(var i=0;i
var columns = new Array(’class_name1′, ‘class_name2′, …);

to your html header.

Created By Stefan Mischook  |  Site Map  |  Top of page  go to top of page