Partially making tooltip text bold - javascript

I'm trying to make the first line of text from my tool tip to be bold.
The code below is what I currently have and it doesn't work.
tooltip.html("<b>" + smartData[yearSlider][d3.select(this).attr("country")]["country"] + "</b> <br>" +
"Total CO2 Emission excluding LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghgexlulucf"] +
"<br>" + "Total CO2 Emission including LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghginclulucf"] +
"<br>")
The screenshot below is the result of the code above (some CSS was used to style the tooltip, etc.)
Result of tooltip code
Can anyone help me with this?
If you need more code to help me with this problem, I'm more than happy to share it with you! :)
Sorry for my bad English, it's not my native language.
Thank you in advance!

Hi you can solve this by using a span with a class and style the class in your css file:
tooltip.html("<span class='tooltip-text-bold'>" + smartData[yearSlider][d3.select(this).attr("country")]["country"] + "</span> <br>" +
"Total CO2 Emission excluding LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghgexlulucf"] +
"<br>" + "Total CO2 Emission including LULUCF" + "<br>" +
smartData[yearSlider][d3.select(this).attr("country")]["totalghginclulucf"] +
"<br>")
then you style in css using:
.tooltip-text-bold{
font-weight: 700;
}

Related

Making string content strikethrough in Google Apps

I'm faced with a trivial but not-quick-to-get thing: I need to set the font of a string as a strike-through style.
I've tried search for similar solution on Stackoverflow but it wasn't much instructive and helpful.
What I do have:
var bookingDetails = "\nЗаезд: " + row[0] + "\nВыезд: " + row[1] + "\nНомер: " + "«" + row[2] + "»" + "\nТип размещения: " + row[3] + "\n" + "\nЦена за ночь: " + row[4] + " руб." + "\nВнесённый депозит: " + row[8] + " руб." + "\n" + "\nИмя и фамилия гостя: " + row[5] + "\nМобильный телефон: " + row[6] + "\nЭлектронная почта: " + row[7] + "\n" + "\nПримечание: " + row[11];
I need to make the content of bookingDetails striked out without changing anything in the sheet itself. I tried bookingDetails.setFontLine("line-through") but it didn't help by showing the error of "TypeError: Cannot find function setFontLine in object...".
Please, help me fix it.
Just letting you know that I'm very thankful for your attempt to help me in advance.
UPD № 1: I'm using Google Spreadsheets. If it does make sense.
UPD № 2: If it is not possible to make this strike-through transformation just in the script not explicitly in cells then I should add that bookingDetails is used in the email body to be sent through MailApp.sendEmail. So if it possible to transform the contents of bookigndbetails directly in the message body then let me know how to make it as quick as possible on the example of my script.
Hoping that know my goal is clear.
Here is a function that will set strikethrough the text
function setStrikethrough(range) {
var ss = SpreadsheetApp.getActiveSpreadsheet(); // Get the current spreadsheet.
var sheet = ss.getSheets()[0]; // Select the first sheet.
var cell = sheet.getRange(range); // Use supplied arguments
cell.setFontLine("line-through"); // set strikethrough
}
You can call this method like this (this will set the line style of the given range to 'line-through'):
// specify the range
setStrikethrough("B2:C4");
See https://developers.google.com/apps-script/reference/spreadsheet/

How to add html bold tag to an embedded html code in javascript?

I'm having trouble putting bold tags on just a few items in my code. It will bold the entire words including the added variable. (I don't want the variable to be bolded). Thanks!
"<p>" + " Given the severity of the change listed below, you are being asked to review and either approve or reject this change. Submitted by: " + row.requester
+ "<p>" + "<b>Description: </b>" + row.commentsAndGeneralDescriptionOfTheChangeBeingImplementedAndAnySpecialInstructions
+ "<p>" + "<b>Report Id: </b>" + row.rowNumber
Here is some additional context for the snippet above:
function sendReportToManager(row) {
var message = "<HTML><BODY>" + "<p>" +" Given the severity of the change listed below, you are being asked to review and either approve or reject this change. Submitted by: " + row.requester +
"<p>" + "<b>Description: </b>" + row.commentsAndGeneralDescriptionOfTheChangeBeingImplementedAndAnySpecialInstructions +
"<p>" + "<b>Report Id: </b> " + row.rowNumber +
'<p><b>Please approve or reject Change Request #' + row.rowNumber + "</HTML></BODY>";
MailApp.sendEmail(row.changeManagerApproval, "Change Management Approval - REQUEST", "", {noReply: true, htmlBody: message});
}
CodePen
Your example works. The question you have (why is the bold is not terminating) cannot be determined by the information you have given. If your variables (e.g.row.requester) has an open <strong> or <b>, it would apply to the HTML until its closing tag is encountered.
A better way to do what you desire is to use CSS and better HTML tags, if your mail client accepts it. For example:
"<p>"
+ "Given the severity of the change listed below, you are being asked to review and either approve or reject this change. "
+ '<span class="label">Submitted by: </span><span class="value">'
+ row.requester
+ "<p>"
+ '<span class="label">Description: </span><span class="value">'
+ row.commentsAndGeneralDescriptionOfTheChangeBeingImplementedAndAnySpecialInstructions
+ "</span>"
+ "<p>"
+ '<span class="label">Report Id: </span><span class="value">'
+ row.rowNumber
+ "</span>"
And then add some CSS:
.label { font-weight: bold; }
.value { font-weight: normal; }
Note: There are other issues with embedding HTML tags in a string, as you have done above - this answer does not address those concerns. Instead, this answer should be used as a first step into solving the issue in the question asked.
Looks like you got some extra stuff you dont need in there. Try this:
"<strong>Given the severity of the change listed below, you are being asked to review and either approve or reject this change.</strong>" + \n +
"<strong>Submitted by:</strong> " + row.requester + \n +
"<strong>Description: </strong> "+ row.commentsAndGeneralDescriptionOfTheChangeBeingImplementedAndAnySpecialInstructions + \n +
"<strong>Report Id:</strong> " + row.rowNumber

