snipts

rare articles - fall asleep

2010-05-26T06:09:00.001+02:00

Analytics told me that the Snipts.blog seems to be nothing from interest. Because of this I'll use it as an experimental platform for myself in future.

sniptskwicks - my very first moo-class

2010-04-06T22:36:00.013+02:00

tahtahh. Something I wanted to do for a long time. Creating my first mootools-class. I spent so much time on understanding javascript, mootools, and github (not to mention uncountable mistakes), that I'm really proud to present you this little thing: sniptskwicks. It's a small mootools-class based on a plugin by David Walsh (again this guy, thank you man).

How to use

Take it the easy way or, a bit more flexible, with some options.


// the simple way - with default values:
var mySniptsKwicky = new SniptsKwicks();

// or, more flexible - using the options:
var mySniptsKwicky = new SniptsKwicks('kwicks', {
 kwickname: 'kwk',
 starter: 1,
 duration: 600,
 opacity: [.5, .9],
 fullWidth: true,
 onShow: function(el){
  // do something 
 },
 onHide: function(el){
  // do something
 },
 onStart: function(){
  // do something
 }
});

Arguments

list - (string) Name of ul-element containing the kwicks.
options - (object: optional) See below.

Options

kwickname - (string: defaults to 'kwk') Name of the numerated html-files containing the content.
starter - (number: defaults to 1) Number of the Kwick you wish to open at start.
duration - (number: defaults to 500) Transition-duration for opening.
opacity - (array: defaults to []) [inactive, active] numeric values for opacity 0 to 1, no Values - no fade-effect
fullWidth - (boolean: defaults to false) If true maximum Width is set to window-Width, else to list-Width.
onShow - (function: passes the affected element as argument) Custom event to start after a kwick is shown.
onHide - (function: passes the affected element as argument) Custom event to start after a kwick is hidden.
onStart - (function) Custom event to start with a delay of 600 after initialization.

Example

Load the javascript-files to your head-section:


<script type="text/javascript" src="path_to_js/mootools.core.js"></script>
<script type="text/javascript" src="path_to_js/mootools.more.js"></script>
<script type="text/javascript" src="path_to_js/sniptskwicks.js"></script>



s

Integrate the CSS-styles needed:


/* defines width */
.kwicks {
width: 1004px;
margin: 0;
padding: 0;
list-style-type:none;
clear: both;
}

.kwicks li {
overflow: hidden;
float:left;
}

.kwick {cursor:pointer;}

/* defines kwicks-height */
#kwicks .kwick {height: 548px;}




s

Place your kwicks-ul somewhere inside the body,...


<ul id="kwicks" class="kwicks">
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
</ul>



s

note: You'll have to define several html-files corresponding to the number of your li-elements. The class loads them inside the li's as content. Watch the files on github.

...and on domready tell the class to do the work:


window.addEvent('domready', function(){
 var myFirstKwicky = new SniptsKwicks('kwicks', {
  kwickname: 'kwk',
  starter: 1,
  duration: 600,
  opacity: [.5, 1],
  fullWidth: false
 });
});



s

the snipts scroll-buttons

2010-04-01T14:31:00.004+02:00

One thing I found on the walsh was a snippet for the scroll-buttons on the left here.
I've placed the two scroll-buttons inside a wrap, which I'd like to fade a bit later on.


<div id="the_bttns_wrap">
 <a id="the_totopBttn" class="bttn" title="↑ to top of the page">h</a>
 <a id="the_nextBttn" class="bttn" title="↓ scroll down">i</a>
</div>

note: I'm using my buttons with letters that get replaced by a cufon-font, so the buttons-text is just one char here. See this article for more information.

Some lines of css. The position of the wrap is fixed.


#the_bttns_wrap {
left: 10px;
top: 200px;
position: fixed;
z-index: 10000;
}

.bttn {
width: 26px;
height: 30px;
display: block;
font-size: 185%;
cursor: pointer;
}

and a little bit of moo-magic


