w3developer.de
JavaScript Beispiele

<nav>
    <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="page.html">Page</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
   </ul>
</nav>

function scriptInit() {
if (!document.getElementById) {
	return;
	}
}
function addEvent(elm, evType, fn, useCapture) {
	if (elm.addEventListener) {
	elm.addEventListener(evType, fn, useCapture);
	return true;
	} else if (elm.attachEvent) {
	var r = elm.attachEvent('on' + evType, fn);
	return r;
	} else {
	elm['on' + evType] = fn;
	}
}
 
function checkActive() {
	var a = document.getElementsByTagName("nav a");
	if (window.location.href.substr(location.href.length - 1, 1) == '/') {
		var loc = window.location.href + 'index.php'; 
	}
	else {
		var loc = window.location.href;
	}
 
	for(var i=0; i < a.length; i++) {
		if (a[i].href == loc) {
			a[i].setAttribute("class", "active");
		}
	}
 
	//$('a.active').parent().addClass('active'); // parent active too? clear first //
 
}
 
addEvent(window, 'load', checkActive, false);

nav a.active {}
nav li.active {} /* if JS parent active */

<div class="slideContainer">
    <div class="slideContent">
        <div class="slideContent-header">
            TopSlide header
            <a class="slideCloseBtn close"> x </a>
        </div>
        <div class="slideContent-inner">
            <p>TopSlide content</p>
        </div><!--/.slideContent-inner -->
        <div class="slideContent-footer">
            TopSlide footer
        </div>
    </div><!--/.slideContent -->
    <div id="slideBtn">
        <span class="slideBtn slideOpen">▼</span>
        <span class="slideBtn slideClose">▲</span>
    </div>
</div><!--/.slideContainer -->
 
<div id="sliderPageBG"></div>

$(function(){
 
	var TopSlide = function (jElement , initState) {
		this.element = jElement;
		this.state;
		this.animationDuration = "slow";
 
		// init
		this.setState (initState);
		this.update ();
	};
 
	TopSlide.prototype = {
 
		setState : function (state) {
			this.state = true === state;
			this.feedbackState (this.state);
		} ,
 
		getState : function () {
			return (this.state);
		} ,
 
		toggleState : function (state) {
			if (undefined === state) {
				state = ! this.state;
			}
			this.state = state;
			this.feedbackState (this.state);
		} ,
 
		update : function () {
			this.element.toggleClass ('minimized' , ! this.state);
		} ,
 
		toggle : function () {
			if (true === this.state) {
				this.close ();
			} else {
				this.open ();
			}
		} ,
 
		open : function () {
			$('#sliderPageBG').addClass('sliderPageBG');
			if (false !== this.state) {
				return false;
			}
 
			var height = this.getHeight ();
			var margin = -1 * height;
			var that   = this;
			this.element.toggleClass ('minimized' , false);
			this.element
			.css ({
				marginTop: margin
			})
			.animate ({
				marginTop: 0
			} , {
				duration : that.animationDuration,
				complete : function () {
					that.setState (true);
					that.update ();
				}
			});
		} ,
 
		close : function () {
			$('#sliderPageBG').removeClass('sliderPageBG');
			if (true !== this.state) {
				return false;
			}
 
			var height = this.getHeight ();
			var margin = -1 * height;
			var that   = this;
			this.element
			.css ({
				marginTop: 0
			})
			.animate ({
				marginTop: margin
			} , {
				duration : that.animationDuration,
				complete : function () {
					that.setState (false);
					that.update ();
					that.element.css ({
						marginTop: 0
					});
				}
			});
		} ,
 
		getHeight : function () {
			// put for the concrete object
		} ,
		feedbackState : function () {
			// put for the concrete object
		}
	};
 
 
	/* ========== TOP SLIDE ID - put for the concrete object ========== */
 
	var slideContainer = $('.slideContainer');
	var slideContent   = slideContainer.find ('.slideContent');
	var slideButton    = slideContainer.find ('.slideBtn');
 
	$(slideContainer).css({'position':'absolute'});
 
	var slide = new TopSlide (slideContainer , false);
	slide.getHeight = function () {
		return (slideContent.height ());
	};
 
	$(document).bind ('click', function (event) {
		var target = $(event.target);
		if (target.is(slideButton)) {
			slide.toggle ();
		} else if (target.is (slideContainer) || target.closest (slideContainer).is (slideContainer)) {
			//
		} else {
			slide.close ();
		}
	});
 
	$('.slideOpenBtn').click (function (event) {
		slide.open ();
		event.stopPropagation ();
	});
 
	$('.slideCloseBtn').click (function (event) {
		slide.close ();
		event.stopPropagation ();
	});
 
});

