FlashBannerOnline » Javascript

Edit the CSS styles of an element in Javascript

Behrouz Pooladrag — Thu, 15 Oct 2009 05:30:59 +0000

I’ve actually started to learn the Internet beast JavaScript, and I think it’s about time I shared some knowledge I’ve gathered from problems I had when starting out.

The first of which is CSS styles. When starting out, one of the basic things I wanted to do was to change what the user sees dynamically. Not an easy task when there are few good examples online.

One of the first things you have to do is be able to find which element you want to change. For this you have to do a bit of “DOM” navigating, this scary thing is the Document Object Model, I don’t fully understand it yet myself, but from what little I do know, it reduces the HTML tags to objects. But that’s for another tutorial.

Here is an example basic HTML doc (with some inline JavaScript):



Untitled Document

OK, so we’ve got a table and a class of “CellClass” applied to the cells. Also we have a JS function that runs once the body of our page has loaded.

Now, let’s edit that with JS! (all code below will be placed where “// code to go here” is in our JavaScript)

First, lets get a reference to one of our cells:

document.getElementById('Cell01')

Then we browse through to the style:

document.getElementById('Cell01').style.backgroundColor = '#000000';

That’s it! Test your page in a browser and see your background colour change!

Please note that this does not effect the actual class, this simply applies a style that overrides the class.

If anybody knows a method of actually altering the CSS classes, I’m open to suggestions!

Simple JQuery Expandable Content Box

Behrouz Pooladrag — Thu, 15 Oct 2009 04:10:50 +0000

Just recently I have had to finally bite the bullet and learn some proper Javascript. Not just making text in input boxes disappear when the user clicks on them, I’m talking PROPER stuff like making boxes appear and disappear inside already existing content.

This tutorial is written for JQuery but do not think that I would recommend JQuery over other frameworks such as MooTools. I personally like using JQuery as the CSS style traversing of the DOM is more intuitive to me, however I would recommend that you take a look and try all you can, you may prefer the style used by the other frameworks. To me MooTools came across as horribly complicated hence this tutorial is for JQuery.

What does this tutorial do?

It shows you how to make a preloaded content box appear and disappear when the user clicks a “View More” link. If you want a better idea check the demo page I have created to go with this. It has the code included but I will also post it here. First off don’t forget to include the JQuery library, which you can download from the JQuery site.

THE HTML CODING



Simple JQuery Expanding Content






some content


Some extra content


View More

THE FINISHED CODE

$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
$(this).text("View Less");
$(this).attr("title", "View Less");
},function(){
$(this).parents("div").prev(".inner2").hide();
$(this).text("View More");
$(this).attr("title", "View More");
});

Now if you’ve not done any Javascript before this probably looks like it did to me a pile of strangeness! Honestly though it is simple enough to understand.

If you’re just reading this for the code and don’t want to understand then just copy and paste it and run away. That’s it go on you free loader! Ctrl+C, Ctrl+V and runnnnnnnnnn! Don’t leave a comment or anything nooooo just run away!

Sorry…

Ok, now to explain the code…if there’s anyone left.

First thing to explain is the very first line.

$(function(){
});

This is the same as typing

$(document).ready(function(){
//some javascript stuff here
});

If you don’t know the basics of JQuery this line ensures that the document is ready to be altered by your Javascript. There are reasons for this but I won’t be explaining them here. If you want to know why check the JQuery site, in particular the getting started tutorials.

As you can see by comparing the HTML and Javascript you should be able to spot that there is one containing box (class outer-box) are two boxes inside that container (classes inner1 and inner2), there is also one final div which contains the “View More” link. Your HTML does not need to resemble this but you will need to change any references to my classes and you may also have to alter some of the JQuery itself to make sure you are selecting the right divs.

After checking the document is ready to be used we hide the div containing the extra information which we want to show/hide.

$(".inner2").hide();

English translation:- Find something in the document with the class of inner2 and use the hide function with no parameters. This will remove it from view.

Once that is done I set up the event which fires off the code to show or hide the information.

$(".vm").toggle(function(){

},function(){

});

Right that looks a little more complicated than the last bit, lets check the English translation:-

If the user clicks anything with a class of vm (in this case our View More link) toggle between the next two functions. Now that sounds more reasonable doesn’t it? So I click it once it fires the first function, I click it again it fires the second. Easy!

OK Now I have two toggle states set up which will fire one after the other given clicks of the View More link. But what do I want it to do? Well if the information is visible I need to hide it and if it’s hidden I need to show it. As I know I have already hidden the content this makes things alot easier.

Our toggle code now becomes:-

$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
},function(){

});

English translation:- From the element which has fired this code, go up to it’s parent element and find anything with the class inner2 which is previous to where we are and apply the show function using the inbuilt parameter slow. This of course shows the element we wish to show. To hide it again we simple do the opposite.

$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
},function(){
$(this).parents("div").prev(".inner2").hide();
});

The observant amongst you will have noticed there is no nice styling to the hide. This is a usability concession, why would the user want it to gracefully disappear off of the screen, they clicked to get rid of it, they want it gone and gone yesterday!

The rest of the code is me being my OCD self. I don’t like the thought of someone clicking a link that says “View More” seeing the more pop out infront of them but still having the link say “View More” it should be “View Less” or words to that effect.

$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
$(this).text("View Less");
},function(){
$(this).parents("div").prev(".inner2").hide();
$(this).text("View More");
});

Also you can’t very well claim to be accesible if you don’t sort out the title for the link as well!

