Fault reading of background color - javascript

I have css file with property: "background:#f9f9f9;". The div has the right background color but when I read it the result is empty (""). The function then changes the background color and when I read it again it shows me: "background: none repeat scroll 0% 0% rgb(249, 249, 249)". The new color is right but it was shown only after I changed the color using js.
Why does it happens? Is there any way to fix it?
(I know I can initialize it manually using js with the right color, and I'm going to do it until I find the right solution).
Edit: inserted code.
.cLiftsDiv {
float:left;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 15%;
border:1px solid #111111;
background:#f9f9f9;
border-radius: 5px;
height: 80%;
cursor: default;
/* to be unselectable */
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 2% 2%;
position:relative;
}
JS functions:
var items = new Array("Lifts");
var elem = document.getElementById("mainMonitor");
for (var i = 0; i < items.length; ++i)
{
var tempDiv = document.createElement("div");
tempDiv.id = items[i] + "Div";
tempDiv.className = "c" + items[i] + "Div";
var tempInnerDiv = document.createElement("div");
tempInnerDiv.innerHTML = items[i];
tempDiv.appendChild(tempInnerDiv);
tempDiv.onmouseover = hoverDiv;
elem.appendChild(tempDiv);
}
function hoverDiv()
{
var elem = document.getElementById(this.id);
alert("background: " + elem.style.background);
if (elem.style.background != "#aaaaaa")
{
//elem.style.background = "#cccccc";
}
}
I use firefox (and it doesn't work too in chrome).

We need more code to help here but is background color which works fine:
<!DOCTYPE html>
<html>
<head>
<style>
span.highlight
{
background-color:yellow;
}
</style>
</head>
<body>
<p>
<span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span>
</p>
</body>
</html>
Working with JavaScript alerting the color: JS Fiddle
You should try this instead:
//On page ready
var color = "#fff";
$("item selctor").css("background-color",color);

Related

Using css/js to force div to width of X chars?

I'm working on a page that recieves a large string, 500*500 characters (initially all spaces, ' '). I then render this with a monospace font into a <div>, with width and height set to 500ch.
let text = "";
let char = ' ';
for (var i = 0; i < 500 * 500; i++) {
if (!(i % 500)) {
char = '|'
}
text += char;
char = ' ';
}
document.getElementById('text').innerHTML = text;
:root {
--pwidth: 500ch;
}
body {
background-color: #111111;
}
div {
position: absolute;
left: 0;
top: 0;
padding: none;
font-family: "Lucida Console", "Courier New", monospace;
font-size: 14;
margin: none;
width: var(--pwidth);
color: #EEEEEE;
resize: none;
display: block;
white-space: break-spaces;
overflow-wrap: anywhere;
border: none;
}
<div id="text"></div>
The result is odd. The string index of every line should be an even number: 0, 500, 1000 (...)
However the rendered result is something like this:
|0
|500
|1000
|1500
|2000
|2500
|3000
|3500
|4000
|4500
This doesn't happen in Firefox, but on Chrome and Edge it does. It is as if the browsers decide to break the line prematurely. Is there any way to achieve the desired effect on atleast the popular browsers?
The problem does not occur when run as a SO snippet apparently.
My suspicion therefore is that the code as run elsewhere does not correctly set up a Doctype. SO snippets tend to have such 'missing bits' added automatically.
I have run the following code on Chrome/Edge/Firefox on Windows 10 and all give a 'vertical straight line' of As down the left hand side, ie the expected result.
However, if I remove the <!DOCTYPE html> Chrome and Edge layout mainly diagonally, with the odd 'blip' of two As vertically above each other. I suspect in those cases you are getting some additive rounding errors, but I can't prove it.
In the StackOverflow environment, a doctype will be added so you don't see the problem.
Here's the code that runs OK outside the SO environment. Note the original given code has several errors ('none' is not OK value for padding or margin for example) but these did not affect the final result.
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--pwidth: 500ch;
--pheight: 500ch;
}
body {
background-color: #111111;
top: 0;
padding: 0;
font-family: Courier, monospace;
font-size: 14;
margin: 0;
width: var(--pwidth);
height: var(--pheight);
height: auto;
resize: none;
display: block;
white-space: break-spaces;
overflow-wrap: anywhere;
border: none;
}
#text {
background: pink;
}
</style>
</head>
<body>
<div id="text"></div>
<script>
const textEl = document.querySelector('#text');
let str = '';
for (let i = 0; i< 500; i++) { str += 'A'; for (j = 0; j<499 ; j++) {str +=' '; }}
textEl.innerHTML = str;
</script>
</body>
</html>

