Jqueryui Slider: Absolutely Positioned Element & Parent Container Height

jQueryUI slider: absolutely positioned element & parent container height

Then you'll also need to use jQuery to fix the height of the container div. Like so:

http://jsfiddle.net/khalifah/SsYwH/24/

$( document ).ready(function() {
    $( ".container" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
});

This is wrong however, since an absolute positioned element can sit outside of it's container. What you really what is something that will find the bottom of the element that sits lowest in the containing div, with respect to the view.

Parent height does not contain absolutely positioned children

The problem you have is similar to jQueryUI slider: absolutely positioned element & parent container height in that the container id="div0" doe not grow to contain the child elements. You can see this if you Right Click → Inspect the <div id="dev0"> in Chrome and see height = 0px.

position:absolute takes the element out of normal flow, which means that it does not leave a gap where the element should normally be.

The copyright <div> is rendered at the top because the previous <div> has no height, since it doesn't really contain any of the images (they are all out of normal flow).

One (quick) way to solve this is to simply add a height to <div id="dev0">.

You might think that using a different position value would work as position:relative does leave a gap where the element should normally be. However, you cannot use this in your example as the normal position for all of the images is inline next to each other, so you would still be left with the same container height problem.

An alternative approach could be to float the 3 images left and right. This also has the same issue since floated element are also out of normal flow, however there are many CSS ways to configure a parent element to correctly contain floated children, for example the CSS clear property.

In the following example, I have opted for overflow:hidden (see http://colinaarts.com/articles/the-magic-of-overflow-hidden/) to make the parent correctly contain the children - see demo.

CSS

I also removed a lot of duplication and also opted for visibility:hidden and visibility:visible instead of altering the z-index.

body {
    background-color: #5C5C3D;
}

#main {
    position: relative;
    width: 1366px;
    margin: 0 auto;
    background-color: #292929;
    overflow: hidden;
}

#leftColumn {
    float:left;
}

#rightColumn {
    float: right;
}

#leftColumn, #rightColumn {
    padding:20px 10px 0 10px;
}

#leftColumn img, #rightColumn img {
    display:block;
    margin-bottom:20px;
}

#img1, #img2, #img3, #img4, #img5, #img6 {
    width: 253px;
    height: 190px;
}

#imgCenter1, #imgCenter2, #imgCenter3, #imgCenter4, #imgCenter5, #imgCenter6 {
    position: absolute;
    top: 20px;
    left: 278px;
    width: 810px;
    height: 610px;
    visibility: hidden;
}

#img1:hover ~ #imgCenter1, #img2:hover ~ #imgCenter2, #img3:hover ~ #imgCenter3, #img4:hover ~ #imgCenter4, #img5:hover ~ #imgCenter5, #img6:hover ~ #imgCenter6 {
    visibility: visible;
}

#copyright{
    position: relative;
    margin:0 auto;
    max-width: 1000px;
    border: 2px solid white;
    padding-top: 15px;
    padding-bottom: 15px;
    color:white;
    background-color: #5C5C3D;
    font-family: tahoma;
    font-size: 0.8em;
}

HTML

<div id="main">
    <div id="leftColumn">
        <img id="img1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg"/>
        <img id="img2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg"/>
        <img id="img3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg"/>
        <img id="imgCenter1" src="http://images2.wikia.nocookie.net/__cb20110205230838/pixar/images/thumb/1/1f/Pixar_Animation_Studios_2.jpg/800px-Pixar_Animation_Studios_2.jpg">
        <img id="imgCenter2" src="http://www.jjtoy.com/wallpaper/original/Doc_Martin___Pixar_Cars_by_GrangerDesign.jpg">
        <img id="imgCenter3" src="http://fc05.deviantart.net/fs49/f/2009/188/9/f/Rowdy_McQueen___Pixar_Cars_by_GrangerDesign.jpg">
    </div>
    <div id="rightColumn">
        <img id="img4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg"/>
        <img id="img5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg"/>
        <img id="img6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg"/>
        <img id="imgCenter4" src="http://www.dan-dare.org/FreeFun/Images/CartoonsMoviesTV/MonstersIncForTheBirdsWallpaper800.jpg">
        <img id="imgCenter5" src="http://www.wallmay.net/thumbnails/detail/20120814/cartoons%20pixar%20disney%20company%20movies%20animated%20toy%20story%201600x1200%20wallpaper_www.wallmay.com_62.jpg">
        <img id="imgCenter6" src="http://fc09.deviantart.net/fs26/i/2008/143/3/6/Wall_E_Jr____Pixar___iBook_by_iFab.jpg">
    </div>
