0

I have a fairly specific scenario where I'd like to remove a top-margin from an element named 'footer' if and only if I can determine the presence of another element in the DOM.

The other element happens to be a DIV with a colored background, in which case the margin applied to the footer creates an unwanted empty white space.

The other element is not a sibling of the footer, but is rather a fairly deep descendent of a a preceeding element in the DOM.

An example would be :

<main>
   <section>
      <wrapper>
         <div id="if-exists-remove-footer-styling">

         <div>
      </wrapper>
   </section>
</main>

Robin M
  • 664
  • 6
  • 18
  • 1
    Could you show us where the footer is, and possibly a test case demonstrating how the div affects the top margin on the footer? – BoltClock Jun 16 '15 at 11:58
  • This feels like a "parent selector" question just with greater depth but an actual demo of the **true** issue is needed. – Paulie_D Jun 16 '15 at 12:08
  • @Paulie_D: Indeed, it would be a dupe of [this](http://stackoverflow.com/questions/28708741/how-do-i-select-an-element-based-on-the-state-of-another-element-in-the-page-wit), with a long explanatory answer that essentially boils down to "you can't do this with a pure CSS selector", which is not terribly useful in retrospect unless the specific question is about a selector. – BoltClock Jun 16 '15 at 13:12
  • Apologies, the footer element has been lost when I created the question using the 'code' selection button. The footer element is directly below and at the same level as 'main'. – Robin M Jun 16 '15 at 13:42

2 Answers2

0

Here's the jQuery solution:

if($('#if-exists-remove-footer-styling').length >0) { 
  $("#footer").removeClass('top-margin')
}

CSS:

.top-margin {
    margin-top:60px;
}
#footer {
    margin-top:0;
}

HTML:

<div id="footer" class="top-margin">footer content</div>

Working JSFiddle

freewheeler
  • 1,306
  • 2
  • 12
  • 24
  • I mean if you're going to suggest using jQuery, at least state as much in your answer. jQuery doesn't come stock with every site. You can't just assume someone is using it especially if they never mentioned it in their question. (Even *my comment* is assuming you're using jQuery.) – BoltClock Jun 16 '15 at 11:59
  • I think if you can't understand what this code does, and rewrite it for your app, you need to search help not in stackoverflow, but at freelance.com – degr Jun 16 '15 at 12:01
  • I think he asked for solution and didn't mention it CANNOT BE jQuery solution. – freewheeler Jun 16 '15 at 12:08
  • Thanks freewheller for the suggestion. A jquery solution (or non-jQuery solution as below) would be fine to implement if I can't achieve it through CSS. My only gripe would be I'm manipulating styling using Javascript/jQuery in probably just this one case making maintenance just a tiny bit messier. – Robin M Jun 16 '15 at 14:16
0

Here's a non-jQuery solution:

if (document.getElementById('if-exists-remove-footer-styling')) {
    document.getElementById('footer').style.marginTop = 0;
}

All this assumes is that your footer element has an id.

vvye
  • 1,208
  • 1
  • 10
  • 25
  • and also you can put this code into – degr Jun 16 '15 at 11:59
  • Thanks for your help everyone. The final code that worked in this instance was : if (document.getElementById('if-exists-remove-footer-margin')) { document.getElementsByTagName("footer")[0].style.marginTop = 0; } – Robin M Jun 18 '15 at 11:25