RSS Feed
^__^

Bower, require.js, masonry & imagesloaded

,

Wanna run masonry with imagesloaded in require.js, powered by bower?

Try this gist!

First create your bower.json file and run bower install

{
  "name": "bower-masonry-imagesloaded-requirejs",
  "version": "0.0.0",
  "dependencies": {
    "requirejs": "~2.1.8",
    "jquery": "~1.10.2",
    "masonry": "~3.1.2",
    "imagesloaded": "~3.0.4"
  }
}

» read more

JSfiddle Bookmarklet Generator with jQuery & Codemirror

,

This is a little bookmarklet generator i put together this morning:

http://jsfiddle.net/QMeuV/1/embedded/result/ » read more

Jquery pump effect

,

some new loader effect?
this is a small jquery plugin that renders something like a pump or glow effect by switching two css classes with jquery UI transitions in an endless loop.
the loop can be stopped by applying a stop class to the element.

watch the demo on this almost autogenerated github page:
Demo

» read more

Ajax Deeplinks mit jQuery Address

,

Aus der Reihe: feine jQuery Plugins, um nicht zu sagen essentielle jQuery Plugins, heute:
jQuery Address

Damit kann man sehr einfach Deeplinks in Ajax getriebenen Seiten realisieren.

So lassen sich zum Beispiel verschiedene Zustände in einer Ajax Seite navigierbar machen, wie zum Beispiel einzelne Tabs via Link öffnen oder auch Akkordion Zustände.
Oder man kann Ajax Bereiche SEO technisch erfassbar machen.

» read more

Event Tracker mit HTML5 custom data Attributen

,

HTML5 bietet die Möglichkeit für custom data Attribute in HTML Elementen.
Diese beginnen mit dem Prefix data- und können danach beliebeig benannt werden.
Browser sollten diese Attribute ignorieren aber für interne Datenstrukturen sind sie sehr gut geeignet.

Zum Beispiel kann man sich in Javascript Paramter-Übergaben sparen und sich die Daten holen, die man braucht.
Das hält das Markup schön Javascript frei -im Sinne von unobtrusive.
In meinem Fall brauchte ich einen Event Tracker, der Aktionen auf dynamisch generierten Elementen aufzeichnet.

» read more

[Jquery]Namespaces via CSS-Selector adressieren

,

Vielleicht braucht es mal jemand, jedenfalls lassen sich “genamespacete” Tags in einer DOM (XML)document Instanz recht einfach mittels \: als Separator adressieren. Ein Beispiel: Ich möchte ein Dublin-Core Metadatum aus einem beliebigen Feed lesen:

(function($) {

  $('item').each(function() { $(arguments[1]).find('dc\:creator').[...]() } );

})(jQuery);

Dies entspricht wohl rein syntaktisch nicht ganz dem entsprechendem CSS3-Proposal (einzusehen unter http://www.w3.org/TR/css3-selectors/#typenmsp). Ich habe beide Möglichkeiten interessehalber auch einmal in einem aktuellen FF3.6 und Chromium getestet:

<style type="text/css">
/*<![CDATA[*/
  @namespace hanswurst url(http://www.meins.int)

  hanswurst|kaese
  {
    color: red;
  }
/*]]>*/
</style>
<hanswurst:kaese>
  Hanswurst liebt käse
</hanswurst:kaese>

Ergebnis: Naja, klappt nicht. Eventuell hat jemand eine Idee oder kann mich korrigieren?

Generierte Reflexions-Effekte mit Silverstripe bzw jQuery

,

Musste neulich so einen “Web 2.0 Mirror FX” haben und bin über 2 interessante Lösungen gestolpert:

Silverstripe & GD:
http://www.ssbits.com/web-2-0-mirrored-images/

jQuery & Canvas:
http://www.digitalia.be/software/reflectionjs-for-jquery#demo

weitergehende Erklärungen dazu spare ich mir jetzt mal, sind ja beide gut dokumentiert :)

JQuery hover – Schluss mit Geflimmer

,

meine Entdeckung des Tages:
jQuery hover Intent Plugin.

Mit der WebCam wird die Absicht des Users erkannt und nur ein Event getriggert wenn der MouseOver wirklich gewollt ist.

Möglicherweise ist es technisch etwas anders gelöst. Aber der Effekt ist gut!

Juitter prettyDate

,

Juitter ist ein Twitter Widget basierend auf jQuery. Damit kann man Twitter nach gewissen Keywords durchsuchen und die Anzeige als Widget mit wenig Code auf seiner Seite einbinden. Das alles ist rein clientseitig, was es noch einfacher macht.

Das geht so:
Juitter (1.0) runterladen, in sein Projekt kopieren.
» read more

Mit Jquery eine Form auslesen und mit Ajax Post versenden

,

Will man die Values einer Form dynamisch holen und mit Ajax verschicken mit Jquery
muss man wohl einiges beachten.
Eine gescheite -outthebox- Lösung scheints da nicht zu geben bzw. ich hab sie nicht gefunden.

1. Daten holen
Die Daten holt man am besten über die Jquery Methode serializeArray().

var s = $('#campaigns form').serializeArray()

Damit holt Jquery alle Values in dieser Form als Array, bei radio oder checkbox types jeweils die aktivierten.

2. Wie versenden?
Nun stellt sich die Frage, wie man die Daten schön aufbereitet und dann versendet.

» read more