nth child not working with within body - javascript

I'm trying to draw a 6x6 grid with divs, but when I create them with javascript and css, it doesn't show as expected.
css:
div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-child(6n+1){
clear:both;
}
javascript:
for(var i=0; i<36; i++){
document.body.appendChild(document.createElement('div'));
}
https://jsfiddle.net/kqzhorq0/
The above link demonstrates what I see in the browser.
But, when I select onload or onDomReady settings in jsfiddle, the grid shows as expected.
How can I get the grid to show properly using onload or onDomReady, and why isn't it showing properly without it?

If you can wrap your divs in a container and specify your selectors to target from within the container your code will work.
Here is a working snippet:
for(var i=0; i<36; i++){
document.getElementById("foo").appendChild(document.createElement('div'));
}
#foo div{
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#foo div:nth-child(6n+1){
clear:both;
}
<div id="foo"></div>
I also created an interactive demo on nth-child to help explain it further: http://xengravity.com/demo/nth-child/

The problem here, the first child of the body in the fiddle is the script element. You can inspect the html of the result panel to see the script element.
The nth-child will consider all the elements while using the index to search for an element, but using nth-of-type you can search for a particular type.
One choice is to use the :nth-of-type selector as below
div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
div:nth-of-type(6n+1) {
clear:both;
}
Demo: Fiddle
Another is to insert the divs before the script like
for (var i = 0; i < 36; i++) {
document.body.insertBefore(document.createElement('div'), document.body.firstChild);
}
Demo: Fiddle
But a better solution will be use a custom container element instead of the body element
var ct = document.getElementById('container');
for (var i = 0; i < 36; i++) {
ct.appendChild(document.createElement('div'));
}
then
#container > div {
width:30px;
height:30px;
margin:0px;
border:1px solid black;
float:left;
}
#container div:nth-child(6n+1) {
clear:both;
}
Demo: Fiddle

Related

How to display a js variable value in HTML,<div id> with mouseover effect

In javascript I have a variable which contains some value which i get from JSON.
var a =recipe[0].step[1].processingTime;//here processing time is stored in var a
I want to display this value by showing a description box, when I hover my mouse over a small div id in HTML.
<tr>
<td>Recipe 0</td>
<td>
<div id="p1"><div>
</td>
</tr>
How to do that? Can anyone please show me a easy solution.
If you only want the simple native html tooltip you can just set the elements title atrribute. For example the ones that get shown when you hover over the SO voting arrows
document.getElementById("p1").setAttribute("title",recipe[0].step[1].processingTime);
Demo
var text = "13ms";
document.getElementById("p1").setAttribute("title",text);
#p1 {
width:80px;
height:80px;
background:#323232;
}
<div id="p1"></div>
If however you are wanting a fancier one, you can do this with a little javascript and using css :hover, :after, attr css function, and the content property.
Give your div (or whatever element) a css class like below:
.withTooltip:hover:after {
content:attr(data-tooltip);
display:block;
padding:10px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
}
:hover will cause the style to applied only when the element is
hovered over.
:after will create a pseudo-element
conent you can use to set the text that the pseudo-element will display
attr will take the passed attribute name and get the value of that
attribute
Then use javascript to set the attribute to your saved text (in this case using data-tooltip)
document.querySelector("p1").dataset.tooltip = recipe[0].step[1].processingTime;
//or
document.querySelector("p1").setAttribute("data-tooltip",recipe[0].step[1].processingTime);
Demo
var someData = ["13ms","100ms","8ms","67ms"];
var elements = document.querySelectorAll(".withTooltip");
for(var i=0; i<elements.length; i++){
elements[i].dataset.tooltip = someData[i];
}
.box {
width:50px;
height:50px;
background:#86DDFF;
margin:10px;
position:relative;
display:inline-block;
}
.withTooltip:after {
content:attr(data-tooltip);
display:block;
padding:10px;
position:absolute;
right:-40px;
top:0px;
background:#323232;
border-radius:4px;
border:#000000;
color:#FFFFFF;
opacity:0;
transition:all 0.3s;
z-index:100;
pointer-events:none;
}
.withTooltip:hover:after {
opacity:1;
}
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
<div class="box withTooltip"></div>
Here's a vanilla javascript version:
var a = "something to show";
function showProcTime(elem) {
elem.addEventListener("mouseout", clearProcTime);
elem.innerHTML = '<div class="popupBox">' + a + '</div>';
elem.style.backgroundColor = "#EFEFEF";
}
function clearProcTime(e) {
var elem = e.target;
elem.removeEventListener("mouseout", clearProcTime);
elem.innerHTML = "";
elem.style.backgroundColor = "#CCCCCC";
}
.popupBox {
display: block;
width: 200px;
height: 20px;
position: absolute;
top: 20px;
left: 20px;
background-color: #EFEFEF;
border: 1px solid;
padding: 10px;
}
<div id="p1" style="background-color:#CCCCCC;display:inline-block;width:200px;height:20px;" onMouseOver='showProcTime(this)'>roll over me
<div>
You could use jQuery:
var a =recipe[0].step[1].processingTime;
$('#p1').mouseenter(function(){
$(this).html(a)
}).mouseout(function(){
$(this).html('');
});
Have you tried jquery hover method? http://www.w3schools.com/jquery/event_hover.asp
and if you are using simple javascript try this: http://www.w3schools.com/jsref/event_onmouseover.asp
I think this is simple:
<html>
<script>
var a = 'the processing time you got from json';
function displayTitle(e){
e.title = a;
}
</script>
<body>
<table border>
<tr>
<td>Recipe 0</td>
<td onMouseOver='displayTitle(this);'>
<div id="p1"><div>
</td>
</table>
</body>