.slideContainer {
    /*position: absolute; = ausgelagert in JS, falls JS mal deaktiviert ist */
    top: 0;
    left: 0;
    right: 0;
    z-index:10001;
    border-bottom: 1px solid #CCC;
    background-color: #fff;
    }
 
.slideContainer.minimized {
    position: absolute;
    top: 0;
    left: 0;
    }
 
.slideContainer.minimized .slideContent {
    display: none;
    }
 
.slideContent {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index:10001;
    }
 
.slideContent-inner {
    padding: 20px 15px;
    }
 
.slideContainer #slideBtn {
    position: absolute;
    right:15px;
    width: 80px;
    line-height: 25px;
    padding: 2px 0;
    z-index:100;
    text-align: center;
    font-size: 15px;
    color: #4E5D6C;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #eee;
    cursor: pointer;
    }
.slideContainer #slideBtn:hover {
    color: #2B3E50;
    }
 
.slideContainer .slideCloseBtn {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 15px;
    font-size: 24px;
    font-weight: bold;
    color: #4e5d6c;
    cursor: pointer;
    }
.slideContainer #slideBtn .slideClose,
.slideContainer.minimized #slideBtn .slideOpen {
    display: block;
    }
 
.slideContainer #slideBtn .slideOpen,
.slideContainer.minimized #slideBtn .slideClose {
    display: none;
    }
 
#sliderPageBG {
    display:none;
    background-color: transparent;
    opacity: 0;
    z-index: 0;
    }
#sliderPageBG.sliderPageBG {
    display:block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background-color: #111;
    opacity: 0.8;
    }
 
.slideContent-header {
    position: relative;
    height:34px;
    line-height:34px;
    border-bottom:1px solid #ddd;
    text-align: center;
    background-color:#eee;
    }
.slideContent-footer {
    position: relative;
    height:29px;
    line-height:29px;
    border-top:1px solid #ddd;
    text-align: center;
    background-color:#eee;
    }

ACC List (toggle)

<ul class="acc-list noStyle">
    <li><label>acc-btn (no style)</label>
        <ul>
            <li><a href="#">acc-content</a></li>
            <li><a href="#">acc-content</a></li>
            <li><label>acc-btn</label>
                <ul>
                    <li><a href="#">acc-content</a></li>
                    <li><a href="#">acc-content</a></li>
                    <li><label>acc-btn</label>
                        <ul>
                            <li><a href="#">acc-content</a></li>
                            <li><a href="#">acc-content</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<ul class="acc-list acc-style">
    <li><label>acc-btn (style)<span></span></label>
        <ul>
            <li><a href="#">acc-content</a></li>
            <li><a href="#">acc-content</a></li>
            <li><label>acc-btn<span></span></label>
                <ul class="acc-open">
                    <li><a href="#">acc-content acc-open</a></li>
                    <li><a href="#">acc-content acc-open</a></li>
                </ul>
            </li>
            <li><label>acc-btn<span></span></label>
                <ul>
                    <li><a href="#">acc-content</a></li>
                    <li><a href="#">acc-content</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

ACC Box (slideToggle)

