lo-ga-rie words, lines .. life

3Jul/090

Projects @ lo-ga-rie

I made a page for all my projects, well scripts actually, that i made in the past and present that i want to share with the world. Check them out and give me feedback where needed. All script are released under the GPL licence.

Look at them here the first script is also added and i call it fancyButton a simple script that will transform any normal link into an apealing one without altering the plain HTML page so people without scripting enabled will still be able to click the link.

Filed under: jquery, werk No Comments
17Jun/090

Iframes die meegroeien met de content / font-size

Stel je maakt een site met een iframe waarvan de content d.m.v. zoom buttons kan veranderd worden.
Men neme:

  1. buttons om de font-size aan te passen
  2. een iframe met content
  3. een paar regels script

Om initieel de iframe de juiste hoogte te geven kan je het volgende gebruiken

$('iframe').load(function(){
  this.style.height =
  this.contentWindow.document.body.offsetHeight + 30 + 'px';
});

De 30 extra px is voor webkit browsers.
Als je de font-size knopjes indrukt dan kan je in je click event de volgende code gebruiken om iframe mee te laten scalen:

var iframeDoc = $("iframe").contents();
iframeDoc.find("body").attr("class", $(this).attr("class")); // $(this) is de font-size knop met een class 'normal' of 'big' of 'bigger'
$("#myContent").css("height", iframeDoc.find("body").height() + 30);

Dit werkt goed als je de CSS zo opbouwd dat alle font-sizes em based zijn dan kan je via

body.normal {
  font-size: 100%;
}
body.big {
  font-size: 120%;
}
body.bigger {
  font-size: 140%;
}

De font-size van het document en de iframe in 1x aanpassen.

Filed under: css, jquery, werk No Comments
20Apr/090

Van json naar atompub

Men neme een blog bericht met een auteur, een header en een berichtblok. Deze halen we van de server via JSON en krijgen het volgende terug: We nemen even aan dat "ci1" een ContentItem is en dat deze ID ook wordt gebruikt als ID voor de div waarin het item gerenderd wordt. Deze div heeft ook de class "editMode" (als enige op de pagina)

var ci1 = {
 "entry" : { "@xmlns" : "http://www.w3.org/2005/Atom" ,
  "title" : "[Titel] Lorem Ipsum",
  "id" : "generated-id-1",
  "updated" : "2005-10-07T17:43:07Z",
  "author" : {
   "name" : "Logged in user"
  },
  "content" : { "@type" : "xhtml",
   "div" : Lorem ipsum dolor sit amet"
  }
 }
}

Vervolgens kunnen we de content hiervan heel makkelijk aanpassen door het volgende uit te voeren:

var id = $(".editMode").attr("id");
eval(id).entry.content.div = "Andere content";

Nu willen we deze data opslaan met atompub, wat niet meer is dan een XML met bepaalde elementen, verrek net dé elementen die ik ook in de json heb gebruikt, we kunnen dus de json 1 op 1 omzetten naar XML en dat opsturen naar de server

$.post("/atompub.ashx", { data: json2xml(eval(id))},
 function(data){
   // ga maar wat leukt doen met de return value
 }, "xml");

De gebruikte json2xml komt van deze site
Al met al een geslaagd dagje. Even wat technieken aan elkaar knopen en je hebt een volledig in javascript geschreven client/server oplossing die robuust maar toch veelzijdig is. Door gebruik te maken van json is de data erg makkelijk aan te passen en atompub zorgt voor de omsluiting (het lijkt wel soap ...)

Filed under: atompub, jquery, json, werk No Comments
16Apr/090

Met het nieuwe CMS heb ik ook weer stappen kunnen zetten. Alle soorten contentitems zijn nu qua frontend klaar en volledig via frontend editing aan te passen. Een begin gemaakt met het maken van een pagina template waarin je via drag & drop de volgorde kan aanpassen van alle gebruikte contentitems. Ja het is heulemaal web 2.0. Van de text editor hebben we nu een jQuery plugin gemaakt waardoor we makkelijk een veld kunnen omzetten in een editor en andersom

$(this).find(".edit_html").tinyfy();$(this).find(".edit_html).tinyfy.untinyfy();

Voor opslag gaan we gebruik maken van Atompub; dat is werk voor volgende week; morgen eerst de verschillende pagina templates maken en bekijken hoe de interactie tussen verschillende contentitems gaat verlopen als er meer dan 10 op een pagina staan.

Filed under: atompub, jquery, tinymce, werk No Comments
 « Newer Entries  

Last.fm

Recent Tweets

Pages

Archives