JSFiddle

  • Simple photo slider #3 is the latest revision

    This is a simple photo slider I coded from scratch as a way to begin working with jQuery in more detail.

    var list = $('#slideshowImages li');
    var currentItem = 0;
    
    function changeToSlide(index) {
        var i = index;
        var nextImage = $('#slideshowImages img' + ':eq(' + i +')').attr ...
  • Follow us

    Design

    
    <div class="footcol4 curvyIgnore">
    				<div class="footcol4inner group curvyIgnore">				
    			<!-- Social networking icons -->
    <div id="social-networking-icons">
      <span id="social-networking-icons-text">Follow us:</span>
      <ul id="social-networking-icons-list">
        <li class="facebook-icon social-networking-icon"><a href="http://www.facebook.com/pages/Magazinescom/8356493537" target="_blank"></a></li>
        <li class="twitter-icon social-networking-icon"><a href="http://twitter.com/#!/magazines" target="_blank"></a></li>
        <li class="youtube-icon social-networking-icon"><a href="http://www.youtube.com/magazinescom" target="_blank"></a></li>
        <li class="googleplus-icon social-networking-icon"><a href="http://plus.google.com/108806469202761698216?prsrc=3" target="_blank"></a></li>
        <li class="linkedin-icon social-networking-icon"><a href="http://www.linkedin.com/company/magazines.com" target="_blank"></a></li>
      </ul>
    </div>
    
    <!-- End social networking icons -->
    				</div>
    			</div>
  • Follow us

    Design

    <link href='http://fonts.googleapis.com/css?family=Wendy+One' rel='stylesheet' type='text/css'>
    
    <div class="footcol4 curvyIgnore">
    				<div class="footcol4inner group curvyIgnore">				
    			<!-- Social networking icons -->
    <div id="social-networking-icons">
      <span id="social-networking-icons-text">Follow us:</span>
      <ul id="social-networking-icons-list">
        <li class="facebook-icon social-networking-icon"><a href="http://www.facebook.com/pages/Magazinescom/8356493537" target="_blank"></a></li>
        <li class="twitter-icon social-networking-icon"><a href="http://twitter.com/#!/magazines" target="_blank"></a></li>
        <li class="youtube-icon social-networking-icon"><a href="http://www.youtube.com/magazinescom" target="_blank"></a></li>
        <li class="googleplus-icon social-networking-icon"><a href="http://plus.google.com/108806469202761698216?prsrc=3" target="_blank"></a></li>
        <li class="linkedin-icon social-networking-icon"><a href="http://www.linkedin.com/company/magazines.com" target="_blank"></a></li>
      </ul>
    </div>
    
    <!-- End social networking icons -->
    				</div>
    			</div>
  • Belajar Backbone #1 is the latest revision

    belajar backbone js step by step

    $(function() {
        // default
        $("#c").vanGogh();
        
        // without numbers/gutter and horizontal scrolling
        $("pre:eq(1), pre:eq(2)").vanGogh({ numbers: false });
        
        // inline ...
  • SlideShow Jquery #1 is the latest revision

    Jquery

    <div class="banner">
       
       <div id="roatingHeroWrapper">      
          <div id="heroViewer">
          <div id="heroes" style="width: 3760px; margin-left: 0px;">
    
          <a class="hero" href="what-is-dreamspark.aspx" title="" style="background-image:url(https://www.dreamspark.com/App_Themes/Redesign/images/Join_kinect_effect_bg.jpg); width:940px;cursor:default;">
          <div class="heroContentRight">
          <div class="heroMainheading">See how DreamSpark can provide a library of software you need.</div>
          <span class="heroLink" style="cursor:pointer;">learn more</span>
          </div>
          </a>
    
          <a class="hero" href="#" title="" target="_blank" style="width:940px;">
          <div class="heroContentRight">
              <div id="flashContent" style="margin-top:-20px;height:75%" onmousedown="javascript:window.open('http://aka.ms/bzsds');">
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="940" height="350" id="HP_2" align="middle" __idm_id__="1322844161">
                    <param name="movie" value="https://www.dreamspark.com/App_Themes/Redesign/Images/HP_2.swf">
                    <param name="quality" value="high">
                    <param name="bgcolor" value="#ffffff">
                    <param name="play" value="true">
                    <param name="loop" value="true">
                    <param name="wmode" value="opaque">
                    <param name="scale" value="showall">
                    <param name="menu" value="true">
                    <param name="devicefont" value="false">
                    <param name="salign" value="">
                    <param name="allowScriptAccess" value="sameDomain">
                    <param name="FlashVars" value="var2=1">
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="https://www.dreamspark.com/App_Themes/Redesign/Images/HP_2.swf" width="940" height="350" __idm_id__="1322844162">
                        <param name="movie" value="https://www.dreamspark.com/App_Themes/Redesign/Images/HP_2.swf">
                        <param name="quality" value="high">
                        <param name="bgcolor" value="#ffffff">
                        <param name="play" value="true">
                        <param name="loop" value="true">
                        <param name="wmode" value="opaque">
                        <param name="scale" value="showall">
                        <param name="menu" value="true">
                        <param name="devicefont" value="false">
                        <param name="salign" value="">
                        <param name="allowScriptAccess" value="sameDomain">
                        <param name="FlashVars" value="var2=1">
                    <!--<![endif]-->
                        
          <input type="image" name="ctl00$ContentPlaceHolder1$ImageButton1" id="ctl00_ContentPlaceHolder1_ImageButton1" src="https://www.dreamspark.com/App_Themes/Redesign/Images/HP_2d.jpg" onclick="window.open('http://aka.ms/bzsds');" style="border-width:0px;">
                    <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
                </object>
            </div>
            </div> 
          </a>
           
    
               <a class="hero" href="http://bit.ly/dspark2013" title="" target="_blank" style=" background-image:url(https://www.dreamspark.com/App_Themes/Redesign/images/HP_3.jpg); width:940px;cursor:default;">
          <div class="heroContentRight" style="margin-left:-360px;">
          <div class="heroMainheading" style="width:580px;">
          Imagine cup can change your world. Have ...</div></div></a></div></div></div></div>
  • Box-shadow page curl effect w/ onHover highlight

    Check out original Matt Hamm example at http://www.matthamm.com/box-shadow-curl.html.

     WebRep
    Overall rating
    This site has no rating
    (not enough votes)
    
  • SVG und jQuery | Interaktive Grafiken erstellen mit Inkscape

    Interaktive .svg mit jQuery

    // EZPZ Tooltip v1.0; Copyright (c) 2009 Mike Enriquez, http://theezpzway.com; Released under the MIT License
    (function($){$.fn.ezpz_tooltip ...
  • Scrolling Parallax

    Demo with jQuery and Plugin by Jon Raasch

    /**
     * jQuery Scrolling Parallax v0.1
     * http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
     *
     * Copyright (c) 2009 Jon Raasch (http://jonraasch.com/)
     * Licensed under ...
  • Responsive Tabs #3 is the latest revision

    jQuery 1.6.2, HTML, CSS, JavaScript

    $(function() {
        var $tabs = $('ol li');
        var $panels = $('ul li');
            
        // If there's no JS, the panels will simply stack down ...
  • Simple Image Gallery #8 is the latest revision

    Simple Image Gallery

    $('#thumbs').delegate('img','click', function(){
        $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
        $('#description').html($(this).attr('alt'));
    });