Press "Enter" to skip to content

Posts published in “Javascript code snippets”

Javascript – check/uncheck all form checkboxes

After searching around the net looking for an example snippet of javascript that would check or uncheck all of a series of checkboxes on a form… the results from Google were good, however each ‘example’ assumed that you I actually had a good understanding of what you were reading or that you I might actually read it instead of just pasting the pieces you liked in… Obviously I did the latter and after 20 minutes of pounding my head on the keyboard figured out what I was doing wrong…

So for all of you code slammers, this one is for you.

[code]

[/code]

Simple enough, look through each form element and either mark them checked or unchecked depending on the function being called.

And of course in your markup

[code]
Check All / Uncheck All
[/code]

And now where I went wrong. If you actually read the JavaScript you'll see the lines

document.FormName.elements.....

Well, FormName must be specified! Look at your markup where
[code]

dotster offers a high speed internet service to its customers. The rogers wireless phones are very popular among the phone services and is used many businesses. The businesses are constantly working out way to make their websites popular among the customers by having seo services. The sprint wireless uses the startlogic programming to produce efficient results for the customers.

Javascript Expanding List / Menu

An easy method to create an expanding list using javascript. I’ve incorporated the code into some server status pages to show or hide tables. Effective and clean looking.

[code]


ul { margin-top: 0px; margin-bottom:0px; }

ul.expand { display: none; }

li { list-style-type: none; display: block; }

img { border: none; vertical-align: text-bottom; }

function toggle(id) { var L = document.getElementById("L"+id); var I = document.getElementById("I"+id); if (L.style.display == "" || L.style.display == "none") { L.style.display = "block"; I.src = "opened.gif"; } else { L.style.display = "none"; I.src = "closed.gif"; } }


An Expanding List

Click on the red right-arrows to expand the list.
Click on the green down-arrows to contract the list.

  • Topic A
    • Topic A1
    • Topic A2
      • Topic A21
      • Topic A22
      • Topic A23
    • Topic A3
  • Topic B

    • Topic B1
    • Topic B2
    • Topic B3

  • and here is how it works.
    Timer Display

    Animation, in its broadest sense means changing the content over time, usually withing small time intervals. In JavaScript, the key to animation is the setInterval function which causes a function to be called at periodic intervals.
    This is perhaps the most basic example illustrating the usage of the setInterval function. The current time and date can be read into a string using an operation something like this:

    timedate = new Date();

    What we want to do is to depict the “running” time in our browser, i.e., we want it updated every second with a new value. Here is the example:



    Timer


    The current time and date on my system is:



    [/code]

    Borrowed from http://www.cs.wcupa.edu/~rkline/Web/JavaScriptExamples.html

    Javascript Collapsible Lists

    Javascript and DHTML can be used to make collapsible and expandable HTML lists that degrade cleanly (that is, are still usable for visitors who don’t have Javascript-enabled web browsers).
    Example

    This has been tested in Opera, Mozilla (Navigator) and Internet Explorer. Clicking on the arrows expands or collapses sections of the list:

    The code

    You need to create images called closed.png and open.png to be used for collapsed and expanded lists respectively. When adding more lists, the id values for the img and ul elements must be changed, and the parameters in the call to toggle() in the image’s onClick value must be changed to these ids.

    [code]

    • document.writeln('Open list'); IBM
    • 80×86
    • Itanium
  • document.writeln('Open list'); Motorola
    • 680×0
    • PowerPC

    document.getElementById('collapsibleList').style.listStyle="none"; // remove list markers document.getElementById('iBMList').style.display="none"; // collapse list document.getElementById('motorolaList').style.display="none"; // collapse list // this function toggles the status of a list function toggle(image,list){ var listElementStyle=document.getElementById(list).style; if (listElementStyle.display=="none"){ listElementStyle.display="block"; document.getElementById(image).src="open.png"; document.getElementById(image).alt="Close list"; } else{ listElementStyle.display="none"; document.getElementById(image).src="closed.png"; document.getElementById(image).alt="Open list"; } }
    [/code]

    Disable right click with javascript

    Though not able to stop anyone who really wants your source code, images, or other imbedded items, this will slow down some… disable right mouse click with a bit of JavaScript in your pages header

    [code]



    [/code]

    Close current browser window

    Simple javascript to add a Close link to any page that will close the browser window the link resides in… good for popups and the like

    [code]
    click here
    [/code]