We Keep Coding

How to add div and have it behave like a dev console?

I would like to dynamically create a div on a page using JS and have it behave like a dev console behaves in Chrome and Firefox. By this, I mean that when the div is visible, it does not negatively impact the display of other DOM elements. It would simply either "push up" or "push down" elements on the page.
Is this possible without having to redesign the application's DOM elements to account for the "div console?"
I've tried generating the div as the first element on the page, but that still would not account for DOM elements that are position absolute or fixed:
div = document.createElement('div');
div.id = 'wc-test-window';
div.style.width = "100%";
div.style.height = "200px";
div.style.backgroundColor = '#eee';
div.style.position = 'relative';
div.style.top = 0;
div.style.right = 0;
div.style.display = 'none';
document.body.insertBefore(div, document.body.firstChild);

I'm disappointed in this community for all of the unconstructive comments and downvotes for a perfectly legitimate question. Anyway, I solved it using framesets and frames for anyone looking for a viable answer to this problem.
function showDevConsole() {
var fs = document.createElement('frameset'),
f1 = document.createElement('frame'),
f2 = document.createElement('frame');
fs.rows = "200,*";
fs.framespacing = "0";
// top frame - show the dev console
f1.name = "topframe";
f1.src = "dev-console.html";
f1.marginwidth = "0";
f1.marginheight = "0";
f1.noresize = "noresize";
f1.scrolling = "no";
// bottom frame - show current page
f2.name = "bottomframe";
f2.src = window.location;
f2.marginwidth = "0";
f2.marginheight = "0";
f2.scrolling = "auto";
f2.frameborder = "0";
// append the frames to the frameset
fs.appendChild(f1);
fs.appendChild(f2);
// replace the entire body with the framset containing both frames
$("body").replaceWith(fs);
return false;
}
I put the current page on the bottom frame and the "console" at the top. Any DOM manipulations that the top frame can do on the bottom frame will be done via JS using the name or id of the frame.

Dynamically adding a close button (Javascript)

Trying to add a 'X' - close button for a google maps marker. The markers will show small on the map but will enlarge when clicked (same marker, just increasing the size). I can add a close button but cannot get it to work (reduce the size back to original). Solutions need to be dynamically added please.
Fiddle: https://jsfiddle.net/gost1zLd/
var div = document.createElement('div');
div.style.width = '100px';
div.style.height = '100px';
div.style.background = 'black';
var img = document.createElement('img');
img.style.width = '100%';
img.style.height = '100%';
img.src = '';
var exit = document.createElement('div');
function large()
{
div.classList.add("large");
if (div.className == "large")
{
div.style.width = '300px';
div.style.height = '300px';
exit.innerText = 'X';
exit.style.width = '20px';
exit.style.height = '20px';
exit.style.fontSize = 'xx-large';
exit.style.fontWeight = 'bold';
exit.style.color = 'white';
exit.style.position = 'absolute';
exit.style.top = '5px';
exit.style.left = '265px';
}
}
function close()
{
div.classList.remove("large");
}
document.body.appendChild(div);
div.appendChild(img);
div.appendChild(exit);
div.addEventListener('click', large, false);
exit.addEventListener('click', close, false);
}

The problem is that removing the class large is not enough to reset the <div> to its original state since class large in itself is meaningless because it has no CSS definition. My advice is to move the styling to CSS instead of JavaScript. See fiddle: https://jsfiddle.net/gost1zLd/1/.

If you make separate functions, you can use start() again in your close() function to reset the original style. I've refactored your code a bit, hope it's self explanatory:
function close () {
div.classList.remove("large");
start();
}
Only problem with your setup is you will rebind everything when you would call start() on close(). Instead, try to separate functionality and the issue becomes clear.
DEMO
Additionally you can optimize the dynamic styling with some helper functions.
You need a function to convert a literal object to a css string.
You need a function to extend objects, similar to jQuery's $.extend() in order to set the style at once (doc) for both states (normal and large).
this.divStyle = convertLiteralToQs(cfg.div.style);
this.divLarge = convertLiteralToQs(extend(cfg.div.style, cfg.div.large));
this.div.style.cssText = this.divStyle; // normal style
this.div.style.cssText = this.divLarge; // large style
This will speed up the browser reflow for dynamic styling in JavaScript.
DEMO
Using this approach you can now more easily "style your logic" cross referencing the HTML DOM style object.

Can't get overflow to work when resizing a <tr>

