Javascript handling in Drupal

By kahara on 14 Mar 2009 at 15:08 UTC

Hi,
can anyone tell me how drupal handles default javascript behaviours, such as mouse up, mouse over etc? Are they stored somewhere and is it possible to override them? I am looking for a way to override mouseover (hover) and turn it in to a default mouseup behaviour.
thank you.

Comments

The general answer is to use

nevets commented 14 March 2009 at 16:23

The general answer is to use jQuery and attach the appropriate event you want to the selected elements.

Thanks nevets, perhaps you

kahara commented 14 March 2009 at 17:02

Thanks nevets,
perhaps you can help me a bit further. I want to override a hover behaviour that is part of the Views Slideshow module. This is a default setting you can't disable, so I need to do it manually. I've tried locating this behaviour in the module itself but can't find it there, probably because it's a default jquery behaviour or something.
I have limited knowledge of java, but I guess I will be able to adjust things once I've located the source for this hover behaviour.
Any help would be appreciated!

Since the slide can be

nevets commented 14 March 2009 at 18:27

Since the slide can be configured in several ways, what is the current behavior you want to override and how do you want to override it?

in my case I created a

kahara commented 16 March 2009 at 18:18

in my case I created a slideshow of images with the same taxonomy term, displaying not only the slideshow, but also a thumbnail of every image in the slideshow. here's a link to the site: http://test.roderickhietbrink.nl/work/vivarium

By the way, I completely disabled the automatic slideshow functionality, so the slides don't change automatically.

Now the problem is that when a user moves the mouse over one of the thumbnails, the hover behaviour is activated. I want to override this so that the thumbnails need to be clicked for the slides to change. I've installed the Hoverintent module, which delays mouseover activities and was hoping I could alter the js that comes with this module.

Override these theme functions

nevets commented 17 March 2009 at 04:10

We are going to override the theme functions that add the js that handles the hover event.
Note this will change the behavior for all views slide shows to use mousedown/mouseup instead of hover.
After adding the code below make sure you visit Administer › Site configuration › Performance and click the "Clear cached data" button (toward the bottom of the page)

Add the following to your themes template.php file.

/**
 *  This inline js sets up the timer for this slideshow.
 */
function phptemplate_views_slideshow_div_js($rows, $options, $id) {

  $num_divs = sizeof($rows);
  $fade = $options['fade'] ? 'true' : 'false';

  $js = <<<JS
// Set the timer data for a view slideshow.
$(document).ready(function() {
  // These are the divs containing the elements to be displayed in the main div in rotation or mouseover.
  slideshow_data["$id"] = new views_slideshow_data($num_divs, {$options['timer_delay']}, {$options['sort']}, $fade, "{$options['fade_speed']}", {$options['fade_value']});

  // This turns on the timer.
  views_slideshow_timer("$id", true);

  // This sets up the mouseover & mouseout to pause on the main element.
  $("#views_slideshow_main_$id").mousedown(
    function() {
      views_slideshow_pause("$id");
    }).mouseup(
    function() {
      views_slideshow_resume("$id");
    });
});
JS;
  return $js;
}
/**
 *  The mouseover event code for each breakout teaser.
 */
function phptemplate_views_slideshow_breakout_teaser_js($id, $count) {
  // Return the js to set the main div to this teaser's element.

  $js .= '
  $("#views_slideshow_div_breakout_teaser_' . $id . '_' . $count . '").mousedown(
    function() {
      views_slideshow_pause("' . $id . '");
      views_slideshow_switch("' . $id . '", ' . $count . ');
    }).mouseup(
    function() {
      views_slideshow_resume("' . $id . '");
   });
';
  return $js;
}

thanks!

kahara commented 17 March 2009 at 08:46

I inserted the code and it works! The only change I made was to swap mouseup / mousedown, so the link behaves like a normal link, activating on mouseup.

Almost there, one more thing that would make me very happy is to have the mouse pointer turn to a hand when moving over the thumbnails.

As a start try adding this to

nevets commented 17 March 2009 at 13:44

As a start try adding this to your themes style.css file

.views_slideshow_main img {
  cursor: pointer;
}

You may need to adjust the selector, the Firefox extension firebug is useful for determining what class or classes to use for the selector.

how simple can it be... I

kahara commented 17 March 2009 at 16:32

how simple can it be... I didn't expect this to work, but it does.
Many thanks!!

Drupal Slideshow

computer_jin commented 28 March 2009 at 07:17

do you know the easy way to use slideshow in drupal like http://www.malsup.com/jquery/cycle/begin.html

--
Azhar uddin
Technical Lead
email : engr.azharuddin@gmail.com
skype : computer_jin

The rotor banner module uses

nevets commented 28 March 2009 at 14:46

The rotor banner module uses the jquery cycle plugin and has nice views integration.

Thanks to reply, But rooter

computer_jin commented 28 March 2009 at 22:15

Thanks to reply,
But rooter module give us block and i want to use a block in my content and how can i use block withing my content so i need to develop a piece of code which shows me slideshow and i can use it any where in my module....
how can i do this ?