Links not working inside div element that appears on mouse over

I'm creating a JavaScript function which will parse data (which will be retrieved from a database, but its just static here for testing) and format it into links and place it into a div element (popup) that will show up when the mouse is hovered onto the icon. However, I cannot figure out why the links are not clickable. I can right click it and open it in a new tab, but I cannot directly click and open them. Also, it works on Firefox, but not Chrome, or Safari!
EDITED:
Here is the code in JSFiddle:
https://jsfiddle.net/kvdju2ju/2/
HTML
<table>
<tr>
<td>
<div id="p1" class="parent">
<img src="http://www.free-icons-download.net/images/blue-square-icon-47147.png" style="border-width:0px;"/>
<div id="p1data" class="data" style="display:none">
Website1#http://www.google.com#Website2#http://www.Link2.com#Website3#http://www.Link3.com"
</div>
<div id="p1popup" class="popup" style="display: none">
</div>
</div>
</td>
</tr>
</table>
CSS
.parent {
position: relative;
}
.parent .popup {
display: block;
position:absolute;
top: 0px;
left:20px;
background-color: #FFFFFF;
padding: 5px;
outline: black solid 1px;
}
.parent:hover .popup {
display: block;
position:absolute;
top: 0px;
left:20px;
background-color: #FFFFFF;
z-index: 100;
outline: black solid 1px;
}
.popup a:link { color: #003300; text-decoration: none;}
.popup a:visited { color: #003300; }
.popup a:hover { color: #006600; }
.popup a:active { color: #006600; }
You can add the nodes like this (It works on Chrome):
function parseWebsites() {
var text = document.getElementById('p1data').innerHTML;
var lines = text.split("#");
var string = "";
var myNode = document.getElementById("p1data");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
for (var i = 0; i < lines.length - 1; i = i + 2) {
var webtitle = lines[i];
var website = lines[i + 1];
//string = string + "<a href='" + website + "' target='_blank'>" + webtitle + "</a> <br> ";
var node = document.createElement("a"); // Create a <a> node
var textnode = document.createTextNode(webtitle); // Create a text node
node.appendChild(textnode); // Append the text to <a>
node.href = website;
node.target = "_blank";
document.getElementById("p1popup").appendChild(node); // Append <a> to <div> with id="p1popup"
var br = document.createElement("br"); // Create a <br> node
document.getElementById("p1popup").appendChild(br);
}
//document.getElementById("p1popup").innerHTML = string;
}
https://jsfiddle.net/s8st79w0/1/
Does this only have to work on desktop if so, you're fine but I don't know if it would work on mobile.
If you want some cleaner code and cut out the JS which I think is adding some complexity and requires some extra loading on the browser part, I would try a CSS only approach with :hover. You can achieve the same affect. An example is below. Also, I think linkedin uses this approach for there nav. I think bettycrocker.com and pillsbury.com uses this as well.
http://www.w3schools.com/howto/howto_css_dropdown.asp
You don't have an anchor and you don't have href
you have missing href
try adding one
<a id="p1" class="parent" href='https://www.google.com'>
<div>
<img src="http://www.free-icons-download.net/images/blue-square-icon-47147.png" style="border-width:0px;" />
<div id="p1data" class="data" style="display:none">
website1#http://www.google.com#Website2#http://www.Link2.com#Website3#http://www.Link3.com"
</div>
</div>
</a>

Why isn't my background for the button changing color?

I'm trying to change the color of both the body and a button when the button itself is clicked.
Right now, the body of the page changes color randomly. However this is not working for the button itself.
Any ideas?
This is my CSS for the button:
#loadQuote {
position: fixed;
width: 12em;
display: inline-block;
left: 50%;
margin-left: -6em;
bottom: 150px;
border-radius: 4px;
border: 2px solid #fff;
color: #fff;
background-color: #36b55c;
padding: 15px 0;
transition: .5s ;
}
#loadQuote:hover {
background-color: rgba(255,255,255,.25);
}
#loadQuote:focus {
outline: none;
}
And this is my JavaScript:
// prints quote
function printQuote(){
var finalQuote = buildQuote();
document.getElementById('quote-box').innerHTML = finalQuote;
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
document.body.style.background = color;
document.loadQuote.style.backgroundColor = color;
}
Thank you
Your element selector is incorrect. Use document.getElementById to select the element.
// prints quote
function printQuote(){
var finalQuote = buildQuote();
document.getElementById('quote-box').innerHTML = finalQuote;
var color = '#'+Math.floor(Math.random()*16777215).toString(16);
document.body.style.background = color;
//BELOW LINE IS THE CHANGED CODE
document.getElementById('loadQuote').style.backgroundColor = color;
}
You have an issue at this line:
document.loadQuote.style.backgroundColor = color;;
basically loadQuote is not an object in document.
Instead you need to select a DOM element using document.getElementById() like:
document.getElementById('loadQuote'); // if you have a DOM element with ID loadQuote
Or using Document.querySelector() passing a CSS selector, just an example:
document.querySelector('.loadQuote'); // if you DOM element has .loadQuote appplied
More information on document.querySelector() can be found here:
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

How to make this tooltip like this with pure javascript

I need to use JS no JQuery plugins to make a simple tooltip like on the image below.
Click on ? image should open this tooltip and click again on the same image to close it.
I think that it's simple for someone with good JS knowledge but I can't do it anyway :(
This is something that I have tried I know it's not too much but I am simply stuck.
How to display it like on the image, how to hide it when it's open and how to add that little triangle in the corner?
myfiddle
<img id="info" src="http://www.craiglotter.co.za/wp-content/uploads/2009/12/craig_question_mark_icon1.png"/>
<div id="ttip">bla bla</div>
document.getElementById('info').addEventListener('click', function(){
// how to check if it's visible so I can close tooltip
document.getElementById('ttip').style.display="block";
});
#info{margin-left:100px;margin-top:50px;}
#ttip
{
width: 280px;
z-index: 15001;
top: 0px;
left: 0px;
display: none;
border-color: #666;
background-color: #fff;
color: #666;
position: relative;
border: 1px solid #666;
padding: 15px 9px 5px 9px;
text-align: left;
word-wrap: break-word;
overflow: hidden;
}
Clean up the css and this will basically do it:
<script>
function doTip(e){
var elem = e.toElement;
if(elem.getAttribute('data-tip-on') === 'false') {
elem.setAttribute('data-tip-on', 'true');
var rect = elem.getBoundingClientRect();
var tipId = Math.random().toString(36).substring(7);
elem.setAttribute('data-tip-id', tipId);
var tip = document.createElement("div");
tip.setAttribute('id', tipId);
tip.innerHTML = elem.getAttribute('data-tip');
tip.style.top = rect.bottom+ 10 + 'px';
tip.style.left = (rect.left-200) + 'px';
tip.setAttribute('class','tip-box');
document.body.appendChild(tip);
} else {
elem.setAttribute('data-tip-on', 'false');
var tip = document.getElementById(elem.getAttribute('data-tip-id'));
tip.parentNode.removeChild(tip);
}
}
function enableTips(){
var elems = document.getElementsByClassName('quick-tip');
for(var i = 0; i < elems.length; i++) {
elems[0].addEventListener("click", doTip, false);
}
}
window.onload = function(){
enableTips();
}
</script>
<style>
.quick-tip {
background: black;
color: #fff;
padding: 5px;
cursor: pointer;
height: 15px;
width: 15px;
text-align: center;
font-weight: 900;
margin-left: 350px;
}
.tip-box {
/* change dimensions to be whatever the background image is */
height: 50px;
width: 200px;
background: grey;
border: 1px solid black;
position: absolute;
}
</style>
<div class="quick-tip" data-tip="THIS IS THE TIP! change elements 'data-tip' to change." data-tip-on="false">?</div>
<script>enableTips(); //might be required for jsfiddle, especially with reloads.</script>
Edit: fixed formatting and a bug. jsfiddle: http://jsfiddle.net/u93a3/
Proof of concept:
The following markup in HTML: Create a div with class tooltip, add image and a div with class info with all text (can be multiple paragraphs if needed, scollbars is shown if necessary):
<div class='tooltip'>
<img src='craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
</div>
</div>
The div.info is set to display:none in CSS.
When the page is loaded a pure javascript is running that draws an image of a triangle on a canvas-element, and then creates a div-element where the triangle is set as a background. Then, for every div.tooltip:
add a click-eventhandler to the image
replace the div.info with a div.info_container
add a clone of the triangle-div to div.info_container
add the original div.info to div.info_container
You can test it with this fiddle. It is tested successfully on FF25, Chrome31, IE10, Opera 12&18.
<!doctype html>
<html>
<head>
<script>
"use strict";
function click(event) {
var elem = this.parentNode.querySelector('div.info_container');
if (elem) elem.style.display = elem.style.display === 'block' ? 'none' : 'block';
}
function toolify() {
var idx,
len,
elem,
info,
text,
elements = document.querySelectorAll('div.tooltip'),
canvas,
imgurl,
pointer,
tipHeight = 20,
tipWidth = 20,
width = 200,
height = 100,
ctx;
// Create a canvas element where the triangle will be drawn
canvas = document.createElement('canvas');
canvas.width = tipHeight;
canvas.height = tipWidth;
ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000'; // Border color
ctx.fillStyle = '#fff'; // background color
ctx.lineWidth = 1;
ctx.translate(-0.5,-0.5); // Move half pixel to make sharp lines
ctx.beginPath();
ctx.moveTo(1,canvas.height); // lower left corner
ctx.lineTo(canvas.width, 1); // upper right corner
ctx.lineTo(canvas.width,canvas.height); // lower right corner
ctx.fill(); // fill the background
ctx.stroke(); // stroke it with border
//fix bottom row
ctx.fillRect(0,canvas.height-0.5,canvas.width-1,canvas.height+2);
// Create a div element where the triangel will be set as background
pointer = document.createElement('div');
pointer.style.width = canvas.width + 'px';
pointer.style.height = canvas.height + 'px';
pointer.innerHTML = ' ' // non breaking space
pointer.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';
pointer.style.position = 'absolute';
pointer.style.top = '2px';
pointer.style.right = '1px';
pointer.style.zIndex = '1'; // place it over the other elements
for (idx=0, len=elements.length; idx < len; ++idx) {
elem = elements[idx];
elem.querySelector('img').addEventListener('click',click);
text = elem.querySelector('div.info');
// Create a new div element, and place the text and pointer in it
info = document.createElement('div');
text.parentNode.replaceChild(info,text);
info.className = 'info_container';
info.appendChild(pointer.cloneNode());
info.appendChild(text);
//info.addEventListener('click',click);
}
}
window.addEventListener('load',toolify);
</script>
<style>
div.tooltip
{
position:relative;
display:inline-block;
width:300px;
text-align:right;
}
div.tooltip > div.info
{
display:none;
}
div.tooltip div.info_container
{
position:absolute;
right:20px;
width:200px;
height:100px;
display:none;
}
div.tooltip div.info
{
text-align:left;
position:absolute;
left:1px;
right:1px;
top:20px;
bottom:1px;
color:#000;
padding:5px;
overflow:auto;
border:1px solid #000;
}
</style>
</head>
<body>
<div class='tooltip'>
<img src='craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
</div>
</div>
<div class='tooltip'>
<img src='craig_question_mark_icon1.png' alt='Help'/>
<div class='info'>
Some text to fill the box with.
Some text to fill the box with.
Some text to fill the box with.
Some text to fill the box with.
</div>
</div>
</body>
</html>

IE7 + JavaScript appendChild = Scrollbar bug

I'm adapting an example found here on StackOverflow for replacing the "select" component on IE7 that does not support some nice CSS layout.
The example lacks a scrollbar, so I added a div with a fixed size so the scrollbars would appear and the component would be almost complete.
My problems:
1 - On IE7 (IE9 compatibility mode) the scrollbars do not appear. Any fix for this?
2 - How do I do to the "div" to just be positioned on that location but stay in front of the other components, instead of occupying its full size?
My code/html on jsfiddle:
http://jsfiddle.net/mbarni/nTYWA/
(run it as "no wrap (head)")
Inline code/html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {
font: 80% 'Quicksand-Regular', Verdana, Geneva, sans-serif;
}
select {
display: block;
margin: 0 0 10px;
width: 300px;
}
select.replaced {
width: 1px;
position: absolute;
left: -999em;
}
ul.selectReplacement {
background: #10194B;
margin: 0 0 10px;
padding: 0;
height: 1.65em;
width: 300px;
position: relative;
z-index: 1000;
}
ul.selectFocused {
background: #10194B;
}
ul.selectReplacement li {
background: #09C;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 276px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: #10194B;
border-bottom: 1px solid #fff;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #10194B;
border: 0;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #10194B;
color: #fff;
}
div.scroll {
overflow-y: auto;
overflow-x: hidden;
height: 100px;
width: 300px;
}
</style>
<script type="text/javascript">
function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
var div = document.createElement('div');
div.className = 'scroll';
div.appendChild(ul);
var opts = obj.options;
var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
for (var i=0; i<opts.length; i++) {
var li = document.createElement('li');
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = i;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
};
if (i == selectedOpt) {
li.className = 'selected';
li.onclick = function() {
this.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
};
};
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ' hover';
};
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(" hover\\b"), '');
};
}
ul.appendChild(li);
}
obj.onfocus = function() {
ul.className += ' selectFocused';
};
obj.onblur = function() {
ul.className = 'selectReplacement';
};
obj.onchange = function() {
var idx = this.selectedIndex;
selectMe(ul.childNodes[idx]);
};
obj.onkeypress = obj.onchange;
obj.parentNode.insertBefore(div,obj);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName('li');
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className='';
lis[i].onclick = function() {
selectMe(this);
};
} else {
setVal(obj.selectID, obj.selIndex);
obj.className='selected';
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
obj.onclick = function() {
obj.parentNode.className += ' selectOpen';
this.onclick = function() {
selectMe(this);
};
};
}
}
}
function setVal(objID,val) {
var obj = document.getElementById(objID);
obj.selectedIndex = val;
}
function setForm() {
var s = document.getElementsByTagName('select');
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
};
</script>
</head>
<body>
<select id="unidade">
<option value="001">TEST 1</option>
<option selected value="002">TEST 2</option>
<option value="003">TEST 3</option>
<option value="004">TEST 4</option>
<option value="005">TEST 5</option>
<option value="006">TEST 6</option>
<option value="007">TEST 7</option>
<option value="008">TEST 8</option>
</select>
</body>
</html>
You've run into the IE7 scrolling div bug.
Remove position: relative from ul.selectReplacement and everything works. Already tested in jsfiddle in IE9's IE7 Browser Mode.
If you find that you need the position: relative on the ul elements, attach position: relative to the containing div (div.scroll)and that also fixes things (relevant jsfiddle). Just striping position relative didn't seem to break anything in either chrome or IE7 mode, but if you need the ul elements to not use the static model and don't need the div to use the static, the second method works fine too in both cases.
As to the second question, you can position: relative the div.scroll and then wrap it in a height: 1.5em div as seen in this jsfiddle. The wrapping div can have positioning and z-indexing added to it as needed: note that if you need interior elements to appear higher than other siblings to the wrapper div, you will need z-indexing on the wrapper due to an IE bug relating to z-indexing on child elements versus elements sibling to an ancestor. Works in IE7 mode and in chrome.
(Note that if you want to have this be an inline element, you can display: inline-block it with the usual caveats--appropriate jsfiddle here and IE7 fix hack with zoom and *display:inline version here)
Edit:
Inline version with fix for text below by having the div switch between two different heights: jsfiddle. Note that this will require some playing with the heights/line heights of the ul and li elements to avoid slight displacements in height from open to close, but the basic concept is there, albeit in an inelegant way ("better" would be to simply change the div's height attribute, or isolate the height in an additional class and only swap that class). Note that the selected element height had to be reduced and padding removed to be able to compress the div down to essentially a single line height. Reducing heights on certain elements further will allow further compression of the scroll div without ending up with scrollbars even in the closed state, if needed.

Categories