Go to this link http://www.pligg.com/demo/ and on the bottom right hand corner of the teaser is a button called " Bury" . Click it and watch as it uses javascript to trigger a CSS opacity fade "aka bury".

What would be needed to get something like this working? :) Anyone interested in a way for your user to discard content they are not interested in?

Comments

ola90@drupal.ru’s picture

That website relies on script.aculo.us to do the javascript/CSS magic. So I guess it's only a matter of inserting a call to script.aculo.us function into your favourite voting module's script. I wanted to test that, but script.aculo.us website seems to be broken. Will try again later.

chadchandler’s picture

I would be really excited to see this and I don't mind compensating you ($) for your efforts. I would probably use this is the "down" in the Vote Up/Down module.

Let me know if you make any progress and feel free to email me .

pcoskat’s picture

Yep. I'd like to have this, too.

chadchandler’s picture

I'm looking to see if there are any Jquery plugins that would be close?

ilyushkin’s picture

i was running pligg for almost a year when one day it went down. I was really upset and switched.

ola90@drupal.ru’s picture

Here's my first take on it - this works only for nodes and when the page is reloaded all effects are lost. Tested with Drupal 5.2 and vote_up_down 1.1.
I've never learnt Javascript so the code might be suboptimal.
I used scriptaculous libraries that are available here. The ones on script.aculo.us website conflict with vote_up_down's Javascript.
Then I added a few lines to ajax_vote_up_down.js (in modules/vote_up_down) which now looks like this:

// $Id: ajax_vote_up_down.js,v 1.5 2006/11/24 13:18:35 frjo Exp $

Drupal.voteUpDownAutoAttach = function() {
  var vdb = [];
  $('span.vote-up-inact, span.vote-down-inact, span.vote-up-act, span.vote-down-act').each(function () {
    // Read in the path to the PHP handler
    uri = $(this).attr('title');
    // Remove the title, so no tooltip will display
    $(this).removeAttr('title');
    // remove href link
    $(this).html('');
    // Create an object with this uri. Because
    // we feed in the span as an argument, we'll be able
    // to attach events to this element.
    if (!vdb[uri]) {
      vdb[uri] = new Drupal.VDB(this, uri);
    }
  });
}

/**
 * A Vote DataBase object
 */
Drupal.VDB = function(elt, uri, id) {
  var db = this;
  // By making the span element a property of this object,
  // we get the ability to attach behaviours to that element.
  this.elt = elt;
  this.uri = uri;
  this.id = $(elt).attr('id');
  this.dir1 = this.id.indexOf('vote_up') > -1 ? 'up' : 'down';
  this.dir2 = this.dir1 == 'up' ? 'down' : 'up';
  // added a variable to pass the type of vote to Ajax function
  var up_or_down = this.dir1;
  $(elt).click(function() {
    // Ajax GET request for vote data
    $.ajax({
      type: "GET",
      url: db.uri,
      success: function (data) {
        // extract the cid so we can change other elements for the same cid
        var cid = db.id.match(/[0-9]+$/);
        var pid = 'vote_points_' + cid;
        // if the vote is "down", we fade the node
	if (up_or_down=='down') {
	var nid = 'node-' + cid;
	element = document.getElementById(nid);
	new Effect.Fade (element.id, { duration:2.0, from:1.0, to:0.5 }); }
        //update the voting arrows
        $('#' + db.id + '.vote-' + db.dir1 + '-inact')
          .removeClass('vote-' + db.dir1 + '-inact')
          .addClass('vote-' + db.dir1 + '-act');
        $('#' + 'vote_' + db.dir2 + '_' + cid)
          .removeClass('vote-' + db.dir2 + '-act')
          .addClass('vote-' + db.dir2 + '-inact');
        // update the points
        $('#' + pid).html(data);
      },
      error: function (xmlhttp) {
        alert('An HTTP error '+ xmlhttp.status +' occured.\n'+ db.uri);
      }
    });
  });
}

// Global killswitch
if (Drupal.jsEnabled) {
  $(document).ready(Drupal.voteUpDownAutoAttach);
}
ola90@drupal.ru’s picture

After doing some research I have realised that if the fade effect is all you need you can use a much smaller script, for example this one. Unfortunately it does not work in IE6 if the element you are fading does not have a set width and/or height.
As for making the effext persistent, I think that should be done through templates.