jquery

Web fonts and dynamic height calculation issues on jQuery

/ chirale / Leave a comment

Recently we’ve nice fonts on web pages like Google Fonts and other web fonts. Take this case, you have to set two divs to the same height. One (div.funny) has some text with Google Fonts, the other is empty.

On Chrome console you type something like:

jQuery(".very", ".myview").height(function () {
  jQuery(this).height(jQuery(this).parent(".myview").find('.funny').height());
});

Div.very and div.funny are now at the same height.

Now if you try to do the same on jquery document ready you got elements with different height. Why?

Because the calculation happens on document ready but before fonts are loaded. The solution is to wrap the code on $(window).load().

$(window).load(function () {
  $(".very", ".myview").height(function () {
    $(this).height($(this).parent(".myview").find('.funny').height());
  });
});

Now .very and .funny are at the same height.

See also:
Calculate Container’s Height After The Font File Loads

Web fonts and dynamic height calculation issues on jQuery

/ chirale / Leave a comment

Recently we’ve nice fonts on web pages like Google Fonts and other web fonts. Take this case, you have to set two divs to the same height. One (div.funny) has some text with Google Fonts, the other is empty.

On Chrome console you type something like:

jQuery(".very", ".myview").height(function () {
  jQuery(this).height(jQuery(this).parent(".myview").find('.funny').height());
});

Div.very and div.funny are now at the same height.

Now if you try to do the same on jquery document ready you got elements with different height. Why?

Because the calculation happens on document ready but before fonts are loaded. The solution is to wrap the code on $(window).load().

$(window).load(function () {
  $(".very", ".myview").height(function () {
    $(this).height($(this).parent(".myview").find('.funny').height());
  });
});

Now .very and .funny are at the same height.

See also:
Calculate Container’s Height After The Font File Loads

Character substitution on Jquery

/ chirale / 3 Comments

Here an easy way to search and replace each occurrence a group of characters (in this case underscore and minus) with another (in this case a space) on a specified element (in this case each A), using Jquery javascript library.

$("a").each(function() {
   $(this).html($(this).html().replace(/[_-]/g," "));
});

The first argument passed on replace is a regex, if you just pass a single character (like “_” or “-“) only first occurrence for each element.

Real world usage: I use this onto a long page, where a table has long filenames with underscore and minus in place of spaces. This trick allows in my case to show tables nicely, without caring on a mass substitution via server side scripting.

See also:

Make JCarousel and Contemplate work together

/ chirale / 6 Comments

Drupal modules needed:

* = tested on latest official release
Howto subject: How to use JCarousel within a Contemplate modified node body

JCarousel is a nice JQuery plugin to render a vertical or horizontal bar containing some custom HTML code elements. Every element is within a list item of an unordered list. On page load a JQuery event trigger the simple unordered list to show as a bar.

Let’s start

To use Contemplate more smoothly (and without cut/paste from your preferred code editor, i.e. Quanta), you can create a file-based contemplate instead a database based.

  1. Create a sites/all/contemplates folder (or sites/mysitename/contemplates)
  2. According to Contemplate help (admin/help/contemplate), put there your node-mynodetype-body.tpl.php file, where “mynodetype” is the machine name of the type you want to modify (that one that appears like node/add/mynodetype when you create a new node of that type).
  3. Visit admin/content/templates to update the contemplate list. Now, if you go to admin/content/templates/mynodetype you can read:

    This template is being read fromsites/all/contemplates/node-mynodetype-body.tpl.php
    Please make changes to this file or remove it to continue editing here.

This is your contemplate file for this how-to. You’ve only to modify it, upload it and watch your mynodetype body growing up with JCarousel.

Call JCarousel

On the top of your content template, write:

if(module_exists(“jcarousel”)){
jcarousel_add(“tango”);
$js = “// <![CDATA[
#function to add a Bouncing Effect on your JCarousel: you can add another custom effect function
// Credits: Robert Penners easing equations (http://www.robertpenner.com/easing/).
jQuery.easing[‘BounceEaseOut’] = function(p, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};

# Call JCarousel when page is ready for the element mycarousel
# Read http://sorgalla.com/projects/jcarousel/#Configuration
jQuery(document).ready(function() {
jQuery(‘#mycarousel’).jcarousel({
vertical: false,
animation: 3000,
easing: ‘BounceEaseOut’,
visible: 5,
scroll: 4
});
});
// ]]>”;

#add to HTML page HEAD this JavaScript code
drupal_add_js($js, ‘inline’, ‘header’);
}
?>

Styling

Using latest official release of JCarousel, tango theme skin.css file returns a buggy appearance. You can switch to the original tango skin.css file on sorgalla.com. Simply copy that file to your module skin folder.
In order to make your JCarousel works better, you have to write some additional CSS lines on your theme CSS file:

/* JCarousel custom CSS for horizontal bars */
/* DO NOT USE margin or padding for item elements
(auto-adjusted with visible/scroll JCarousel options) */
.jcarousel-item-horizontal{
width: 100px;
}
/* Bar total width for 5 elements
(100×5)px + 10px horizontal padding */
.jcarousel-container-horizontal,
.jcarousel-clip-horizontal{
width: 550px;
}

/* center jcarousel within a block element */
..jcarousel-container-horizontal{
margin: auto;
}

/* item height = bar height */
.char .jcarousel-item-horizontal,
.char .jcarousel-clip-horizontal{
height: 150px;
}

Contemplate JCarousel

A simple but useful way to test JCarousel is to display attached image files on your mynodetype. Assuming that all attached files are image files, that you want tango theme and you want to render an imagecache picture with preset named “my_thumbnail_preset”, add to your contemplate file these lines:

<?php
/* UPLOADED FILE CAROUSEL */
$attached_files_carousel = TRUE;

if($attached_files_carousel): ?>
<ul id=”mycarousel” class=”jcarousel-skin-tango”>
<?php
$preview_imagecache_preset = ‘character_picture’;
if(!empty($node->files)){
foreach($node->files as $uploaded_file){
/* if imagecache is present, build the thumbnail */
if(module_exists(‘imagecache’))
$uploaded_file_preview = theme(‘imagecache’,$preview_imagecache_preset,$uploaded_file->filepath);
else
$uploaded_file_preview = l($uploaded_file->filename,$uploaded_file->filepath);
/* Print the List Item */
print “<li>” . ‘<a title=”‘.$uploaded_file->filename.'” rel=”lightbox” href=”‘. base_path() . $uploaded_file->filepath . ‘”>’. $uploaded_file_preview . ‘</a>’ . “</li>”;
}
}
?>
</ul>
<?php # END CAROUSEL
endif; ?>

Fantastic Attachments

This method simply write the UL#mycarousel via PHP (static JCarousel method). Using rel=”lightbox” enable image file zoom via JavaScript, if lightbox v2 module is enabled. If you want to implement complex AJAX loading or to experiment more JCarousel effects, options and customizations, see also:

Another example, using some CSS and photoframe module: