JSFiddle

  • eigener scrollbalken #12 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

           var drag=false;
           var xstart=0;
           var lefting=false;
           var righting=false;
           function down(event)
             {
               drag=true;
               xstart=event.screenX ...
  • Scroll to top über link

    jQuery 3.2.1, HTML, CSS, JavaScript

    //** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
    //** Available/ usage terms at http://www ...
  • Iframe mit kontaktformalur

    No-Library (pure JS), HTML, CSS, JavaScript

     
    var elem = document.getElementById('los');
    	elem.addEventListener('click', chkFormular);
    
    	function chkFormular() {
    		if (document.Formular.User.value == "") {
    			alert("Bitte Ihren Namen ...
  • Eigener scrollbalken

    No-Library (pure JS), HTML, CSS, JavaScript

    <br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo<br><br>hallo ...
  • Scrollen ohne Scrollleiste

    No-Library (pure JS), HTML, CSS, JavaScript

    var parent = document.getElementById('container1');
    var child = document.getElementById('container2');
    child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
  • Sebsgebautes selectmenü

    No-Library (pure JS), HTML, CSS, JavaScript

    document.getElementsByTagName('body')[0].style.backgroundImage='url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAFklEQVR42mNM0npdz0AkYBxVPMQVAwCS3J1DwAAAABJRU5ErkJggg==)'
    
    //document.getElmentsByTagName('body')[0].style.backgroundImage='url(data ...
  • selectmeuü 6

    jQuery 3.2.1, HTML, CSS, JavaScript

    (function($){
    	
    	/* -------------------------------------------------------- */ 
    	/*	//set Global variables
    	/* -------------------------------------------------------- */ 
    	var cards = $(".card-drop"),
    		toggler = cards.find(".toggle"),
    		links = cards.find("ul>li>a"),
    		li = links.parent ...
  • select menü 4 und 5

    jQuery 3.2.1, HTML, SCSS, JavaScript

     $(document).ready(function() {
      $(".drop .option").click(function() {
        var val = $(this).attr("data-value"),
            $drop = $(".drop"),
            prevActive = $(".drop .option.active").attr("data-value ...
  • svg grafiken animiert

    jQuery 3.2.1, HTML, CSS, JavaScript

    Vivus.prototype.eco_remove = function () {
    	this.el.classList.remove('finished');
    }
    function eco_finished(){
      this.el.classList.add('finished');
    }
    function eco_replay(icon){
    	icon ...
  • loading animationen

    No-Library (pure JS), HTML, CSS, JavaScript

    
        <body>
        	<h1>CSS3 Loader Animations</h1>
            <section>
            	<h2>Three Dots</h2>
                <div class="loader-threedots">
                	<span></span>
                    <span></span>
                    <span></span>
                </div>
                
            	<h2>Alone</h2>
                <div class="loader-alone"><span></span></div>
                
            	<h2>Zoom</h2>
                <div class="loader-zoom"></div>
                
            	<h2>Classic</h2>
                <div class="loader-classic">
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                	<span></span>
                    <span></span>
                </div>
                
            	<h2>Sonar</h2>
                <div class="loader-sonar">
                	<span></span>
                    <span></span>
                </div>
                
            	<h2>Little Cube</h2>
                <div class="loader-littlecube">
                	<span></span>
                </div>
                
            	<h2>Pendulum</h2>
                <div class="loader-pendulum">
                	<span></span>
                </div>
                
            	<h2>Alternator</h2>
                <div class="loader-alternator">
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Rectangular</h2>
                <div class="loader-rectangular">
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Intersect</h2>
                <div class="loader-intersect">
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Transporter</h2>
                <div class="loader-transporter">
                	<span></span>
                	<span></span>
                	<span></span>
                	<span></span>
                	<span></span>
                </div>
                
            	<h2>Simplistic</h2>
                <div class="loader-simplistic"></div>
                
                
                
            	<h2>Spinner</h2>
                <div class="loader-spinner"></div>
                
                
                
            	<h2>Stuck</h2>
                <div class="loader-stuck">
                	<span></span>
                </div>
                
            	<h2>Symmetric ...</h2></section></body>