Archive of articles classified as' "Code"

Back home

Mootools Expandable Columns

24/07/2009

For a current project I am working on I needed an admin tool that consited of 3 columns with dynamic adjustable widths.

Expandable ColumnsSuprisingly, I couldn’t find anything in google (using the mootools library) similar to what I needed so, always up for the challenge, I decided to code one myself.

In the hope that it might be useful to someone else, here is the code that I finally came up with.

See Demo
Read the rest of this article »

11 Comments

Mootools Drag & Drop & Download

10/07/2009

Over recent months I have moved over to using the  mootools javscript library for all my javscript needs.
However, this has not stopped me from helping out when I can on the dhtmlGoodies forum with the scripts there and general javascript questions that users ask there.

Drag & Drop & Download

A couple of days ago somebody post a request about using drag&drop scripts to activate a download.  As an example, they posted a link to Ryan Scherf’s drag & drop download script using the prototype library.
I liked the look of this and, always up for the challenge, wanted to have a go at doing the same using Mootools.

Read the rest of this article »

No Comments

Time to blog…

1/07/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 😉

1 Comment

js-query – drag&drop

8/05/2008

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:

  1. Drag elements from box1 to box2
  2. Limit box2 to only accept 1 item
  3. Show the item that I have dropped (in my case an image)
  4. Save the id of the item to a hidden text field
  5. 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:

  1. How to get dropped element id?
  2. 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">&nbsp;</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.

No Comments