jquery appends elements outside its div-element

jquery appends elements outside its div-element - javascript

I wrote this code which appends movie posters to a selected div with an ID.
For whatever reason, appended elements end up outside (below) the div. When I check the HTML in my debugger, the elements are clearly inside the div in question.
I have no idea what's going on here, and couldn't find an answer by searching. Help would be greatly appreciated!
Here's the entire code. The DIV used is div.movieListBox_trans in the CSS. The point of all this is to margin the grid area for the posters to the center. However, since the elements end out outside, the margin-center attributes doesn't apply.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
</script>
<script type="text/javascript">
$(document).ready(function(dis) {
$("#displayBoxFind").append("<div id='movieListBox2' class='movieListBoxWatchque'><p class='box_title'>Lorem Ipsum</p><p class='box_description'>Lorem Ipsum</p></div>").slideDown();
for(var i=0; i<7; i++){
$("#movieListBox2").append("<div class='filmdiv'><img class='posterClickableNoMargin' data-movieId='dsfa' id='dsfa' src='dsfa' alt='No Poster'><div class='metadiv'><p class='film_title'>'dsfa'</p><p class='meta'>Genres: 'dsfa'</p><p class='meta'>Vote average: 'dsfa'</p><p class='meta'>Release date: </div></div>");
}
});
</script>
<style type="text/css">
div.movieListBox_trans{
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background: yellow;
opacity: 0,5;
}
div.filmdiv{
float: left;
width: 350px;
height: 180px;
margin: 15px;
}
div.metadiv{
float: right;
background: #DCDCDC;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
width: 200px;
height: 180px;
border-style:solid;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.poster{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 1px;
border-color: #D3D3D3;
background:rgba(0, 0, 0, 0.6);
border-top: 2px solid rgba(255,255,255,0.5);
color:rgb(255,255,255);
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
img.posterClickableNoMargin{
float: left;
border-style:solid;
width: 115px;
height: 180px;
border-width: 3px;
border-color: black;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="displayBoxFind" class="movieListBox_trans"></div>
</body>

Add this style to fix the problem
div.movieListBox_trans {
overflow: hidden;
}
Fixed version http://jsbin.com/OSUkupO/2/edit
Basically you have the problem with float:left and context. Read this one How does the CSS Block Formatting Context work?

Related

Is there any way to bring shadowing to the foreground?

I have two divs stacked next to each other, and I'm attempting to use shadowing to make it look like one div is behind the other. Adding shadowing to the left of the div on the right seems to work, but adding shadowing to the right of the div on the left side casts the shadow behind the right div instead of in front of it. Is there any fix to this?
.wrapper{
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover{
cursor: pointer;
}
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
}
.wrapper:hover > .right{
height: 80%;
box-shadow: none;
}
.left{
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right{
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>

I have solved your problem.
You should change your code like below.
.wrapper{
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover{
cursor: pointer;
}
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
.wrapper:hover > .right{
height: 80%;
box-shadow: none;
}
.left{
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right{
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>

Adding z-index to the left div when hovering over the wrapper appears to work.
.wrapper {
display: grid;
width: fit-content;
height: 150px;
align-items: center;
grid-template-columns: 1fr auto;
border: solid 2px black;
margin-left: 15%;
}
.wrapper:hover {
cursor: pointer;
}
.wrapper:hover>.left {
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}
.wrapper:hover>.right {
height: 80%;
box-shadow: none;
}
.left {
width: 150px;
height: 80%;
background-color: red;
border: 2px red solid;
transition: 0.3s;
}
.right {
width: 100px;
height: 100%;
background-color: blue;
border: 2px blue solid;
transition: 0.3s;
box-shadow: -4px 0px 15px -1px #000000;
}
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>

You can add z-index inside .wrapper:hover>.left so when you hover the left <div> it will bring the <div> in front and cast the shadow in front of the right <div>.
.wrapper:hover > .left{
height: 100%;
box-shadow: 4px 0px 15px -1px black;
z-index: 1;
}

Looping through UL list but can't prepend div

I'm trying to loop through list items in javascript and prepend some HTML to EACH list item. However, when I create the loop the content only gets prepended to the LAST element.
So in my example, I'm looking for the circle + to be before ALL list items, not just the last.
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

Moving the definition for the _el variable inside of the forEach will do the trick. This will ensure that a new element is created for each iteration of the loop.
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

You were prepending the same element multiple times. I believe you can only have an instance of an element at one point in the DOM, so only the last change stuck.
It works if you create a separate instance of the div for each list item.
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

CSS: Placing Element Off Center

Is it possible with CSS to set the position of a div to 8px left of center?
The reason for my asking, is that JQuery Mobile sets divs to the right by about 8px, and I would like to center an element, which would require applying a left correction of 8px.
My CSS:
.sectionMap{
width: 300px;
display: block;
margin-right: auto;
margin-left: auto;
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
Any ideas?

Kinda hacky, but maybe something like this:
.sectionMap{
width: 300px;
display: block;
position:relative;
left:50%;
margin-left:-158px; /*Centered, minus 8px left*/
padding: 0px 0px 0px 0px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
DEMO

CSS & JQuery: Better Usability

I would like to improve my user experience of the following code:
HTML:
<div class="news-item">
<div class="main-content">
<div class="header"> Header 1 </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
<div class="news-item">
<div class="main-content">
<div class="header"> Header </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
JavaScript:
jQuery(document).ready(function() {
$(".header").click(function () {
$(this).parent().toggleClass("expand");
});
});
CSS:
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
padding-bottom: 20px;
cursor:pointer;
}
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 22px;
height: 20px;
overflow: hidden;
}
.expand {
height: 200px;
}
Demo: http://jsfiddle.net/9UJ7f/4/
As you may notice, when you click the Header, the box expands or collapses.
However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.
To eradicate "void-clicks", I would like it to be like this:
A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand
B. In Expanded Mode:
If you click only the .Header class, the item contracts again.
What would be the best approach to do this ?
UPDATE:
OK, you were right. The CSS was a bit off.
I choose sandeep's solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border).
You are awesome, guys. I'll give you all a thumbs up.

jQuery(document).ready(function() {
$('.header').click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
Perfect working sample

Give padding to heading DIV. Write like this:
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 22px;
height: 42px;
overflow: hidden;
}
.header ~ div{
margin:22px;
}
.header{
font-size: 20px;
padding: 22px;
cursor:pointer;
}
Check this http://jsfiddle.net/9UJ7f/14/

demo
<div class="main-content">
<h2 class="header"> Header 1 </h2> <!-- you can use h2 -->
<div class="content"> lorum ipsum 1 </div>
<div class="time"> time 1</div>
</div>
Just remove the padding from the container (.content) and play with your children elements padding.
.main-content {
position:relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
width: 80%;
height: 50px;
background: rgb(251, 251, 251);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h2.header, .content, .time{
padding:3px 22px;
}
h2.header{
padding:13px 22px;
font-size: 20px;
cursor:pointer;
}
.time{ padding-bottom:20px; }

This should work for you: DEMO
Here's the new javascript:
jQuery(document).ready(function() {
$(".news-item").click(function () {
if( !$('.main-content', this).hasClass('expand') )
$('.main-content', this).toggleClass("expand");
});
$('.news-item .main-content.expand .header').live('click',function () {
$(this).parent().toggleClass("expand");
});
});
This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.

Your js is correct. Change you css with
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
cursor:pointer;
padding: 22px 22px 20px 22px;
}
.content { padding: 0 22px; }
.time { padding: 0 22px; }
/* thanks to raingroove for the main styling ! */
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 66px;
overflow: hidden;
}
.expand {
height: 200px;
}
see http://jsfiddle.net/9UJ7f/25/

small addition to #thecodeparadox answer
jQuery(document).ready(function()
{
$('.header').click(function(e) {
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});

Expanding parent div's height to fit floated & unfloated child divs

I have a parent div #modal_share with a defined height of 400px. I want it to extent its height to contain all its child divs when a new child div which is originally hidden, becomes visible.
Problem: Right now, when a hidden child div .modal_error_msg becomes visible, some divs below this newly visible div gets pushed outside its parent div.
How can I make the parent div #modal_share expand its height to contain all the visible child divs?
JSFiddle: http://jsfiddle.net/TEmGc/
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
.modal_error_msg {
width: auto;
height: 15px;
padding: 15px 25px;
margin: 0px 25px;
font-size: 12px;
color: #B79000;
border: 1px solid #E7BD72;
background: #FFF3A3;
clear: both;
display: none;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_error_msg"></div>
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>

For parent div #modal_share declare height as auto then it will automatically adjust height based on child elements.

Set the modal_share's height to auto:
#modal_share {
width: 565px;
height: auto; //<----
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
}
See Feedle http://jsfiddle.net/TEmGc/1/

Develop Reference

JavaScript is the programming language of the Web.

jquery appends elements outside its div-element - javascript

Add this style to fix the problem div.movieListBox_trans { overflow: hidden; } Fixed version http://jsbin.com/OSUkupO/2/edit Basically you have the problem with float:left and context. Read this one How does the CSS Block Formatting Context work?

Related

Is there any way to bring shadowing to the foreground?

Looping through UL list but can't prepend div

CSS: Placing Element Off Center

CSS & JQuery: Better Usability

Expanding parent div's height to fit floated & unfloated child divs

Categories

Resources