So my script creates a element and changes it's innerHTML.
My problem is inside my script you can see this:
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span id="LogColor" style="">' + color + '</span> </p>';
I'm needing help with this part of the innerHTML:
'<span id="LogColor" style="">' + obj.lineColor + '</span> </p>'
As you can see in my full script below after the child gets append. You see where I tried to change the span's style using a variable. It doesn't seem to change it's color though.
Full Script:
nvtSource.onmessage = function(e) {
var obj = JSON.parse(e.data);
var line = JSON.stringify(obj.line)
var size = JSON.stringify(obj.lineWidth)
var color = JSON.stringify(obj.lineColor) // Not needed, but defined anyways.
if (line == null)
{
//Do nothing..
}
else
{
var CurrentLine = document.createElement('p');
CurrentLine.innerHTML = '<p>' + user + " ⦙ " + size + " ⦙ "+ line + '<span
id="LogColor" style="">' + color + '</span> </p>';
document.getElementById("LineConsole").appendChild(CurrentLine);
document.getElementById("LogColor").style.color = obj.lineColor;
}
The part I tried to change it's style.
document.getElementById("LogColor").style.color = obj.lineColor;
I even tried to do something like:
document.getElementById("LogColor").style = "color:" + color + ";"
I don't exactly know what you are trying to do here but if you want the line you are adding to have the textcolor you could try:
'<span style="color:' + obj.lineColor + '">' + obj.lineColor + '</span> </p>'
provided your lineColor is a valid css color string like "red", "#ffffff" or "rgb(255,255,255)"
you would no longer need the id.
Related
Below I have code that loops through a list of items and I want to remove a class "hazardous" from div class item-left if element.hazardous == no. The way I have it set up right now is not working and I'm wondering if it might be because I need to find a way to target the specific non hazardous array element.
What "hazardous" does in my CSS is it adds a solid red border if the hazardous class is active. Otherwise hide the red border.
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="item-left hazardous" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url + '"></div></li>')
if (element.hazardous == 'no') {
$('.item-left').removeClass('hazardous')
}
});
$('.results').html(itemsHTML)
}
Instead of hardcoding the hazardous class in the first place, apply it conditionally before the markup is rendered to DOM:
function showProducts(items) {
var itemsHTML = [];
items.forEach(function(element) {
var classes = ['item-left', element.hazardous === 'no' ? '' : 'hazardous'].join(' ').trim()
var url = element.url ? element.url : 'http://placehold.it/100x100'
itemsHTML.push('<li><div class="' + classes + '" data-product-id="' + element.id + '"><p><span class = "prod-name">' +
'Product: ' + element.product + '</p></span><span class="prod-loc">' +
'Location: ' + element.location + '</span><span class="qty">' +
'Quantity: ' + element.quantity + '</span></div>' +
'<div class="item-right"><img src="' + url +
'"></div></li>')
});
$('.results').html(itemsHTML)
One of the problems you were facing was that you were trying to remove a class from a DOM element that didn't yet exist - at that point it was still a string.
I am trying to implement my own rich text editor using iframe. However, whenver I click inside the empty rich text editor, the caret or mouse cursor doesn't show up. After checking on google, I found that we need to add some html to the iframe beforehand such as 'break tag. But my code below will only add the break tag to the first rich text editor and not to the second. Not sure what I am doing wrong here.......
$.fn.createRichTextEditor = function(width,height="auto") {
var iframeDocument;
var iframeDocumentId = this.attr("id") + "-rte-editor";
var newHtml = "<div id='rte-" + iframeDocumentId + "' class='rte'>" +
"<ul class='rte-toolbar'>" +
"<li id='bold'><button id='rte-boldBtn-" + iframeDocumentId + "' class='rte-button' value='bold' title='Bold'></button></li>" +
"<li id='italic'><button id='rte-italicBtn-" + iframeDocumentId + "' class='rte-button' value='italic' title='Italic'></button></li>" +
"<li id='underline'><button id='rte-underlineBtn-" + iframeDocumentId + "' class='rte-button' value='underline' title='Underline'></button></li>" +
"<li id='createLink'><button id='rte-createLinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='createLink' title='Link'></button></li>" +
"<li id='unlink'><button id='rte-unlinkBtn-" + iframeDocumentId + "' class='rte-button-link' value='unlink' title='Unlink'></button></li>" +
"</ul>" +
"<iframe class='rte-iframe' id='" + iframeDocumentId + "' frameBorder='0'></iframe>" +
"</div>";
this.after(newHtml);
this.css('display', 'none');
var iframe = document.getElementById(iframeDocumentId);
var rte = iframe.parentElement;
$(rte).css('width', width);
$(rte).css('border', '1px solid #ccc');
$(iframe).on('load', function() {
$(iframe).width("100%");
$(iframe).height(height);
iframeDocument = iframe.contentDocument;
iframeDocument.designMode = 'On';
$(iframeDocument).find('body').html('<br><br/>');
});
};
You need to loop through each matching element in your plugin:
$.fn.createRichTextEditor = function (width, height) {
this.each(function () {
// Your code for each element here
});
});
so I can not understand for the life of me why I keep getting
Uncaught TypeError: Cannot set property 'innerHTML' of null starting from line 29 where it says "var stats4". I am trying to apply it to an ID but only stats1,2,3 work. I tried copying and pasting the first part and changing things around. I dont get it.
my entire code is here -- jsfiddle.net/kx4s5egk
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open('GET', 'stats.json');
request.onreadystatechange = function() {
if ((request.readyState===4) && (request.status===200)) {
var items = JSON.parse(request.responseText);
var stats1 = items[0][0];
document.getElementById("stats1").innerHTML =
"<p>" + stats1.countTxt + "</p><p>" + stats1.participantsTxt + "</p><p class='count-blue1'>" + stats1.participantCount + "</p>";
var stats2 = items[0][1];
document.getElementById("stats2").innerHTML =
"<p>" + stats2.countTxt + "</p><p>" + stats2.participantsTxt + "</p><p class='count-blue2'>" + stats2.participantCount + "</p>";
var stats3 = items[0][2];
document.getElementById("stats3").innerHTML =
"<p>" + stats3.countTxt + "</p><p>" + stats3.participantsTxt + "</p><p class='count-blue3'>" + stats3.participantCount + "</p>";
var stats4 = items[1][0];
document.getElementById("stats4").innerHTML =
"<p>" + stats4.countTxt + "</p><p>" + stats4.participantsTxt + "</p><p class='count-blue1'>" + stats4.participantCount + "</p>";
var stats5 = items[1][1];
document.getElementById("stats5").innerHTML =
"<p>" + stats5.countTxt + "</p><p>" + stats5.participantsTxt + "</p><p class='count-blue2'>" + stats5.participantCount + "</p>";
var stats6 = items[1][2];
document.getElementById("stats3").innerHTML =
"<p>" + stats6.countTxt + "</p><p>" + stats6.participantsTxt + "</p><p class='count-blue3'>" + stats6.participantCount + "</p>";
}
}
request.send();
The reason for the error message is that you are trying to address a DOM element that doesn't exist. You have coded HTML enough for three items and try to address six.
Something like this is more easily (though probably less efficiently) coded with jQuery.
Sticking with hard-coded HTML, you could do something like this :
$.getJSON('stats.json').then(function(data) {
var i, j, n, stats;
for(i=0, n=1; i<data.length; i++) {
for(j=0; j<data[i].length; j++, n++) {
stats = data[i][j];
$("#stats" + n).html("<p>" + stats.countTxt + "</p><p>" + stats.participantsTxt + "</p><p class='count-blue'" + (j+1) + ">" + stats.participantCount + "</p>");
}
}
});
DEMO
However, you could do better by creating more of the HTML (DOM nodes) dynamically :
//First, a tempate for your item entries
var tpl = '<div class="grid1-3">' +
'<div class="%icon"></div>' +
'<div class="number_style %count-blue"></div>' +
'<div class="stats">%stats</div>' +
'</div>';
$.getJSON('stats.json').then(function(data) {
var i, j, jj, stats, _tpl;
for(i=0; i<data.length; i++) {
for(j=0, jj=1; j<data[i].length; j++, jj++) {
stats = data[i][j];
_tpl = tpl
.replace('%icon', 'icon' + jj)
.replace('%count-blue', 'count-blue' + jj)
.replace('%stats', "<p>" + stats.countTxt + "</p><p>" + stats.participantsTxt + "</p><p class='count-blue'" + jj + ">" + stats.participantCount + "</p>");
$("#items").append(_tpl);
}
}
});
DEMO
I'm sure I haven't addressed every aspect so there's undoubtedly still some work to do.
There are a couple of things I notice in your javascript code which are a bit unorthodox and are probably messing things up.
You have everything inside a window.onload() function, that's ok.
But inside the onload function you have two separate calls to the jquery function $(document).ready (which is equivalent, but probably more reliable, than window.onload).
One of your calls is the bit that starts with
$(document).ready
and the other begins with
jQuery(document).ready
Try reduce everything (including the window.onload() function) into a single $(document).ready function.
You can pull some stuff out into separate functions, but call them from inside $(document).ready
I have some simple code. The problem im facing is that how you can see the code is not very clean because in every line where a string gets added to var text i would like to check if the data i want to add really is defined. Now i would like to know how i can write this more cleaner? Thanks
var text = '<br><address><strong>' + data.vorname + ' ' + data.name + '</strong><br>';
if(data.strasse != null && data.strasse != ''){
text += data.strasse + '<br>' + data.plz + ', ' + data.wohnort ;
}if(data.telefon != null && data.telefon != ''){
text += '<br><strong>Tel: ' + data.telefon + '</strong>';
}
text += '<br><strong>Handy: ' + data.handy + '</strong><br>';
text += '<a href="mailto:#">' + data.mail;
text += '</a></address><address><strong>GEB: </strong>';
text += Data.datum(data.geburtsdatum) + '<br>';
text += data.gewicht + '<strong> GK';
........
You could rewrite your lines like this:
text += (data.handy)? '<br><strong>Handy: ' + data.handy + '</strong><br>' : '';
This is shorthand for this:
if (data.handy) {
text += '<br><strong>Handy: ' + data.handy + '</strong><br>';
} else {
text += '';
}
That way, if data.handy isn't defined or is null then nothing gets added to text.
I am using Rickshaw javascript framework. Where there is one hover class is there. There I can modify the hover class to return my own result in the existing code.. In the same way I want to disable the hover to make the particular data visible without hovering. Is there any way to do that using CSS or javascript?
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph : graph,
formatter : function(series, x, y) {
var date = "Last Updated :" + '<br>' + '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
var content = swatch + mName[0] + '<br>' + "Average Price:" + "$" + parseInt(y) + '<br>' + "34 Products Included" + '<br>' + date;
return content;
}
});
Have you tried tweaking the display property in the CSS controlling the graph? http://www.w3schools.com/cssref/pr_class_display.asp