<div class="acc-container">
    <div class="acc-box">
        <h2 class="acc-btn">acc-btn<span class="acc-icon"></span></h2>
        <div class="acc-content acc-open">
            <div class="acc-box">
                <p>acc-content acc-open</p>
                <h3 class="acc-btn">acc-btn<span class="acc-icon"></span></h3>
                <div class="acc-content">
                    <p>acc-content</p>
                </div>
            </div>
            <div class="acc-box">
                <h3 class="acc-btn">acc-btn<span class="acc-icon"></span></h3>
                <div class="acc-content">
                    <p>acc-content</p>
                </div>
            </div>
        </div>
        <div class="acc-footer">acc-footer</div>
    </div>
    <div class="acc-box">
        <h2 class="acc-btn">acc-btn<span class="acc-icon"></span></h2>
        <div class="acc-content">
            <p>acc-content</p>
        </div>
    </div>
    <div class="acc-box">
        <h2 class="acc-btn">acc-btn<span class="acc-icon"></span></h2>
        <div class="acc-content">
            <p>acc-content</p>
        </div>
    </div>
</div>
 
<div class="acc-container">
    <div class="acc-box">
        <h2 class="acc-btn">acc-btn<span class="acc-icon"></span></h2>
        <div class="acc-content acc-open">
            <p>acc-content acc-open</p>
        </div>
        <div class="acc-footer">acc-footer</div>
    </div>
</div>

$(function() {
	// acc-list class
	$('.acc-list ul').addClass('acc-content');
	$('.acc-list label').addClass('acc-btn');
	$('.acc-list label span').addClass('acc-icon');
 
	// function
	var accSpeed = 'normal'; // 'slow' 'fast' 'normal' 600 (number)
	$('.acc-content').hide();
	$('.acc-btn').click(function(){
		$(this).parent().siblings().children('.acc-content').slideUp(accSpeed).parent().children('.acc-btn').removeClass('acc-active');
		$(this).siblings('.acc-list .acc-content').toggle(accSpeed).parent().children('.acc-list .acc-btn').toggleClass('acc-active');
		$(this).siblings('.acc-box .acc-content').slideToggle(accSpeed).parent().children('.acc-box .acc-btn').toggleClass('acc-active');
		return false;
	});
	// acc-content open
	$('.acc-open').show().siblings('.acc-btn').toggleClass('acc-active');
});

