Using jquery to end an existing div before another div

JavaScript
1

Hi all,

I have a fixed width div. Within that div I have a div that needs to be full width of the page. So I need to somehow break the full width div out of the fixed width div.

Ive tried css hack which I found online, but that adds a horizontal scrollbar to the browser! So I thought Id turn to jquery.

I can add html (via jquery) before and after my full width div by using before() and after() on my full width div. HOWEVER, I cant seem to add an ending div (which ends my fixed with div) and then open it again after my full width div.

Sorry, Im not explaining this well. :frowning:

My jquery so far is:

$( ".full-width" ).before('</div>');
$( ".full-width" ).after('<div class="fixed-width">');

Please help! The crux of the problem is that jquery is ignoring the closing div before my full width div.
Thanks.

2

…which begs the question; why do you need that extremely strange setup?

coothead

1 Like
3

Im working with a very cumbersome CMS!! Believe me - Ive tried other ways and Im stuck with the html. :frowning:

Im now looking at possibly achieving this using css. Something like:

.full-width-div::before {
  content: '\003c/div\003e';
}

But I cant get that working either. lol

4

I thought the same thing too. It’s definitely a strange setup. Have you tried using the z-index property. I don’t know too much but it’s worth a try. If you find a solution please do let us know. I’m interested in getting the full scoop of how this get’s solved. You can also check out this tutorial - https://www.tutorialspoint.com/How-to-replace-innerHTML-of-a-div-using-jQuery It focuses on manipulating content within a div tag.

5

You can give the inner div a 100vw width and then it will be 100% viewport width but of course if your parent div is not at the left edge of the viewport the 100% will push out of the right side of the viewport. Also the parent would need to be overflow:visible or the overflow is cut off.

It would be better if you could create a stand alone demo so we can see what we are dealing with. There may be other options depending what it is exactly you need to achieve.

e.g.

Of course it may still not be possible without a change of mark up. :slight_smile:

6

Hi guys

Ive just created a CodePen of what Im wanting to do: https://codepen.io/dl292/pen/MdRRKr

Other people have tried doingt the same thing, for example: https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container . This solution works great BUT it adds a horizontal scroll bar in chrome! :frowning:

So I think if I can get my jquery working then that should solve the issue. But the jquery is not closing the original div.

7

This is @PaulOB’s code with a small mod:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>Inner div to 100vw</title>
<!--
https://codepen.io/paulobrien/pen/zQXeXK
PaulOB (plus my mod)
-->
    <style>
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing:inherit;
}
html,body {
    padding:0;
    margin:0;
}
.parent {
    max-width:600px;
    border:1px solid red;
    background:orange;
    padding:10px;
    margin:10px;
}
.child {
    width:calc(100vw - 42px);   /* changed from - 30px  */
    background:rgba(0,0,0,0.5);
    border:1px solid #fcc;
    padding:10px;
}
    </style>
</head>
<body>

<div class="parent">
    <div class="child">
        <p>I am a child div that will stretch 100% across the viewport even though the parent div is only 300px wide. Of course I will lay over the top of anything in my way that is outside the parent. I am a child div that will stretch 100% across the viewport even though the parend div is only 300px wide. Of course I will lay over the top of anything in my way that is outside the parent. </p>
    </div>
</div>

</body>
</html>
8

@ronpat : Why did you change the width? Are you able to centre ‘parent’ on the page?

9

I was dabbling with PaulOB’s code before reading your last post. I don’t think it will help. I will give it another try. Can you please tell me what the smallest break point is?

10

Im using Bootstrap v3, so smallest breakpoint is min-width : 320px.

11

Hmmm. OK. Well, your demo seems to be using a breakpoint at 760px. Can I assume that that is the smallest breakpoint before which the child div will stretch outside of the parent div? (I’m not sure that I’m following the logic of the layout, but bear with me for one more attempt.)

Can you post the CDN for the bootstrap version that you are using?

12

Thanks for your help @ronpat
Bootstrap version is: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

Im not sure if Im understanding correctly. The parent div should always be a set width. (Bootstrap is specifying this width as 1170px. On resolutions less than 1170px the contents should start stacking on tiop of each other in the usual responsive manner). On the child div it should ALWAYS be 100% of the browser width.

:slight_smile:

13

The demo, https://codepen.io/dl292/pen/MdRRKr, shows that the child is 100% of the parent’s width at widths larger than 760px. At 760px and narrower the parent becomes 100% of the browser window width and the child becomes about 40px narrower so it fits within the parent so that the parent appears to have borders around the child.

14

What are you trying to do with the jquery?

Are you trying to insert some markup that you can use because none exists?

Are you rather than inserting an empty div trying to wrap a div around some existing content? (which begs the question as to why you can’t use the original mark up anyway).

