current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.
up vote 0 down vote favorite

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?

share|improve this question
    
1. Have you checked in browser inspector if step-one.js is loaded correctly? –  zaporylie Jan 29 at 9:30
    
You should probably attach files anyway... drupal.stackexchange.com/questions/70015/… –  Alex Gill Jan 29 at 14:41
    
@zaporylie yes, it's showing as loaded in the <head> area. –  Sage Jan 29 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 at 11:11

1 Answer 1

up vote 1 down vote accepted

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);
share|improve this answer
    
Thank you @zaporylie that worked swell. –  Sage Jan 31 at 0:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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