Fittext only applies to the first instance in a Wordpress loop

[josefulander]

I have succesfully loaded fitText in my wordpress installation. But for some reason it only executes on the first instance in a loop, ie. if I have a loop generating two(or more) headings with the same ID (#fittext1) to the h1-element it only makes the first heading flexible.

This is how I load the fitText script in my functions.php

function my_add_scripts() {
    wp_enqueue_script('fitText', get_bloginfo('stylesheet_directory').'/js/jquery.fittext.js', array('jquery'));
    wp_enqueue_script('fitText-activate', get_bloginfo('stylesheet_directory').'/js/jquery.fittext-activate.js', array('jquery', 'fitText'));
}
add_action('wp_enqueue_scripts', 'my_add_scripts');

In the jquery.fittext-activate.js I have put the following code:

jQuery(document).ready(function($) {
    $("#fittext1").fitText(1.0, { minFontSize: '16px', maxFontSize: '75px' });      
     });

Then I place the following in a loop in page template:

 <h1 id="fittext1" class="tile-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

In this specific case there are two posts headings generated by the loop and as I said earlier fitText works just fine but only on the first post heading.

How do I get it to work on all headings marked with #fittext1?

[davatron5000]

In HTML, IDs are supposed to be unique. So it's probably only grabbing one element. Try using classes instead.

[josefulander]

Thanks! It works perfectly now.