Why won't my button delete?

document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).remove();" +
"$(this).prev().remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\';>" +
str + "</span><br>";
So this goes inside a Javascript function I'm working on. What it's supposed to do is create clickable text regions (spans) that disappear when clicked as well as generate a button right before the clickable text that is supposed to be removed when the text is clicked. I can get the text to disappear just fine, but I can't get the darn button to go away.
The code being generated is:
<button onclick="doSomething()">+</button>
<span onclick="$(this).remove();
$(this).prev().remove();
oiDelete("Marneus Calgar");
removeCost("Marneus Calgar");
selectedItem("Marneus Calgar");
frDelete("Marneus Calgar")" ;="">Marneus Calgar</span>
Why is it generating ="" at the end of the opening span tag? why is the button not deleting properly? is $(this).prev().remove() not the correct option?
If we cast aside best practice, this is the working code.
document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).prev().remove();" +
"$(this).remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\'>" +
str + "</span><br>";
The reason why your code doesn't work is because you are removing the span which has onclick function on the fly. It means it can't reach the $(this).prev().remove() bit.
I hope it makes sense.
If you want to go an extra mile, you should put $(this).remove(); after the frDelete() function. Otherwise those 4 functions that you call will never be called.
You messed up quotation marks and of course - call self-remove code at the end (!)
And one tip - encapsulate these additional function in one procedure - it help to keep code cleaner.
document.getElementById('roster').innerHTML += '<button onclick=\'doSomething()\'>+</button>' +
'<span onClick="doCalls(); $(this).prev().remove(); $(this).remove(); ">' + str + '</span><br>';

How to change css styling for different lines within a paragraph in javascript

So I have this code that defined a variable called circles, and appended it a title. The title has four lines, first is the country, second is the price, 3rd is the value, and 4th is the gdppc.
Now I want to make the gdppc a larger font size than the previous 3 variables. This would require me to style gdppc separately from the others (currently they are all styled by this css called tipsy). However, I don't know how exactly would I do that.
circles.append("title")
.text(function(d) { return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> " + d.gdppc; });
$(".circles").tipsy({ gravity:'nw', html: true,});
The idea is probably to make gdppc a separate variable, and style it separately. How is this implemented in coding?
I tried
var ratings = function(d) {return d.gdppc};
circles.append("title")
.text(function(d,ratings) { return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> " + ratings; });
$(".circles").tipsy({ gravity:'nw', html: true,});
$(".ratings).myownstyle({});
and it doesn't work, probably because of I am an amateur who doesn't understand anything about JavaScript.
Just wrap it:
circles.append("title")
.text(function(d) {
return d.country + "<br/> " + "Price=" + d.trust
+ ", Value=" + d.business + "<br/> <strong>" + d.gdppc + "</strong>;
});
CSS
strong {
font-size: 1.25em;
}
Note:
You could use any tag here, <span>, <em> and/or you could use classes to hook the style to them, rather than just adding a css rule to the element.

underline part of innerHTML

I'm building a table that displays the dates of the next 10 days. I need to insert the day, date, month and year into the table. I'm using this JavaScript code for this:
document.getElementById(i).innerHTML = weekday + " " + date + " " + month + " " + year;
My problem:
I want to underline the month, but not the other values.
How can I fix this one? I already tried giving a CSS class along with the variable but I keep failing quite hard.
If more details or code is needed, please ask. This is my first time posting here and only javascripting for a month or so.
You do want to use a CSS class to give meaning to that portion of the element and style it. Wrap it in a <span> with the given class and then apply the styles through your style sheet.
document.getElementById(i).innerHTML = weekday + " "
+ date
+ " <span class='month'>" + month + "</span> "
+ year;
Style
.month { text-decoration: underline; }
Using a semantic class, rather than a specific tag or inline styles, allows you to easily change the style of this type of display on a global basis rather than having to update each individual place where the styling occurs.
EDIT: Obviously you know your application best, but I would avoid underlining except for links or where convention dictates (like some titles) that it should be used. It can be very confusing for a user since underlining in a browser typically conveys that something is a clickable link. That doesn't seem to be what you're going for here, but I could be wrong.
Not elegant solution, but just works:
document.getElementById(i).innerHTML = weekday + " " + date + " <span style='text-decoration: underline;'>" + month + "</span> " + year;
Why don't you just give it markup since innerHTML implies that you can put html there.
document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u>" + year;
I just used an underline tag :)
You can achieve this using the HTML <u> tag. For example:
document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u> " + year;
Here's an example using the above method > http://jsfiddle.net/vuS4B/
But it might be better for you to do this using a <span> element, and add a CSS class to the span. Something like this:
document.getElementById(i).innerHTML = weekday + " " + date + " <span class='underline'>" + month + "</span> " + year;
And the associated CSS:
span.underline { text-decoration: underline; }
Here's the jsFiddle > http://jsfiddle.net/vuS4B/1/

Categories