</div>
<div id="copyright">
    <center>CSS 1st Homework</center>
    <center>©2013 by TS7<sup>TM</sup> from NEWBIESVN Team. All rights reserved.</center>
</div>

Also, <center> is deprecated so I'd investigate a CSS way to center the text if you have time.

Extend height to include absolutely positioned children

I found a pure-css solution! In summary:

1. Set the child elements to position: relative instead of absolute.
2. Set their margin-right to be their negative width, to give them zero effective width, and make them float: left to keep them all on the same line. This makes all of them have an origin of 0, 0.
3. Then we can set their left and margin-top properties to position them absolutely within their parents. Note that margin-top is required instead of top because top won't push down the bottom of the parent element.

JSFiddle here or code below:

<style>
    div.layer { position: relative; float: left; }
    div.layer1 { width: 400px; border: 1px solid black }
    div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
    div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
    div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
    Container
    <div class="layer layer2" contentEditable>Edit me</div>
    <div class="layer layer3">
        <div class="layer layer4" contentEditable>Edit me</div>
    </div>
</div>

Is it possible to center an element that's wider than its parent and absolutely positioned without Javascript?

Yes it is possible using:

1- For unknown width:

left: 50%;
transform: translateX(-50%);

2- For known width:

left: 50%;
margin-left: -(width/2)

Here a working JSFiddle to play with

body {

    text-align: center;

}

.example-button {

    position: relative;

    padding: 15px;

    border-radius: 5px;

    background: gray;

    display: inline-block;

    text-align: left;

}

.example-menu {

    position: absolute;

    display: inline-block;

    top: 100%;

    background: blue;

    margin:0;

    padding: 10px 70px;

    list-style: none;

    left: 50%;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

}

<div class="example-button">Menu Button

    <ul class="example-menu">

        <li>Please</li>

        <li>center</li>

        <li>me!</li>

    </ul>

</div>

Relatively-positioned parent with absolutely-positioned children collapses the later elements

I have myself come up with the following solution:

#footer:before {
    content: '.';
    display: block;
    width: 100%;
}

Check it live: http://jsfiddle.net/MAhmadZ/YkJMH/5/

jQuery UI draggable not bound to parent bounds

I suspect that the issue is when you append the element. If it's not appended when you initialize draggable, it may not understand the parent relationship.

Consider the following example:

$(function() {

  function addNode(title, content, tObj) {

    if (title == undefined) {

      title = "New Node";

    }

    if (content == undefined) {

      content = "<p></p>";

    }

    if (tObj == undefined) {

      tObj = $("#node-container");

    }

    var node = $("<div>", {

      class: "node-element"

    }).appendTo(tObj);

    $("<div>", {

      class: "node-title"

    }).html(title).appendTo(node);

    $("<span>", {

      class: "btn btn-delete-node"

    }).html("x").click(function() {

      var r = confirm("Are you sure you want to delete this node?");

      if (r) {

        $(this).closest(".node-element").remove();

      }

    }).appendTo($(".node-title", node));

    $("<div>", {

      class: "node-content"

    }).html(content).appendTo(node);

    node.draggable({

      containment: 'parent',

      handle: ".node-title",

      cancel: '.connection,.output,.data',

      stop: function(e, ui) {

        // update position

      }

    });

  }

  $(".add-node-btn").click(function() {

    addNode();

  });

});

body {

  background-color: #000;

  font-family: "arial", san-seriff;

}

.node-container {

  background-color: #2a2a2a;

  border-radius: 10px;

  margin: 3px;

}

.btn-primary {

  border: 0;

  border-radius: 6px;

  padding: 4px;

  background-color: #0000ff;

  color: #FFF;

}

.node-container .node-element {

  background-color: #212121;

  border-radius: 6px;

  border: 0;

  width: 125px;

  height: 75px;

}

.node-container .node-element .node-title {

  background-color: #484848;

  border-radius: 6px 6px 0 0;

  border: 0;

  min-height: 1em;

  color: #fff;

  text-align: center;

}

.node-container .node-element .node-title .btn-delete-node {

  float: right;

  padding-right: 6px;

  cursor: pointer;

}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button type="button" class="btn btn-primary">Send data</button> <button type="button" class="btn btn-primary add-node-btn">Add Node</button>

<div id="node-container" class="node-container" style="height: 500px; width: 90%">

  <svg id="svg" />

</div>

<button type="button" class="btn btn-primary">Send data</button>

Change jQuery UI slider size

css from example page:

.ui-slider .ui-slider-handle {

    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}

---

Related Topics