jQuery – 8 – Bannerrotation, zufällig

Ein kleiner, sehr simpler Bannerwechsler. Ziel war es, daß bei jedem Reload der Seite ein zufälliges Banner eingeblendet wird und diese dann mit einem kleinen FadeIn/FadeOut Effekt munter vor sich her rotiert .. natürlich unobtrusive .. und barrierefrei 🙂

Hier ist das Beispiel zu finden

Das ganze hört sich jetzt nicht sonderlich kompliziert an .. allerdings muss man sich kurz mit der Erzeugung von ganzzahligen Zufallszahlen beschäftigen und die Modulo-Division hilft einem auch immens weiter.

Aber erst mal zum CSS File .. hier muss man drauf achten das die img Tags absolut positioniert werden .. da es sonst einen kleinen optischen Nebeneffekt gibt (probierts aus) .. ihr könnt aber das Elternelement gerne wieder relative setzen.

Das Javascript / jQuery:

$(document).ready(function(){
  countImages = $("#banner img").hide().size(); 
  currentImage = Math.floor(Math.random()*countImages);
  $("#banner img:eq("+currentImage+")").show();
  setInterval(rotate, 3500);
});
function rotate() {
  oldImage = currentImage%countImages;
  newImage = ++currentImage%countImages;
  $("#banner img:eq(" + newImage + ")").fadeIn("slow", function() {
    $("#banner img:eq(" + oldImage + ")").fadeOut("slow");
  });
}

countImages zählt sämtliche img Tags unter Banner durch und setzt sie display:none;
currentImage erzeugt eine ganzzahlige Zufallszahl kleiner gleich der Anzahl von img Tags.

Dann wird anhand der Zufallszahl ein img Tag ausgewählt und angezeigt. (:eq Selektor).

Wir starten ein Interval das die Funktion rotate alle 3,5 Sekunden ausführt.

Es folgen die zwei Modulo Divisionen .. diese liefern immer nur den Rest Wert. Also wenn currentImage = 3 und countImages = 4 ergibt das 0 REST 3 .. welches das aktuelle Bild ist das zufällig angezeigt wird.

Die zweite Division erhöht currentImage um 1 .. dividiert und erhält das folgende Bild .. kompliziert? .. aber notwendig .. wir müssen ja nachdem das letzte Bild (4) angezeigt wurde wieder von vorne .. beim ersten Bild (0) beginnen .. und 4 geteilt durch 4 ist 1 REST 0 🙂

Zum Schluss dann noch das ein und ausblenden ..

Hier nochmal das Beispiel der Bannerrotation zum nachmachen.

Update 01.06.2011 – Erste Revision

Nach dem Kommentar von Christoph .. die erste Überarbeitung:

$(function(){
  var bannerImg = $("#banner");
  var countImages = bannerImg.children().hide().size();
  var currentImage = Math.floor(Math.random()*countImages); 
  bannerImg.children(":eq("+currentImage+")").show();
  setInterval(function() {
    var oldImage = currentImage%countImages;
    var newImage = ++currentImage%countImages; 
    bannerImg.children(":eq(" + newImage + ")").fadeIn("slow", function() {
      bannerImg.children(":eq(" + oldImage + ")").fadeOut("slow");
    });
  }, 3500);
});

Die globalen Variablen habe ich in lokale umgewandelt .. das DOM Element Banner wird nun nur noch einmal selektiert und dann als Variable durchgereicht.

Update 02.06.2011 – Zweite Revision

$(function() {
  var bannerImg = $('#banner');
  bannerImg.children(':eq(' + ~~(Math.random() * bannerImg.children().hide().size()) + ')').show();
  setInterval(function() {
    var current = bannerImg.children(':visible').fadeOut();
    if (current.next().length > 0) {
      current.next().fadeIn();
    } else {
      bannerImg.children(':first').fadeIn();
    }
  }, 3000);
});

