Archives for 2008

You are currently browsing 28 article(s) published in 2008, please try the search if you can't fint what you're looking for.


aFramework Install

Thursday, November 13, 2008

Last few weeks I've been working on aFramework's installation wizard whenever I've had some spare time.

aFramework Install

The entire config-handling has been rewritten and is now completely dynamic. This allows the installation wizard to adapt to whatever sites the user selects for installation.

I've set up a demo-page so please have a look and tell me what you think. The demo won't actually install anything but it looks and behaves exactly the same as the real thing.

I should mention that both the logo and the icons are temporary (possibly even the entire design). A mate of mine is working on some new stuff but I kind of liked those dark icons I found on iconspedia.com so I felt it was time to stick it online.

Handy CSS Constants

Friday, October 03, 2008

I've used my CSS-constants class in quite a few different projects now and I've built up a pretty nice set of genereic constants that I use for pretty much every site I create.

/**
 * Underlined
 * Makes element underlined and removes on :hover
 */
$underlined {
    text-decoration: underline;
}

$underlined:hover {
    text-decoration: none;
}

/**
 * Not Underlined
 * Makes element not underlined and removes on :hover
 */
$not-underlined {
    text-decoration: none;
}

$not-underlined:hover {
    text-decoration: underline;
}

/**
 * Data Definition List
 * Used on DLs to turn them into Key: Val
 * Bold key with : after
 */
$data-definition {
    margin-left: 0;
    padding-left: 0;
}

    $data-definition dt {
        float: left;
        clear: left;
        font-weight: bold;
        margin: 0 5px 5px 0;
    }

    $data-definition dt:after {
        content: ": ";
    }

    $data-definition dd {
        margin: 0 0 5px;
    }

/**
 * Pipe Menu
 * Turns a UL into foo | bar | zaz
 */
