amnuts » Prototype http://blog.amnuts.com php projects, javascript, and... stuff. Fri, 07 May 2010 09:11:14 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Easy chained select lists using Zend Framework and Prototype http://blog.amnuts.com/2007/08/13/easy-chained-select-lists-using-zend-framework-and-prototype/ http://blog.amnuts.com/2007/08/13/easy-chained-select-lists-using-zend-framework-and-prototype/#comments Mon, 13 Aug 2007 15:02:35 +0000 Andy http://blog.amnuts.com/2007/08/13/easy-chained-select-lists-using-zend-framework-and-prototype/ Building a set of select lists that are dependant of each other can be a daunting task, but for a simple two-level list – in that what you select from one drop-down will changing what’s displayed in one or more other drop-downs – is actually quite easy thanks to Zend Frameworks and Prototype, both of which support Json.


What I needed to do was have a list of items. Each item would have a different type, colours, range and so on. When I selected an item from a select list I wanted the other optional lists to update. Now, I’ve seen this done with Ajax to completely rebuild the html of the select lists, but I didn’t want to go down that route. Instead, I decided to use a bit of PHP and a bit of Javascript.

First of all I had to decide how I wanted to store my items. I could have gone down the headache of a database, but I wanted to keep this simple. So in steps the always-simply ini file. Zend Framework makes it really easy to parse this particular format, which is great news!

The ini file looks something like:

[_default]

name   = "_default"
type   = ""
range  = "home; garden; garage; kitchen"
colour = "white; silver; black; red; blue; yellow; green"

[fridge : _default]

name   = "Fridges and freezers"
type   = "double; chest; mini"

[fork : _default]

name   = "Forks"
type   = "big; small"
range  = "kitchen; garden"
colour = "silver; black"

[trash : _default]

name   = "Trash cans"

As you can see, I extend one base item type, changing only what I need to.

Now I have my ini file, I need to convert that to Json. The easiest way to do this is simply to load the whole ini file into a nicely formatted array and convert that array to the Json format. The PHP to do that is actually quite simple, and looks something like this:

<?php

require 'Zend/Config/Ini.php';
require 'Zend/Json.php';

$config = new Zend_Config_Ini(dirname(__FILE__) . '/items.ini', null);

$items = array();
foreach ($config as $key => $val) {
    if ($key{0} != '_') {
        foreach ($val as $k => $v) {
            $items[$key][$k] = (strstr($v, ';')) ? array_map('trim', explode(';', $v)) : $v;
        }
    }
}
$json = Zend_Json::encode($items);

Again, the Zend Framework comes to the rescue and does all the hard work for me. All I have to do is process the ini file, making arrays out of lists (the strings separated with semi-colons) and ignoring anything that starts with an underscore.

That file ends up giving me a Json string and a PHP array, both of which can be used in the form. In this HTML I have quickly put in the select lists, but I’m sure you could do something programmatically, or in a template, or something… this is just for show, after all. ;-) 

<?php include('json.php'); ?>
<html>
<head>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">
        var items = '<?php echo $json; ?>'.evalJSON(true);
        var optlist = ['type', 'range', 'colour'];

        Event.observe(window, 'load', function() {
            Event.observe('item', 'change', function() {
                var itype = $F('item');
                optlist.each(function(o) {
                    $(o).options.length = 1;
                    if (itype) {
                        if (items[itype][o].length > 0) {
                            for (i = 0; i < items[itype][o].length; i++) {
                                $(o).options[$(o).options.length] = new Option(items[itype][o][i]);
                            }
                            $(o).enable();
                        } else {
                            $(o).disable();
                        }
                    } else {
                        $(o).disable();
                    }
                });
            });
        });

    </script>
</head>
<body>

<form action="" method="post">

Item<br />
<select name="item" id="item">
<option value="">Select an item</option>
<?php

    foreach ($items as $type => $details) {
        echo '<option value="', $type, '">', $details['name'], "</option>\n";
    }

?>
</select><br />

