Chrome - Performance Monitor - DOM Nodes keep on stacking - javascript

I'm trying to get my head around - why is the DOM Nodes keeps on going up when I'm checking my website in the Performance Monitor.
I've added this simple code that just looping on:
1) adding and element to a wrap,
2) bind it with a click event.
3) removing it.
but still the DOM Nodes are always up the I check the performance.
any thoughts?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrap{
font-size:50px;
}
</style>
</head>
<body >
<div class="wrap">
<div></div>
</div>
<script>
var counter = 0;
setInterval(function () {
//increase counter (for display)
counter++;
//get wrap
var wrap = document.getElementsByClassName("wrap")[0];
//remove its children
while (wrap.firstChild) {
wrap.firstChild.removeEventListener("click", onclick);
wrap.removeChild(wrap.firstChild);
}
//create new element
var div = document.createElement("div"); // create a div element
div.innerHTML = 'hello mosh (' + counter + ')';
//bind events
div.addEventListener("click", onclick);
// append the div to wrap
wrap.appendChild(div);
}, 200);
//on click function
var onclick = function () { alert('click'); }
</script>
</body>
</html>

The v8 engine is garbage-collected, removed DOM elements are not destroyed immediately.
Occasionally unused (unreachable) objects are garbage-collected.
If I wait long enough, with your code, I do see DOM Nodes go back down to the original value (had to bump the interval to 20 to speed up the process).
For this reason it is often more efficient to not remove DOM elements, and instead just replace the HTML content.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrap2 {
font-size:50px;
}
</style>
</head>
<body >
<div class="wrap2">
<div></div>
</div>
<script>
var counter = 0;
var wrap = document.getElementsByClassName("wrap2")[0];
var div = wrap.getElementsByTagName("div")[0];
setInterval(function () {
counter++;
div.innerText = 'hello mosh (' + counter + ')';
}, 20);
//on click function
var onclick = function () { alert('click'); }
</script>
</body>
</html>

Related

How to create a fade-in and a fade-out loop with jQuery