So .. nun habe ich auch den Delay beim Übergang vom letzten auf das erste Bild eliminiert .. es ist sicher etwas besser lesbar als Christophs Variante .. den Unterschied zwischen Math.floor und den zwei “~~” glaub ich jetzt einfach mal und das Beispiel habe ich auch auf den neusten Stand gebracht ..

jQuery – 7 – Sidebar Slide In

An der Seite der Website soll fix ein Bereich definiert sein der bei einem Mouseover in die Seite “hereinfährt” und bei Mouseout sich wieder in seinen ursprünglichen Zustand zurück begibt .. hat man sicher auch schon ein paar mal gesehen und ist irgendwie schick 🙂

Ich habe diesen Sidebar Slide In mit Hilfe von jQuery und CSS3 mal gebaut.

Hier erst mal das CSS das die Box dahin bringt wo ich möchte:

#bildergallerie #bildergallerie {
  background-color: #000000;
  border: 0 none;
  box-shadow: 5px 5px 10px #999999;  
  border-bottom-left-radius: 15px;
  border-top-left-radius: 15px;  
  -webkit-border-bottom-left-radius: 15px;
  -moz-border-radius-bottomleft: 15px;     
  -webkit-border-top-left-radius: 15px;
  -moz-border-radius-topleft: 15px;    
  color: #dddddd;  
  float: right;
  font-size: 10px;
  height: 80px;  
  line-height: 1.5em;  
  margin-right: 0%;  
  opacity: 0.95;
  padding: 15px;
  position: fixed; 
  right: -380px;
  text-align: left;  
  top: 2%;
  width: 450px;
  z-index: 9999;
  }

Wichtig ist hier im Grunde die fixe Position, die Breite von 450 Pixeln und das initital 380 Pixel der Box außerhalb des Viewport liegen .. nur damit lässt sich der Effekt erzielen .. der Rest ist ein bisschen CSS3 und das übliche Styling.

Das jQuery ist da fast einfacher zu verstehen:

$(document).ready(function() {
    $("#bildergallerie").bind("mouseenter",function(){
      $("#bildergallerie").animate({"right": "+=380px"}, "slow");
    }).bind("mouseleave",function(){
      $("#bildergallerie").animate({"right": "-=380px"}, "fast");
    });
  });

Die Methode .bind aktiviert das komplette Element “#bildergallerie” für den Event “mouseenter” und zählt dann die Position “right” langsam um 380 Pixel hoch .. initial hatten wir ja -380 Pixel .. wenn .animate fertig ist haben wir 0 Pixel .. bei “mouseleave” passiert dann einfach das Gegenteil.

Hier nochmal das komplette Slide In Beispiel.

Update 13.06.2011

Besser dieses SlideOut benutzen .. es skaliert und hat weniger DOM Abfragen.

Google vs. Content Spam

Wie erkennt Google minderwertigen Inhalt bzw. Webseiten die einzig und alleine nur darauf ausgelegt die Suchmaschinenergebnisse zu beeinflussen?

Es gibt da durchaus einige Faktoren mit denen Google das herausfinden kann bzw. zu erkennen versucht. Durch die Abstrafung sogenannter Content Farmen rückt das auch in den letzten Monaten weiter in den Fokus .. und ein Fazit das ich schon jetzt ziehen kann: GEBT EUCH MÜHE MIT EUREN TEXTEN!

An was kann man also minderwertige Texte erkennen:

Textstruktur

Ein gut lesbarer und verständlicher Text ist gut strukturiert. Er verwendet Überschriften verschiedener Hierachien, Listen, Tabellen, Bilder ggf. Videos um Themengebiete zu veranschaulichen.

Textlänge

Vor allem im Vergleich zu anderen Webseiten die sich mit dem selben Thema beschäftigen .. ein Text muss zu manchen Themengebieten einfach einen gewissen Umfang haben um wichtige Themenbereiche abzuarbeiten .. also ist die Textänge ein sehr wichtiger Faktor.

