plain javascript code to highlight an html element - javascript

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);
}

Related

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);
}

Resize a dynamically generated string with javascript?

I've got an HTML page with a grid of divs containing read only text boxes, each containing a string which changes dynamically via a php script. I've been working on a javascript function to detect the string length and resize the string accordingly so that it fits cleanly in the textbox with no overflow.
This is an example of my div...
<a href='http://burstu.com'>
<div id='toprightlefthigh' class='resize'>
<input type="text" id="toprightlefthighbox" class="idea" value="" readonly>
</div>
</a>
I've tried various scripts, and my nearest fit is this one...
var div2length = div2.value.length; if(div2length <=50) {
div2.value.fontSize="10px"; }
But no such luck.
Any ideas?
div2.value.fontSize="10px";
this doesn't work; you need to access the fontSize using style:
div2.style.fontSize="10px";
Are you aware of the fact that font-size is not inherited by a form element?
By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.
You'll have to target the form elements themselves if you want to change their font/text styles. In stead of targeting your wrapper div (I guess you are doing by the name you gave you're variable, div2 is not beeing set in your snippet), you should target the input directly.
#andrewGibson is also right btw, you should use the style property.
Have you taken a look at http://fittextjs.com/ it does just that. I'm not a fan of the "throw jquery at it" crowd but that one does the job and its open source so you could have a poke around if you wanted to learn more if you are after a pure JS solution. In this case though why re-invent the wheel :)
Do this...
Html:
<input type="text" id="toprightlefthighbox" class="idea" value="" />
Javascript:
var MAX_FONT = 20;
var MIN_FONT = 10;
var YOUR_STRING = "Here is my long long long long string";
var textbox = document.getElementById("toprightlefthighbox");
var fontSize = MAX_FONT + 1;
var element = document.createElement("div");
element.style.visibility = "hidden";
element.style.display = "inline-block";
element.style.padding = "0px";
element.style.fontFamily = "Arial";
element.innerHTML = YOUR_STRING;
document.body.appendChild(element);
do
{
fontSize -= 1; //maybe -= 0.5 in some browsers? Just change the +1 above too
element.style.fontSize = fontSize + "px";
} while (fontSize > MIN_FONT && element.clientWidth > textbox.clientWidth);
document.body.removeChild(element);
element = null;
textbox.value = YOUR_STRING;
textbox.style.fontSize = fontSize + "px";
With CSS:
#toprightlefthighbox { width: 205px; height: 25px; font-family: arial; }
JSFiddle:
http://jsfiddle.net/hkN35/4/
Notice that when you decrease the width of the textbox to 200px it will bump the font size down.

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

JavaScript or jQuery image carousel/filmstrim

I am looking for some native JavaScript, or jQuery plugin, that meets the following specification.
Sequentially moves over a set of images (ul/li)
Continuous movement, not paging
Appears infinite, seamlessly restarts at beginning
Ability to pause on hover
Requires no or minimal additional plugins
I realize this sounds simple enough. But I have looked over the web and tried Cycle and jCarousel/Lite with no luck. I feel like one should exist and wanted to pose the question before writing my own.
Any direction is appreciated. Thanks.
you should check out Nivo Slider, I think with the right configuration you can it to do what you want.
You can do that with the jQuery roundabout plugin.
http://fredhq.com/projects/roundabout/
It might require another plugin.
Both answers by MoDFoX and GSto are good. Usually I would use one of these, but these plugins didn't meet the all the requirements. In the end this was pretty basic, so I just wrote my own. I have included the JavaScript below. Essentially it clones an element on the page, presumably a ul and appends it to the parent container. This in effect allows for continuous scrolling, right to left, by moving the element left and then appending it once out of view. Of course you may need to tweak this code depending on your CSS.
// global to store interval reference
var slider_interval = null;
var slider_width = 0;
var overflow = 0;
prepare_slider = function() {
var container = $('.sliderGallery');
if (container.length == 0) {
// no gallery
return false;
}
// add hover event to pause slider
container.hover(function() {clearInterval(slider_interval);}, function() {slider_interval = setInterval("slideleft()", 30);});
// set container styles since we are absolutely positioning elements
var ul = container.children('ul');
container.css('height', ul.outerHeight(true) + 'px');
container.css('overflow', 'hidden')
// set width and overflow of slider
slider_width = ul.width();
overflow = -1 * (slider_width + 10);
// set first slider attributes
ul.attr('id', 'slider1');
ul.css({"position": "absolute", "left": 0, "top": 0});
// clone second slider
var ul_copy = ul.clone();
// set second slider attributes
ul.attr('id', 'slider2');
ul_copy.css("left", slider_width + "px");
container.append(ul_copy);
// start time interval
slider_interval = setInterval("slideleft()", 30);
}
function slideleft() {
var copyspeed = 1;
var slider1 = $('#slider1');
var slider2 = $('#slider2');
slider1_position = parseInt(slider1.css('left'));
slider2_position = parseInt(slider2.css('left'));
// cross fade the sliders
if (slider1_position > overflow) {
slider1.css("left", (slider1_position - copyspeed) + "px");
}
else {
slider1.css("left", (slider2_position + slider_width) + "px");
}
if (slider2_position > overflow) {
slider2.css("left", (slider2_position - copyspeed) + "px");
}
else {
slider2.css("left", (slider1_position + slider_width) + "px");
}
}

Categories