blattertech informatikLukas BlatterNiederlenzerstrasse 21
5600 Lenzburg/AGSwitzerland

079 569 25 90
https://www.blattertech.ch

Adresse anzeigen

Blog

Einfacher Slider mit jQuery

15. August 2016 |  CMS MADE SIMPLE |  WEBDESIGN |  JQUERYKommentare (2)

Auf Stack Overflow habe ich vor kurzem einen einfachen Slider entdeckt. Der Slider nutzt jQuery ohne weitere Plugins.

<html>
<head>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans;
}
.track {
  position: relative;
  height: 400px;
  width: 100%;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.ipsum {
  display: inline-block;
  padding: 10px;
  background-color: rgba(255, 255, 255, .75);
}
</style>

</html>
<body>
<div class="jCaroFade track">
  <!-- Slides -->
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
    <p class="ipsum">SLIDE ONE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
    <p class="ipsum">SLIDE TWO</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
    <p class="ipsum">SLIDE THREE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
    <p class="ipsum">SLIDE FOUR</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$('.jCaroFade').each(createFader);

function createFader(i, elem) {
  var track = $(elem);
  var firstSlide = track.find('.slide').eq(0);
  var loop = 0;

  firstSlide.nextAll().hide();
  setInterval(function() {
    loop++;
    firstSlide = firstSlide.fadeOut(500, function() {
        $(this).appendTo(track);
      })
      .next()
      .fadeIn(500);
  }, 3000);

}
</script>
</body>
</html>


Eine Demo des Sliders kann auf jsFiddle angeschaut werden.


Linktipp 12

26. November 2012 |  LINKTIPP |  CSS |  JQUERY |  PHP |  SNIPPLETS |  COMPUTER |  CMS MADE SIMPLEKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Mehr Windows 8 Apps im Store finden – Ländersperre deaktivieren
Wer Windows 8 installiert hat und im Appstore nach neuen Apps suchte, hat sich sicher auch schon über die kleine Auswahl gewundert. Diese Auswahl ist einer kleinen Option geschuldet. Mit der Ländersperre "Apps in der bevorzugten Sprache schneller finden" schränkt man den Appstore derzeit komplett ein und findet die wirklich guten Apps nicht mehr.

Versehentlichen Datenverlust in HTML-Formularen verhindern
Sebastian Klüh hat in seinem Blog ein einfaches jQuery Snippet veröffentlicht, mit welchem der versehentlichen Verlust von Formulardaten verhindert werden kann.


Linktipp 9

19. September 2012 |  LINKTIPP |  JQUERY |  PHP |  SNIPPLETS |  WEBDESIGN |  CMS MADE SIMPLEKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Die ganz normale Praxis der Folter
Das Journal21 hat einen Hintergrundbericht zum Thema Folter veröffentlicht der die erschreckende Fakten wie, wo und warum auch von den USA gefoltert wird.

CSS Arrow Please
Mit diesem Dienst lassen sich Sprechblasen in CSS3 sehr einfach erstellen. (via @cyon)


Linktipp 8

12. September 2012 |  JQUERY |  WEBDESIGN |  CSS |  LINKTIPPKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Jeder dritte fällt auf gezieltes Phishing herein
In einem Test mit über 10'000 Mitarbeitern aus 30 Unternehmen hat sich herausgestellt, dass das theoretische Wissen um Phishing in der Praxis noch lange kein entsprechendes Handeln hervorbringt. Zudem wurden von 6% aller Probanden eigene Zugangsdaten auf einer fremden Seite eingegeben.


Linktipp 5

29. August 2012 |  LINKTIPP |  JQUERY |  CMS MADE SIMPLEKommentare (0)

Unter Linktipp veröffentliche ich in unregelmässigen Abständen einige interessante Links welche mir über den Weg gelaufen sind:

Ideal Forms 2.0: HTML5-Formular-Framework auf jQuery-Basis
Ein interessantes Framework auf jQuery Basis mit welchem sehr einfach Formulare erstellt werden können. Das Framework hat eine solide Dokumentation und ist auch für responsible Webseiten problemlos einsetzbar. (via Dr. Web)


2 Klicks für mehr Datenschutz

6. September 2011 |  JQUERY |  SNIPPLETS |  WEBDESIGNKommentare (1)
2 Klicks für mehr Datenschutz

2 Klicks für mehr
Datenschutz

Heise.de hat vor kurzem ein jQuery Plugin für mehr Datenschutz bei Socialmedia Buttons veröffentlicht.

Das Plugin bindet die Socialmedia Buttons von Facebook, Twitter und Google+ erst auf den ausdrücklichen Wunsch des Nutzers ein.


Facebook und Google+ Buttons ohne direkte Einbindung

1. September 2011 |  WEBDESIGN |  SNIPPLETS |  JQUERYKommentare (0)

Facebook und Google+ Buttons sind aus der Sicht des Datenschutzes bedenklich. Ein weiterer Grund der gegen die direkte Einbindung dieser Buttons spricht, ist die Preformance welche rapide sinkt. Behelfen kann man sich mittels eines statischen Buttons der bei Klick den "richtige" Facebook oder Google+ Button nach lädt.

Folgende 2 Seiten haben hierzu interessante Anleitungen geschrieben:

Andiministrator Facebook / Google+
Media-Deluxe (Google+)


jQuery hoverInent - einfach gesteuertes Hovern

3. August 2011 |  JQUERYKommentare (0)

Gestern ist mir das jQuery Plugin hoverIntent über den Weg gelaufen. Mit diesem Plugin lässt sich das Hovern kontrolliert steuern. Die Konfiguration ist sehr einfach:

var config = {
 over: makeTall, // function = onMouseOver callback (REQUIRED)
 timeout: 500, // number = milliseconds delay before onMouseOut
 out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo").hoverIntent( config )
function makeTall(){ $(this).animate({"height":75},200);}
function makeShort(){ $(this).animate({"height":50},200);}

Demo


required Attribut beim Formbuilder setzen

12. Juli 2011 |  JQUERY |  SNIPPLETS |  CMS MADE SIMPLEKommentare (3)

Mit HTML 5 gibt es diverse neue Möglichkeiten. Eine davon ist die Formularvalidierung. Der Formbuilder von CMS Made Simple setzt bei Zwangfeldern derzeit kein required="required". Mit folgendem jQuery Snipplet lässt sich das einfach beheben: