Control CSS border via jQuery

Question

I am trying to add a border for a div but there are other divs inside it towards the end. I want to end the border until a particular div. Sample code is below. Will not be able to edit the actual template so I am looking for a jQuery/CSS solution to solve this. Adding border using specific CSS classes is an option but not a perfect solution as there is going to gap between sections and border will be missing.

$(".article-content")
  .css("border", "2px red solid")
  .find("#beforeFooter")
  .end();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="article-content">
  <div class="article-title">Title</div>
  <div class="article-share">Share tools</div>
  <p><span>Hello</span>, how are you?</p>
  <p><span>Hello</span>, your name?</p>
  <p><span>Hello</span>, your age?</p>
  <p>Ends here</p>
  <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div>
  <div class="article-footer">Some other footer content</div>
</div>

which mean there will be multiple borders or there will be just one border at a time and you want to be able to control where the border extend until? — Vincent1989
– Vincent1989, Commented Nov 3, 2017 at 6:24
its a border wrapping some content but in my scenario that content has some sections towards the end which cannot have border. So I was thinking if there is anyway to handle this using jquery as well (may be not possible but trying to get opinion if any). so the border will stop once that particular div is there on the page. Its fine to have just left and right border — JDesigns
– JDesigns, Commented Nov 3, 2017 at 6:27

Brett DeWoody · Accepted Answer · 2017-11-03 06:39:37Z

One option is to get the offset of the #beforeFooter element (the number of pixels it's offset from the top of the .article-content element) then set the height of the .article-content to that offset.

var beforeFooterPosition = $("#beforeFooter").position();
$(".article-content").height(beforeFooterPosition.top);

Here's the working example. I had to subtract an additional 18 pixels for the border to be in the correct place. You'll want to experiment with that number to get the desired effect.

var beforeFooter = $("#beforeFooter").position();
$(".article-content").height(beforeFooter.top - 18);

.article-content {
  border: 2px solid red;
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="article-content">
  <div class="article-title">Title</div>
  <div class="article-share">Share tools</div>
  <p><span>Hello</span>, how are you?</p>
  <p><span>Hello</span>, your name?</p>
  <p><span>Hello</span>, your age?</p>
  <p>Ends here</p>
  <div id="beforeFooter"><img src="https://via.placeholder.com/600x150" /></div>
  <div class="article-footer">Some other footer content</div>
</div>

Collectives™ on Stack Overflow

Control CSS border via jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related