Underline some characters in a String - javascript

I have the following problem:
My JavaScript code shows a display value this way:
d3.select("#" + uiElement).html("")
.append("span").attr("class", "displayvalue").html(stringToUse);
stringtoUse is the value to show, my issue is to underline that string, but some times, it's not required underline all the string but all except the first character of it.
In your opinion what's the best way to do so?

Use CSS first-letter pseudo element. Make your all text underlined and then apply css to it as:
#element::first-letter
{
text-decoration:none !important:
}
Reference to use.
By simple pure javascript:
var text = document.getElementById("element").innerHTML;
document.getElementById("element").innerHTML = text.substring(0,1)+"<u>"+text.substring(1)+"</u>";

This will allow you to format any javascript innerHTML using CSS directly, without hassling around in javascript:
The javascript:
function test(){
document.getElementById('pp').innerHTML = 'here is pp';
document.getElementById('qq').innerHTML = 'here is qq';
}
The HTML:
<p style = 'whatever'>
<a id = 'pp'></a>
<a id = 'qq' style = 'color:red; text-decoration: underline;' ></a>
</p>
<script>
test()
</script>
This works with or without a wrapper like <p>.

Related

How do i change the color of an appended string?

I've a div
<div class="display-container"></div>
Inside this div i want to append some text using a JavaScript event listener
const calculatorDisplay = document.querySelector(".display-container")
function appendNumber(number) {
calculatorDisplay.append(number)
}
// number event listener
one.addEventListener("click", () => {
calculatorDisplay.append(1)
})
it work perfecly, but the problem here is that the background color of the display-container div is black, and the default color for string is black, so, how do i change the color of an appended string?
i've already tried using the style tag, but that does not work, i've tried using fontcolor() too, but that too doesn't worked.
I've noticed that the appended string have an id of #text, but i cannout use it if i try.
Define css class
<style>
.colored-text {
color: red;
}
</style>
And then create span element with colored-text class and append it
// number event listener
one.addEventListener("click", () => {
const newSpan = document.createElement('span');
newSpan.classList.add('colored-text');
newSpan.textContent = 1;
calculatorDisplay.append(newSpan);
})
BTW. why are you defining appendNumber function and not using it?
There are several ways to achieve this.
javascript
const calculatorDisplay = document.querySelector(".display-container")
// changing the color to red
calculatroDisplay.style.color = 'red';
// it accepts also Hex colors
calculatorDisplay.style.color = '#FF5733'
// OR rgb
calculatorDisplay.style.color = 'rgb(255,0,0)
CSS
It is also possible to append a classname to your div. Like this you could
make the code probably more reusable and may apply more styles than just colors in a simple manner. (There are multiple ways to include CSS in your html, google it^^ )
// within in the <head> tag in the html add a <style> tag.
<html>
<head>
<style>
.red-color {
color: red
}
</style>
</head>
<body>
<!-- ..... --->
</body>
</html>
In the code you can now add a classname using element.classList.add() OR element.classList.remove() to remove classes!
function setRedColor(el) {
el.classList.add('red-color')
}
function removeRedColor(el) {
el.classList.remove('red-color')
}
const calculatorDisplay = document.querySelector(".display-container")
setRedColor(calculatorDisplay)
// ...
removeRedColor(calculatorDisplay)
Note that the element.classList API generally does not allow classnames with a whitespace in it. So if you have mutliple classes you have to apply them one by one or you'll run into an error.
Feel free to leave a comment

Javascript/jQuery change word color by specific some text contains

I have a simple question with jQuery Css.
I would like to change color of my text by specific word contains using jQuery.
I have example like this:
<div class="me">I'm Groot</div>
I'm <-- will be always black color
Groot <-- will be always green color and Groot sometimes can be change with another word.
How can I do that with jQuery or javascript?
You could replace all occurrences of your specific text snippets with custom styled html elements:
const yourName = "Groot";
const element = document.querySelector(".me");
element.innerHTML = element.innerHTML
.replace("I'm", `<span class="black-class">I'm</span>`)
.replace(yourName, `<span class="green-class">${yourName}</span>`);
Alternatively you can also make everything green except the I'm like this:
.me {
color: green;
}
element.innerHTML = element.innerHTML
.replace("I'm", `<span class="black-class">I'm</span>`);
This way not only Groot is colored green but everything inside of the div. That way your JavaScript doesn't need to know the name.
Just group them like so
:
<div class="me">I'm <span id="changer">Groot</span></div>
Then for CSS, style it like so:
#changer {
color: green;
}
Then to change with javascript:
document.getElementById("changer").innerHTML = "Changed";
Which of course you can add a setTimeout to change continuously
Edit:
No problem, since the only part changing is "Groot" part,
So:
var changing = "Groot";
$('.me').text(`I'm <span id="changer">${changing}</span>`);
// then from here the value of the $('#changer') can be accessed and changed
$('#changer').text('Not Groot');

Checking for decimal character code in element

