JavaScript

Make jQuery work on the same page with Mootools and or Prototype

Some conflicts appear when using jQuery javascript library with Motools or Prototype on the same page. A workaround is using noConflict mode for jQuery.

Follow this steps:

1. Download the latest version of jQuery

2. Download jQuery compat

3. Open jquery.js, go to the end of the file and add this line jQuery.noConflict();

4. With jquery.js opened, open jquery.compat-1.0.js copy all it's content and paste-it after jQuery.noConflict(); line in jquery.js.

5. Find this lines and comment or delete them them:

jQuery.fn._filter = jQuery.fn.filter;
jQuery.fn.filter = function(arr){
  return this._filter( arr.constructor == Array ? arr.join(",") : arr );
};

6. Open all .js files that use jQuery library and add as the first line (function($){ and as the last line })(jQuery);

(function($){
content of the .js file
})(jQuery);

That's it.

Drupal - Jcarousel and views

Adding a Jcarousel effect to a <ul> of a block view.

Install jquery_update module.
Download Jcarousel. Unzip to theme folder.

Create a block view, than publish it.

Add this snippet inside the <head> part of page.tpl.php:

   <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/jcarousel/lib/jquery.jcarousel.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php print base_path() . path_to_theme() ?>/jcarousel/lib/jquery.jcarousel.css" />
    <link rel="stylesheet" type="text/css" href="<?php print base_path() . path_to_theme() ?>/jcarousel/skins/tango/skin.css" />
    <script type="text/javascript">
jQuery(document).ready(function() {
$("div.view-class-name").find("ul").attr("id","jcarousel");
$("#jcarousel").addClass("jcarousel-skin-tango");
$("#jcarousel").jcarousel({
vertical: true,
scroll: 1
});
});
    </script>

List of options you may set

Via drupal.org forums. Posted here for reference.

Syndicate content