$(".vm").toggle(function(){
$(this).parents("div").prev(".inner2").show('slow');
$(this).text("View Less");
$(this).attr("title", "View Less");
},function(){
$(this).parents("div").prev(".inner2").hide();
$(this).text("View More");
$(this).attr("title", "View More");
});

The attr notation allows you to change almost any attribute of an HTML element.

Suprisingly enough that is it! If you load up your page and you can see the content which is supposed to be hidden there is something wrong with your code. Go back and make sure have all the brackets in the right place and all the semi-colons.

As written this code will also work for multiple elements such as a list of portfolio sites. As long as the class names stay the same it will work just fine.

I hope this is helpful to anyone, while I was researching how to do this there was no one tutorial which showed you this in it’s entirety…but now there is!!

Creating a Sliding Menu by MooTools Framework

Behrouz Pooladrag — Sun, 11 Oct 2009 14:03:34 +0000

MooTools is an object oriented framework created in JavaScript that could be used to create a rich interactive experience in HTML pages similar to that achieved in Flash but without actually using Flash, the benefit of using the MooTools over Flash is that your content will be easily accessible by search engines and it will not require the Flash player to be installed for it to run on any browser. Our tutorial here will show you how to create a sliding menu using the MooTools framework, you are required to have basic knowledge of HTML, you don’t need to know JavaScript to follow this tutorial, but JavaScript will help you understand what the code actually does.

Click on the image above to see a sample of the sliding menu we’re going to create.

Our tutorial will be divided into three sections:

Creating the HTML page containing our sliding menu.
Importing the MooTools JavaScript Framework.
Writing the JavaScript code required to create the sliding effect.

Creating the HTML Page

Our HTML page will contain our actual content of the sliding menu. To create one open your your HTML editor and create a simple HTML page, the contents of the body should be as follows:

We will have to assign an id to each of our div tags, the first div should have have its id assigned as menu_links, and the second one as menu. You can now start putting your menu links in the first div as well.

Oman3d|Tutorials

This concludes the HTML part of our tutorial. We will now import the MooTools JavaScript Framework and then start creating the effect using JavaScript.

Save this page anywhere on your hard drive.

Importing the MooTools JavaScript Framework

Start off by downloading the MooTools framework JavaScipt file from its official website, save the script in a folder named scripts to be located in the same directory as your HTML file. Back to your HTML page, you have to import our MooTools JS Framework into our HTML page header. You are required to type the code shown below to be able to do this.

Our preparations are all done now. We need to start scripting our sliding motion now.

Creating the Sliding Effect

The code for our sliding effect is pretty short. You can simply copy and paste this code to do the trick. We will explain in the following paragraphs how it works. Paste this code anywhere in the body of your HTML page.

var mySlide = new Fx.Slide(‘menu_links’);
$(‘menu’).addEvent(‘click’,function(o3dEvent){
o3dEvent = new Event(o3dEvent);
mySlide.toggle();
o3dEvent.stop();
})

We start off by creating a new instance of the Fx.Slide() class and assigned it to the variable called mySlide. As you can see, we passed the parameter menu_links to the Fx.Slide() object when we created it and that is the id or the div element we would like to slide.

var mySlide = new Fx.Slide(‘menu_links’);

We then created a click event for our div element that has the id menu so that when the user clicks on this div element a function attached to the click event is executed. It is necessary to pass the identifier of our event to this function.

$(‘menu’).addEvent(‘click’,function(o3dEvent))

Our function shall execute the o3dEvent as follows. We will examine it in detail now.

function(o3dEvent){
o3dEvent = new Event(o3dEvent);
mySlide.toggle();
o3dEvent.stop();
})

We create a variable called o3dEvent and assigned it to an event handler, which is a method to manage events happening on stage.

o3dEvent = new Event(o3dEvent);

Our function will carry out this simply job using the toggle() method which slides in and out the element with the id menu_links as we have previously defined in our code.

mySlide.toggle();

We finally have to stop the event when sliding is finished.

o3dEvent.stop();

Our actual code for creating the effect is done, but you might want to give it a proper graphical look by applying a style to it using CSS . This code is to be placed in the header of the HTML page.

That should do it, you can now test your HTML page to see your click-able menu that expands once clicked. You can download a working source file of this tutorial here. This concludes our tutorial, you can visit the official MooTools website to learn more about it

Mouse wheel handler in Javascript

Behrouz Pooladrag — Fri, 09 Oct 2009 06:12:15 +0000

It returns a delta value, +1 or -1, according to scroll direction.

Test :

1: up

Meanwhile, check the original script.

It needs some improvements due to some strange delta values on some browsers.

 type=“text/javascript”>

function handle(delta) {

var s = delta + “: “;

if (delta <0)

 s += “down”;

 else

 s += “up”;

 document.getElementById(‘delta’).innerHTML = s;

}

function wheel(event){

 var delta = 0;

 if (!event) event = window.event;

 if (event.wheelDelta) {

 delta = event.wheelDelta/120; 

 if (window.opera) delta = -delta;

 } else if (event.detail) {

 delta = -event.detail/3;

}

 if (delta)

 handle(delta);

}

/* Initialization code. */

if (window.addEventListener)

 window.addEventListener(‘DOMMouseScroll’, wheel, false);

window.onmousewheel = document.onmousewheel = wheel;

 id=“delta”>Scroll mouse wheel to see delta here.

Do you have an idea about how to use mouse wheel handling? Let me know, and I will (try to) code it.