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>
Related
I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute:
$('.item-title').hover(function() {
$(this).parent().addClass('hover');
}, function() {
$(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
alert('test this')
});
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="item-button"><span class="item-title">File Title</span></button>
However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?
Edit: Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.
Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.
Update: I tried binding a click event to your label and it works without an issue,
$('.item-title').on('click',function(){
alert('test this')});
Edit your Css code :
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
z-index : 888;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
Dropdown is hiding. I dont know what problem. If i give opacity and overflow visible it is not working. I have tried in inspect element, but it is not working.
Code for text box:-
<input class="typeahead form-control tt-input" id="search" placeholder="Location" type="text" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="search_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="position: relative; vertical-align: top;">
CSS:-
element.style {
position: relative;
vertical-align: top;
}
.form-control {
padding: 10px 22px;
border: 4px solid #938F94;
height: 47px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
}
Code for tt-menu:-(Dropdown)
element.style {
position: initial;
top: 100%;
left: 0px;
z-index: 100;
display: none;
}
.tt-menu {
width: 350px;
margin: 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
How to make it overflow visible?
use this code if you are using bootstrap dropdown.
.dropdown{
z-index:9999;
}
I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I'm attempting to make a pair of JQuery UI sortable divs where you move items from one vertically expanding div to another horizontally expanding div (think something like a timeline). The idea is that you can drag an item up from the holder div onto the timeline div, and as you add items the div will expand to hold them all.
I've tried a few different CSS things, ranging from using floats and inline-blocks to making the container extremely wide by default (sort of worked, but I'd rathe not have all the extra space there by default, and it's still possible to run out of space), but I can't seem to make it expand horizontally, only vertically. Here's my current code:
JS:
jQuery( ".dragto ul.connect-sortable, .dragfrom ul.connect-sortable" ).sortable({
items: "li:not(.empty)",
connectWith: ".connect-sortable",
placeholder: "ui-state-highlight",
start: function(event, ui) { ui.placeholder.html(' ') },
receive : function(event, ui ){
},
update : function(event, ui ){
}
}).disableSelection();
Sample HTML:
<div class="dragto">
<ul class="connect-sortable">
</ul>
</div>
<div class="dragfrom">
<ul class="connect-sortable">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
CSS:
ul.connect-sortable {
margin: 0;
padding: 0;
list-style: inline;
width: 100%;
min-width: 100%;
min-height: 200px;
padding: 10px;
margin: 10px;
border: 2px solid #bfb9b3;
background-color: #FAFAFA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.dragto {
width: 100%;
overflow-x: scroll;
}
.dragto ul.connect-sortable {
height: 230px;
/* width: 10000px; */
}
ul.connect-sortable li {
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
margin: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 8px;
text-align: center;
background-color: #FEFEFE;
border: 2px solid #bfb9b3;
float: left;
}
ul.connect-sortable li:hover {
border: 2px solid #5cc7ee;
background: #e5f6fb;
cursor:pointer;
}
.ui-state-highlight {
border: 2px dashed #D8D8D8 !important;
background: #F0F0F0 !important;
height: 200px;
width: 200px;
}
.ui-sortable-helper {
-webkit-box-shadow: 0px 3px 5px #888888;
-moz-box-shadow: 0px 3px 5px #888888;
box-shadow: 0px 3px 5px #888888;
}
.ui-sortable-placeholder {
display: inline-block;
height: 1px;
}
Any ideas?
Fiddle
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?