Jul 1, 2009

In recent months time has been short due to demanding projects, so blogging has been the last thing on my mind. I have also discovered twitter so that has been the focus of my quick comments (when I feel that I have had anything to say)
Quite a few things have been going on here:

moved over to a mac from the old pc – something I have wanted to do for years and now can’t quite rememeber ehy I didn’t do it ages ago….
Gabinohome version 5 which I develop has been released with new functions, more ajax (where needed) and better google maps search.
Having done a lot of my own javascript and used many of the dhtmlgoodies scripts, I have moved over to use the mootools javascript library. I still help out on the dhtmlgoodies forum when I get a chance.
Reveamped my own website though that is an ongoing proccess….
Other web development as ever and many ideas for more personal (web) projects.

But I now thinkk that it is time to get this blog back up and running, let’s see if this time round I can make it happen.

Oh yes, and I really must get a template for this blog 😉

Code

May 8, 2008

Chris

No Comments

js-query – drag&drop

In general I tend to either create my own code or use MooTools for my javascript needs and effects.
However, for a recent project I had to use jquery as the rest of the site had been developed using this.
All that was needed was a simple “drag & drop” script so as to be able to drop a maximum 1 product to the cart.
I needed to do the following:

Drag elements from box1 to box2
Limit box2 to only accept 1 item
Show the item that I have dropped (in my case an image)
Save the id of the item to a hidden text field
If the user wants to change the item they would have to drag it back to the original box1 (I would have liked to have been able to do a “hotswap” but that just wasn’t going to happen (yet)
On dragging out, the hidden text field value gets reset to “0”

Relativly simple stuff I would have thought but, could I find any useful guidelines or tutorials on the jquery website? – no! – just a few lines about disabling and enabling the drop box (OK, I would need that)
My doubts after having read the docs on jsquery site:

How to get dropped element id?
How to show the element in the dropbox?

So, after much (and I mean a lot) of googleing, I finally botched together a solution taking bits from forums, external tutorials and other script examples.
The reason that I am writing this is because in the end it is actually pretty simple, that is why I don’t understand why it isn’t clearly documented in the “drop” section of the jsquery website.

In case you come up against the same problem and stumble upon this post, here is what I did:
You will need to include the following scripts apart from the latest jquery.js file:
ui.base.js
ui.draggable.js
ui.droppable.js
now don’t ask me where the official files are as I have been unable to find them, I went the the droppable demo and got them via the source code – again, where are the download links in jquery???

and here is the final code:

<script type="text/javascript"> $(document).ready(function(){ // define draggable elements $(".products").draggable({helper: 'clone'});

// cart
$(“#cart”).droppable({
accept: “.products”,
activeClass: ‘droppable-active’,
hoverClass: ‘droppable-hover’,
drop: function(ev, ui) {

var theId = $(“.products”).attr(“id”); // get id of gift
var numericIdSource = theId.replace(/[^0-9]/gi,”)/1; // Find numeric id of source (mine has “gift_” before it in the id to avoid confusion with other doc elements)
document.getElementById(‘id_gift’).value=numericIdSource; // add dropped id_gift to hidden field for form posting
$(this).append(ui.draggable); // add item to cart
$(this).droppable(“disable”); // only 1 item allowed
}
});
// shop – for removing gifts
$(“#shop”).droppable({
accept: “.products”,
activeClass: ‘droppable-active’,
hoverClass: ‘droppable-hover’,
drop: function(ev, ui) {
document.getElementById(‘id_gift’).value=””; // empty hidden field value
$(this).append(ui.draggable); // add item to shop
$(“#cart”).droppable(“enable”); // make cart droppable
}
});
});

</script>

and the html:
<div id="cart" class="cart"> </div> <div id="shop"> <div id="item_1" class="products"><img src="image_1.jpg" width="75" height="75"></div> <div id="item_2" class="products"><img src="image_2.jpg" width="75" height="75"></div> <div id="item_3" class="products"><img src="image_3.jpg" width="75" height="75"></div> <div id="item_4" class="products"><img src="image_4.jpg" width="75" height="75"></div> </div>
So, there you go, actually pretty simple, and any experienced jsquery coder I am sure would say that it was pretty obvious, but I’m not and it isn’t 😉

I hope that you find it useful.

General

Mar 8, 2008

Chris

No Comments

VSO Image Resizer – image resizing for windows vista

One (of the many) things that I miss having moved over from XP to Vista is the good old Microsoft Image Resizer Powertoy. This was so easy to use as it added an extra menu option to the right click menu list that allowed you, when clicking on an image, instantly resize it or make a copy of it any size you wanted.
As currently there is nothing like this available I have been forced to look for an alternative, a very quick google search came up with an excellent alternative – the VSO Image Resizer. This free tool is probably even better than the microsoft power toy! It has a large list of predefined sizes and formats and of course allows you to define your own dimensions. You can choose to create a copy or overwrite the original image. This tool is an absolute must for anyone looking to upload photos to the internet or to send lightweight photos via email.

Scripts

Mar 8, 2008

Chris

No Comments

New script – php / ajax availability calendar

I needed a quick and simple php/ajax script for an calendar for the Gabinohome web to allow advertisers to display availability for their properties. Unable to find anything appropiate in the web (free) I decided to create my own – feel free to take a look and download it from my AVAILABILITY CALENDAR script. As it seemed to turn out quite well, I have even made it my first script in Hotscripts 01/02/2008 – edit – script has now been viewed 2214 times and downloaded 110 times 🙂 I hope people are finding it useful.