// the scroll-buttons function
var scrollButtons = function () {
 var the_totopBttn = $('the_totopBttn');
 var the_nextBttn = $('the_nextBttn');

 // at the beginning totop is not needed. We are at top   ;-)
 the_totopBttn.set('opacity','0').setStyle('display','block');

 var scroll = new Fx.Scroll(document.body, {
  duration: 500,
  wait: false
 });

 // check the current scroll and fade the buttons in or out if necessary
 window.addEvent('scroll',function(e) {
  the_totopBttn.fade((window.getScroll().y > 300) ? 'in' : 'out');
  the_nextBttn.fade((window.getScroll().y + window.getSize().y < window.getScrollSize().y) ? 'in' : 'out');
 });

 // fading of the wrap
 $('the_bttns_wrap').addEvents({
  'mouseenter': function(){this.fade(1)},
  'mouseleave': function (){this.fade(.3)}
 }).fade(.3);

 the_totopBttn.addEvent('click', function(){
  scroll.start(0, 0);
 });

 the_nextBttn.addEvent('click', function(){
  scroll.start(0, window.getScroll().y + 450); 
  // 450 is the value to scroll down
 });
}

// and on domready call the function
window.addEvent('domready',function() {
 scrollButtons();
});

s

done.

requires: core

a button system using cufón

2010-04-01T08:21:00.014+02:00

One idea cufon inspired me, was to create a button-font that I'm able to use where I like, in which color I like, in which size I like etc. All the advantages a normal text-link has, combined with the grafical aesthetic of image-based buttons. Plus infinite scalability. Sounds nice?

the font

I've done a really simple Illustrator-file which could be easily transfered to the font-editor. You'll have to generate a font with a Font-Editor (FontForge for example). This font has to get converted at the cufon-site (with the generator) into a js-file that cufon is able to render. But I don't want to dive deeper into font-creation here, that alone is enough stuff for an own blog.

I've done a simple font covering my needs where the button-images are laying on the lowercase glyphs, which looks like that:

button
letter

Having the font, I'm able to do more stuff, like that...
v
...like that...
a p r
e i g h j p

d j m p q u v

...or, or, or.
Infinite possibilities.
No Images.
No size-limits.
All you have to do is loading cufon and the button-font roundedOne.


<head>
 ...
 <script type="text/javascript" src="path_to_js/cufon.js"></script>
 <script type="text/javascript" src="path_to_js/roundedOne_400.font.js"></script>
 ...
</head>

Place a button inside the html where needed.



<a class="myButtonClass" href="http://somewhere.com">a</a>

note: a is the letter for the home-icon.
And, on domready, tell cufon to replace.


// domready
window.addEvent('domready',function() {
 Cufon.replace('a.myButtonClass', {
  fontFamily: 'roundedOne',
  // this could be done in css too if you like
  color: '#8c520c',
  hover: {color: '#0c5185'}
 });
}); // end domready

that's all.
Next idea: using cufon for interface-elements, but I think that's something for another article. ;-)

requires: cufon, the button-font roundedOne

discussion

2010-03-30T18:09:00.009+02:00

For my taste discussing scripts or articles isn't really elegant within blogger, so I decided to create a google group. You'll find it here: ~~group~~. We'll have to see, if it works better there.

auto-linking with mootools

2010-03-30T16:06:00.015+02:00

I hate doing things more than, let's say, twice. So I decided to do this little snippet to simplify linking inside articles.

preparation

First I've defined an object containing all often-used links I want to get replaced. Shortnames as key, display-name and link as value-array.


var linkObj = {
 // these here are for my special needs. Modify them matching yours.
 // syntax
 // 'short name': ['display name', 'http://link-adress']
 'moo': ["mootools", "http://mootools.net"], 
 'core': ["mootools.core", "http://mootools.net/core"],
 'more': ["mootools.more", "http://mootools.net/more"],
 'cufon': ["cufón", "http://cufon.shoqolate.com/generate/"],
 'lighter': ["lighter.js", "http://pradador.com/code/lighterjs/"],
 'pjs': ["processing.js", "http://processingjs.org/"]
};

The auto-link-element have to be placed in the text where needed. The element-text should correspond to a key in the defined linkObj-var.


<a class="auto">core</a>

<a class="auto" title="→ mootools.core" href="http://mootools.net/core" target="_blank">mootools.core</a>

note: these values match my linkObj-var.

the replacement-function

This function connects the text inside the found links with the corresponding key-value-pair inside the defined linkObj.


var autoLinker = function (links) {
 $each(links, function (link) {
  link.set({
   'href': linkObj[link.get('text')][1],
   'text': linkObj[link.get('text')][0],
   'title': '\u2192 ' + linkObj[link.get('text')][0],
   'target': '_blank'
  })
 });
}

a little moooh

Search for replacement elements and if found replace them. The $$('a.auto') catches all the links and then we send them to the autoLinker-function.


// domready
window.addEvent('domready',function() {
 if ($$('a.auto').length) {autoLinker($$('a.auto'))};
}); // end domready