Type<br />
<select name="type" id="type" disabled="disabled">
    <option value="">Please select</option>
</select><br />

Range<br />
<select name="range" id="range" disabled="disabled">
    <option value="">Please select</option>
</select><br />

Colour<br />
<select name="colour" id="colour" disabled="disabled">
    <option value="">Please select</option>
</select><br />

<p><input type="submit" /></p>

</form>

</body>
</html>

The main part of that is, of course, the javascript. Using Prototype I’m easily able to convert the Json string from the PHP file back in to an object, and then set an event observer on the items select list to register a change in value. All that’s left to do is loop over the other form elements (which, to make things easy, I hard-coded in to the optlist variable, but again, this could be dynamic) and set the correct values, enabling or disabling the form elements where needed.

The above code can be found running at:

http://dev.amnuts.com/chained/

]]> http://blog.amnuts.com/2007/08/13/easy-chained-select-lists-using-zend-framework-and-prototype/feed/ 0 Slider – part 2 – using a mouse wheel http://blog.amnuts.com/2007/06/15/slider-part-2-using-a-mouse-wheel/ http://blog.amnuts.com/2007/06/15/slider-part-2-using-a-mouse-wheel/#comments Fri, 15 Jun 2007 13:58:26 +0000 Andy http://blog.amnuts.com/2007/06/15/slider-part-2-using-a-mouse-wheel/ Following on from the previous post, I thought it’d be nice to have the handle move on a mouse wheel. Looking around for mouse wheel integration, it seems that it’s only a short amount of code to update Prototype to use the mouse wheel. When it’s not in the core code, I don’t know, as it seems rather handy. The mouse wheel code is listed at the Prototype Event Extension article over at Ajaxian.

I decided to integrate the code directly in to Prototype, also dropping the following in to ‘observe’ and ’stopObserving’:

if (name == 'mousewheel' &&
    (element.addEventListener))
    name = 'DOMMouseScroll';

Then using the same XHTML as before, which was:

<div id="slider">
    <div id="slider-bar">
        <div id="slider-handle"><p id="percent"></p></div>
    </div>
</div>

all you have to do is drop an event on the div#slider for the mouse wheel. That little bit of javscript looks like:

Event.observe('slider', 'mousewheel', function(e) {
    slide.setValueBy((Event.wheel(e)/10));
});

Now when you scroll the mouse wheel the slider will change by a value of 10. This value comes from the ‘Event.wheel(e) / 10′ part. The mouse wheel method returns either 1 or -1, and the slider goes from 0 to 1. Obviously, if you want the mouse wheel to move the slider by only a value or 1, then divide the delta by 100; ‘Event.wheel(e) / 100′.

As before, you can see it in action at http://dev.amnuts.com/slider/.

]]> http://blog.amnuts.com/2007/06/15/slider-part-2-using-a-mouse-wheel/feed/ 0 Scriptaculous slider trick http://blog.amnuts.com/2007/06/14/scriptaculous-slider-trick/ http://blog.amnuts.com/2007/06/14/scriptaculous-slider-trick/#comments Thu, 14 Jun 2007 13:51:47 +0000 Andy http://blog.amnuts.com/2007/06/14/scriptaculous-slider-trick/ Yesterday I was looking at the Scriptaculous library, in particular the slider bar. I had used it once before with some success, using a graphic for the track and gripper. But that’s was boring! What I wanted was to see the bar fill up with colour when it was slid. Something like this:

Slider demo

I hadn’t seen anything like this around (not saying it hasn’t been done, just that I hadn’t seen it!), so after a bit of playing I found out it was actually very easy to create. And this is how I did it…

All it really does is use a handy little trick with transparent PNG images and background-image positions. You can find details of what I mean in this handy article by Dave Stone, over at Bare Naked App.

So basically I have my slider gripper (or handle), which has a transparent background:

Slider gripper

And the slider track, which has an opaque white background but is transparent where I want the colour to show through (thumbnail shown, but links through to full size image):

Slider track

