0

I have some custom HTML and CSS added to a form module I've created. It looks fine; the css is styling it correctly with a drupal_add_css() stylesheet. But I also want to add some Javascript using drupal_add_js() so that when a user is on the first page of the form it changes the text color in the HTML I set up. But I can't get it to work!

Here's the Javascript in step-one.js:

document.getElementById("step-one").style.color = "#769EDD";

Here's the code it will be changing:

    $form['progress bar'] = array(
        '#title' => t('Module Tool'),
        '#prefix' => '<div class="progress-bar" id="progress-bar">
<span id="step-one">Experience Level</span> <span id="arrow1"> > </span>
<span id="step-two">Primary Role</span> <span id="arrow2"> > </span> 
<span id="step-three">Topics of Interest</span> <span id="arrow3"> > </span> 
<span id="recommendations">Recommendations</span></div>',
    );

And I'm trying to add the javascript call ABOVE the previous code, right after I do the drupal_add_css() call (which works). Note that this is all within my module_form() function. Here's the relevant code:

function modulename_form($form, &$form_state) {
      drupal_add_css(drupal_get_path('module', 'modulename') .'/modulename.css');
      drupal_add_js(drupal_get_path('module', 'modulename') .'/step-one.js');
      // more code around building the form itself...until eventually 
      I get to my $form['progress bar'] = array( // see code above.

Any ideas why this might not be working?

  • 1. Have you checked in browser inspector if step-one.js is loaded correctly? – zaporylie Jan 29 '15 at 9:30
  • You should probably attach files anyway... drupal.stackexchange.com/questions/70015/… – Alex Gill Jan 29 '15 at 14:41
  • @zaporylie yes, it's showing as loaded in the <head> area. – Sage Jan 29 '15 at 22:32
  • Than it is not a Drupal problem but Javascript :) Try write it in jQuery notation: jQuery('#step-one').css('color', '#769edd'); – zaporylie Jan 30 '15 at 11:11
1

You can try like this (thats's step-one.js file):

(function ($) {
  Drupal.behaviors.yourModule = {
    attach: function (context, settings) {
      $('#step-one').css('color', '#769edd');
    }
  };
})(jQuery);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.