So basically I'm working on a table that can dispose its rows with a nice animation. The problem is that I can't shrink a row beyond the point where its size is smaller than the size of its contents. Once the shrinking animation reaches the height of the text (I'm shrinking it vertically), it stops. Of course I looked for an answer on Google and Stack Overflow as well, and found quite a few, but I tried all of them with no success. I tried writing overflow: hidden; in the CSS, and all the other stuff that is claimed to solve this problem.
Here is my working example (sorry for not showing the code here, but it's easier to just link a working and editable example). Click the button to create a new table, then click the rows to make them go away.
I know this question has been answered elsewhere before, but those solutions don't seem to work for me.
Any ideas? I want the clicked row to shrink completely before getting deleted.
PS.: sorry if I'm being dumb, I'm new to web development.
PS2.: no jQuery please.

You have to update / change the lineheight like this
https://jsfiddle.net/9hznp00s/12/
function deleteRow(id) {
if (typeof (id) === 'undefined') return;
var element = document.getElementById(id);
// Set the row's height and opacity to 0 (the changes are animated by the CSS)
// I commented this out so it's easier to see the collapse effect
//element.style.opacity = 0;
element.style.height = '0px';
element.style.maxHeight = '0px';
element.style.lineHeight = '0px';
element.style.opacity=0.0;
// After the animation is done, remove the row form the HTML
setTimeout(function () {
element.innerHTML = '';
element.parentNode.removeChild(element);
}, 500);
}
or try one of these
https://jsfiddle.net/9hznp00s/8/
function deleteRow(id) {
if (typeof (id) === 'undefined') return;
var element = document.getElementById(id);
// Set the row's height and opacity to 0 (the changes are animated by the CSS)
// I commented this out so it's easier to see the collapse effect
//element.style.opacity = 0;
element.style.height = '0px';
element.style.maxHeight = '0px';
element.style.fontSize = '0px';
// After the animation is done, remove the row form the HTML
setTimeout(function () {
element.innerHTML = '';
element.parentNode.removeChild(element);
}, 500);
}
https://jsfiddle.net/9hznp00s/10/
function deleteRow(id) {
if (typeof (id) === 'undefined') return;
var element = document.getElementById(id);
// Set the row's height and opacity to 0 (the changes are animated by the CSS)
// I commented this out so it's easier to see the collapse effect
//element.style.opacity = 0;
element.style.height = '0px';
element.style.maxHeight = '0px';
element.style.fontSize = '0px';
element.style.opacity=0.0;
// After the animation is done, remove the row form the HTML
setTimeout(function () {
element.innerHTML = '';
element.parentNode.removeChild(element);
}, 500);
}

Resizing font based on screen width

Can someone help me with JavaScript code that resizes a font in a div if the screen width is lower than 1100px
if (window.screen.width <= 1100) {
var item = document.getElementById("div1");
item.style.fontSize = "25px";
item.innerHTML = "String";
}
This is what I have so far. Can someone help me with what to do next?

Your code works for me in JS Fiddle. Perhaps you are not specifying the correct id for your div or something like that.
http://jsfiddle.net/trott/GqFPY/
If you are hoping the code will be triggered on a browser resize, you will need to bind it to an event. (See Michael's answer.)

You will need to bind the action to the window.onresize event:
var resizeFonts = function() {
var item = document.getElementById("div1");
if (window.screen.width <= 1100) {
item.style.fontSize = "25px";
item.innerHTML = "String";
}
// Otherwise set a larger font
else item.style.fontSize = "30px";
};
window.onload = resizeFonts;
window.onresize = resizeFonts;

I have an OLD blog in which I posted about changing the font size, but it was made to show how to use jQueryUI slider. Maybe you can use some of the logic there to create your own solution:
http://weblogs.asp.net/thiagosantos/archive/2009/03/21/my-first-time-with-jquery-ui.aspx

plain javascript code to highlight an html element

to debug some javascript code, I am looking for javascript code (preferably just js, without libraries and dependencies) that can highlight a div or span (probably by putting over it a div or span of the same size and shape with a bright color and some transparency).
I pretty sure it can be done, but I don't know how to start.
CLARIFICATION
I need to put a semi transparent div on top of my element. Modifying the background or adding borders will not help as my elements have themselves backgrounds and borders.

element.style.backgroundColor = "#FDFF47";
#FDFF47 is a nice shade of yellow that seems perfect for highlighting.
Edit for clarification: You're over-complicating things. If you ever want to restore the previous background color, just store element.style.backgroundColor and access it later.

If you're debugging in a browser that supports the CSS outline, one simple solution is this:
myElement.style.outline = '#f00 solid 2px';

If for some reason you need to use javascript here is function that temporary highlits element background
function highlight(element) {
let defaultBG = element.style.backgroundColor;
let defaultTransition = element.style.transition;
element.style.transition = "background 1s";
element.style.backgroundColor = "#FDFF47";
setTimeout(function()
{
element.style.backgroundColor = defaultBG;
setTimeout(function() {
element.style.transition = defaultTransition;
}, 1000);
}, 1000);
}

Old post, but worth adding since it shows up in searches on the topic. A simple way to achieve a highlighting effect is:
myElement.style.filter = "brightness(125%)";

function highlight(element) {
var div = highlight.div; // only highlight one element per page
if(element === null) { // remove highlight via `highlight(null)`
if(div.parentNode) div.parentNode.removeChild(div);
return;
}
var width = element.offsetWidth,
height = element.offsetHeight;
div.style.width = width + 'px';
div.style.height = height + 'px';
element.offsetParent.appendChild(div);
div.style.left = element.offsetLeft + (width - div.offsetWidth) / 2 + 'px';
div.style.top = element.offsetTop + (height - div.offsetHeight) / 2 + 'px';
}
highlight.div = document.createElement('div');
// set highlight styles
with(highlight.div.style) {
position = 'absolute';
border = '5px solid red';
}

Do you use Firebug? It makes it very simple to identify dom elements and will highlight them in the page as you walk through the dom.

Here is a function that combines the top 2 answers:
function highlight(element){
let defaultBG = element.style.backgroundColor;
let defaultOutline = element.style.outline;
element.style.backgroundColor = "#FDFF47";
element.style.outline = '#f00 solid 4px';
setTimeout(function()
{
element.style.backgroundColor = defaultBG;
element.style.outline = defaultOutline;
}, 2000);
}