the complete code


var linkObj = {
 // replace with key-value pairs that match your needs
 'moo': ["mootools", "http://mootools.net"], 
 'core': ["mootools.core", "http://mootools.net/core"],
 'more': ["mootools.more", "http://mootools.net/more"],
 'cufon': ["cufón", "http://cufon.shoqolate.com/generate/"],
 'lighter': ["lighter.js", "http://pradador.com/code/lighterjs/"],
 'pjs': ["processing.js", "http://processingjs.org/"]
};

var autoLinker = function (links) {
 $each(links, function (link) {
  link.set({
   'href': linkObj[link.get('text')][1],
   'text': linkObj[link.get('text')][0],
   'title': '\u2192 ' + linkObj[link.get('text')][0],
   'target': '_blank'
  })
 });
}

// domready
window.addEvent('domready',function() {
 if ($$('a.auto').length) {autoLinker($$('a.auto'))};
}); // end domready

s

Is that something that's worthy converting to a mootools-class? For my taste it's too simple, just standard-knowledge. What do you think? Let me know.

requires: core

blogger-archiv with mootools accordion

2010-03-30T10:23:00.013+02:00

A practise I've done with my sidebar-archiv here on the rightusing core and more.

the template-code

First of all the definition of my blogger-sidebar-widget "Archiv" inside my blogger-template.note: the gadget should be defined as

hirarchy
show post-titles
and monthly (in the Gadget-Prefs)

the css

Some lines of CSS for styling. note: I've no need to show the archiv-title, so I set it to: display:none [line 01-03]


#sidebar h2 {
display: none;
} 

.BlogArchive #ArchiveList ul li {
margin: 0;
padding: 0;
text-indent: 0;
}

.BlogArchive #ArchiveList ul.posts li,
.BlogArchive #ArchiveList ul ul li {
padding-left: 0;
}

#sidebar li {
margin-left: 0;
list-style-type: none;
}

#sidebar a.ytoggle {
padding: 3px 0px 5px 8px;
font: bold 145% Georgia, "Times New Roman", Times, serif;
display: block;
}

#sidebar ul.ycontent {
margin-bottom: 1px;
}

#sidebar a.mtoggle {
padding: 3px 0px 3px 8px;
font: normal 115% Georgia, "Times New Roman", Times, serif;
display: block;
}

#sidebar ul.mcontent {
margin-bottom: 1px;
background-color: #eef3a8;
}

#sidebar ul.mcontent a {
padding: 3px 3px 3px 10px;
display: block;
}

#sidebar ul.mcontent a:hover {
background-color: #fafed6;
}

s

preparing the elements

After the domready-Event get the Blog-archiv-Element, 'BlogArchive1_ArchiveList' in my case [line 01].Then start preparing for the accordion [02].I don't need the blogger-default-togglers, no counts and removed the blogger-default-states [06-08].


var blogArchiv = $('BlogArchive1_ArchiveList');
buildArchiv(); // start preparing for accordion

var buildArchiv = function () {
 var menus = blogArchiv.getElements('li a.post-count-link');
 blogArchiv.getElements('a.toggle').dispose();
 blogArchiv.getElements('span.post-count').dispose();
 blogArchiv.getElements('li.archivedate').removeClass('collapsed').removeClass('expanded');
 $each(menus, function (menu) {
  var inhalt = menu.getParent('ul');
  menu.inject(inhalt, 'before');
 });

 var yeartoggler = blogArchiv.getChildren('a.post-count-link').addClass('ytoggle roundedT5');
 var yearcontent = blogArchiv.getChildren('ul.hierarchy').addClass('ycontent');
 buildAccordion(yeartoggler, yearcontent);
 
 $each(yearcontent, function (year) {
  var monthtoggler = year.getElements('a.post-count-link').addClass('mtoggle');
  var monthcontent = year.getElements('ul.hierarchy').addClass('mcontent');
  buildAccordion(monthtoggler, monthcontent);
 });
};

the accordion

I'm using the standard Accordion-Class from mootools-more here, and gave it 'mouseenter' as trigger-event [10].


var buildAccordion = function (toggler, elements) {
  var accordion = new Fx.Accordion(toggler, elements, {
   display: 0,
   show: 0,
   duration: 500,
   opacity: true,
   transition: Fx.Transitions.Quart.easeOut,
   // I wanted my accordion to react on 'mouseenter'
   // the default trigger is 'click'
   trigger: 'mouseenter'
  });
 }

the complete code