$pipe-menu {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

    $pipe-menu li {
        display: inline;
    }

    $pipe-menu li:after {
        content: " | ";
    }

    $pipe-menu li:last-child:after {
        content: "";
    }    

/**
 * Dash Menu
 * Turns a UL into foo - bar - zaz
 */
$dash-menu {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

    $dash-menu li {
        display: inline;
    }

    $dash-menu li:after {
        content: " - ";
    }

    $dash-menu li:last-child:after {
        content: "";
    }

/**
 * Pagination
 * Turns a UL into < prev | 1 | 2 | 3 | next >
 */
$pagination {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    text-align: center;
}

    $pagination li {
        display: inline;
    }

    $pagination li:after {
        content: " | ";
    }

    $pagination li:last-child:after {
        content: "";
    }

        $pagination li:first-child a:before {
            content: "< ";
        }

        $pagination li:last-child a:after {
            content: " >";
        }

/**
 * Previous/Next Menu
 * Turns a UL with 2 LIs into < prev | next >
 * (Should add support for $constant = $constant)
 * (to avoid duplicate self-clear-styling)
 */
$previous-next-menu {
    _height: 1%;
    *display: inline-block;
    _display: block;
}

$previous-next-menu:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

$previous-next-menu {
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

    $previous-next-menu li {
        float: right;
    }

    $previous-next-menu li:first-child {
        float: left;
    }

        $previous-next-menu li a:after {
            content: " >";
        }

        $previous-next-menu li:first-child a:after {
            content: "";
        }

        $previous-next-menu li:first-child a:before {
            content: "< ";
        }

/**
 * Arrow-list
 * Prepends an arrow to every list-item
 */
$arrow-list {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

    $arrow-list li {
        margin-bottom: 5px;
    }

    $arrow-list li:before {
        content: "> ";
        font-size: 8px;
    }

/**
 * Dash-list
 * Prepends a dash to every list-item
 */
$dash-list {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

    $dash-list li {
        margin-bottom: 5px;
    }

    $dash-list li:before {
        content: "- ";
        font-size: 8px;
    }

/**
 * Plain list
 * A list without margin, padding or bullets
 */
$plain-list {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

/**
 * A11y hide
 * Hides and element in an accessible way
 */
$a11y-hide {
    position: absolute;
    left: -10000px;
    top: -10000px;
}

/**
 * Self Clear
 * Classic self-clear
 */
$self-clear {
    _height: 1%;
    *display: inline-block;
    _display: block;
}

$self-clear:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}

This file is automatically included in every aFramework-project (along with other shared CSS and JS-files) so whenever I need a self-clear, or a pipe-separated-menu or whatever I simply go:

#navigation ul = $pipe-menu;
#wrapper = $self-clear;
// etc...

Without constants I'd have to give #wrapper a .self-clear class and #navigation ul a .pipe-menu class. This would require me to change my HTML every time I wanted to change design. Which totally defeats the entire purpose of CSS.

Try it out. It really helps keep design-related information out of your HTML.

Laters

aFramework and the perfect 404

Wednesday, September 24, 2008

I just finished aFramework's brand new 404-handling (much simplified).

I used ALA's the perfect 404 as inspiration but wrote it all in PHP rather than inaccessible JS using document.write (as they do in the article (i guess so it works without any particular server-side language support)).

aFramework's 404

It includes all the 4 "states" described in the article and search-results based on either the requested URI or the actual search-term (if it's a search-engine referrer) are presented to the visitor.

I've tried to mimic the design of FF's error-page, I even use the same warning-icon located at chrome://global/skin/icons/warning-large.png (obivously not available outside FF).

A 404 is triggered in aFramework either from a Module in the current Controller (for example the article-module can trigger a 404 in case the requested article doesn't exist) or simply because the router can not find a route for the requested URI.

Laters

This kid's got some issues

Wednesday, September 24, 2008

I know this is pretty old but recently watched it again and just had to put it up on the site in case you've missed it.

Google releases browser

Tuesday, September 02, 2008

Google Chrome is Google's new browser built on the Webkit rendering-engine (same as Safari runs on) and the brand new V8 JS-engine.

It all looks very interesting and with any luck this will help get people away from IE.

Have a look at the Google Chrome comic.

  • Comments are off
  • Filed under Other

aFramework drag n drop admin

Wednesday, August 27, 2008

I've been working hard all night coding a drag n drop admin for aFramework. It allows you to add and remove modules to the page you are currently at.

aFramework Drag n Drop Admin

Just like every other admin in aFramework this one is run directly on the site. You just log in and that allows you to customize the page as well as eventually add and remove articles etc (this is already possible in v2, just have to convert it to v3).

Update

aFramework v3 requires PHP 5.3 to work, something my host does not offer (yet, it's only in beta) but I've set up a static example of the drag-n-drop admin so you can at least get a feel for how it works.

After adding a module it will never stop loading. This is where aFramework would actually run and render the module using AJAX. Since this is just a hard-coded version in pure HTML, CSS and JS the AJAX:ing won't work.

You can try disabling JS if you like - it works without as well. You won't be able to either add nor remove modules without JS in the static version though (for the same reasons as the AJAX-calls don't work).

Ok, check it out!

aFramework progress

Friday, August 15, 2008

I've finished most of the actual framework-code now. There's some left but nothing I really need to build a project.

All that's left now is to build all the modules that make up aBlog (there's like 40 of them).

aFramework Debug

Here's a screenshot of aFramework's debug-panel. As you can see some of the module's are from aFramework itself, some from aCMS. This is possible thanks to aFramework's site-hierarchy feature.

You may also note that the module I'm hovering with my mouse (Navigation) is highlighted on the site (well actually low lighted as I set opacity to .2).

The next step is to start building modules. AndreasLagerkvist.com should hopefully be up and running in about a month.

Ciao

One reason why headings are important

Tuesday, August 12, 2008

aFramework version 3

Friday, July 25, 2008

The reason I've been so ridiculously quiet the last few weeks is because I've been working on version 3 of my framework, aFramework. The one that the blogging-software exscale.se runs on.

Version 3 will include loads of new features and enhancements but still be focused on making things as simple and logical as possible to both the user and the developer.

I've set up a new category for aFramework-related articles and I'm going to start documenting a lot more there.

Some of the things you can look forward to in version 3 include:

  • Super-simple yet powerful routing allows for complete URL-restructuring with the change of one line of code. Also works without MOD_REWRITE and from any sub-directory.
  • Even more powerful CSS constants and variables. Auto-prefixing of selectors for module and controller CSS-files. Caching!
  • Cached modules.
  • All sites now also have the ability to inherit from any number of parent sites. This means that if you want to set up your own web-shop/blog you can simply create a MySite that extends aBlog and aWebShop as well as aFramework and URLs, controllers, modules, styles and scripts will be merged into one. If you're happy with just a blog you can download a release of aBlog or you could check out the svn repo, create MyBlog and extend aBlog from it. That way you can make changes to the blog without having to touch aBlog's source-code.
  • Version 3 includes a new feature that allows you to include additional template-code before or after a module's template simply by creating a BeforeModule.tpl.php or AfterModule.tpl.php
  • Nicer debugging with loads more information.

The biggest things are really the routing (which I think turned out pretty nice) and the whole new site inheritance-thing.

The way it works is that you specify a SITE_HIERARCHY constant on site-level that tells aFramework which sites your site is built from. The value of the constant is a space-separated string of site-names starting with the one with highest priority and could look something like: 'MySite aBlog aWebShop aFramework'.

Now, every time aFramework requests a controller, or a module-class, or a stylesheet, or a template-file, or a route (etc) it starts by looking in the site highest in the hierarchy and works its way down.

This way you can create totally customized sites without writing more than a couple of lines of code.

Using the BeforeTemplate.tpl.php and AfterTemplate.tpl.php files you can easily customize default modules to your liking. If you want to override the entire module-template simply create a file by the same name.

That's what's been keeping me quiet (and off sleep). There's no deadline for v3 but I've actually set up a sprint backlog which should be finished in a couple of weeks so maybe something to show then.

Stay tuned.

Live ajax search using the Google search API

Monday, May 19, 2008

I realized the bogus-search-results script from Live Ajax Search jQuery Plug-in may not have been very satisfying to you visitors, so I thought I'd show you how to use the Google search API to create a real live ajax search on your site.

This example requires PHP and if you're running any version below 5.2 you'll need Michal Migurski's JSON-class as well.

The PHP (and HTML erm..)

The Google search API is basically just a URL you pass a search-query to and it returns a JSON with results.
I won't go in to too specific details about the API, if you wish to know more please refer to the documentation.

Create a search-results.php file and put the following code in it:

<?php
require_once 'JSON.php';

# Your site URL
$site 'exscale.se';

# Make sure a search-query was entered
if(isset($_GET['q'])) {
    
# Are we on the first page?
    
$start = isset($_GET['start']) ? $_GET['start'] : 0;

    
# The URL to the Google search API
    
$url 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=' .urlencode($_GET['q']) .'%20site:' .$site .'&rsz=large&start=' .$start;

    
# Initiate CURL
    
$ch curl_init();
    
curl_setopt($chCURLOPT_URL$url);
    
curl_setopt($chCURLOPT_RETURNTRANSFER1);
    
curl_setopt($chCURLOPT_REFERER'http://' .$site);
    
$body curl_exec($ch);
    
curl_close($ch);

    
# Decode the JSON returned (you need the JSON-class if json_decode is undefined)
    
$body json_decode($body);

    
# Build array
    
$i    0;
    
$search_results = array();

    
# Loop through all results
    
foreach($body->responseData->results as $r) {
        
$search_results['results'][$i]['title'] = $r->title;
        
$search_results['results'][$i]['url'] = $r->url;
        
$search_results['results'][$i]['content'] = $r->content;
        
$i++;
    }

    
# Loop through all the pages of results
    
if(isset($body->responseData->cursor->pages)) {
        foreach(
$body->responseData->cursor->pages as $p) {
            
$search_results['pages'][] = $p->start;
        }
    }

    
# Make sure some results were returned
    
if(isset($search_results['results'])) {
        
?>
        <h2>Search results for &quot;<?php echo @$_GET['q']; ?>&quot;</h2>

        <ol<?php echo @$_GET['start'] > ' start="' .($_GET['start'] + 1) .'"' '' ?>>
        <?php foreach($search_results['results'] as $sr) { ?>
            <li>
                <h3><a href="<?php echo $sr['url']; ?>"><?php echo $sr['title']; ?></a></h3>

                <p><?php echo $sr['content']; ?><br /><a href="<?php echo $sr['url']; ?>">Read more</a></p>
            </li>
        <?php ?>
        </ol>

        <?php if(isset($search_results['pages'])) { ?>
            <ul>
            <?php $i 0; foreach($search_results['pages'] as $p) { $i++; ?>
                <li>
                    <?php if((!isset($_GET['start']) && $p == 0) || (@$_GET['start'] == $p)) { ?>
                        <strong><?php echo $i?></strong>
                    <?php } else { ?>
                        <a href="/search/?q=<?php echo @$_GET['q']; ?>&amp;start=<?php echo $p?>"><?php echo $i?></a>
                    <?php ?>
                </li>
            <?php ?>
            </ul>
        <?php ?>
        <?php
    
}
    else {
        
?>
            <p><strong>Sorry, there were no results</strong></p>
        <?php
    
}
}
?>

As the search-results.php-file doesn't contain any DOCTYPE, html, head or body-elements it is obviously not valid HTML. How you implement the search-results on your own site differs depending on what type of site-structure you've got set up. Regardless you should probably be able to figure it out.

If you do include some sort of head/foot-templates in the search-results make sure not to include them if it's an ajax-call (isset($SERVER['HTTPXREQUESTEDWITH'])).

I'm going to assume the search-results.php will be included from a search.php-file in the root of your site. So visiting /search.php would display the search-results (provided a query is set) along with whatever else your site consists of, but visiting just /search-results.php will only output the results.

The HTML form

Now all you need to do is set up a form that submits a get-request to search.php:

<form method="get" action="/search.php">

    <p>
        <label for="q">Search</label> 
        <input type="text" name="q" id="q" /> 
        <input type="submit" value="Find" />
    </p>

</form>

The Ajax-magic

And now hijax that form:

<script type="text/javascript" src="http://aframework.googlecode.com/svn/trunk/__core/Modules/Base/1-jquery-1.2.1.js"></script>
<script type="text/javascript" src="http://aframework.googlecode.com/svn/trunk/__core/Modules/Base/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://aframework.googlecode.com/svn/trunk/__core/Modules/Base/jquery.liveSearch.js"></script>
<script type="text/javascript">
    $('#q').liveSearch({ajaxURL: '/search-results.php?q='});
</script>

</body>

I've set up an example-page and you can also download the example-files.

Enjoy!

Woopsy

Seems curl_init isn't available from my host (bummer). The example should still work for you locally though,and hopefully live as well (unless you suffer from the same limitations).

jQuery Live Ajax Search Plug-in

Friday, May 16, 2008

Use this plug-in on an input[type="text"] and it will display search-results based on the input's contents on key-up.

The search-results box is fully customizable using CSS and its contents is completely up to you.

I've set up a simple example with some bogus search-results.

You use it like:

$('input[name="q"]').liveSearch({ajaxURL: 'my-search-results.php?q='});

The ajaxURL-parameter should point to your back-end search-results. Whatever you see when you visit that address in your browser will be put in the search-results div.
If you don't use $_GET['q'] for the search-query you need to change the "?q="-part to, for example, "?searchTerm=".

The bogus-search-results.php-file used in the example looks like this, but yours can look however you want.

<h2>Search results for &quot;<?php echo @$_GET['q']; ?>&quot;</h2>

<ol>
    <?php for($i 0$i 10$i++) { ?>
        <li>
            <h3><a href="#">Lorem ipsum <strong><?php echo @$_GET['q']; ?></strong> lorem</a></h3>

            <p>Lorem ipsum dolor sit amet lorem <strong><?php echo @$_GET['q']; ?></strong> ro the lorem in lipsum dolor sitamus <strong><?php echo @$_GET['q']; ?></strong> lorem ipsum?<br /><a href="#">Read more &raquo;</a></p>
        </li>
    <?php ?>
</ol>

You can as usual get the code and the default styling from google code. Have fun. Oh, and it requires dimensions.

Prefix CSS-selectors PHP Class

Thursday, April 24, 2008

Recently at work I had to combine a site's existing design and a PHPBB-template.
If you've ever worked with PHPBB (front or back-end) you'll know it's no dream.

The hardest part with combining PHPBB (or any other third-party-software) with your own code is to make sure your CSS-rules (well JS as well I suppose) don't collide.

PHPBB styles h1:s, you style h1:s, PHPBB styles a:s, you style a:s. It's a right mess when both are trying to style elements on such a general level.

As most websites nowadays, most of PHPBB's themes has a wrapper-div around the entire website so I had an idea to manipulate all of PHPBB's CSS-code before output and add that wrapper-div's ID-name in front of every selector.

So instead of PHPBB styling all the h1:s in a document, it would only style (in this case) #wrap h1:s (#wrap is the name of the wrapper-div in the prosilver-theme).

Recent versions of PHPBB include a similar type of CSS-compression as I've explained before in CSS compression and constants PHP-class so you have access to every line of CSS code in a variable before it's outputted. The merging of CSS happens in PHPBB3/style.php. Look at the very bottom and you'll see something like echo $theme['themedata']; The themedata-index in the $theme-array is what contains all of the CSS for that theme. What you want to do here is run my function on that variable before output:

So instead of:

echo $theme['theme_data'];

You want:

require_once 'CSSSelectorPrefixer.php';
echo prefixCSSSelectors($theme['theme_data'], '#wrap');

The function will then add #wrap at the beginning of every selector in the string.

One problem with this though is that #wrap isn't the root-element of the document, the html-element is. So any styling on body or html will have no effect as they will be changed to #wrap body and #wrap html. I believe this is what you want in most cases as you've probably styled both elements in your own CSS.

The function will also remove duplicate #wrap:s (if the PHPBB-style contained something like #wrap a the function will turn it in to #wrap #wrap a, but before it returns the new code it will remove all duplicate #wrap:s (or whatever you set)).

This really simplified the design-move and hopefully it will help someone looking to do the same thing.

You can as usual get the code from my Google Code repository.

Laters

HTML compression - 90s style!

Tuesday, April 22, 2008

I just found this totally amazing HTML compression and encryption tool online.

Not only will the size of your code be reduced but no-one (including Google, screen-readers, most mobile devices, etc) will be able to read it as the software turns your entire markup into a document.write with loads of fancy, unreadable encryption.

Omfg.
Why it's in the top 5 organic results on a "html compression" Google-search is beyond me.

On a side note I found it kind of ironic that the official site of the HTML Tidy Firefox extension is a perfik example of how a validated website is no indication what-so-ever about the quality of the code.

Numeric DLs jQuery Plug-in

Monday, March 31, 2008

This little plug-in will add numbers to definition-descriptions (<dd>) if there are more than one for a term (<dt>).

Take this code for example:

<dl>
    <dt>Jug</dt>
    <dd>A small pitcher.</dd>
    <dd>Vulgar Slang. A woman's breasts.</dd>
    <dt>Bird</dt>
    <dd>The animal of the skies</dd>
</dl>

Using the plug-in (like so: $.numericDLs();) would result in the following output:

Jug
(1) A small pitcher.
(2) Vulgar Slang. A woman's breasts.

Bird
The animal of the skies

Perhaps this could be done with pure CSS? Counters and generated content perhaps..

You can as usual get the code from my Google Code repository. Have fun!

Update

Tobias mentions a CSS-solution in the comments and after some playing around I managed to make it identical to the JS-one:

dl dt {
    counter-reset: i;
}

dl dd + dd, 
dl dd ~ dd:not(:last-child) {
    counter-increment: i;
}

dl dd + dd:before, 
dl dd ~ dd:not(:last-child):before {
    content: "(" counter(i) ") ";
}

Only real browsers though obviously.

jQuery Vibrate Plug-in

Thursday, March 27, 2008

This simple plug-in makes elements on the page vibrate.

I built it for a project at work and to be frank I think this sort of stuff is no better than the 90s blink-element but perhaps someone will find it useful.

Use it like:

$('#my-annoying-ad').vibrate();

Get the code here

Enjoy.... or not..

Console says: console is not defined

Wednesday, March 26, 2008

Console says: console is not defined

Well done...

Thursday, March 06, 2008

IE8 passes Acid 2

...and cheers for listening!

  • Comments are off
  • Filed under Other

jQuery external link favicons plugin

Wednesday, February 27, 2008

Inspired by "the CSS Guy's" Hyperlink Cues with Favicons I created a jQuery plug-in that does the same.

What it does is appends favicon-images (if there is one, else a default image will be used) to all external links on the site.

It's mega-tiny (like 20 lines of code (less than a k unpacked) and you use it like:

$.favicons();

You can check it out in action here and get the code from my google code SVN repository .

Enjooooooy

Mogr - your mobile starting point

Thursday, February 21, 2008

Mogr on the iPhone

I just released a beta of my latest project, Mogr ('Mo' is for mobile, 'g' is for google and the 'r' adds to the web 2.0:iness and stands for RSS:) also, Mog is a creature from Final Fantasy).

Mogr is meant to be your mobile starting point and is very simply a list of your favourite feeds packaged in a neat interface that should fit your mobile phone nicely.

There's also a search-bar that lets you query your favourite search-engine.

Feeds are cached for an hour and site-favicons are cached forever (well, till i manually clear the file). All information you save on the site (your feeds, search-engine and other various settings) are stored in a cookie so there's no need for any sign-up.

Simply surf over to mogr.pixlperfik.com and add your feeds.

Suggestions or feedback? Please use the comments

jQuery Image Zoom Plug-in

Monday, February 11, 2008

Inspired by Cabel Sasser's FancyZoom I created my own version for jQuery.

It's pretty much the same only I skipped the shadows for incapable browsers (completely relying on box-shadow) but in contrast it's only about 90 lines of code (compared to a whoppin 761+318 that is FancyZoom), and it hopefully won't mess with your other JS as it's all wrapped in the jQuery-object and doesn't use any global vars. Imgzoom also validates in JSLint, so compression isn't be a problem (around 1k compressed).

Instead of the typical $('selector').plugIn()-jquery-plugin this one is run through $.imgzoom(); and, like imgbox and FancyZoom, applies to all links that points to images.

You can not, however, avoid zooming images using the rel-attribute, as you can with FancyZoom, and imgzoom does not group images or add any type of navigation the way imgbox does.

Imgzoom uses event bubbling rather than "hard-coded" events on anchors. This way dynamically inserted images (ajax or not) will also open in the imgzoom plug-in.

Have a look at the example-page and get the source here. Imgzoom requires the dimensions plug-in for jQuery.
The default styling for imgzoom can be found here and you'll need this icon as well:
Close imgzoom

Enjoy!

Some news

Thursday, February 07, 2008

Sorry it's been so quiet around here. I've been busy working on my framework, building a very simple blog on top of my framework, building some other freelance sites, trying to get all my projects set up on SVN so I can more easily work on them etc.
It's been kind of hectic.

I'm almost finished with the base of the framework (although I always work on it if I work on a project built on top of it) and am now in the process of setting up Google code projects for both my simple blog (aSimpleBlog) and my normal blog (aBlog) (pretty much what I use one exscale.se).

I've looked into using svn:externals so I can always use my framework (aFramework) as base for both projects, and should I change something in either of them (or the framework itself) every project will receive the update.
Right now I'm just a little too busy but in a month or so.

I've set up a website for my luvely lass Agnes, check it out at AgnesEkman.com. It runs on aSimpleBlog and scores about 80/100 on yslow (something I've really put work into this time around).

My work-mate (at least for another few weeks) Simon Jobling (aka one phat mo-fo DJ!) just set up SixNationsKickOff.com which "lets you keep track of the RBS 6 Nations rugby tournament by downloading all the fixtures for the competition into your personal organiser".
Good stuff.

I said "at least for another few weeks" because I've decided to leave Yahoo! and go back to my roots in Sweden and work for my previous employer, Web Guide Partner, again.
Yahoo has been a blast and I've met so many talented and cool people but one mustn't get stuck in the same place for too long so off we go again.

That's it for now. Once I get everything organized I'll hopefully have aFramework, aBlog and aSimpleBlog set up on Google code ready for download. I should also have moved to andreaslagerkvist.com by then. Exscale is starting to feel more and more dated every day. I'll be re-organizing articles and I may set up all my jQuery-plug-ins as a project by itself, not bundled with aFramework.

Aaaaaaanyway, loads to do, must get to it.

Laters!

Javascript compression PHP class

Monday, January 21, 2008

In addition to my CSS compressor and constants parser I've also written a very simple Javascript compressor class that uses Nicolas Martin's PHP port of Dean Edward's Javascript packer.

It works in exactly the same way as the CSS-compressor. Create a new instance, pass the directory(ies) you want to look for .js-files in and then call the pack-method.

$jsc = new JSCompressor('js/');
echo $jsc->pack();

Reducing the number of HTTP requests the browser needs to make is essential for performance. Together with full packing of all the code, file-size is often reduced by up to 70% and the number of HTTP requests always down to 1.

Download the demo and have fun!

Submit form using ajax jQuery plug-in

Sunday, January 20, 2008

This plug-in will prevent your form's default action on submission and instead submit all data using XHR. Use it like this:

// submit the '#contact form'-form using XHR, then update the #contact-element with the response
$('#contact form').ajaxSubmit('#contact');

It will submit to the form's action using the form's method unless specified differently when calling the plug-in.
The plug-in will submit any element in the form that has a name-attribute to the URL specified in action.

The ajaxSubmit plug-in takes two arguments, the first is either a string containing a CSS-selector pointing to the element that should be updated with the response, or a custom callback-function that will run after ajax-response is ready. The response will be passed to the callback function.

The second argument is a config-object where you can set action, method and loading. They default to form's action, form's method and 'Loading...'. The loading-var is used to replace the text in the submit-button. You may wanna change to 'Sending...' or something similar if that is more appropriate.

You can get the latest version of the jQuery ajaxSubmit plug-in here.

Ok, enjoy.

Live form-validation jQuery plug-in

Sunday, January 20, 2008

This plug-in adds valid/invalid icons next to form-controls and validates them as user types.

It requires PHP for the validation so your server needs to have PHP installed.
An easy way to check if PHP is installed is to create a file (foo.php), put:

<?php
    phpinfo
();
?>

in it, upload it to your server and then go to the file in your browser and see what it says.
There should be a load of information if you have PHP installed.

The form-validator requires you use some common names for your form-inputs.
There's only three fields specified at the moment; 'name', 'email' and 'message'. But if you're not completely unfamiliar with PHP you should have no problem adding more of your own.
Also, if you prefer 'content' or 'comment' or something instead of 'message', simply open the FormValidator PHP-class, find the line that defines the message-validation and rename to whatever you like.
Anything passed to the FormValidator that isn't defined in the class will always return true.

Now, to validate a form using jQuery you will obviously need your HTML form (the plug-in looks for input[type="text"] and textarea) set-up, and a .js-file that initiates the plug-in:

$(document).ready(function() {
    $('#contact form').liveValidation({
        validIco: 'gfx/validIco.gif',        // url to valid icon
        invalidIco: 'gfx/invalidIco.gif',    // url to invalid icon
        action: 'AjaxFormValidator.php'        // url to php-file
    });
});

You can download a zip with the 2 required PHP-files, a couple of valid/invalid icons, an example PHP-file as well as jQuery and the live validation plug-in here. Or you can always get the latest version of the plug-in here together with the two needed PHP-files: FormValidator and AjaxFormValidator.

Have fun!

Head Tracking using the Wii Remote

Thursday, January 17, 2008

Wicked.

Want some more?

Only show top-links if they are needed using jQuery and Dimensions

Wednesday, January 16, 2008

A link in the footer pointing to the top of your site is quite common and, as most people don't know about/use PgUp (or something similar), can be helpful, ... although perhaps we should educate users instead and stop replicating browser/os-behavior, like so many suggest we do with print-links and such.

Nevertheless, here's a little snippet of jQuery that will hide top-links on your site unless they're needed (ie, there's a visible scrollbar).

The function needs to know what your top-links are pointing to, but if you don't supply a value it defaults to '#'. Which is what I always link my top-links to as every browser I've ever come across takes you to the top of the page when you click a link with an href-attribute-value of '#'.

function hideTopLinks(topLinksHref) {
    var href = topLinksHref || '#';
    var topLinks = $('a[href="' +href +'"]');

    if($(window).height() >= $(document).height()) {
        topLinks.each(function() {
            topLink = $(this);
            if(topLink.is(':only-child')) {
                topLink.parent().hide();
            }
            else {
                topLink.hide();
            }
        });
    }
}

You may wanna put that function in your project object (whoa, what a rhyme!), I, for example, keep that function in aFramework.general.hideTopLinks();

Have fun!

CSS Constants and Compression PHP Class

Tuesday, January 15, 2008

I've mentioned my take on CSS-constants before but I haven't come around to actually creating the back-end needed, until now.

Download CSSCompressor and demo-files

The way I see CSS-constants differs a bit from what I've seen over the internet before, which is basically just about storing property-values in variables. That's all good and very basic to implement using any server-side language. What I wanted, tho, was a replacement for classes (CSS-classes that is), so this is how I see constants:

More to the Console than just Log

Friday, January 04, 2008

I just recently found out that the Firebug console has quite a lot more to offer than just its log-method.

If you want to dump an entire object you can use console.dir() (works very similar to PHP's var_dump() if you're familiar with it).

You can also time the execution of a certain part of your script by running console.time('Timing this and that'); and console.timeEnd();

There's even more goodness so check out Firebug and Logging unless you have already, and sorry if this is old news to you.



Post It

From June 02 to April 23

  1. Mogrify is what you're looking for if you want to convert multiple images to multiple other images in ImageMagick
  2. Tommorrow, finally, the inFamous demo will be friggin availble on PSN!! Suweeeeeeeeet
  3. Fuck canvas is cool, I've started playing around with old 3D-shit again :)

December 2007

S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31


Recent Comments

  1. Vlad on A follow-up to "An alternative to div overlays":
    I'll try this.....
  2. Steve on jQuery Live Ajax Search Plug-in:
    This is a great script but I've got...
  3. Frank on jQuery Live Ajax Search Plug-in:
    Hey, sounds like a great plugin! I ...
  4. Andreas on jQuery Drag to Select Plug-in:
    @Paul - I didn't take into account ...

Style Switcher

The style switcher allows you to change the look and feel of exscale.se.
Only CSS and JavaScript are changed. The XHTML stays the same.

For more information about the styles, check the styles page.


Categories


Random Quote

Test cannot be started because it already does not exist - AVG Free


Random Images




Answer This!

Do you find the "scroll-pagination" annoying? (If you don't know what it is, scroll to the bottom of the first-page)


Blog Roll