A few lines, Simple jQuery slideshow

by in , 0

The code is only a few lines long

Just copy this code and save to a file.html

 




<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>

<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }

.fadelinks, .faderandom { position:relative; height:332px; width:500px; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }

.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

</head>
<body>
<h1>
Simplest jQuery Slideshow</h1>
Check out the <a href="https://www.blogger.com/archives/javascript/simplest-jquery-slideshow">blog post</a>.


<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
</div>
<h2>
More Simple jQuery Slideshow: Random</h2>
<script>
  $(function(){
  $('.faderandom > :gt(0)').hide();
  setInterval(function(){
    var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
    $('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
    $('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
  }, 3000);
});
</script>
<div class="faderandom">
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: With Links</h2>
<script>
  $(function(){
  $('.fadelinks > :gt(0)').hide();
  setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 3000);
});
</script>
<div class="fadelinks">
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: Multiple Slideshows</h2>
<script>
$(function(){
  $('.multipleslides').each(function(){
    // scope everything for each slideshow
    var $this = this;
    $('> :gt(0)', $this).hide();
    setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 3000);
  })
});
</script>
<div class="multipleslides">
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<div class="multipleslides">
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
  <a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
</body>
Demo:

More Simple jQuery Slideshow: Random


More Simple jQuery Slideshow: With Links


More Simple jQuery Slideshow: Multiple Slideshows


Tutorial Remove Button Text in IE7

by in , 0

HTML:

<input class="button" type="button" value="Go">

.. or ..

<button class="button">Go</button>

CSS:

input.button { text-indent: -9000px; text-transform: capitalize; }

Negative-indent alone unfortunately doesn't work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!

How to CSS abbr | Quality Abbreviations

by in , 1

Slightly lighter color (assuming your text is black), dotted bottom border, and a question-mark cursor. This has become a somewhat standardized approach, which is always a good thing in design usability.

abbr {
 border-bottom: 1px dotted #222;
 color: #222;
 cursor: help;
}

Demo: Tutorial Quality Abbreviations

Tutorial Print URL After Links

by in , 0 

@media print{
       a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}

How to Prevent Superscripts and Subscripts from Affecting Line-Height

by in , 0 

sup, sub {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}
sub { top: 0.4em; }

Css code to stop superscripts from breaking line heights once and for all

Tutorial Prevent Long URL’s From Breaking Out of Container

by in , 0

Or any long bit of text, really.

.comment-text {
   word-wrap: break-word;
}

A more robust browser support, you'll need more (via): 

-ms-word-break: break-all;

     /* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.

How to hide Bounce Scroll in Lion

by in , 0

Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization). 

html, body {
  height: 100%;
  overflow: hidden;
}
This will hide scrolling bar