Why is only one div being appended?

I'm trying to append several div elements dynamically. However, only one div element is being created/displayed in the browser when I go to test the code. I tried looking for similar questions/issues like this, but found nothing. Any help would be appreciated.
.divcreate {
height:75px;
width:75px;
border:2px solid #000000;
display:inline-block;
}
$(document).ready(function () {
for (var i=0; i < 12; i++) {
$("body").append("<div></div>").addClass('divcreate');
}
});
Because the addClass function applies to your body selector, your code is adding 12 divs, but then applying the divcreate class to your body element. Below is a simple working version that sets the class inline.
$(document).ready(function (){
for (var i=0; i < 12; i++) {
$("<div></div>").addClass('divcreate').appendTo(document.body)
}
});
.divcreate {
height:75px;
width:75px;
border:2px solid #000000;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You are adding the class to the body. If you put text in the div you will see that the div is in fact being added 12 times. See this jsfiddle -> https://jsfiddle.net/ehj6wzew/
Add class first and then append
$(document).ready(function (){
for (var i=0; i < 12; i++) {
$("body").after($('<div></div>').addClass('divcreate'));
}
});
.divcreate {
height:75px;
width:75px;
border:2px solid #000000;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to display tooltip on top of everything

I have a problem with the tooltip which is not displaying on top of everything. I tried to change z-index to a really high number but that didn't work.
CSS:
a.tooltipA {
outline:none;
}
a.tooltipA strong {
line-height:30px;
}
a.tooltipA:hover {
text-decoration:none;
}
a.tooltipA span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:300px;
line-height:16px;
}
a.tooltipA:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
}
.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
}
/*CSS3 extras*/
a.tooltipA span {
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
HTML:
html += '<a href="#" class="tooltipA">'
html += '<span>' + "Tooltip text"
html += '</span></a>';
You can check out this code: First tooltip is not fully visible.
JSFiddle
If possible I would like an answer using css/html but javascript is also an option. I can't use jquery. If you need more details, let me know. I also use bootstrap 3, but that doesn't matter I guess, since same thing happens on JSFiddle.
The problem with your fiddle is the margin-top:-30px in a.toolTipA span is moving the tooltip for the top link out of the viewport. You either need to start your items at least that far down the page, or remove that line from the css.
According to this previous stackoverflow post, setting position:fixed will keep your elements in the viewport.

How to include child div into parent div automatically?

Is there any way how to add a child div into parent divs. The child div is still same (without changes) but content of parent div is variable. Parent div contains child div automatically like CSS div::before but with whole div in it not just text.
Basically for each parent automatically generate same child.
See figure
sample of parent and child divs
How can I make it via CSS ? (or JS)
CSS cannot generate content (as such) it can only style it.
If the element is not present in the HTML nothing will happen.
It is possible to add "pseudo content" with a pseudo element but the primary purpose of these pseudo-elements is enhancement not addition of "content". Also they cannot contain HTML.
It would be possible to use a pseudo element with a bg image in this instance as this is essentially styling.
JSfiddle Demo
div {
height:250px;
width:250px;
display: inline-block;
margin: 25px;
position: relative; /* required */
}
div:after {
content:"";
/* required */
position: absolute;
bottom:25px;
right:25px;
background-image: url(http://www.webdevelopersnotes.com/how-do-i/thumbs/shortcut-arrow.jpg);
height:75px;
width:75px;
background-size:cover;
}
.one {
background: red;
width:300px;
}
.two {
background: lightblue;
height:300px;
}
<div class="one"></div>
<div class="two"></div>
Not sure I understood your question so I will just give you a solution and then you comment your requirements.
You can have a div that contains another child div which is positioned inside the parent but does not change when you add more content to the parent.
Here is a fiddle:
http://jsfiddle.net/1fohx3qf/
.parent {
border:2px solid black;
padding:5px;
position:relative;
width:124px;
height:120px;
}
.child {
border:2px solid red;
padding:30px;
position:absolute;
bottom:5px;
right:10px;
}
It's not completely clear to me what the problem/issue is, but it sounds like you are looking for JS code like this:
var child = document.createElement('div');
child.innerHTML = '<p>Child!</p>';
var parent = document.createElement('div');
parent.innerHTML = '<p>Parent 1</p>';
parent.appendChild(child);

how to display list as table?

I have a list of items with different content floated left, I need to display them as a row.
<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>
I would like to display the list items in a row.
row height depends on max height item in row,
How to get it?
Demo
Add display:table-cell so it acts as table column. remove float:left as well.
#contentpane{}
#contentpane li{
padding:10px;
width:80px;
border:1px solid #000;
display:table-cell
}
DEMO
CASE 2
In case you need it with auto height then use the below white-space:nowrap; method
ul#contentpane{
width:100%;
white-space:nowrap;
}
#contentpane li{
padding:10px;
width:80px;
border:1px solid #000;
height:auto;
display:inline-block;
white-space:normal !important;
}
DEMO 2 || DEMO (Vertically aligned to the top)
you should go with javascript to set clear:both to row overflow element.
var ch=$("#container").width();
var itemsPerRow=Math.floor(ch/102);
var itemsCount=$("#contentpane li").length;
var loopRound=Math.floor(itemsCount/itemsPerRow);
for(var i=1;i<loopRound+1;i++)
{
var nextFirstItem=i*itemsPerRow+1;
$("#contentpane li:nth-child("+ nextFirstItem +")").css({"clear":"both"});
}
demo
ul {
display: table-row;
}
ul > li {
display: table-cell;
}
Note that you should have a wrapper with display: table in order to built a complete table representation.
Set height to the li.
#contentpane{
}
#contentpane li{
float:left;
padding:10px;
width:80px;
height:180px;
overflow:auto;
display:table-cell;
border:1px solid #000;
}
FIDDLE
Try this one
var maxHeight = 0;
$("#contentpane li").each(function( index ) {
var height = $(this).height();
if(height > maxHeight){
maxHeight =height;
}
});
$("#contentpane li").css("height",maxHeight);
Fiddle Demo
Drop the float and use inline-block instead:
http://jsfiddle.net/CmkSb/10/
#contentpane li{
padding:10px;
width:80px;
display:inline-block;
vertical-align: text-top;
border:1px solid #000;
}

Categories