Javascript handling in Drupal
kahara - March 14, 2009 - 15:08
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.
The general answer is to use
The general answer is to use jQuery and attach the appropriate event you want to the selected elements.
Thanks nevets, perhaps you
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
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
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
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!
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
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
how simple can it be... I didn't expect this to work, but it does.
Many thanks!!
Drupal Slideshow
do you know the easy way to use slideshow in drupal like http://www.malsup.com/jquery/cycle/begin.html
Azhar
4 Ace Technologies(www.4acetech.com)
karachi,Pakistan
The rotor banner module uses
The rotor banner module uses the jquery cycle plugin and has nice views integration.
Thanks to reply, But rooter
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 ?
Azhar
4 Ace Technologies(www.4acetech.com)
karachi,Pakistan