Category Archives: JavaScript

Javascript click() method

by

0

Javascript has evolved into a great web programming language over the last few years with its compatibility getting much greater then it was and with the versatility of the script.

This week I came back to a script I wrote some time ago using a frame work. The script basically allowed the visitor to click next or previous and scroll through a list element. Although dynamic HTML is pretty awesome it can be hard to maintain.

Due to requirements the scroll er has had to be automated as well as respond to a users click which it wasn’t built for, At first it may need to be re written from scratch but then I came across the click() method.

Click() basically simulates a users click on a button in javascript. Unfortunately it only works with form button elements and not with elements such as hyperlinks.

If you need to simulate the click of another type of element I would suggest making a button and giving it the style display:none;

example usage

getElementByID(‘someid’).click();

Javascript get element by id

by

0

Javascript is probably the most awesome tool a web developer can use to make a website both functional and look nice. Javascript has also evolved over the years with the DOM it has become much easier to develop.

One useful piece of code I always end up using when writing Javascript is getElementById, the way Javascript evolved has given it much more compatibility with different browsers and in turn means you need less code to do more.

getElementById allows you to modify any html element with a given ID. so for example if you have a <div> with the ID jstest it might look like this

<div id=”jstest”>howdy</div>

Using document.getElementById(‘jstest’) we can modify this element dynamically with javascript changing anything from its appearance or position with styling or use it within our javascript code.

using document.getElementById(‘jstest’).innerHTML we could change or get the contents of the div.

Another pretty awesome use for the getElementById method would be to change the style of an element dynamically, maybe you want it to disappear when clicked or have a border when highlighted.

To change the background of an element we could use document.getelementById(‘jstest’).style.background-color = ‘#dedede’  this will work with any styling you could apply to an element.

If you are like 90% of the old school web developers I know you probably don’t like using javascript but the modern DOM it is couldn’t be easier.

JavaScript Input box control

by

0

The idea behind this was to aid design and usability by adding a label inside the input box to give an indication of what it was for. It might not be a search box, maybe you want to add labels for name and address boxes who knows.

Click the input box below and see how the “search” disappears leaving it empty for the user to edit. If the user clicks and clicks off leaving it empty the label will return to “Search”


Here is how it works.

A basic Javascript function to control the input box called “test” This function basicaly says. Check if the box is empty, if it is make it’s value “Search”.
The input box also calls Javascript “onclick” to clear the input and “onblur” to call the function below.