It will add a horizontal scrollbar for likely 2 reasons.The first is that the VW unit includes the scrollbar so if you have vertical scrolling the element will be too big (this is a big problem with the VW unit and negates much of its usefulness). The relative positioning may also incur a scrollbar even though you move it back out of the way. I would reverse the procedure to avoid that issue.

e.g.

.full-width{
  width: calc(100vw - 18px);
  position:relative;
  right:50%;
  margin-right:calc(-50vw + 9px);
}

The 18px is the average scrollbar width but of course on browsers that don;t show the scrollbar (as in mac systems) you will get a gap.

The only other solution would be to hide the overflow on the body to avoid the scrollbar but that’s a dangerous thing to do unless you have very tight control over everything.

1 Like
15

My offering…

Yes, the parent is centered. I followed my interpretation of the demo (thus the fixed widths greater than 760px), whereas @PaulOB followed your description. My money is on Paul, but neither one seems to make sense without the rest of the page (which is why we ask for “working pages” to start with), but what the heck :slight_smile:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <title>Inner div to 100% v2</title>
    <style>
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing:inherit;
}
html,body {
    padding:0;
    margin:0;
}
.outer {    /* ADDED */
    width:1170px;
    margin:0 auto;
}
.parent {
    background:orange;
    padding:10px;
    margin:12px;
}
.child {
    width:calc(100% + 21px);
    background:rgba(0,0,0,0.5);
    border:1px solid #fcc;
    padding:10px;
}
@media screen and (max-width:1170px) {
    .outer {
        width:990px;
    }
}
@media screen and (max-width:990px) {
    .outer {
        width:760px;
    }
}
@media screen and (max-width:760px) {
    .parent {
        margin:12px 0;
    }
    .outer, 
    .child {
        width:auto;
    }
}
    </style>
</head>
<body>

<div class="outer">
    <div class="parent">
        <div class="child">
            <p>I am a child div that will stretch 100% across the viewport even though the parent div is only 300px wide. Of course I will lay over the top of anything in my way that is outside the parent. I am a child div that will stretch 100% across the viewport even though the parend div is only 300px wide. Of course I will lay over the top of anything in my way that is outside the parent. </p>
        </div>
    </div>
</div>

</body>
</html>
1 Like
16

The current html is:

<div class="fixed-width container">
<p>some content in my fixed width container</p>
<div class="full-width container">
<p>full width content should be in here</p>
</div>
<p>this is some more content in my fixed width container</p>
</div>

I need to change the html to the below (using Jquery or - somehow - CSS)

<div class="fixed-width container">
<p>some content in my fixed width container</p>
</div>
<div class="full-width container">
<p>full width content should be in here</p>
</div>
<div class="fixed-width container">
<p>this is some more content in my fixed width container</p>
</div>
17

Changed.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <title>Inner div 100vw, parent's width stepped</title>
<!--
https://www.sitepoint.com/community/t/using-jquery-to-end-an-existing-div-before-another-div/329871
bolton
https://codepen.io/paulobrien/pen/yWWLXJ
PaulOB (with bolton's change, sorta)
-->
    <style>
.fixed-width {background:tan;}
.full-width {background:gold;}
.full-width {
    width:calc(100vw - 18px);
    position:relative;
    right:50%;
    margin-right:calc(-50vw + 9px);
}
    </style>
</head>
<body>

<div class="fixed-width container">
    <p>one sentence in a fixed width container</p>
</div>
<div class="full-width container">
    <p>full width content should be in here</p>
</div>
<div class="fixed-width container">
    <p>one sentence in a fixed width container</p>
</div>
<div class="fixed-width container">
    <p>one sentence in a fixed width container</p>
</div>
<div class="fixed-width container">
    <p>this sentence plus the following sentences are in one fixed width container.</p>
    <p>in other words, it works either way.</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
    <p>this is some more content in my fixed width container</p>
</div>

<script>
/*
$( ".full-width" ).before('</div>');
// the above line doesnt work! :(
$( ".full-width" ).after('<div class="fixed-width container">');
*/
</script>

</body>
</html>
18

Thanks, but your code has all the divs self contained.

I need the ‘full-width’ div to be WITHIN a ‘fixed-width’ div but expand 100% width of screen.

19

Please re-read the first few divs and "p"s…

They are indeed within fixed-width “divs”. The last div contains a bunch of "p"s just to fill space. All you have to do is put the fixed width divs around the individual "p"s if you want them individually contained… or just copy and paste the last “div with p” as many times as desired and delete the groupie “div” with the hoard of "p"s.

20

I don’t see that the html change makes a difference to what you want to achieve as the css offered will work with either.

I think I we are only getting part of the real picture:). Do you have a link to the actual site so we can see firsthand what the problem is?

1 Like