1

I'm trying to move a <div> down if a zone is present, but I'm having a little trouble targeting the right classes, etc.

// See http://jsfiddle.net/xgbzm/.
(function ($) {

  if (!$(this).hasClass('responsive-layout-normal')) {
    if ($('.page .section-header .zone-ticker-wrapper', this).length < 0) {
      $('.qtip .qtip-wrapper', this).css('margin-top', '65px');
    }
  }

})(jQuery);

How can I achieve it?

4
  • this question has nothing to do with Drupal
    – Aboodred1
    Apr 30 '13 at 15:12
  • 1
    It's a problem I'm having on a Drupal website using the Omega theme. Sorry I'm new here, and this seemed like the right place to post this. I need a way to move a div down if there is content in the zone/region i.e. div is present. Apr 30 '13 at 15:19
  • Hello, and welcome to Drupal Answers. The question is acceptable if the answer is specific for Drupal. For example, if the answer depends from a CSS class used from the Omega theme, then the question is specific to Drupal; if the answer is applicable also in the case you are not using Drupal, then the question is off-topic. At a first view, this question seems only about moving a <div> using jQuery, and as such seems off-topic. (That is, if I didn't miss anything.)
    – apaderno
    Apr 30 '13 at 15:52
  • 4
    @Aboodred1 It does look like that on the surface, but Omega can be a tricky one. I think this is suitably Drupal-related
    – Clive
    Apr 30 '13 at 15:52
1

At a guess I'd say your problem is context...$(this) won't be defined in your current code.

First thing to do is make sure the code runs on document ready so the elements you're targeting actually exist:

(function ($) {
  $(function() {
    // ...
  });
})(jQuery);

Next you need to handle $(this). In your current context you would need to check the <body> tag for that class, e.g.

if (!$('body').hasClass('responsive-layout-normal')) {
  // ...
}

And finally, since you're using a responsive theme you probably want that code to be responsive, and run when Omega changes its media query. Note that now, since you're binding to the <body> tag, and have proper context, $(this) will refer to the element you're expecting:

(function($) {
  $(function() {
    $('body').bind('responsivelayout', function(e, d) {
      if (!$(this).hasClass('responsive-layout-normal')) {
        // Make changes
      }
      else {
        // Undo changes
      }
    });
  });
})(jQuery);
5
  • 1
    Just as a sidenote, in the event handler for responsivelayout, the d parameter will have the from/to for the the layout change. You sometimes run into the situation where you need that info.
    – mpdonadio
    Apr 30 '13 at 16:04
  • Thanks Clive - this makes things a little clearer, but the responsive code throws me off. It's not something I need at present as another stylesheet deals with this, and I plan to hide the div on the smaller screen sizes. The main issue is making the div move down if the other div becomes present. I've added the body tag in so that it's definitely targeting it, but still no luck. The site is austravel.com if that helps to look at the source code. Apr 30 '13 at 16:14
  • It depends what you mean by 'becomes present'...basically you need to bind your code to whatever event is causing the div to 'become present'
    – Clive
    Apr 30 '13 at 16:16
  • Ah right. Basically it's the views ticker module that I am using. If the ticker appears at the top of the page (a div in a new zone/region) then the content gets moved down as expected. However when this happens, the dropdown for the nav ends up hiding behind the navigation bar. I need it to move down with the rest of the content, but only when the ticker is present. Hopefully that is clearer? Apr 30 '13 at 16:22
  • I had a quick look at the ticker plugin and it doesn't seem to expose any events; without altering that JS code to suit your specific requirements I think you're out of luck here. I mean theoretically you could always bind to one of the Mutation events, but that can really slow the DOM down (especially on older/slower browsers) and isn't recommended
    – Clive
    Apr 30 '13 at 17:13
0

Turns out I had the right answer this whole time. The reason it did not work was simply because the 'qtip' class had a 'display:none' set, effectively hiding it from the source code. Using another class that was visible, solved the issue.

I did try using this method but it didn't really help. Although I am sure that if someone stumbles across a similar issue in the future, this link might help them.

Thank you all for your help :)

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.