<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>e-magine</title>
	
	<link>http://www.e-magine.ro</link>
	<description>(pretty &amp;&amp; functional)</description>
	<lastBuildDate>Mon, 12 Sep 2011 21:27:40 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/e-magine" /><feedburner:info uri="e-magine" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:browserFriendly></feedburner:browserFriendly><item>
		<title>jQuery BBQ: Better Blockquotes</title>
		<link>http://www.e-magine.ro/web-dev-and-design/96/jquery-bbq-better-blockquotes/</link>
		<comments>http://www.e-magine.ro/web-dev-and-design/96/jquery-bbq-better-blockquotes/#comments</comments>
		<pubDate>Mon, 12 Sep 2011 21:12:23 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[My Playground]]></category>
		<category><![CDATA[Web dev / design]]></category>
		<category><![CDATA[XHTML / CSS]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jBBQ]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/?p=96</guid>
		<description><![CDATA[jQuery BBQ: A blockquote (AKA pullquote) script, that will unobtrusively grab content from your webpage and display it similarly to the way newspapers do it (see Wikipedia's definition of a pull quote). It can either be dropped directly into the webpage, with no configuration, or can take a number of customization parameters if you want [...]]]></description>
			<content:encoded><![CDATA[<p class="post"><strong>jQuery BBQ</strong>: A blockquote (AKA pullquote) script, that will unobtrusively grab content from your webpage and display it similarly to the way newspapers do it (see Wikipedia's <a href="http://en.wikipedia.org/wiki/Pull_quote" target="_blank" rel="moodalbox"> definition of a pull quote</a>).<br />
<a href="http://www.e-magine.ro/wp-content/uploads/2011/09/jBBQ-screenshot.png"><img src="http://www.e-magine.ro/wp-content/uploads/2011/09/jBBQ-screenshot.png" alt="" title="jBBQ-screenshot" width="300" height="102" class="aligncenter size-full wp-image-112" /></a><br />
It can either be dropped directly into the webpage, with no configuration, or can take a number of customization parameters if you want to get creative with it. It is very lightweight - <em><strong>only 2.2 Kb</strong> (to which you will need to add the size of your jQuery distro).</em>

<span id="more-96"></span>
<h4>Demo</h4>
I've set up a <a href="/playground/jbbq" title="jQuery BBQ playground">demo page for jBBQ</a>, where you will find usage examples.
<div class="adsense">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7391886650523508";
/* article-inline */
google_ad_slot = "7535952574";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<h4>Download</h4>
Version 1.0 (initial release) is currently available for download. <br />
Choose your download type below: 
<div class="dwl_top_container"><div class="dwl_file"><a href="/playground/jbbq/jbbq-min-distro.zip" title="compressed version">jbbq-min-distro.ZIP</a></div><div class="dwl_btm_container"><div class="dwl_description">Compressed version, including the 1.6.2 distro of jQuery.</div></div></div> 
<div class="dwl_top_container"><div class="dwl_file"><a href="/playground/jbbq/jbbq-min-distro.zip" title="full version">jbbq-dev-distro.zip</a></div><div class="dwl_btm_container"><div class="dwl_description">Commented / editable code.</div></div></div>
<div class="clear">&nbsp;</div>
<h4>Requirements</h4>
<strong>jQuery BBQ</strong> requires <strong>jQuery 1.6.2</strong> or newer.

You can either use the one provided in the archive, or download your own customized version from the <a href="http://docs.jquery.com/Downloading_jQuery" title="jQuery download page" target="_blank">jQuery download page</a>.

<h4>Setup and basic usage</h4>
For a basic setup, you will only need the <code>jbbq.js</code> file included in your webpage (right next to the jQuery framework (<code>jquery.js</code>):

<code class="blocky">&lt;script type="text/javascript" src="/js/jquery.js">&lt;/script></code>
<code class="blocky">&lt;script type="text/javascript" src="/js/jbbq.js">&lt;/script> </code>

You will need to define a <code>.jBBQ</code> class in your CSS statements that sets the style to be used for the pullquotes.

Then simply add <code>class="pullquote"</code> to any of the blocks of text you want displayed as block quotes. 
<h4>Advanced Usage</h4>
Inside the area that you wish to scan (document.body by
default), surround the text you wish to use as a pullquote
with a span element, that will be identified by the 
'pullquote' CSS class (you can specify an alternate CSS 
class to scan for in the options, see below). <br />

Should you wish to force the side where the generated 
blockquote element will be placed, you will add an additional
'left' or 'right' CSS class. Otherwise, the default initial 
side will be used (see options below).<br />

Similarly to the way you would declare a side, you may force
a location for the pullquote to be inserted at, such as 
<code>'before', 'inline-prepend', 'inline', 'inline-append', 'after'</code>.<br />

If you would like to use additional classes on the pullquote,
you can also specify them in the CSS class attribute of the 
span element, by prefixing them with a '>' sign (e.g. 
class="pullquote left >fancy-styling >fun-colours"). There is
no restriction on the number of classes you can pass. An
example usage for this option is when you may want to stick
a pullquote on one side and using a negative margin, pull it 
out of the main block of text some more.<br />


If you wish to scan inside one element only, you may use 
the default jQuery selectors, e.g.: 
<code class="blocky">$('div#article').jBBQ();</code><br />

Leave the defaults untouched, instead call the function using options, such as:
<code class="blocky">$(document.body).jBBQ({'location': 'before', 'escape_html': false});</code><br />

The defaults are: 

<code class="blocky">
var jBBQDefaultSettings = {
	'default_side'			: 'right', 		
	// 'left' or 'right' will be overridden if element has 'left' or 'right' CSS class
	'alternate_side'		: true, 		
	// if true, successive pullquotes will alternate left / right placement
	'location'				: 'inline',		
	// where to place the blockquote - can be either 'before', 'after' or 'inline'
	'css_class_to_scan'		: 'pullquote',		
	// span CSS class to scan for
	'css_pullquote_class'	: Array('jBBQ'),	
	// feed it an array of CSS classes for the blockquote, to have it randomly go through it
	'escape_html'			: true			
	// if true, HTML markup will be stripped from inside the span (i.e. text only will be displayed)
};
</code>

<h4>Customization</h4>
If you have a look at the CSS file, you will find a few cool examples of pullquotes.
<h4>License:</h4>
<a href="http://en.wikipedia.org/wiki/MIT_License" target="_blank">MIT style</a>, meaning you can do anything with the above code, but I won't be held responsible if it eats your broccoli or steals your cat.
]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/web-dev-and-design/96/jquery-bbq-better-blockquotes/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Polyglot search fix</title>
		<link>http://www.e-magine.ro/web-dev-and-design/php/79/polyglot-search-fix/</link>
		<comments>http://www.e-magine.ro/web-dev-and-design/php/79/polyglot-search-fix/#comments</comments>
		<pubDate>Tue, 13 May 2008 13:27:58 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[fix]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[polyglot]]></category>
		<category><![CDATA[search]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/web-dev-and-design/php/79/polyglot-search-fix/</guid>
		<description><![CDATA[While implementing the Polyglot plugin on a WordPress site I was working on, I found a bug related to the search form: the plugin appends &#8220;/lang-pref/en/&#8221; (or whatever other ISO language code) to the search string (in the URL - when using &#8220;pretty permalinks&#8221; AKA URL rewriting). This does not directly affect the first search, [...]]]></description>
			<content:encoded><![CDATA[	<p>While implementing the <a href="http://fredfred.net/skriker/index.php/polyglot/">Polyglot plugin</a> on a <a href="http://wordpress.org/">WordPress</a> site I was working on, I found a bug related to the search form: the plugin appends &#8220;/lang-pref/en/&#8221; (or whatever other <span class="caps">ISO</span> language code) to the search string (in the <span class="caps">URL </span>- when using &#8220;pretty permalinks&#8221; <span class="caps">AKA URL</span> rewriting).</p>

	<p>This does not directly affect the first search, but the search field is then filled with <em>&#8220;my search string/lang-pref/en&#8221;</em>, which is confusing for the visitor.</p>

	<p>A quick solution is to filter the search query and remove the said string<span id="more-79"></span>:</p>

<pre>
/* Clean the search URL */
function polyglot_clean_search_URL () {
return preg_replace('@/lang-pref/[a-z]{2}/@i','',get_search_query());
}
add_filter('the_search_query', 'polyglot_clean_search_URL', 1);</pre>

	<p>You can either add this code to your theme&#8217;s <code>functions.php</code>, or to the plugin&#8217;s file, at the end.</p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/web-dev-and-design/php/79/polyglot-search-fix/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quick &amp; dirty fix for Slimbox to attach itself to all images</title>
		<link>http://www.e-magine.ro/web-dev-and-design/75/quick-dirty-fix-for-slimbox-to-attach-itself-to-all-images/</link>
		<comments>http://www.e-magine.ro/web-dev-and-design/75/quick-dirty-fix-for-slimbox-to-attach-itself-to-all-images/#comments</comments>
		<pubDate>Fri, 04 Apr 2008 09:23:06 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[My Playground]]></category>
		<category><![CDATA[Web dev / design]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[lightbox]]></category>
		<category><![CDATA[slimbox]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/uncategorized/75/quick-dirty-fix-for-slimbox-to-attach-itself-to-all-images/</guid>
		<description><![CDATA[While implementing yet another a WordPress site, I found myself in the situation where I wanted to display any and all images in lightboxes, but with a minimum of interaction from the editor&#8217;s part. All current plugins that integrate Slimbox (that I know of &#8211; this one, for example) actually require the editor to add [...]]]></description>
			<content:encoded><![CDATA[	<p>While implementing yet another a WordPress site, I found myself in the situation where I wanted to display any and all images in lightboxes, but with a minimum of interaction from the editor&#8217;s part.</p>

	<p>All current plugins that integrate <a href="http://www.digitalia.be/software/slimbox" target="_blank">Slimbox</a> (that I know of &#8211; <a href="http://www.4mj.it/slimbox-wordpress-plugin/" target="_blank">this one</a>, for example) actually require the editor to add the <code>rel="lightbox"</code> attribute. But since the editors of this site have no <span class="caps">HTML</span> knowledge whatsoever and will be editing in &#8220;visual&#8221; mode, this hinders deployment.</p>

	<p>So I came up with a modification to the actual javascript of Slimbox, to make it identify all links to images and lightboxify them <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> <span id="more-75"></span></p>

	<p>Here&#8217;s the actual code modification (starting at line 22 &#8211; on Slimbox version 1.41):</p>

<pre>$each(document.links, function(el) {
if (el.href &amp;&amp; el.href.test(/.(jpg|jpeg|png|gif|bmp)$/i)) {
el.onclick = this.click.pass(el, this);
el.rel = 'lightbox';
this.anchors.push(el);
}
}, this);
</pre>
It replaces this:

<pre>$each(document.links, function(el){
if (el.rel &amp;&amp; el.rel.test(/^lightbox/i)){
el.onclick = this.click.pass(el, this);
this.anchors.push(el);
}
}, this);
</pre>

	<p>This replaces the detection of links that have &#8220;lightbox&#8221; in the <code>rel</code> attribute with a detection of all links that lead to images.</p>

	<p>Although it suits my intended purpose, there are several drawbacks to this method that I can think of:<br />
<ul><li>if there already is a rel attribute, it overwrites it</li><li>it won&#8217;t take advantage of the &#8220;gallery&#8221; feature</li></ul></p>

	<p>As mentioned in the title, this is a &#8220;quick &#038; dirty&#8221; fix, but might help some.</p>

	<p>If I get around, I&#8217;ll be writing a WordPress plugin with options to lightboxify all images, make a gallery of all images in a post / page (by filtering <code>the_content()</code> and adding a <code>rel="lightbox[$post-&gt;ID]"</code> to image links). Maybe even make a TinyMCE plugin that would add a button to lightboxify a certain image &#8211; right from the visual editor.</p>

 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/web-dev-and-design/75/quick-dirty-fix-for-slimbox-to-attach-itself-to-all-images/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>GO Racing – logo design</title>
		<link>http://www.e-magine.ro/portfolio/76/go-racing-logo-design/</link>
		<comments>http://www.e-magine.ro/portfolio/76/go-racing-logo-design/#comments</comments>
		<pubDate>Wed, 12 Mar 2008 09:57:20 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[Graphics / Print]]></category>
		<category><![CDATA[Identity]]></category>
		<category><![CDATA[Portfolio]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/portfolio/76/go-racing-logo-design/</guid>
		<description><![CDATA[A good friend of mine is struggling to get his business on the road &#8211; he&#8217;s selling scooters and parts. In an attempt to help out, I&#8217;ve designed a logo for him: Soon enough, I&#8217;ll build him a website as well]]></description>
			<content:encoded><![CDATA[	<p>A good friend of mine is struggling to get his business on the road &#8211; he&#8217;s <a href="http://www.goracing.ro/" title="scutere, piese, accesorii" target="_blank">selling scooters and parts</a>. In an attempt to help out, I&#8217;ve designed a logo for him:</p>

	<p><div style="text-align: center;"><a href='http://www.e-magine.ro/wp-content/uploads/2008/04/goracing-logo.png' title='GO Racing logo - www.goracing.ro' target="_blank" rel="lightbox"><img src='http://www.e-magine.ro/wp-content/uploads/2008/04/goracing-logo.thumbnail.png' alt='GO Racing logo - www.goracing.ro' /></a></div></p>

	<p>Soon enough, I&#8217;ll build him a website as well <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/portfolio/76/go-racing-logo-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>One year’s statistics – thanks :)</title>
		<link>http://www.e-magine.ro/on-the-www/73/one-years-statistics-thanks/</link>
		<comments>http://www.e-magine.ro/on-the-www/73/one-years-statistics-thanks/#comments</comments>
		<pubDate>Fri, 29 Feb 2008 08:52:25 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[On the WWW]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/on-the-www/73/one-years-statistics-thanks/</guid>
		<description><![CDATA[This website is just over a year, the MOOdalBox page just went over 100.000 views and I just cashed in my first AdSense payment &#8211; a fabulous $100.78 (gathered in about a year) It&#8217;s not much, but it pays for the hosting plan of this website &#8211; which means that this site is self-sustained. I&#8217;ve [...]]]></description>
			<content:encoded><![CDATA[	<p>This website is just over a year, the <a href="http://www.e-magine.ro/web-dev-and-design/36/moodalbox/">MOOdalBox</a> page just went over 100.000 views and I just cashed in my first AdSense payment &#8211; a fabulous $100.78 <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  (gathered in about a year)</p>

	<p>It&#8217;s not much, but it pays for the hosting plan of this website &#8211; which means that this site is self-sustained.</p>

	<p>I&#8217;ve grown to about 12.000 visitors with around 30.000 page views a month.</p>

	<p>And this, for a blog with less than 30 posts. This is a wake up call for me: I will put more time in this site, from the little I have left, after my day job and my freelance projects.</p>

	<p>I have so many ideas, like, for instance, the long awaited MOOdalBox 2 (lots of people have asked me when it would come out, I&#8217;ve made and broken so many promises on this subject <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> ).</p>

	<p>To sum it up, I feel the need to thank all my visitors for spending a moment here and for supporting me on every occasion. Thanks guys <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/on-the-www/73/one-years-statistics-thanks/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>SkinShare tutorial for an age verification using MOOdalBox</title>
		<link>http://www.e-magine.ro/web-dev-and-design/70/skinshare-tutorial-for-an-age-verification-using-moodalbox/</link>
		<comments>http://www.e-magine.ro/web-dev-and-design/70/skinshare-tutorial-for-an-age-verification-using-moodalbox/#comments</comments>
		<pubDate>Wed, 27 Feb 2008 11:25:31 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web dev / design]]></category>
		<category><![CDATA[XHTML / CSS]]></category>
		<category><![CDATA[age verification]]></category>
		<category><![CDATA[moodalbox]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/uncategorized/70/skinshare-tutorial-for-an-age-verification-using-moodalbox/</guid>
		<description><![CDATA[MOOdalBox has the the honor to be the first featured post on the SkinShare dev blog, with a tutorial on how to make a quick and easy age verification procedure. Unfortunately, this is a JavaScript only method &#8211; so it&#8217;s easily bypassed. I&#8217;ll have a version that uses more server-side scripting ready some time soon [...]]]></description>
			<content:encoded><![CDATA[	<p><a href="http://www.e-magine.ro/web-dev-and-design/36/moodalbox/" title="inline html Ajax powered popup">MOOdalBox</a> has the the honor to be the first featured post on the <a href="http://www.skinshare.com/blog/" target="_blank">SkinShare dev blog</a>, with a tutorial on how to make a <a href="http://www.skinshare.com/blog/2008/01/30/cool-easy-age-verification-tutorial/" target="_blank">quick and easy age verification procedure</a>.</p>

	<p><div align="center"><a href='http://www.e-magine.ro/wp-content/uploads/2008/02/age_verification.gif' title='SkinShare age verification' rel='lightbox[skinshareageverif]'><img src='http://www.e-magine.ro/wp-content/uploads/2008/02/age_verification.thumbnail.gif' alt='SkinShare age verification' /></a></div></p>

	<p>Unfortunately, this is a JavaScript only method &#8211; so it&#8217;s easily bypassed. I&#8217;ll have a version that uses more server-side scripting ready some time soon (for a project I&#8217;m working on), but this is cool and can easily enough be used just as a warning.</p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/web-dev-and-design/70/skinshare-tutorial-for-an-age-verification-using-moodalbox/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Turbomecanica – corporate website</title>
		<link>http://www.e-magine.ro/portfolio/66/turbomecanica-corporate-website/</link>
		<comments>http://www.e-magine.ro/portfolio/66/turbomecanica-corporate-website/#comments</comments>
		<pubDate>Tue, 19 Feb 2008 12:02:25 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Turbomecanica]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/portfolio/66/turbomecanica-corporate-website/</guid>
		<description><![CDATA[I&#8217;ve just launched the new website of Turbomecanica, a local source for aeroengines and helicopter dynamic systems. It is WordPress based (currently version 2.3.3), with a customized theme to display certain interface elements. It is page-centric, rather than post-centric, since they needed a presentation website but with an easy to use interface for adding news. [...]]]></description>
			<content:encoded><![CDATA[	<p>I&#8217;ve just launched the new website of <a href="http://www.turbomecanica.ro/about-us/company-profile/" title="Turbomecanica - Repair, Overhaul and Parts Manufacturing">Turbomecanica, a local source for aeroengines and helicopter dynamic systems</a>.</p>

	<p><div align="center"><a href='http://www.e-magine.ro/wp-content/uploads/2008/02/turbomecanica_website_shot.jpg' title='Turbomcaninca.ro website screenshot' target='_blank' rel='lightbox[Turbomecanica-corporate-website]'><img src='http://www.e-magine.ro/wp-content/uploads/2008/02/turbomecanica_website_shot.thumbnail.jpg' alt='Turbomcaninca.ro website screenshot' /></a></div></p>

	<p>It is WordPress based (currently version 2.3.3), with a customized theme <span id="more-66"></span>to display certain interface elements. It is page-centric, rather than post-centric, since they needed a presentation website but with an easy to use interface for adding news.</p>

	<p>For page navigation, I&#8217;ve devised a custom tree / list menu, that I animated with the use of <a href="http://mootools.net/" title="An excelent lightweight JavaScript framework">MooTools</a>. It unfolds on the different levels of the site&#8217;s structure.</p>

 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/portfolio/66/turbomecanica-corporate-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tutorial for an AJAX login using MOOdalBox</title>
		<link>http://www.e-magine.ro/web-dev-and-design/64/tutorial-for-an-ajax-login-using-moodalbox/</link>
		<comments>http://www.e-magine.ro/web-dev-and-design/64/tutorial-for-an-ajax-login-using-moodalbox/#comments</comments>
		<pubDate>Mon, 19 Nov 2007 21:21:46 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[My Playground]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Web dev / design]]></category>
		<category><![CDATA[XHTML / CSS]]></category>
		<category><![CDATA[dialogue]]></category>
		<category><![CDATA[login]]></category>
		<category><![CDATA[modal box]]></category>
		<category><![CDATA[moodalbox]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/web-dev-and-design/64/tutorial-for-an-ajax-login-using-moodalbox/</guid>
		<description><![CDATA[While browsing the e-magine forums, answering a topic here and there, I discovered very well written and simple to follow tutorial on bulding a modal login dialogue using MOOdalBox. I&#8217;m really happy to see such a piece of work &#8211; it makes the time I spent writing the scripts even more meaningful. Thank you, Jani [...]]]></description>
			<content:encoded><![CDATA[	<p>While browsing the <a href="http://forum.e-magine.ro/" title="discuss MOOdalBox, TipsX3, Vertical kwicks">e-magine forums</a>, answering a topic here and there, I discovered very well written and simple to follow tutorial on <a href="http://my.opera.com/zomg/blog/2007/10/13/how-to-make-a-modal-ajax-login-box-with-mootools" title="mootools AJAX login box using MOOdalBox">bulding a modal login dialogue using MOOdalBox</a>. I&#8217;m really happy to see such a piece of work &#8211; it makes the time I spent writing the scripts even more meaningful. Thank you, <a href="http://my.opera.com/zomg/about/">Jani</a> ! <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>

	<p>So, if you ever feel like posting a word on any of my scripts on your blog, or if you feel yo can contribute, do drop me a line, be it over e-mail, on the forums, in a comment or.. anything you may find suitable. And at any time, do ask for directions, and generally.. don&#8217;t be a stranger, don&#8217;t stay anonymous &#8211; we all need to know you and meet your work <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>

	<p>As always, credit will be given where due <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p>

 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/web-dev-and-design/64/tutorial-for-an-ajax-login-using-moodalbox/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Site / playground / forum downtime :(</title>
		<link>http://www.e-magine.ro/on-the-www/63/site-playground-forum-downtime/</link>
		<comments>http://www.e-magine.ro/on-the-www/63/site-playground-forum-downtime/#comments</comments>
		<pubDate>Mon, 12 Nov 2007 10:30:15 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[My Playground]]></category>
		<category><![CDATA[On the WWW]]></category>
		<category><![CDATA[forum]]></category>
		<category><![CDATA[kwicks]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/uncategorized/63/site-playground-forum-downtime/</guid>
		<description><![CDATA[As some of you may have noticed (and thanks to those that notified me of the errors), the site was down for two days, the forum had errors, the playground was 404 This was due to a server change I requested because of frequent downtimes on the previous one. However, the new server my site [...]]]></description>
			<content:encoded><![CDATA[	<p>As some of you may have noticed (and thanks to those that notified me of the errors), the site was down for two days, the forum had errors, the playground was 404 <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /></p>

	<p>This was due to a server change I requested because of frequent downtimes on the previous one. However, the new server my site was moved to had certain features differently configured &#8211; that rendered my site inaccessible.</p>

	<p>First was the php version, that made my WordPress installation go <span class="caps">AWOL </span>(had to switch from php 5 to 4 to have it work). That also lead to errors on my forum pages, but those were corrected using some tips from the bbPress forums.</p>

	<p>The cause of 404&#8217;s on my playground folders was that my <code>.htaccess</code> for that folder used the directive <code>SecFilterEngine Off</code>, in order to disable <code>mod_security</code> (which, when activated, interfered with my Ajax calls). But on this particular folder, <code>mod_security</code> wasn&#8217;t configured and thus the <code>.htaccess</code> generated an error and wasn&#8217;t correctly interpreted (I used it to disable <code>mod_rewrite</code> in the playground folder too, in order to prevent WordPress&#8217; rewrite rules &#8211; but since it had an error in it, the default WP rules were applied and no such page was found).</p>

	<p>On a happier note, I just launched the &#8220;splash page&#8221; of an <a href="http://www.teurasc.ro/" title="Comunitatea teurasc.ro - aici ne exprimam liber">upcoming community website</a> I&#8217;m working on, the one that pushed me to write the code for the <a href="http://www.e-magine.ro/web-dev-and-design/61/vertical-mootools-kwicks-fxelements-using-relative-sizes/">vertical kwicks</a>.</p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/on-the-www/63/site-playground-forum-downtime/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Vertical MooTools Kwicks (Fx.Elements), using relative sizes</title>
		<link>http://www.e-magine.ro/web-dev-and-design/61/vertical-mootools-kwicks-fxelements-using-relative-sizes/</link>
		<comments>http://www.e-magine.ro/web-dev-and-design/61/vertical-mootools-kwicks-fxelements-using-relative-sizes/#comments</comments>
		<pubDate>Mon, 29 Oct 2007 12:40:56 +0000</pubDate>
		<dc:creator>Răzvan Brateş</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[My Playground]]></category>
		<category><![CDATA[Web dev / design]]></category>
		<category><![CDATA[effects]]></category>
		<category><![CDATA[Fx.Elements]]></category>
		<category><![CDATA[kwicks]]></category>
		<category><![CDATA[mootools]]></category>

		<guid isPermaLink="false">http://www.e-magine.ro/web-dev-and-design/61/vertical-mootools-kwiks-fxelements-using-relative-sizes/</guid>
		<description><![CDATA[I started out to make a vertical menu using Fx.Elements (instead of the classic horizontal one), for one of the sites I&#8217;m working on and, as always, I chose to use relatively sized elements (namely &#8216;em&#8217;). However, although Fx.Base has support for specifying the unit, the original Kwicks demo doesn&#8217;t play well out of the [...]]]></description>
			<content:encoded><![CDATA[	<p>I started out to make a vertical menu using <a href="http://demos.mootools.net/Fx.Elements">Fx.Elements</a> (instead of the classic horizontal one), for one of the sites I&#8217;m working on and, as always, I chose to use <em>relatively sized elements</em> (namely <em>&#8216;em&#8217;</em>).</p>

	<p>However, although <a href="http://docs.mootools.net/Effects/Fx-Base.js#Fx.Base">Fx.Base</a> has support for specifying the unit, the original <a href="http://demos.mootools.net/Fx.Elements">Kwicks demo</a> doesn&#8217;t play well out of the box specifying &#8216;em&#8217; as the unit.</p>

	<p>Here&#8217;s a demo of what I did: <a href="http://www.e-magine.ro/playground/vertical_kwicks_relative_size/">vertical kwicks with em sized elements</a> (notice the scalability of the layout &#8211; change the font size and it still works flawlessly)</p>

	<p>The solution was to replace all occurences of <code>.toInt()</code><span id="more-61"></span> with <code>.toFloat()</code> when extracting the height style property, because if for <code>px</code> there aren&#8217;t any decimals, for <code>em</code> or <code>%</code>, there are. It took me a while to find it, I hope it saves you some time.</p>

	<p>There&#8217;s still a jump effect at the first mouse over in Firefox and Safari (but not in <span class="caps">MSIE</span>) that I have to figure out (but for the moment I&#8217;ll consider it a &#8220;nice effect&#8221;- people that have seen it seem to like it <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  ).</p>

	<p>For now, it&#8217;s tested in Firefox 2, Internet Explorer 6 / 7, Safari 3 &#8211; all on Windows. If you get a chance to test it in other browsers, I&#8217;d appreciate a mention of it (thanks <img src='http://www.e-magine.ro/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  ).</p>
 ]]></content:encoded>
			<wfw:commentRss>http://www.e-magine.ro/web-dev-and-design/61/vertical-mootools-kwicks-fxelements-using-relative-sizes/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

