Per JQuery externe Links im neuen Fenster öffnen

Ein geläufiges Attribut zum öffnen eines Links in einem neuen Browserfenster war das target=”_blank”. Seit der XHTML Herrschaft ist das Attribut nicht mehr valide. Dies bedeutet das die Zeit gekommen ist uns eine Alternative zu überlegen. Hierfür verwenden wir ein kleines JQuery Script:

$(document).ready(function(){
  $('a.extern').click(function() {
    this.target = "_blank";
  });
});

Ausgabe des Links im xHTML Dokument:

<a href="doc.html" class="extern">Dieser Link öffnet sich in einem neuen Fenster</a>

JQuery document ready Kurzschreibweise

Der “document ready” Befehl weist an, den Javascript Code erst dann auszuführen wenn das Dokument / der DOM geladen wurde. Die ursprüngliche lesbare Form

$(document).ready(function() {
  // Code
});

kann für Codesparende auch wie folgt geschrieben werden:

$(function() {  
  // Code
});

JQuery Newsticker

Zuerst erstellen wir eine ungeordnete Liste mit der Klasse “newsticker” in unserem HTML Dokument. Die Listenpunkte werden mit den “Newsbeiträgen” befüllt”.

<ul class="newsticker">
  <li><a href="#">Lorem ipsum dolor sit amet</a></li>
  <li><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</a></li>
  <li><a href="#">labore et dolore magna aliquyam erat, sed diam voluptua</a></li>
  <li><a href="#">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd</a></li>
</ul>

Zur grafischen Aufwertung nutzen wir einige CSS Anweisungen:

ul.newsticker { list-style:none; border:1px solid #ddd; padding:30px 10px; width:400px; background:#f3f3f3; }
ul.newsticker a { color:#0096ff; }
ul.newsticker a:hover { color:#000; text-decoration:none; }

Um nun Bewegung in unseren Newsticker zu bringen binden wir folgendes JQuery Script ein:

$(document).ready(function() {
  $('ul.newsticker li').not(':first').hide();
  var newsticker = function(){
    setTimeout(function(){
      $('ul.newsticker li').eq(0).fadeOut(function(){
        $(this).detach().appendTo('ul.newsticker');
        $('ul.newsticker li').eq(0).fadeIn();
      });
      newsticker();
    }, 4000);
  };
  newsticker();
});

JQuery “scoll to top” Link

Wenn die Seite doch mal etwas länger wird, sollte man dem Besucher die Möglichkeit einräumen per Link wieder zum Seitenanfang zu gelangen.

Was geschieht in den nächsten Zeilen ?

Zuerst erstellen wir einen Anker (Link) im HTML Dokument mit der Aufschrift “nach oben” und vergeben eine Klasse damit wir das Element ansprechen können:

<a href="#" class="totop">nach oben</a>

Daraufhin erfolgt eine Positionierung des Ankers mittels CSS um den Link im Browserfenster rechts unten anzuzeigen:

a.totop { position:fixed; right:20px; bottom:20px; }

Nun kommt der spannende Teil. Das JQuery Script! Das Script blendet beim Laden der Seite den Anker aus. Wenn die Seite 200 Pixel nach unten gescrollt wird, wird der Link wieder eingeblendet. Sobald der Link angeklickt wurde gleitet die Seite sanft nach oben zum Seitenanfang.

$(document).ready(function() {
  $('a.totop').hide();
  $(window).scroll(function(){
    var value = 200; // Toplink beim vertikalen scrollen ab einem Wert von XXX 'px' anzeigen
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $('a.totop').fadeIn();
    } else {
      $('a.totop').fadeOut();
    }
  });
  $('a.totop').click(function(){
    $('html, body').animate({scrollTop:'0px'}, 600);
    return false;
  });
});

JQuery: Input Default Value bei Klick ausblenden

$(document).ready(function() {
  $('input').click(function() {
    if (this.value == this.defaultValue) {
      this.value = '';
    }
  });
  $('input').blur(function() {
    if (this.value == '') {
      this.value = this.defaultValue;
    }
  });
});