So I am currently using a fade-in method on my program. However I want it to fade-in, fade-out and repeat the same process over and over again.
What do I need to do that?
$(document).ready(function() {
var $el = $(".intro");
var text = $el.text();
var words = text.split(" ");
var html = "";
for (var i = 0; i < words.length; i++) {
html += "<span>" + words[i] + " </span>";
}
$el
.html(html)
.children()
.hide()
.each(function(i) {
$(this)
.delay(i * 1500)
.fadeIn(1700)
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="test.js"></script>
<div class="intro">PREDICT SIMULATE OPTIMIZE</div>
</body>
</html>
Depending on what visual effect you seek (the question is open to interpretation) ...
You can set up two mutualy-triggering custom events on the containing div.
To get the timing right, exploit jQuery's .promise(), which returns a promise that will fulfill when the current animation(s) are complete.
To start the process, just trigger one or other of the custom events.
$(document).ready(function() {
var $el = $('.intro');
var $words = $el.html($el.text().split(' ').map(word => `<span>${word} </span>`).join('')).children().hide();
$el.on('fadeIn', function() { // custom event
$.when(...$words.map(function(i, word) => $(word).delay(i * 1500).fadeIn(1700).promise()))
.then(function() {
$el.trigger('fadeOut'); // trigger fadeOut when fadeIn is complete
});
}).on('fadeOut', function() { // custom event
$.when(...$words.map(function(i, word) => $(word).delay(i * 1500).fadeOut(1700).promise()))
.then(function() {
$el.trigger('fadeIn'); // trigger fadeIn when fadeOut is complete
});
}).trigger('fadeIn'); // start a never ending fadeIn/fadeOut cycle.
});
untested
The process can undoubtedly be made more efficient, principally by working with the promise from only the final word, but the code will probably get messy.

Javascript loading speed issue as variable increases

I am having an issue with page loading time. Currently right now I am running UBUNTU in Oracle Vm Virtual Box. I am using mozilla firefox as my browser and I am working on an etchasketch project from "The odin project".
My problem is the page loading time. The code takes a prompt at the start and generates a grid for the etch a sketch based on that prompt. I have not given it the minimum and maximum values (16 and 64) respectively, however any number when prompted at the beginning that is beyond 35 doesn't load or takes ages to load.
How do I speed up the process time? / why is it moving so slow? / how can I avoid this ? / is there a fix that I am over looking that can make this work a lot faster? / feel free to tackle any and all of those questions!
This is my HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8"/>
<title>
</title>
</head>
<body>
<div class="etchhead">
<p> Choose your grid size </p>
<input type = "text"></input>
<button id="startOver"> Clear Grid </button>
<p> Change color </p>
</div>
<div id="grid">
</div>
<script src="eas.js"></script>
</body>
</html>
And this is my CSS code:
p {
color: blue;
display: inline;
}
#grid {
display: grid;
width: 800px;
max-width: 800px;
height: 800px;
max-height: 800px;
line-height: 0;
}
.gridBox {
border: 1px solid black;
background-color: lightgrey
}
And this is my JAVASCRIPT code:
gridStart();
function gridStart(){
var boxes = 0
var selectBody = document.querySelector("#grid");
var addBox = document.createElement("div");
var boxCountStart = prompt("enter a number between 16 and 64");
var boxDimensions = (boxCountStart * boxCountStart);
function rowsAndColumns() {
var selectBody = document.querySelector("#grid");
var gridTemplateColumns = 'repeat('+boxCountStart+', 1fr)';
selectBody.style.gridTemplateColumns= gridTemplateColumns;
selectBody.style.gridTemplateRows= gridTemplateColumns;
};
function hoverColor(){
var divSelector = selectBody.querySelectorAll("div");
divSelector.forEach((div) => {
div.addEventListener("mouseover", (event) => {
event.target.style.backgroundColor = "grey";
});
});
};
rowsAndColumns();
for (boxes = 0; boxes < boxDimensions ; boxes++) {
var selectBody = document.querySelector("#grid");
var addBox = document.createElement("div");
addBox.classList.add("gridBox");
addBox.textContent = (" ");
selectBody.appendChild(addBox);
hoverColor();
};
};
There are two components to your issue. One is that you are repeatedly modifying the DOM in a loop. You can fix it by appending all your boxes to a DocumentFragment and then adding that to the DOM after your loop finishes. You are also calling hoverColor(); inside your loop which results in adding tons of event listeners that all do the same thing (since inside hoverColor you are adding a listener to every single div). You can fix both those issues like this:
var fragment = document.createDocumentFragment( );
for (var i = 0; i < boxDimensions ; i++) {
var addBox = document.createElement("div");
addBox.classList.add("gridBox");
addBox.textContent = (" ");
fragment.appendChild(addBox);
}
document.querySelector("#grid").appendChild( fragment );
hoverColor();
Here is a JSFiddle with your original code, and here is one with the modification.
You could also benefit from only having one event listener total. You don't need to loop and add an event listener to every div. Just add one to #grid and use event.target (like you already do, to find the div that the event originated from). Something like this:
function hoverColor(){
document.querySelector("#grid").addEventListener( 'mouseover', function ( event ) {
event.target.style.backgroundColor = "grey";
} );
}

Store, change, and update opacity using JavaScript

I am new here and new to programming, so apologies in advance if this question is very basic and the answer is already here. I've done a lot of searching, but I've been unable to find the information I need.
What JavaScript code could I use to pull the current opacity value of a div, update that value, and reapply the updated value to that same div? In essence, I'm doing an exercise that involves gradually increasing the opacity of individual divs in a large grid on the mouseover event. Each individual div in the grid should have a 0.1 increase in opacity every time the mouse enters that div, up to the point of having an opacity of 1.
I already know how to do this in jQuery, I'm just trying to expand my knowledge of JavaScript at the moment.
So this is how you'd set opacities and events with jQuery:
// `elem` is the element you want to affect
// get opacity
var oldOpacity = $(elem).css('opacity');
// set opacity
$(elem).css('opacity', 0.5);
// add mouseover event
$(elem).on('mouseover', function onMouseOver(e) {
// do stuff with opacities
});
And here's how you'd do the above with vanilla DOM methods:
// `elem` is the element you want to affect
// get opacity
var oldOpacity = window.getComputedStyle(elem).getPropertyValue('opacity');
// set opacity
elem.style.setPropertyValue('opacity', 0.5);
// add mouseover event
elem.addEventListener('mouseover', function onMouseOver(e) {
// do stuff with opacities
}, false);
To get the element, you can use old DOM methods like document.getElementById or the new methods document.querySelectorAll and document.querySelector which are very much like jQuery in that they take a CSS selector and return a Node or list of Nodes.
To, say, retrieve all of the li elements with the class list-item, and iterate over them, you would do this:
var elems = document.querySelectorAll('li.list-item');
var i, l = elems.length, elem;
for (i = 0; i < l; i += 1) {
elem = elems[i];
// do stuff with elem
}
Here's the 'vanilla' JS way to check and update opacity, with the caveat that this only works in browsers; it won't work in NodeJS because there's no document in node. You can try it on this page by opening dev tools (right-click, inspect, console in Chrome).
var div = document.querySelector('.post-text')
console.log(div.style.opacity) // ""
div.style.opacity = 0.5
console.log(div.style.opacity) // "0.5"
So for your exercise, you'll want to assign the mouseover function like so:
function changeOpacity (element, delta) {
element.style.opacity = Number(element.style.opacity) + Number(delta)
}
var element = document.querySelector('.post-text')
var opacityDelta = -0.1
document.onmouseover = function () { changeOpacity(element, opacityDelta) }
I got it to work with these lines of code.
with vanilla Js.
I commented too.
// Vanilla Js.
//Getting elements.
var box = document.querySelector('.box');
var refresh = document.querySelector('.refresh');
// Assigning opacity
var defaultOpacity = 0.2;
box.style.opacity = defaultOpacity;
// Events.
// Opacity adding event on hover
box.addEventListener('mouseover', function(e){
var oldOp = e.target.style.opacity;
oldOp = Number.parseFloat(oldOp);
oldOp += defaultOpacity;
e.target.style.opacity = oldOp;
}, false);
//Refresh Evet.
refresh.addEventListener('click', function(e){
box.style.opacity = defaultOpacity;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.box {
background: #48A64C;
height: 100px;
width: 100px;
margin-bottom: 20px;
}
</head>
<body>
<div class="box"></div>
<p> Yeah you can refresh too </p>
<button class = "refresh">refresh</button>
</body>
</html>

How can I make something move in javascript?

I made a div and a button. Made a function on button's click that set div's margin (i.e move it). But how can I make it move on every click. Whenever I hit the button it do moves, (without refreshing the page) when I press that button again it don't work? How to make it move on every click of button! Here's my code:-
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<style>
body
{
font-family:ebrima;
}
</style>
</head>
<body onload="" id="demo">
<div name="player" style="float:right; height:32px; width:32px; background:green;" id="myDiv"></div>
<form name="myForm" method="post">
<button value="MOVE" type="button" name="moveButton" onClick="move()">MOVE</button>
</form>
<script>
function move()
{
document.getElementById("myDiv").style.margin="0px 10px 0px 0px";
}
</script>
</body>
</html>
Use a variable to set the new margin each time. After using it, change the variable's value so that next time, it will move somewhere else.
var x = 10;
function move() {
document.getElementById("myDiv").style.margin="0px "+x+"px 0px 0px";
x = x+10;
}
First, don't use inline js (like onclick). Read some of these results: *Why is inline js bad?*
Instead, attach your event listener with javascript:
var myBtn = document.getElementById('my-btn');
myBtn.addEventListener('click', move);
Your code would be more readable/efficient and easier to debug like this:
//cache element reference in advance
var document.getElementById("myDiv")
function move() {
//just target the property you want to change.
myDiv.style.marginLeft = x+'px';
x = x+10;
}
Here's a little demo (click) I put together you may enjoy.
var myDiv = document.getElementById('my-div');
var myBtn = document.getElementById('my-btn');
myBtn.addEventListener('click', move);
function move(e) {
var v = r()+'px '+r()+'px '+r()+'px '+r()+'px';
myDiv.style.margin = v;
}
function r() {
return getRandomInt(0, 20);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
And here's a more fun one using mousemove rather than click. Demo here.
I would advise using jQuery, which makes a lot of javascript quite simple.
Here's a sample jQuery animation for you:
<script>
function move() {
$("#myDiv").animate({left:'+=250px'});
}
</script>
This will shift the button over by 250px every time you trigger the function.
Note that you'll need to add jQuery to your project (which is trivial). The jQuery website has some well organized tutorials that should help you find your way around JavaScript and jQuery - happy coding!
Like this:
function move() {
var elt = document.getElementById("myDiv"),
currentMargin = parseInt(elt.style.marginRight, 10);
elt.style.marginRight = currentMargin + 10 + 'px';
}

wanted: simple HTML file that does disclosure triangle <div> hide/reveal

I have a program that produces a text report. I want it to make an HTML report with multiple disclosure triangles, so that when you click a triangle more of the report shows or hides. I am okay with embedding JavaScript inside the file, but I really want it all in a single file, with no additional files. Is there an easy way to do this with modern browsers?
If you don't care about compatibility with Internet Explorer, you could use the html tag: http://www.w3schools.com/tags/tag_details.asp
Its a very quick way to prototype disclosure triangles.
For example:
<details>
<summary>The contents of the summary tag is always visible</summary>
<p>Everything else inside the details tag will be hidden in a disclosure triangle</p>
</details>
The simplest way is something like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<style>.wrapper div { display:none;}</style>
<script>
$(function() {
$('.wrapper h2').click(function() { $(this).next().toggle();});
});
</script>
</head>
<body>
<div class="wrapper">
<h2>Example header 1</h2>
<div>bodytext 1</div>
</div>
<div class="wrapper">
<h2>Example header 2</h2>
<div>bodytext 2</div>
</div>
<div class="wrapper">
<h2>Example header 3</h2>
<div>bodytext 3</div>
</div>
</body>
</html>
I have made a simple working example here: http://jsfiddle.net/NXuQt/1/
It isn't pretty but should give you the simple template you need.
Note that in this solution, the entire header is click-able... I figure adding an image and changing it as part of the click event is something you can take care of yoruself, otherwise let me know :)
Note: The javascript is based on the inclusion of the jQuery library.
EDIT: I updated the answer to copy/paste ready working code, the reason you couldn't make it work as it was, was because i had only taken the essentials from the fiddle example. The fiddle automatically ran the click handler initialization at DOMready, which the updated example now has built in :)
With straight HTML, no. That's not what it's for. You will need to use a scripting language, either JavaScript or VBScript, most likely.
This is a script I've used in the past (not mine, but I don't have the URI of the original):
var timerlen = 5;
var slideAniLen = 250;
var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();
function slidedown(objname)
{
if(moving[objname])
return;
if(document.getElementById(objname).style.display != "none")
return; // cannot slide down something that is already visible
moving[objname] = true;
dir[objname] = "down";
startslide(objname);
}
function slideup(objname)
{
if(moving[objname])
return;
if(document.getElementById(objname).style.display == "none")
return; // cannot slide up something that is already hidden
moving[objname] = true;
dir[objname] = "up";
startslide(objname);
}
function startslide(objname)
{
obj[objname] = document.getElementById(objname);
endHeight[objname] = parseInt(obj[objname].style.height);
startTime[objname] = (new Date()).getTime();
if(dir[objname] == "down")
{
obj[objname].style.height = "1px";
}
obj[objname].style.display = "block";
timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}
function slidetick(objname)
{
var elapsed = (new Date()).getTime() - startTime[objname];
if (elapsed > slideAniLen)
{
endSlide(objname)
}
else
{
var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
if(dir[objname] == "up")
d = endHeight[objname] - d;
obj[objname].style.height = d + "px";
}
return;
}
function endSlide(objname)
{
clearInterval(timerID[objname]);
if(dir[objname] == "up")
obj[objname].style.display = "none";
obj[objname].style.height = endHeight[objname] + "px";
delete(moving[objname]);
delete(timerID[objname]);
delete(startTime[objname]);
delete(endHeight[objname]);
delete(obj[objname]);
delete(dir[objname]);
return;
}
function toggleSlide(objname)
{
if(document.getElementById(objname).style.display == "none")
{
// div is hidden, so let's slide down
slidedown(objname);
}
else
{
// div is not hidden, so slide up
slideup(objname);
}
}
You would assign a call to toggleSlide() to the onclick() event of the element you want to toggle.
CSS:
.hidden {
display: none;
}
Javascript:
function createSection(section, hidden) {
var triangle = section.children[0]; // assumes the triangle image is the first child of a section (see HTML)
var contents = section.children[1];
triangle.onclick = function() {
if (contents.className.indexOf("hidden") != -1) { // the section is hidden
contents.className = contents.className.replace("hidden", "");
} else { // the section wasn't hidden
contents.className += " hidden";
}
}
if (hidden) {
contents.className += " hidden";
}
}
// Create the sections when window loads
window.onload = function() {
createSection(document.getElementById("section1"));
createSection(document.getElementById("section2"), true);
}
HTML:
<div id="section1">
<img src="triangle.jpg"></img>
<div>This is the section content</div>
</div>
<div id="section2">
<img src="triangle.jpg"></img>
<div>this section is hidden by default</div>
</div>
Obviously you would have to change some things to your own html file
Well, after some fiddling around, I was able to make a file that does what I want using the switchcontent.js and switchicon.js javascript files I found at http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm
Here's my code, based on editing down theirs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Drive DHTML scripts- Switch Content Script II (icon based)</title>
<script type="text/javascript" src="switchcontent.js" ></script>
<script type="text/javascript" src="switchicon.js"></script>
<style type="text/css">
/* Specifies title style */
.iconspan{
margin: 3px;
cursor:hand;
cursor:pointer;
font-weight: bold;
}
</style>
</head>
<body>
<span id="faqtable1-title" class="iconspan"></span>
How hot is our Sun?<br/>
<div id="faqtable1" class="icongroup2">
The surface of the Sun is around 5800 Kelvin, while the core reaches over 15 million Kelvin.
</div>
<br>
<span id="faqtable2-title" class="iconspan"></span>
How big is our Sun in terms of mass? <br/>
<div id="faqtable2" class="icongroup2">
The contains more than 99.8% of the total mass of our Solar System.
</div>
<script type="text/javascript">
var faqtable=new switchicon("icongroup2", "div")
faqtable.setHeader('▼', '▶') //Set header HTML
faqtable.collapsePrevious(false) //Allow more than 1 content to be open simultanously
faqtable.setPersist(true, 7) //Enable persistence to remember last switch content states for 7 days
faqtable.init()
</script>
</body>
</html>
It looks like this when closed:
▶ How hot is our Sun?
▶ How big is our Sun in terms of mass?
And this when opened:
▼ How hot is our Sun?
The surface of the Sun is around 5800 Kelvin, while the core reaches over 15 million Kelvin.
▼ How big is our Sun in terms of mass?
The contains more than 99.8% of the total mass of our Solar System.

Categories