I have a huge question about how to create div with JavaScript. In this case, I have tabs and I would like to be able to create a new one out of two variable obtained from the form in the left; one for the name and other the content. Example: http://s2.subirimagenes.com/imagen/previo/thump_8932774captura-de-pantalla.png
How should the function be to create this new tab out of the two variables?
This is the HTML of the tabs:
<div class="w3c">
<div id="tab16">
Tab 16
<div>One might well argue, that...</div>
</div>
<div id="tab17">
Tab 17
<div>... 30 lines of CSS is rather a lot, and...</div>
</div>
<div id="tab18">
Tab 18
<div id="Prueba">... that 2 should have been enough, but...</div>
</div>
</div>
and the CSS:
.w3c {
min-height: 250px;
position: relative;
width: 100%;
}
.w3c > div {
display: inline;
}
.w3c > div > a {
margin-left: -1px;
position: relative;
left: 1px;
text-decoration: none;
color: black;
background: white;
display: block;
float: left;
padding: 5px 10px;
border: 1px solid #ccc;
border-bottom: 1px solid white;
}
.w3c > div:not(:target) > a {
border-bottom: 0;
background: -moz-linear-gradient(top, white, #eee);
}
.w3c > div:target > a {
background: white;
}
.w3c > div > div {
background: white;
z-index: -2;
left: 0;
top: 30px;
bottom: 0;
right: 0;
padding: 20px;
border: 1px solid #ccc;
}
.w3c > div:not(:target) > div {
position: absolute
}
.w3c > div:target > div {
position: absolute;
z-index: -1;
}
First of all, create the new element:
Best way of creating a new element in jQuery
var $div = $("<div>", {id: "tabN"});
Then, add the content:
$div.html("some content");
Finally, append the newly created element where you need it.
$(".w3c").append($div);
The pure-JavaScript-version of BenSorter's jQuery answer:
var div = document.createElement('div');
div.id = "tabN";
div.innerHTML = "some content";
document.querySelector(".w3c").appendChild(div);
Documentation:
Document.prototype.createElement to create a new element
Document.prototype.querySelector to query the DOM for exactly one existing element
Document.prototype.querySelectorAll to query all DOM nodes that match a selector
Node.prototype.appendChild to add the created DOM node(s) to an existing one
Note: The jQuery-free solution above only works in reasonably "modern" browsers, meaning only Internet Explorer 8 and below will not support these methods. In the sad case that you need to support very old IEs, using jQuery will be a lot easier.
Related
I work with a website that has a rich text box which gives direct access to the underlying HTML code. I can edit the HTML code, but when I save it, the website intervenes. <style> elements disappear, but <div> and <span> elements remain and seem to keep all their attributes.
I would like a certain <span> element to show a tooltip when hovered over. I've considered using the title attribute (it works), but it's not flexible enough for my need.
Is it possible (and how) to implement a tooltip like shown here without a <style> element, using only attributes of <div> and <span> elements? I was thinking of attributes such as style, onmouseover, and onmouseout, but feel free to suggest other ones as you see fit.
So assuming you have no way to include seperate css or js on page load I came up with something that works with only html:
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>Top Tooltip w/ Bottom Arrow</h2>
<div style="position: relative;
display: inline-block;
border-bottom: 1px dotted black;"
onmouseover="tooltip.style.visibility='visible'"
onmouseout="tooltip.style.visibility='hidden'">Hover over me
<span id="tooltip" style="visibility: hidden;">
<span style="width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;">Tooltip text</span>
<span style="content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;"></span>
</span>
</div>
With this you can just add a hovertip attribute to any element like <p hovertip="tip">hover this</p>.
var tooltip = document.getElementById("tooltip");
document.addEventListener("mousemove", (e) => {
elementMouseIsOver = document.elementFromPoint(e.clientX, e.clientY);
if (elementMouseIsOver !== null) {
if (elementMouseIsOver.getAttribute("hovertip") == null) {
tooltip.style.display = "none";
tooltip.innerText = "";
} else {
tooltip.style.display = "block";
tooltip.innerText = elementMouseIsOver.getAttribute("hovertip");
};
};
tooltip.style.top = e.clientY + "px";
tooltip.style.left = e.clientX + "px";
});
#tooltip {
border-radius: 5px;
padding: 5px;
background-color: darkslategray;
opacity: 0.9;
color: white;
position: fixed;
left: 0px;
top: 0px;
display: none;
pointer-events: none;
}
<div id="tooltip"></div>
<textarea hovertip="asdb"></textarea><br>
<p>wqe qwej jiofdas jare oias. dgf <span hovertip="the tooltip" style="text-decoration: underline;">gfrsd</span> sfgd ho, sfdg sdfr ert asd.</p>
I had a front-end interview a few months ago with the following problem and guideline:
You are given the baseline CSS, HTML, and JS
You are not allowed to directly edit the predefined HTML or CSS
You are allowed to add new CSS classes and use whatever version of jQuery you want or Vanilla JS
Goal 1: When you click the #container, divide the box (which is 400px by 400px) into four equal sized boxes.
Goal 2: When you click one of the boxes that were created in Goal 1, said box also divides into 4 equal sized boxes as well.
My Problem
No matter what I do, the boxes do not divide perfectly. Not sure why inline-block isn't doing it's think, or what I can't append more than one node. Anyone have some expert tips?
var c = document.getElementById("container");
c.addEventListener("click", function(e) {
var node = document.createElement("div");
node.className = "boxxie";
c.appendChild(node);
c.appendChild(node);
c.appendChild(node);
c.appendChild(node);
})
*,
*:before,
*:after {
box-sizing: border-box;
}
#container {
border: 1px solid #2196f3;
width: 400px;
height: 400px;
}
.boxxie {
display: inline-block;
height: 50%;
width: 50%;
outline: 1px solid black;
}
<div id="container"></div>
Here is the jsfiddle
https://jsfiddle.net/drewkiimon/fvx632ab/
Thanks to #wbarton, I was able to get this answer to work without using flexbox. I was adamant without using flexbox since I was pretty confident that it would not need it. Long and behold, there is a solution without it. By using float: left, we can avoid the vertical align, and by creating a for-loop where we re-create a "new" node, we can just append it four times. I also used a class with my div instead of a direct CSS selector on the div.
Thank you for all the help everyone! Case closed.
document.getElementById("container").addEventListener('click', function(e) {
for (var i = 0; i < 4; i ++) {
var node = document.createElement("div");
node.className = "boxxie";
e.target.appendChild(node);
}
})
*,
*:before,
*:after {
box-sizing: border-box;
}
#container {
border: 1px solid #2196f3;
width: 400px;
height: 400px;
}
.boxxie {
outline: 1px solid tomato;
width: 50%;
height: 50%;
float: left;
}
<div id="container"></div>
My solution: https://jsfiddle.net/fvx632ab/106/
Added CSS:
div {
display: flex;
flex-grow: 0;
flex-shrink: 0;
outline: 1px solid #f33;
width: 50%;
flex-wrap: wrap;
}
Flexbox makes this easy for us, by defining some sensible layouts. We set the width of the child to 50%, and also enable wrapping so that we get two rows (since we're going to add four elements).
Then, in my JavaScript:
document.querySelector('body').addEventListener('click', (e) => {
if (!e.target.matches('div')) {
return;
}
for (let i=0; i<=3; i++) {
e.target.appendChild(document.createElement('div'));
}
});
We listen for clicks on the body (because we're going to be adding more divs later), but filter for only the selector we want, which is div. Then, we just add 4 children.
Nothing new from a JS perspective but to answer #drewkiimon "is possible without flex?"
This example uses floats.
document.querySelector('body').addEventListener('click', (e) => {
if (!e.target.matches('div')) {
return;
}
for (let i = 0; i < 4; i++) {
e.target.appendChild(document.createElement('div'));
}
})
*,
*:before,
*:after {
box-sizing: border-box;
}
#container {
border: 1px solid #2196f3;
width: 400px;
height: 400px;
}
/* ---------- */
#container div {
float: left;
width: 50%;
height: 50%;
outline: 1px solid tomato;
background-color: rgba(64, 224, 208, .1);
}
<div id="container"></div>
Here is my solution.
Using e.target allows you to keep drilling down.
vertical-align: top and line-height: 1px; address spacing issues you might find using inline-block per Get rid of space underneath inline-block image
const c = document.getElementById("container");
c.addEventListener("click", e => {
const target = e.target;
for (let i = 0; i < 4; i++) {
const child = document.createElement("div");
target.appendChild(child);
}
});
#container {
width: 400px;
height: 400px;
border: 1px solid blue;
box-sizing: border-box;
}
#container div {
border: 1px solid red;
display: inline-block;
box-sizing: border-box;
width: 50%;
height: 50%;
vertical-align: top;
line-height: 1px;
}
<div id="container"></div>
I want to make sth like this:
http://codepen.io/lukejacksonn/pen/PwmwWV?editors=001
in my site, but I'm using an AngularJS.
The main problem is the JS script. It's jQuery and my problem is: will it work with AngularJS? And if yes - how to properly write this code in Controller (or Directive? - is it a DOM manipulation?)
Code from Codepen:
JS:
var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');
var breaks = [];
function updateNav() {
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
// The visible list is overflowing the nav
if($vlinks.width() > availableSpace) {
// Record the width of the list
breaks.push($vlinks.width());
// Move item to the hidden list
$vlinks.children().last().prependTo($hlinks);
// Show the dropdown btn
if($btn.hasClass('hidden')) {
$btn.removeClass('hidden');
}
// The visible list is not overflowing
} else {
// There is space for another item in the nav
if(availableSpace > breaks[breaks.length-1]) {
// Move the item to the visible list
$hlinks.children().first().appendTo($vlinks);
breaks.pop();
}
// Hide the dropdown btn if hidden list is empty
if(breaks.length < 1) {
$btn.addClass('hidden');
$hlinks.addClass('hidden');
}
}
// Keep counter updated
$btn.attr("count", breaks.length);
// Recur if the visible list is still overflowing the nav
if($vlinks.width() > availableSpace) {
updateNav();
}
}
// Window listeners
$(window).resize(function() {
updateNav();
});
$btn.on('click', function() {
$hlinks.toggleClass('hidden');
});
updateNav();
LESS:
#color-1: #ff9800;
#color-2: #f57c00;
#color-3: #ef6c00;
body {
min-width: 320px;
padding: 30px;
background: #ff9800;
font-family: Helvetica, sans-serif;
}
h1 {
color: #fff;
font-weight: bold;
text-align: center;
margin-top: 50px;
font-size: 24px;
}
p {
color: #fff;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
a {
color: #fff;
}
.greedy-nav {
position: relative;
min-width: 250px;
background: #fff;
a {
display: block;
padding: 20px 30px;
background: #fff;
font-size: 18px;
color: #color-1;
text-decoration: none;
&:hover {
color: #color-3;
}
}
button {
position: absolute;
height: 100%;
right: 0;
padding: 0 15px;
border: 0;
outline: none;
background-color: #color-2;
color: #fff;
cursor: pointer;
&:hover {
background-color: #color-3;
}
&::after {
content: attr(count);
position: absolute;
width: 30px;
height: 30px;
left: -16px;
top: 12px;
text-align: center;
background-color: #color-3;
color: #fff;
font-size: 14px;
line-height: 28px;
border-radius: 50%;
border: 3px solid #fff;
font-weight: bold;
}
&:hover::after {
transform: scale(1.075);
}
}
.hamburger {
position: relative;
width: 32px;
height: 4px;
background: #fff;
margin: auto;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 32px;
height: 4px;
background: #fff;
}
&:before {
top: -8px;
}
&:after {
bottom: -8px;
}
}
.visible-links {
display: inline-table;
li {
display: table-cell;
border-left: 1px solid #color-1;
}
}
.hidden-links {
position: absolute;
right: 0px;
top: 100%;
li {
display: block;
border-top: 1px solid #color-2;
}
}
.visible-links li:first-child {
font-weight: bold;
a { color: #color-1 !important; }
}
.hidden {
visibility: hidden;
}
}
HTML:
<nav class='greedy-nav'>
<button><div class="hamburger"></div></button>
<ul class='visible-links'>
<li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li>
<li><a href='#'>navigation</a></li>
<li><a href='#'>that</a></li>
<li><a href='#'>handles</a></li>
<li><a href='#'>overflowing</a></li>
<li><a href='#'>menu</a></li>
<li><a href='#'>elements</a></li>
<li><a href='#'>effortlessly</a></li>
</ul>
<ul class='hidden-links hidden'></ul>
</nav>
<h1>resize the window</h1>
<p>(animations with <a target="_blank" href="http://codepen.io/lukejacksonn/pen/gpOrmd">actuate</a> coming soon)</p>
will it work with AngularJS?
jQuery will work with AngularJS. It doesn't care if you use/not use AngularJS.
Likewise AngularJS feels the same way about jQuery.
For jQuery to work - It only requires a jQuery object to perform the manipulations.
For AngularJS to work - It expects the angular related properties to be intact, and not be removed by external factors like jQuery.
So will jQuery work with AngularJS - Yes.
Should you use jQuery with AngularJS - No.
And if yes - how to properly write this code in Controller (or Directive? - is it a DOM manipulation?)
Write a Directive - call it the greedy-nav-menu/greedyNavMenu or whatever you like. Pass as an attribute the menu items in an object and let the directive take care of the behavior.
I've conveniently asked you avoid jQuery and "Write a directive" that performs DOM manipulation without jQuery.
Here is what you need to perform DOM manipulation
https://docs.angularjs.org/api/ng/function/angular.element
Also to get the input for angular element - use JavaScript's document.getElementBy*
You get a subset of the jQuery library in the jqLite package - available for you to use through angular element.
If you are not satisfied with the functions in jqLite - go ahead and add jQuery but make sure they're included in the digest loop using angular applyand that you only use the jQuery inside the directive.
For further reading - http://ng-learn.org/2014/01/Dom-Manipulations/
If you also add JQuery to your page this will work fine. You could paste the code into a controller and insert add it to the HTML:
<div ng-controller="NavController">
<nav class='greedy-nav'>
...
</div>
Writing a custom directive is possible and recommended, but will be more complicated.
Also note that angular supports a subset of JQuery alreay, more on this here: https://docs.angularjs.org/api/ng/function/angular.element
You need to rewrite the jQuery code to Angular style. Say, use directive.
Although not recommended, you can simply move the jQuery code to a controller/directive. Angular provides jqLite, which is a subset of jQuery. If you load jQuery before Angular, then jqLite === jQuery.
I need a 'Page section' to stick in place for (x) amount of scrolling and then move onto the next section. I've tried putting them into the child theme but nothing... Can someone tell me a good way to do wthis that's not Javascript heavy?
CSS
.isSticky {
top: 0;
position: fixed;
}
HTML
<div>
<section id="top"></section>
<section id="test2"></section>
<section id="bottom"></section>
</div>
JS
$(document).ready(function () {
var el = $('#test2');
var elTop = el.position().top;
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop >= elTop) {
el.addClass('isSticky');
} else {
el.removeClass('isSticky');
}
This answer might not be 100% pragmatic, due to current lack of support, but soon you will be able to use the position: sticky property of CSS, currently supported in Firefox and prefixed in Safari/iOS (Caniuse).
The feature was previously enabled in Chrome, but then subsequently removed in the interest of re-doing it more efficiently.
html, body {
margin: 0;
}
body * {
margin: 20px;
padding: 20px;
}
.header {
margin: 0;
padding: 20px;
background: #000;
}
.header span {
display: block;
color: #fff;
margin: 0 auto;
text-align: center;
padding: 0;
}
.placeholder {
border: 1px solid black;
margin: 0 auto;
text-align: center;
height: 300px;
}
.slider {
background: #006264;
color: white;
font-weight: bold;
margin: 0 auto;
position: sticky;
top: 0px;
}
<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
Okay, I change the appearance of links using JavaScript. When I change the content of a hard-coded link, it sticks in that the changed color and underlining remains when the cursor is not hovering above it. However, when the content of a DIV has been changed using JavaScript, the style changes do not stick.
Here is the HTML code:
<!doctype html>
<html>
<head>
<title>Bla bla</title>
<meta charset="UTF-8">
<link href="style/kim.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/Kim.js"></script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="nav">
<div class="topNav">
<ul>
<li onClick="changeNav('design')">Design</li>
<li onClick="changeNav('code')">Programming</li>
<li onClick="changeNav('science')">Science</li>
<li onClick="changeNav('Kim')">Kim</li>
</ul>
</div>
<div id="subNav">
<script>changeNav("design");</script>
</div>
</div>
<div class="content">
<p id="mainText">Test</p>
</div>
</div>
</div>
</body>
</html>
Here is the JS code:
var topNavNames = ["design", "code", "science", "Kim"];
var subNavCode = ["<ul><li onClick=\"loadPHP('design/websites.php', 'sub0')\">Websites</li><li onClick=\"loadPHP('design/graphics.php', 'sub1')\">Graphics</li><li onClick=\"loadPHP('design/flash.php', 'sub2')\">Flash</li></ul>",
"<ul><li onClick=\"loadPHP('code/interactive.php', 'sub0')\">Interactive applets</li><li onClick=\"loadPHP('code/statistics.php', 'sub1')\">Statistics</li><li onClick=\"loadPHP('code/wings.php', 'sub2')\">Wings</li><li onClick=\"loadPHP('code/3D.php', 'sub3')\">3D</li></ul>",
"<ul><li onClick=\"loadPHP('science/3D.php', 'sub0')\">3D</li><li onClick=\"loadPHP('science/ssd.php', 'sub1')\">Sexual Size Dimorphism</li><li onClick=\"loadPHP('science/shape.php', 'sub2')\">Wing shape</li><li onClick=\"loadPHP('science/phylogenetics.php', 'sub3')\"><i>Drosophila</i> phylogenetics</li><li onClick=\"loadPHP('science/communitygenetics.php', 'sub4')\">Community Genetics</li><li onClick=\"loadPHP('science/biodiversity.php', 'sub5')\">Biodiversity</li></ul>",
"<ul><li onClick=\"loadPHP('Kim.php', 'sub0')\">Who is Kim?</li><li onClick=\"loadPHP('animals/horses.php', 'sub1')\">Horses</li><li onClick=\"loadPHP('animals/birds.php', 'sub2')\">Birds</li><li onClick=\"loadPHP('private/outdoors.php', 'sub3')\">Outdoors</li><li onClick=\"loadPHP('contact.php', 'sub4')\">Contact</li></ul>"];
function changeNav(target) {
for (var i = 0; i<topNavNames.length; i++) {
if (target == topNavNames[i]) {
document.getElementById("subNav").innerHTML=subNavCode[i];
document.getElementById(topNavNames[i]).style.color="#F7EDAA";
document.getElementById(topNavNames[i]).style.borderBottom="thin solid #F7EDAA";
}
else {
document.getElementById(topNavNames[i]).style.color="#EEE";
document.getElementById(topNavNames[i]).style.borderBottom="thin solid #111";
}
}
}
function loadPHP(url, target) {
for (var i = 0; i<10; i++) {
if(document.getElementById(target)!=null) {
if (("sub"+i) == target) {
document.getElementById(target).style.color="#F7EDAA";
document.getElementById(target).style.borderBottom="thin solid #F7EDAA";
}
else {
document.getElementById(target).style.color="#EEE";
document.getElementById(target).style.borderBottom="thin solid #111";
}
}
}
}
if I subsequently remove the:
else {
document.getElementById(target).style.color="#EEE";
document.getElementById(target).style.borderBottom="thin solid #111";
}
from the loadPHP function, it changes the style, but does not reset it when the next link is clicked.
I observed this behavior in FireFox, Internet Exploder and Chrome.
Added: CSS code:
body {
background-color: #111111;
color: #DDD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.wrapper {
overflow: auto;
}
.banner {
float: left;
position: relative;
width: 100px;
}
.main {
position: relative;
width: 80%;
left: 25px;
font-size: 14px;
font-weight: normal;
}
a {
text-decoration: none;
color: #EEE;
}
a:hover {
border-bottom: thin solid #F7EDAA !important;
color: #F7EDAA !important;
}
.topNav {
height: 45px;
position: relative;
left: 100px;
font-size: large;
border: thin solid #111;
}
#subNav {
height: 45px;
position: relative;
left: 100px;
top: 2px;
border: thin solid #111;
}
.topNav li, #subNav li {
float: left;
margin: 10px 15px;
}
.topNav ul, #subNav ul {
list-style: none;
padding: 0px 0px;
margin: 0px 0px;
position: relative;
left: -100px;
}
.content {
position: relative;
left: 15px;
padding: 0px 0px;
margin: 0px 0px;
}
.content p {
padding: 5px 5px;
margin: 10px 15px;
left: -100px;
}
In my opinion you´re using the wrong technology to achieve your goal. What you need to do is to write your styles in a css stylesheet, and then add or remove classes to your elements using js if you want. (You can also do this through something called specificity, a little far ahead from the scope of your question)
Also think that if there is some bug in your script, or a third party script called in your page, JS may break and it won´t process your styling changes.
So, add the basic styling to your elements through css in the initial markup, so you will be sure that your elements will have always a basic styling, and then if you want use the equivalent to .addClass or removeClass jQuery methods.
In that way you will be always sure that your frontend will have always a safe styling, won´t break if js is not loaded, and separation of concerns will be properly implemented.
Regards.
I figured it out. The following code does not do the right thing:
function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
if (target == subNavNames[i]){
document.getElementById(target).className="selected";
} else {
document.getElementById(target).className="notSelected";
}
}
While this code does produce the right result:
function loadPHP(url, target) {
for (var i = 0; i<subNavNames.length; i++) {
if (target == subNavNames[i]) {
document.getElementById(subNavNames[i]).className="selected";
} else {
document.getElementById(subNavNames[i]).className="notSelected";
}
}
The difference is that in the first example, and in the example of the original question, I use the variable passed on in the method (target), to find the element. In the second, I use the appropriate element from a array that I have added to the list. I am not sure WHY this behaves differently, but it does.