// the domready-function once the content is loaded
window.addEvent('domready',function() {
 var blogArchiv = $('BlogArchive1_ArchiveList');
 buildArchiv(); // start preparing for accordion
 
 var buildArchiv = function () {
  var years = blogArchiv.getElements('li a.post-count-link');
  blogArchiv.getElements('a.toggle').dispose();
  blogArchiv.getElements('span.post-count').dispose(); 
  blogArchiv.getElements('li.archivedate').removeClass('collapsed').removeClass('expanded');
  
  $each(years, function (year) {
   var elements = year.getParent('ul');
   year.inject(elements, 'before');
  });
  
  // getting the year and adding CSS-Classes
  var yeartoggler = blogArchiv.getChildren('a.post-count-link').addClass('ytoggle roundedT5');
  var yearcontent = blogArchiv.getChildren('ul.hierarchy').addClass('ycontent');
  buildAccordion(yeartoggler, yearcontent);
  
  // same with months
  $each(yearcontent, function (year) {
   var monthtoggler = year.getElements('a.post-count-link').addClass('mtoggle');
   var monthcontent = year.getElements('ul.hierarchy').addClass('mcontent');
   buildAccordion(monthtoggler, monthcontent);
  });
 }
 
 var buildAccordion = function (toggler, elements) {
  var accordion = new Fx.Accordion(toggler, elements, {
   display: 0,
   show: 0,
   duration: 500,
   opacity: true,
   transition: Fx.Transitions.Quart.easeOut,
   // I wanted my accordion to react on 'mouseenter'
   // the default trigger is 'click'
   trigger: 'mouseenter'
  });
 }
}); // end domready

s

requires: core more

Processing.js with Random lines

2010-03-28T16:57:00.019+02:00

To dive a bit more into Pjs, I've just modified some existing example-scripts there a bit. A good starting point, I think. Watch the lab »

processing.js? What?

2010-03-21T21:44:00.029+01:00

The short description from the processing.js-site »:Processing.js (Oh man, I'll name that Pjs to simplify) is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Pjs uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element.
The Processing language was created by Ben Fry and Casey Reas.In 2008, John Resig ported the 2D context of Processing to Javascript for use in web pages.

I'm planning to setup some Pjs-examples in here regularly. For some deeper information have a look on their site. It's worth it.

syntax-highlighting with mootools

2010-02-23T19:17:00.023+01:00

Fortunately I found this wonderful class which brings glance to my scripts.It's named "Lighter.js" and could be downloaded here ». It's based on the mootools-framework and is really simple to use.
I've taken these instructions from the Lighter-site. For detailed information about all the options you should have a look there. Simply place mootools-core and Lighter.js into your html-header-section.


<head>
 ...
 <script type="text/javascript" src="path_to_js/mootools.core.js"></script>
 <script type="text/javascript" src="path_to_js/Lighter.js"></script>
 ...
</head>


s

Prepare the code you wish to get "highlighted". Put it inside a pre-tag.
The class of the pre defines the language ('js') and which theme (':git') you'll like it to have.


<pre id="the_javascript_code" class="js:git"> 
 // just a bit of code for demo
 var test = "this is your testscript";
 alert(test);
</pre>

s

And finally just use the following function inside a ‘domready’- or ‘onLoad’-function to get your code highlighted.


// $('the_javascript_code') is the defined pre-element
// 'altLines' is just one of the options Lighter.js have
$('the_javascript_code').light({ altLines: 'hover' });

s

Done. Lighter cares about styles for you.

Highlight multiple elements

Because I'm too lazy to adress each single pre-tag with it's own id, I've done syntax-highlighting with a function, that uses an element-collection.


var convertSyntax = function (el) {
 var code = el.getElements('pre');
 if (code.length) {
  for (var i=0; i < code.length; i++) {
   code[i].getElement('code').light({
    // these are some of the options
    // 'Lighter.js' has to offer
    altLines: 'hover',
    indent: 2,
    mode: 'ol',     
    flame: 'git'
   });
  };
 };
};

// when all the content is loaded
// just call the function with the element containing
// all the pre-tags you'll want to get 'lighted'
window.addEvent('domready',function() {
 convertSyntax($('page_element')); // $('page_element') contains all pre-tags
});

s

As said, have a closer look at the pradador-site » for a much more detailed description or watch the demos » there.

requires: core lighter

snipts started

2010-02-23T17:46:00.000+01:00

Ok. It took me some time to get the blogger-template done, but now snipts is up, running and awaiting content.