I have a sorting feature I am making for my tables and as such I have used the decimal character codes...
▲
▼
...to create a representation of an up and down arrow. When I click on the arrow it calls a function to do the sorting (and also to switch the orientation of the arrow). To do this I have been trying to use code along these lines...
const assn = this.id;
const text = document.getElementById(assn).innerHTML;
if (text === "▼") {
document.getElementById(assn).innerHTML = "▲";
}
else {
document.getElementById(assn).innerHTML = "▼";
}
However this does not seem to work as the variable text seems to save as the literal arrow itself, and compare to the literal string "&#9660" instead of the arrow that this string will create. I am wondering if this is the cause, and if so, is there any way in which I can actually compare the character codes together?
I have tried using document.getElementById(assn).textContent too but this seems to have the same effect. Thank you for all your help.
why don't you try just CSS ? Simplest version below:
<style type="text/css">
.arrowControl > span {display:none;}
.arrowControl.down > span.down
, .arrowControl.up > span.up {display:inline;}
</style>
<div id="anyContainer">
<div class="arrowControl">
<span class="down" onclick="funcForDown();">▼</span>
<span class="up" onclick="funcForUp();">▲</span>
</div>
</div>
and then in your JS
var arrow=document.querySelector('#anyContainer .arrowControl');
if (arrow.classList.contains('up')){
arrow.classList.remove('up');
arrow.classList.add('down');
}
else {
arrow.classList.remove('down');
arrow.classList.add('up');
}

Change style of all occurrences of a string

I want my site title to display in a unique font from the rest of the content every time it appears in a heading, for branding reasons. For simplicity, let's pretend my special font is Courier and my company is called SparklePony. So, a line like,
<h1 class="title">SparklePony Board of Directors</h1>
would show a headline with the word SparklePony in Courier and Board of Directors in my site default font, Arial. (Yes, I know this would be hideous.)
I've tried using a jQuery string replacement, but I don't want to replace the string, I just want to see it in Courier (adding a class to just that word, or something of the like.) Replacing SparklePony with <span class="sparkle-pony">SparklePony</span> caused the whole ugly string with tags and everything to show on my site, rather than adding the class.
Am I doing something wrong with my string replace, or is there a better way to style all occurrences of a string?
You can do it like this - specifying the selector you want - #('h1') or by class.
$('.title').html(function(i,v){
return v.replace(/SparklePony/g,'<span class="sparkle">SparklePony</span>');
});
​
http://jsfiddle.net/cQjsu/
Without seeing the code (which would be kinda important in questions like this), best guess is that you're using .text() instead of .html() which would parse the HTML correctly.
It could do with some tidying, but this may be a good starting point: http://jsfiddle.net/c24w/Fznh4/9/.
HTML
<div id="title">Highlight this blah blah HiGhLiGhT THIS blah</div>
<button id="clickme">Click to highlight text</button>
CSS
#title{
font-family: sans-serif;
font-size: 20pt;
margin: 30px 0;
}
span.highlight{
color: #09f;
font-weight: bold;
}
JavaScript
function highlightText(element, phrase, allOccurrences, caseSensitive){
var modifiers = (allOccurrences ? 'g' : '') + (caseSensitive ? '' : 'i');
var text = element.innerHTML;
element.innerHTML = text.replace(new RegExp(phrase, modifiers), function(match){
return '<span class="highlight">' + match + '</span>';
});
}
var button = document.getElementById('clickme');
var el = document.getElementById('title');
button.onclick = function(){
highlightText(el, 'highlight this', true, false);
button.onclick = null;
};
Try Something like that :
$.each($(".title"),function({
$(this).html($(this).html().replace("SparklePony","<span class='sparkle-pony'>SparklePony</span>"))
});
Nice and short:
var $body = $("body");
$body.html($body.html().replace(/SparklePony/ig, "<span class='cool'>SparklePony</span>"));​
But keep in mind that $("body") is a very costly selector. You should consider a more precise parent target.
Demo here (fiddle)

How to use JavaScript to print the contents on a div?

I would like to use the print() function to print the contents of a <div class="pagecontent"></div>
I know you can do something like onClick="window.print()" but this prints the entire window...I only want the contents of .pagecontent to be printed.
What's the easiest way I can go about doing this using JavaScript or jQuery?
Easiest way is to define a stylesheet that applies for #media=print. It would basically have something like:
* {
display: none; /* hide all elements when printing */
}
.pageContent {
display: block; /* make any class="pageContent" elements visible while printing */
}
Of course, this would make the pageContent elements visible, but anything inside them would still be invisible from the * rule. You'll have to play with this and list only the top-level elements that should be hidden.
You can add the contents of an element to an iframe and then print the iframe.
HTML --
<span>Print Just Me.</span> I'll be omitted.<br />
<iframe id="iframe"></iframe>​
JS --
$('span').on('click', function () {
$('#iframe').contents().find('body').html($(this).html());
window.frames['iframe'].print();
});​
Here is a demo: http://jsfiddle.net/zaF3K/
You can also hide the iframe so this happens behind the scenes:
#iframe {
display : none;
}​
Here is a demo: http://jsfiddle.net/zaF3K/1/
There is the jqprint jquery plugin, take a look
http://archive.plugins.jquery.com/project/jqPrint
if you want to using javascript than try this
window.printItn = function() {
var printContent = document.getElementById('pagecontent');
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
// you should add all css refrence for your html. something like.
var WinPrint= window.open(windowUrl,windowName,'left=300,top=300,right=500,bottom=500,width=1000,height=500');
WinPrint.document.write('<'+'html'+'><head><link href="cssreference" rel="stylesheet" type="text/css" /></head><'+'body style="background:none !important"'+'>');
WinPrint.document.write(printContent.innerHTML);
WinPrint.document.write('<'+'/body'+'><'+'/html'+'>');
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
See Demo: http://jsfiddle.net/mu8BG/1/
You can get the contents of the div by using innerHTML and storing that as a string, then just print or log that piece by itself.
var string_to_print = $('#pagecontent').html();
http://api.jquery.com/html/
Using pure javascript you can't, but you can use media print CSS type

Categories