Script

2006-03-08

Expanding menu

Javascript

Vik ut menyn med strikt xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Expanding Menu</title>

<style type="text/css">

body {
background-color: #faf7ec;
margin: 0;
padding: 50px 0 0 150px;
}

ul#menu {
width: 100px;
list-style-type: none;
border-top: solid 1px #b9a894;
margin: 0;
padding: 0;
}

ul#menu ol {
display: none;
text-align: right;
list-style-type: none;
margin: 0;
padding: 5px;
}

ul#menu li, 
ul#menu a {
font-family: verdana, sans-serif;
font-size: 11px;
color: #785a3c;
}

ul#menu li {
border-bottom: solid 1px #b9a894;
line-height: 15px;
}

ul#menu ol li {
border-bottom: none;
}

ul#menu ol li:before {
content: "- ";
}

ul#menu a {
text-decoration: none;
outline: none;
}

ul#menu a:hover {
color: #539dbc;
}

ul#menu a.active {
color: #be5028;
}

</style>

<script type="text/javascript">

// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// 
// Coded by Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
// If want to use this code, feel free to do so, but please leave this message intact.
//
// ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
// --- version date: 06/02/03 ---------------------------------------------------------

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Node Functions

if(!window.Node){
    var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
    return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
    var result = new Array();
    var children = node.childNodes;
    for(var i = 0; i < children.length; i++){
        if(checkNode(children[i], filter)) result[result.length] = children[i];
    }
    return result;
}
function getChildrenByElement(node){
    return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
    var child;
    var children = node.childNodes;
    for(var i = 0; i < children.length; i++){
        child = children[i];
        if(checkNode(child, filter)) return child;
    }
    return null;
}
function getFirstChildByText(node){
    return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
    for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
        if(checkNode(sibling, filter)) return sibling;
    }
    return null;
}
function getNextSiblingByElement(node){
    return getNextSibling(node, "ELEMENT_NODE");
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||
// Menu Functions & Properties

var activeMenu = null;

function showMenu(){
    if(activeMenu){
        activeMenu.className = "";
        getNextSiblingByElement(activeMenu).style.display = "none";
    }
    if(this == activeMenu){
        activeMenu = null;
    }else{
        this.className = "active";
        getNextSiblingByElement(this).style.display = "block";
        activeMenu = this;
    }
    return false;
}
function initMenu(){
    var menus, menu, text, a, i;
    menus = getChildrenByElement(document.getElementById("menu"));
    for(i = 0; i < menus.length; i++){
        menu = menus[i];
        text = getFirstChildByText(menu);
        a = document.createElement("a");
        menu.replaceChild(a, text);
        a.appendChild(text);
        a.href = "#";
        a.onclick = showMenu;
        a.onfocus = function(){this.blur()};
    }
}

// ||||||||||||||||||||||||||||||||||||||||||||||||||

if(document.createElement) window.onload = initMenu;

</script>

</head>
<body>

<ul id="menu">
    <li>Menu Item 1
        <ol>
            <li><a href="#">Sub Item 1.1</a></li>
            <li><a href="#">Sub Item 1.2</a></li>
            <li><a href="#">Sub Item 1.3</a></li>
        </ol>
    </li>
    <li>Menu Item 2
        <ol>
            <li><a href="#">Sub Item 2.1</a></li>
            <li><a href="#">Sub Item 2.2</a></li>
            <li><a href="#">Sub Item 2.3</a></li>
        </ol>
    </li>
    <li>Menu Item 3
        <ol>
            <li><a href="#">Sub Item 3.1</a></li>
            <li><a href="#">Sub Item 3.2</a></li>
            <li><a href="#">Sub Item 3.3</a></li>
        </ol>
    </li>
    <li>Menu Item 4
        <ol>
            <li><a href="#">Sub Item 4.1</a></li>
            <li><a href="#">Sub Item 4.2</a></li>
            <li><a href="#">Sub Item 4.3</a></li>
        </ol>
    </li>
    <li>Menu Item 5
        <ol>
            <li><a href="#">Sub Item 5.1</a></li>
            <li><a href="#">Sub Item 5.2</a></li>
            <li><a href="#">Sub Item 5.3</a></li>
        </ol>
    </li>
</ul>

</body>
</html>

2006-02-22

Load

Flash

Ladda in externa filer i en flashfil

// Skapa först ett tomt movieclip och lägg
// denna koden i actionlagret...
// Detta funkar för swf gif jpg och png (flash 8)
var myMCL:MovieClipLoader = new MovieClipLoader();
myMCL.loadClip("movie2.swf", "container");

2006-02-15

Dynamisk position

DHTML

Dynamisk position, färg, text mm

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Positioning</title>
<script type="text/javascript"><!--
var speed = 5, count = 10, direction = 1, fontStylecount = 0;
var firstLine = "Text growing";
var fontStyle = ["serif", "sans-serif", "monospace"];
function run() {
    count += speed;
    if ((count % 200) == 0 ) {
        speed *= -1;
        direction = !direction;
        pText.style.color = (speed < 0) ? "red" : "blue" ;
        firstLine = (speed < 0) ? "Text shrinking" : "Text growing";
        pText.style.fontFamily = fontStyle[++fontStylecount % 3];
    }
    pText.style.fontSize = count / 3;
    pText.style.left = count;
    pText.innerHTML = firstLine + "<br />Font size: " + count + "px";
}
// --></script>
</head>
<body onload="window.setInterval('run();', 50 );">
<p id="pText" style="position:absolute; left:0; font-family:serif; color:blue">Welcome!</p>
</body>
</html>

2006-02-15

Dynamisk CSS

DHTML

Ändra stilen dynamiskt med className

<html>
<head>
<style type="text/css">
.bigText { font-size: 3em; font-weight: bold }
.smallText { font-size: .75em }
</style>
<script type="text/javascript">
function start() {
    var inputClass = prompt("Enter a className (bigText or smallText)", "");
    pText.className = inputClass;
}
</script>
</head>
<body onload="start();">
<p id="pText">Welcome to our Web site!</p>
</body>
</html>

2006-02-15

Objekt i javascript

DHTML

Räknar upp ett objekts barn

/*
Property outerHTML is similar to property innerHTML but it includes the enclosing XHTML tags
(tags <p id = "myDisplay"> and </p> in this case) as well as the content inside them.
*/

<html>
<head>
<script>
var elements = "<ul>";
function child(object) {
    var i = 0;
    elements += "<li>" + object.tagName + "<ul>"; 
    for (i = 0; i < object.children.length; i++ ) {
        if (object.children[i].children.length) {
            child(object.children[i]);
        } else {
            elements += "<li>" + object.children[i].tagName + "</li>";
        }
    }
    elements += "</ul> ";
}
</script>
</head>
<body onload="child(document.all[0]); myDisplay.outerHTML += elements;">
<p id="myDisplay">Element på sidan:<br /></p>
</body>
</html>