By zcrow on

I have a block of javascript that was working in my static mockup site (based on Twitter Bootstrap). Bringing the javascript over to Drupal is not working. I have confirmed that jQuery, bootstrap.min.js and the file that contains my javascript is loading into the template. Is there something that needs to be done to javascript so it works in Drupal?? Here are the contents of the javascript:

function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}

$(document).ready(function() {
if (document.body.clientWidth >= 768) {
equalHeight($(".equal"));
equalHeight($(".equalprog"));
}
});

//Add html break between words in main menu to create 2 lines on desktop devices -->
$(document).ready(function() {
if (document.body.clientWidth <= 1100) {
$('.break').html(" ");
}
});

$(document).ready(function () {
$('.carousel').carousel({
interval: 6000
});

$('.carousel').carousel('cycle');
});

//Add "+" and "-" to accordion header depending on state -->
$(".accordion-body").on("show",function(event){
$('span', $(this).prev()).html('Only local images are allowed.');
});
$(".accordion-body").on("hide",function(event){
$('span', $(this).prev()).html('Only local images are allowed.');
});

// place iconbar 20px to the right of the content area
$(document).ready(function() {
var documentWidth = ($('body').width());
if (document.body.clientWidth > 1024) {
$('.iconbar-fixed').css({
'margin-left': documentWidth + 20 + "px"
})
}
});

// place other locations overlay trigger
$(document).ready(function() {
var documentWidth = ($('body').width());
var itemWidth = ($('.otherlocations').width());
if (document.body.clientWidth > 1024) {
$('.otherlocations').css({
'margin-left': (documentWidth - itemWidth) + "px"
})
}
});

⋅ Categories: Drupal 7.x

Comments

nevets’s picture

nevets commented

Some thoughts

You script needs a newer version of jQuery than Drupal 7 uses by default.

You are including jQuery directly and it's conflicting with cores jQuery

It is better to uses Drupals javascript behaviors instead of .ready().

zcrow’s picture

zcrow commented

The subtheme (open framework) does load in jQuery 1.8.2 through some coding. So I think the version is okay.

What do you mean by using "Drupals javascript behaviors instead of .ready()"? Do you mean using jQuery(document).ready(function($) ? Or something else?

nevets’s picture

nevets commented

See https://drupal.org/node/756722, search down for "Using jQuery" and "Behaviors"

The first shows how to wrap your javascript so $ is defined, the second, Drupal's preferred way to re-act to page load/ready.

zcrow’s picture

zcrow commented

First of all, I appreciate it very much that someone is actually responding. I'm not a programmer and I looked through the page you suggested but still can't get things to work. I tried several of the suggested methods and nothing seems to make a difference. I'm obviously not getting it.

If you can be so kind, if I want this little snippet of js to work in Drupal, can you give me a specific example of what the final structure would like like? I think if I can see what it is supposed to look like then it will be easy for me to convert over the other snippets I need.

$(document).ready(function() {
var documentWidth = ($('body').width());
if (document.body.clientWidth > 1024) {
$('.iconbar-fixed').css({
'margin-left': documentWidth + 20 + "px"
})
}
});

nevets’s picture

nevets commented

Try this

(function ($) {

  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {
      var documentWidth = ($('body').width());
      if (document.body.clientWidth > 1024) {
        $('.iconbar-fixed').css({
          'margin-left': documentWidth + 20 + "px"
        })
     }
    }
  };

})(jQuery);

Note I have assumed your code inside the ready is correct.

zcrow’s picture

zcrow commented

That works. Thanks so so much. Okay now I think I know how to proceed. I am very grateful to you.

gsjha’s picture

gsjha commented 
(function ($) {
  $(function() {
    $('.tag .css').hide(); // Do like this -- Enter Your logic here -- It will work
  });

})(jQuery);