Javascript

Checkebox - checked property

A checkbox is a simple element of the form object.

The key property of a checkbox object is wether or not the box is checked.

The checked property is a boolean value: true is checked , false is not.

Code:

<html>
<head>
<title>
Checkbox
</title>

<script type=”text/javascript”>

function myfunction()
{
if(document.myform.mycheckbox.checked)
{
alert(”The box is checked”);
}
else
{
alert(”The box is not checked”);
}
}

</script>

</head>

<body>
<form name=”myform” onSubmit=”return false”>
<input type=”checkbox” name=”mycheckbox” onClick=”myfunction();” />
</form>
</body>
</html>


Getting and setting a text value property

To demonstrate how a text field’s property can be read and change the script below provides a simple  html page with a single form.

In this example we use the “toUpperCase()” function which converts the value to uppercase.

code:

<html>
<head>
<title>
Read and change the text value property
</title>
<script text=”text/javascript”>

function myfunction()
{
var text_field = document.forms[0].myfield;
var make_upper_case = text_field.value.toUpperCase();
text_field.value = make_upper_case;
}

</script>
</head>

<body>
<form onSubmit=”return false”>
<input type=”text” name=”myfield” onChange=”myfunction();”/>
</form>
</body>
</html>


Popup Window

Popup windows are browser windows opened from a web page and used most of times for displaying advertisements.

The popup below activated when the user clicks on a link.

The time between two instances is 24 hours, you can change that if in the function “showPopupWindow” change the number that represents the hours of the cookie expiration (24 in this case).

In the same function replace the “www.example.com” with the url you want to display in the popup window.

Code:

<script type=”text/javascript”>
var windowContainer = new Object();
var popW = 800;
var popH = 600;

if(screen.availWidth)
{
popW = screen.availWidth;
popH = screen.availHeight;
}

function get_cookie(Name) {
var search = Name + “=”  ;
var returnvalue = “”;
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
// if the cookie exists
offset += search.length
//set the index of beginning value
end = document.cookie.indexOf(”;”, offset);
if (end == -1)
// set the index of the end of cookie value
end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function showPopupWindow() {
if (get_cookie(’popunder’)==”){
expires = new Date(Date.parse(new Date())+1*24*60*60*1000);    document.cookie=”popunder=yes;path=/;expires=”+expires.toGMTString(); var windowObj = window.open(
“http://www.example.com”, “name”, “width=”+popW+”,height=”+popH);
windowObj.blur();
window.focus();
}
else return;
}

function addListener(element, event, listener)
{
if (element) {
if(element.addEventListener) {
element.addEventListener(event, listener, false);
return true;
}    else if(this.attachEvent) {
element.attachEvent(”on” + event, listener);
return true;
}
}
return false;
}

function hookLinkTags(tagId,include) {
if (document.all) {
var linkElements = document.all.tags(”A”);
for (var x = 0; x < linkElements.length; x++) {
if (!tagId || (linkElements(x).id == tagId && include == true) || (linkElements(x).id != tagId && include == false)) {                              addListener(linkElements(x), “click”, function() { showPopupWindow(); });
}
}
}
else if (document.getElementsByTagName) {
var linkElements = document.getElementsByTagName(”A”);
for (var x = 0; x < linkElements.length; x++) {
if (!tagId || (linkElements[x].id == tagId && include == true) || (linkElements[x].id != tagId && include == false))                         {
addListener(linkElements[x], “click”, function() { showPopupWindow(); });
}
}
}
}

if (addListener(this, “load”, function() { hookLinkTags(); }) == false) {
addListener(document, “load”, function() { hookLinkTags(); });
}
</script>


JScroller

JScroller is a javascript widget that scrolls text or images.

Example here: torrentgamez.com

Compatible browsers

Firefox, explorer, chrome, safari.

Javascript code

// JavaScript Document
var id_timmer;

function run(x)
{
var ul_elem = document.getElementById(x);
var li_elem = ul_elem.firstChild;
var first_li_elem = null;

while(li_elem)
{
if(li_elem.nodeType != 3)
{
first_li_elem = li_elem;
break;
}

li_elem = li_elem.nextSibling;
}

var w = 0;
first_li_elem_width = first_li_elem.clientWidth;

if(first_li_elem.style.marginLeft != ”)
{
w = parseInt(first_li_elem.style.marginLeft);
}

first_li_elem.style.marginLeft = (w - 1) + “px”;

if(parseInt(first_li_elem.style.marginLeft) <= -(first_li_elem_width))
{
first_li_elem.style.marginLeft = “0px”;
ul_elem.removeChild(first_li_elem);
ul_elem.appendChild(first_li_elem);
}
}

function start_run(z)
{
id_timmer = setInterval(”run(\’” + z + “\’)”, 20);
}

function stop_run()
{
clearInterval(id_timmer);
}

HTML template

<div id=”scrolling_tags”>
<ul id=”scroller” onmouseover=”stop_run()” onmouseout=”start_run(’scroller’)”>
<li>
<a href=”">string1</a>
</li>

<li>
<a href=”">string2</a>
</li>

etc

</ul>

</div>

CSS code

#scrolling_tags
{
width:100%;
height:30px;
margin:0 0 6px 0;
background-color:#000E1C;
color:#fff;
padding:0;
}

#scroller
{
height:25px;
list-style:none;
text-align:center;
overflow:hidden;
margin:0;
padding:0;
display:block;
}

#scroller li
{
float:left;
height:18px;
margin:0;
padding:8px 0 0 0;
overflow:hidden;
}

#scroller li a
{
font-weight:bold;
font-size:100%;
color:#838383;
text-decoration:none;
}

#scroller li a:hover
{
text-decoration:none;

}

Notice

For autorun when the page is loaded put this in your html code:

<script type=”text/javascript”>start_run(”scroller”)</script>