Tutorial zu canvas

malen-nach-zahlen

jquery-json tutorial

Problem: Namenskonflikt beim Shortcut $

Abhilfe: jQuery.noConflict()

Wichtig: Einbindung der Prototype Biliothek vor der jQuery Bibliothek.

<script src="prototype.js">
<script src="jquery.js"></script>
<script>
    var $j = jQuery.noConflict();

    // Use jQuery with $j(...)
    $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...)
     $('someid').hide();
</script>

Links

Using jQuery with other Libraries

jquery

<script>
$(document).ready(function() {
  $("div.acs_content_div").eq(0).show().siblings("div").hide();

  $("a.acs_tab").click(function() {
    acs_tab_id= $(this).attr("id");
    acs_content_id= acs_tab_id.replace(/tab/, "content");
    $("#" + acs_content_id).show().siblings("div").hide();    
  });
});
</script>

prototype (1.5)

<script>
Event.observe(window,'load', function () {
  $$('.acs_content_div').each(Element.hide);
  $('acs_content_data').show();

  $$('.acs_tab').each(function (tab, ix) {
    tab.observe('click', function(e) {
      $$('.acs_content_div').each(Element.hide);
      var acs_tab_id= tab.getAttribute("id");
      var acs_content_id= acs_tab_id.replace(/tab/, "content");
      $(acs_content_id).show();
    });
  });
});
</script>

simple open new window

function fenster(url) {
  newin = window.open(url,"name","depend=yes,width=400,height=500,  \
  menubar=yes,scrollbars,status=yes,resizable");
  newin.focus();
}

tata – save data in file

saveData(data);
function saveData(data) {
    return window.open("data:x-application/gaga; charset=utf-8," + escape(data));
}

slider gaga

Slider moved to

Timeline Example

Links

• osm history (dasselbe in sinnvoller)
• ui.slider.js (jquery)

cookies setzten mit jquery

var CN = "gdun";
var CV =  "Wasserfall:1218717451##Goldkammer:1218655401##Ixidion:1218546505";

// cookie setzen 
$.cookie(CN, CV, {expires: 10}); 

// cookie auslesen 
alert($.cookie(CN));

// cookie loeschen 
$.cookie(CN, null);

var dd;
 if (CV != null) {
      dd = CV.split("##");
}

for (i in dd) {
   dd[i] = dd[i].split(":");
}

var ddList = "";
for (i in dd) {
   ddList += '<tr>'
               + '<td>' + dd[i][0]+ '</td>'
               + '<td>' + dd[i][1]+ '</td>'
               + '</tr>';
}
$("#ddList").html(ddList);

links

• jquery cookie plugin

<a name=“blub“>
<a href=“#blub“>
window.location.hash = „#“ + „blub“;

Example moved to

Fadeshow

Enjoy :)

tablesorter plugin

Das tablesorter plugin und eine Zeile javascript machen aus einer Tabelle eine sortierbare Tabelle.

$('#myTable').tablesorter( {widgets: ['zebra']} );

Fuer diese Tabelle wurde das blue theme des tablesorter Plugins leicht abgewandelt.

Multi-column sorting

Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!

Nach deutschformatigem Datum sortieren

Das tablesorter Plugin kann nicht nach deutschem Datum sortieren, aber man kann es ihm beibringen:

• Nach „dateFormat“ suchen.
• Datumstrenner um „.“ erweitern (is-Funktion)
• uk-Zweig von dateFormat kopieren und in „de“ umbenennen
• „.“ bzw „\.“ in der regular Expression ergaenzen

links

• Plugin download
• tablesorter doku
• tablesorter options