/* ACC BOX */
.acc-container { margin-bottom:20px; padding:15px; border:1px solid #ddd;/* background-color:#fbfbfb;*/}
.acc-container .acc-box { margin-bottom:20px;}
.acc-container .acc-box:last-child { margin-bottom:0;}
.acc-box .acc-btn { margin:0; padding:10px; background-color:#eee; color:#555; display:block; cursor:pointer; border:1px solid #ddd;}
.acc-box .acc-active.acc-btn { background-color:#4e5d6c; color:#fff; border:1px solid #4e5d6c;}
.acc-box .acc-active.acc-btn:hover,
.acc-box .acc-btn:hover { background-color:#ddd; color:#555; border:1px solid #ccc;}
.acc-box .acc-content { margin:0; padding:10px; background-color:#fdfdfd; overflow:hidden; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd;}
.acc-box .acc-footer { padding:5px 10px; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; background-color:#fafafa; text-align:center; font-size:0.8em;}
 
/* ACC LIST */
.acc-list ul { padding-left:20px;}
.acc-list label { display:block; cursor:pointer;}
.acc-list.noStyle label.acc-btn:after {content:' »';} /* › » ► */
 
/* ACC LIST-STYLE */
.acc-style.acc-list { margin-bottom:20px; padding:0; background-color:#fbfbfb;}
.acc-style.acc-list li { list-style:none;}
.acc-style.acc-list label { margin:5px 0; padding:10px 15px; /*display:block; cursor:pointer;*/ background-color:#eee; color:#555; font-size:1.2em;}
.acc-style.acc-list label.acc-active { background-color:#4e5d6c; color:#fff;}
.acc-style.acc-list a { padding:10px 15px; display:block; text-decoration:none;}
.acc-style.acc-list a:hover,
.acc-style.acc-list label:hover { background-color:#ddd; color:#555;}
 
/* ACC BOX/LIST ICON */
.acc-btn { position:relative;}
.acc-btn .acc-icon { position:absolute; right:15px; float:right; font-weight:bold;}

Für statische Grafik oder Text (open/close)

/* Für statische Zeichen/Grafik ( zB.: Zeichentabelle ▼▽∨￬ ▲△∧￪ ) oder Text (open/close) */
.acc-btn .acc-icon:before {content:'▼';} 
.acc-btn.acc-active .acc-icon:before {content:'▲';}

Für dynamische Zeichen (wie hier +)

/* Für dynamische Zeichen */
.acc-btn .acc-icon:before { content:'+';}
.acc-btn .acc-icon {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -moz-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    -o-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}
.acc-btn.acc-active .acc-icon {
    -moz-transform: scale(1) rotate(45deg);
    -webkit-transform: scale(1) rotate(45deg);
    -o-transform: scale(1) rotate(45deg);
    -ms-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
}

<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-top">
        <div class="slideTxt-inner">
            <h3>Image Slide Top</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-right">
        <div class="slideTxt-inner">
            <h3>Image Slide Right</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-bottom">
        <div class="slideTxt-inner">
            <h3>Image Slide Bottom</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-left">
        <div class="slideTxt-inner">
            <h3>Image Slide Left</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-right-bottom">
        <div class="slideTxt-inner">
            <h3>Image Slide Right-Bottom</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-bottom-left">
        <div class="slideTxt-inner">
            <h3>Image Slide Bottom-Left</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-top-right">
        <div class="slideTxt-inner">
            <h3>Image Slide Top-Right</h3>
        </div>
    </div>
</div>
 
<div class="slideImgTxt">
    <img src="images/deinBild.png" alt="deinTitle" class="slideImg"/>
    <div class="slideTxt slideTxt-left-top">
        <div class="slideTxt-inner">
            <h3>Image Slide Left-Top</h3>
        </div>
    </div>
</div>

$(function() {
 
	var tempo = 'slow'; // 'slow' 'fast' 'normal' 600 (number)
	var opacitySlideImg = 0.5; // opacity Slide Image
	var opacitySlideTxt = 0.5; // opacity Slide Text
	var opacityTxt = 0.9; // opacity Text over
 
	var width = ('', $('.slideImg').outerWidth(true));
	var height = ('', $('.slideImg').outerHeight(true));
	var units = 'px';
 
	var minusHeight = -height;
	var minusWidth = -width;
	var plusHeight = +height;
	var plusWidth = +width;
 
	$('.slideImgTxt').css({'width':width+units,'height':height+units});
	$('.slideImg').css({'width':width+units,'height':height+units});
	$('.slideTxt').css({'width':width+units,'height':height+units,'opacity':opacitySlideTxt});
	// site slide
	$('.slideTxt-top').css({'top':minusHeight+units});
	$('.slideTxt-right').css({'left':plusWidth+units});
	$('.slideTxt-bottom').css({'top':plusHeight+units});
	$('.slideTxt-left').css({'left':minusWidth+units});
	// corner slide
	$('.slideTxt-top-right').css({'top':minusHeight+units,'left':plusWidth+units});
	$('.slideTxt-right-bottom').css({'top':plusHeight+units,'left':plusWidth+units});
	$('.slideTxt-bottom-left').css({'top':plusHeight+units,'left':minusWidth+units});
	$('.slideTxt-left-top').css({'top':minusHeight+units,'left':minusWidth+units});
 
 
	$('.slideImgTxt').hover(function() {
		$(this).children('.slideImg').stop().animate({
			right: 0,
			bottom: 0,
			opacity: opacitySlideImg
		},tempo);
		$(this).children('.slideTxt').stop().animate({
			top: 0,
			left: 0,
			opacity: opacityTxt
		},tempo);
	},function() {
		// top down
		$(this).children('.slideTxt-top').stop().animate({
			top: minusHeight,
			opacity: opacitySlideTxt
		},tempo);
		// right to left
		$(this).children('.slideTxt-right').stop().animate({
			left: plusWidth,
			opacity: opacitySlideTxt
		},tempo);
		// bottom up
		$(this).children('.slideTxt-bottom').stop().animate({
			top: plusHeight,
			opacity: opacitySlideTxt
		},tempo);
		// left to right
		$(this).children('.slideTxt-left').stop().animate({
			left: minusWidth,
			opacity: opacitySlideTxt
		},tempo);
		// top-right corner
		$(this).children('.slideTxt-top-right').stop().animate({
			top: minusHeight,
			left: plusWidth,
			opacity: opacitySlideTxt
		},tempo);
		// right-bottom corner
		$(this).children('.slideTxt-right-bottom').stop().animate({
			left: plusWidth,
			top: plusHeight,
			opacity: opacitySlideTxt
		},tempo);
		// bottom-left corner
		$(this).children('.slideTxt-bottom-left').stop().animate({
			top: plusHeight,
			left: minusWidth,
			opacity: opacitySlideTxt
		},tempo);
		// left-top corner
		$(this).children('.slideTxt-left-top').stop().animate({
			top: minusHeight,
			left: minusWidth,
			opacity: opacitySlideTxt
		},tempo);
 
		$(this).children('.slideImg').stop().animate({
			top: 0,
			left: 0,
			opacity: 1
		},tempo);
	});
 
});

.slideImgTxt {
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
}
.slideImg {
    position: absolute;
    border: none;
}
.slideTxt {
    position: absolute;
    background-color: #555;
    color: #fff;
    text-align: center;
}
.slideTxt-inner {
    padding: 5px;
    }

Scroll to ID

<body>
    ...
    <!-- SCROLL TO ID -->
    <a href="#ID-Name-1" class="scrollTo">ID-Name 1</a>
    <a href="#ID-Name-2" class="scrollTo">ID-Name 2</a>
    ...
 
    ...
    <!-- SCROLL STOP #ID-Name-1 -->
    <div id="ID-Name-1">
        ...
    </div><!--/#ID-Name-1 -->
    ...
 
    ...
    <!-- SCROLL STOP #ID-Name-2 -->
    <div id="ID-Name-2">
        ...
    </div><!--/#ID-Name-2 -->
    ...
</body>

Scroll to ID with button/effect

<body>
    <div id="top-of-page"></div>
    ...
 
 
    ...
    <!-- SCROLL TO ID #top-of-page with scrollTop Button -->
    <a href="#top-of-page" class="scrollTo scrollTop" title="Back to Top">▲</a>
</body>

$(function(){
    // Scroll Top Button
    var scrollTop_btn = '.scrollTop';
    $(scrollTop_btn).css({
        'position':'fixed',
        'bottom':'3px',
        'right':'3px',
        'display':'none',
        'z-index':'10000'
    });
 
    $(window).scroll(function() {
        // Effect = Fade In/Out - Back to Top Button
        if ($(this).scrollTop() > 300) {
            $(scrollTop_btn).fadeIn(600);
        } else {
            $(scrollTop_btn).fadeOut(600);
        }
    });
 
    // Scroll Function ( a href="#ID"  class="scrollTo" )
    $(".scrollTo[href^='#']").on('click', function(e) {
        e.preventDefault();
            $('html, body').animate({
                scrollTop : $(this.hash).offset().top
            }, 600);
            return false;
    });
});

.scrollTop {
    border: 1px solid #444;
    padding: 7px 10px;
    background-color: #555;
    color: #fff;
}
.scrollTop:hover {
    text-decoration: none;
}
.scrollTo {}