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.
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;
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
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.
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.