And then I have the background image, which is essentially double the size of the track and has one half in off-white and one in green (thumbnail shown, but links through to full size image):

Slider background

The XHTML used for the slider looks like this:

<div id="slider">
    <div id="slider-bar">
        <div id="slider-handle"><p id="percent"></p></div>
    </div>
</div>

The CSS looks like this:

#slider, #slider-bar, #slider-handle {
    border: 0;
    padding: 0;
    margin: 0;
}
#slider {
    width: 300px;
    height:42px;
    background: url(img/bg.gif) no-repeat -300px;
    margin-left: 42px;
}
#slider-bar {
    width:300px;
    height:42px;
    background: url(img/track.png) no-repeat;
}
#slider-handle {
    width:42px;
    height:42px;
    cursor:move;
    background: url(img/gripper.png) no-repeat;
}
#percent {
    font-size: 75%;
    font-family: arial;
    font-weight: bold;
    text-align: center;
    padding-top: 1.1em;
}

And finally, the Javascript looks like this:

<script type="text/javascript">
// <![CDATA[
var hWidth, bWidth;

function setBgPos(v) {
    var off = v * hWidth;
    var pos = -bWidth + (v * bWidth);
    $('slider').setStyle({backgroundPosition: Math.round(pos - off) + 'px'});
}

function setSlideOutput(v) {
    $('percent').innerHTML = Math.round(v * 100) + '%';
}

Event.observe(window, 'load', function() {
    hWidth = $('slider-handle').getWidth();
    bWidth = $('slider-bar').getWidth();
    var slide = new Control.Slider('slider-handle', 'slider-bar', {
        sliderValue: 0.25,
        onSlide:
            function(v) {
                setBgPos(v);
                setSlideOutput(v);
            },
        onChange:
            function(v) {
                setBgPos(v);
                setSlideOutput(v);
            }
    });
    setBgPos(slide.value);
    setSlideOutput(slide.value);
});
// ]]>
</script>

You may notice the offset value, off. I’m using this because in my experiment the slider handle doesn’t fully cover the bar (nor did I want it to), so I cannot have the background image colour go fully across the track. I had to incrementally offset it depending on the position and size of the handle.

And that’s it! Pretty darned easy, but looks really neat. You can see it in action at http://dev.amnuts.com/slider/.

]]> http://blog.amnuts.com/2007/06/14/scriptaculous-slider-trick/feed/ 9 Same height for elements http://blog.amnuts.com/2007/02/09/same-height-for-elements/ http://blog.amnuts.com/2007/02/09/same-height-for-elements/#comments Fri, 09 Feb 2007 23:52:22 +0000 Andy http://blog.amnuts.com/2007/02/09/same-height-for-elements/ Surely this is easy, right? Just set the height property in your css. Well, yes and no. That’s all well and good if you know what height the elements are going to be, but quite often you might be pulling information out of a database in to the elements and you don’t know how big that information is going to be. You can’t use the overflow because that’s not the designer’s concept. No; they want three boxes on screen that all have the same height so they’re all nice and ordered and symmetrical.


What about using tables?

Wash your mouth out! No, of course we don’t want to use tables. Instead that old friend of ours, javascript, comes to the rescue. Using that fabulous library Prototype, because I’m lazy, you could do something like this:

What does it do?

The title of the post should be enough to give it away. It makes the elements you decide all have the same height. If you use the class max-height then the elements will all be the same height as the tallest one, and if you use min-height they will have the same height as the shortest one.

How do you use it?

Simply drop in one of the classes on all the divs you want to make the same height, for example:


  some text




  more 
  more 
  more 
  more 
  more 
  more 
  more 
  more 
  more 




  final bit of text 
  final bit of text 
  final bit of text 




  not resized...

And everyone is happy…

The designer is happy because you’ve retained the nice symmetrical boxes. You’re happy because you’re using nice clean code that’ll degrade nicely. I’m happy because you’ve read this. :-)

]]> http://blog.amnuts.com/2007/02/09/same-height-for-elements/feed/ 0