Posts Tagged ‘Javascript’
Programming in Javascript Way
Get element object
Get object with the specified ID:
var x = document.getElementById('nav');
Attaching Event Handlers
document.getElementById('xxx').onclick = function() {location.href='xxx.htm';return false;}
Form
submit form:
document.formname.submit()
get form element’s value
var v1 = formname.element.value
Array
var mycars=new Array();
mycars[0]=”Saab”;
mycars[1]=”Volvo”;
mycars[2]=”BMW”;
var i;
for (i in mycars) {
document.write(mycars[i] + ‘<br/>’);
}
Javascript Tabbar
This is my simplified javascript tabbar:
<div class="tabs-header">
<a id="tab-header-1" class="tab-header-active" href="javascript:tab_active(1);">Tab1</a>
<a id="tab-header-2" class="tab-header" href="javascript:tab_active(2);">Tab1</a>
<a id="tab-header-2" class="tab-header" href="javascript:tab_active(3);">Tab1</a>
</div>
<div class="tabs-content">
<div class="tab-content-1" class="tab-content"> ... </div>
<div class="tab-content-2" class="tab-content" style="display:none"> ... </div>
<div class="tab-content-3" class="tab-content" style="display:none"> ... </div>
</div>
<script language="JavaScript" type="text/javascript">
var active_tab_header = document.getElementById("tab-header-1");
var active_tab_content = document.getElementById("tab-content-1");
function tab_active(tab) {
active_tab_header.className = "tab-header";
active_tab_content.style.display = "none";
active_tab_header = document.getElementById("tab-header-" + tab);
active_tab_content = document.getElementById("tab-content-" + tab);
active_tab_header.className = "tab-header-active";
active_tab_content.style.display = "block";
}
</script>
Using moo.fx making cool effect
moo.fx is a super lightweight (3 kb) javascript effects library that can add snazz to any website with less than 5 minutes work.
Let’s going to make a smooth sliding effect.
1. Include the libraries required for the effect that will be used
<script type="text/javascript" src="prototype.lite.js"></script>
<script type="text/javascript" src="moo.fx.js"></script>
2. Creating new effect
<script type="text/javascript">
var effectObject;
window.onload = function () {
effectObject = new fx.Height ('idToAffect', {duration: 400});
}
</script>
Including fx.Height, there are three base effects in moo.fx: fx.Height, fx.Width, fx.Opacity
3. Call the toggle() method
<p onclick="effectObject.toggle();">Title</p>
Find elements by CSS class name
function getElementsByClassName(className, parentElement) {
if (!parentElement) {
parentElement = document.body;
}
var children = parentElement.getElementsByTagName('*');
var elements = new Array();
var re = new RegExp("(^|\s)" + className + "(\s|$)");
for (var i=0; i<children.length; i++) {
if (!children[i].className) {
continue;
}
if (children[i].className.match(re)) {
elements.push(children[i]);
}
}
return elements;
}