Keywords

Wenn man für seinen Text immer nur exakt das selbe Keyword verwendet deutet das ebenso auf Content Spam hin als wenn man wichtige Keywords die verwandt sind komplett außer acht lässt. Hier ist es wichtig die Bandbreite verwandter und relevanter Keywords so gut es geht in den Text mit aufzunehmen.

Soziale Faktoren

Wieviel Kommentare wurden z.b. zu einem Text hinterlassen .. tauchen einer oder mehrere Tweets und Links von externen Websiten zeitnah zur Veröffentlichung des Textes auf etc. ..

Im Endeffekt ist der Crawler aber nur eine Maschine die eben gewissen Regeln folgt und noch nicht die Intelligenz hat zweifelsfrei schlechten von gutem Content zu unterscheiden .. Google verbessert dies aber Schritt für Schritt und wir werden da noch einige Überraschungen erleben.

Fakt bleibt aber: Einen guten, wertvollen Text zu schreiben kostet Zeit, er verlangt nach Wissen und Engagement und nicht zuletzt auch etwas Hirnschmalz.

jQuery – 6 – Smooth Scrolling

Ihr wollt innerhalb einer Seite diverse Bereich mit Ankern verlinken oder auf langen Seiten (am Ende der Seite) per Klick wieder an den den Anfang gelangen? Um das ganze ein bisschen Schicker zu machen empfiehlt sich ein sanftes Scrolling. Also kein rapider Sprung .. sondern die Seite soll elegant an einem vorüber gleiten.

Ich hab das gerade spontan mit jQuery gebastelt:

$(document).ready(function() {
  $("a[href*=#]").click(function(){     
     var trgt = this.hash.slice(1);     
       if (trgt.length) {
         var x = $('a[name="'+trgt+'"]')
         var offset = x.offset().top;
         $('html,body').animate({scrollTop: offset}, 1000);
         return false;
       }
  });
});

Das Script matched auf alle A Tags im DOM die mit einem # (Hash) beginnen .. also z.b “a href=”#ziel” .. wenn ihr auf den Link klickt schnibbeln wir den “#” weg so das nur noch der Name des Ankers übrig bleibt (ziel) .. den kleben wir dann in den A NAME Tag rein .. und schauen mit dem “Offset” wo dieser sich in der Seite befindet (der Abstand von oben in Pixel) .. dann scrollen wir da mit einer kleinen Verzögerung hin ..

jQuery – 5 – Erweiterter Tooltip

Mein jQuery Tooltip aus 2008 war ja etwas eingeschränkt .. alle snapshot klassen haben den selben Tooltip (gleiches Bild) bekommen .. ist natürlich doof .. und darum hab ich es nun erweitert das von jeder snapshot Klasse im DOM das Tooltip Image separat ausgelesen und drangeklebt wird.

$(document).ready(function() {
  $(".snapshot").each(function(){
    $(this).hover(      
      function (pic) {      
         trgt = $(this);        
         html = "<div class='viewpic_style'><img src='" 
           + trgt.attr("href")
           + "' border='0' /><br /><b>"
           + trgt.attr("title")
           + "</b></div>";            
         $(html).appendTo("body");
         $('.viewpic_style').css ({
              left: (pic.pageX + 15) + 'px', 
              top: (pic.pageY + 18) + 'px'});
         $('.viewpic_style').show();
       },
       function (pic) {
          $('.viewpic_style').remove();
       }
     );
  });
});

Suchmaschinenoptimierung – Basics

Anlässlich des Whiteboard Fridays bei meinem Arbeitgeber der 1und1 Internet AG habe ich einen einen Vortrag über Suchmaschinenoptimierung gehalten .. von der Keywordanalyse über OnPage und OffPage Optimierung bis zum Monitoring .. die ganzen Basics die dazu gehören.

Wer mehr darüber wissen mag .. ich habe eine ganze Serie zu Suchmaschinenoptimierung geschrieben.