Select/Apply Styles to specific character with Javascript - javascript

When I write code instead of using camelCase or seperate_with_underscore I separate my class names with custom unicode chars. Such as this:
sideNavܢheaderܢtext
So if I have a class with a specific state modifier I will write it like so:
sideNavܢheaderܢtextᆞbold
These are not css selectors this is just my naming convention. Now for my question.
I am using the atom text editor and sometimes I want to be able to hide these special characters. I can use javascript to select things in Atom, but is it possible to use javascript to literally select a single character?
Then I can use that selection to apply a "display:none" style to it?
Like:
var a = document.getElementByChar("a");
a.style.display = "none";
Any help or ideas would be appreciated!
Update: I don't want to actually remove the characters. Just "hide" them from view. The naming convention I use is actually much more complex than this and I use these special characters to define all sorts of patterns in my document.
However sometimes I only care about certain selectors and I want the others to temporarily go away.

If I'm understanding your question correctly, in JavaScript you can:
Get the entire string from the className:
const string = document.querySelector(".sideNavܢheaderܢtext").textContent
Find the location of the character you want to modify. For example:
string.indexOf('a').
Wrap the character with a span (plenty of ways to do that - check out this one).
Add class to span and style with CSS.

I'm not familiar with Atom. Are each of these selectors within dom elements in Atom?
If all of your selectors existed within <span class="selector"> then you could do something like this...
$('span.selector').each(function(elm){
$(elm).text($(elm).text().split('ܢ').join('<b style="display:none;">ܢ</b>'));
});

Related

Using an empty space in an Active Class

I got a little help yesterday with a project yesterday that contained the following line of code:
document.getElementById("test").className += " active"
At first I couldn't get it to work because I wasn't adding the empty space before the " active" part. Once I added it the code worked fine.
Why do you need to do this? Is this a JS thing?
The answer of Spencer already explains the reasons behind the space. I just wanted to note, that reading and writing class names can be simplified using classList. For example, just use the following code to add a class:
document.getElementById("test").classList.add("active");
And to remove it, execute:
document.getElementById("test").classList.remove("active");
Also note that you should add the JavaScript shim as defined in the link above to support Internet Explorer 8 and 9.
Because many classes on an element for its class attribute are separated by spaces, you needed to add a space because you have one or more classes already on the element. For example without the space you would have:
class="fooactive" // A single class "fooactive" that doesn't exist
As in it will concatenate the two values rather than reading them as two separate classes. So you need to add a space so the class attribute will read them as separate classes:
class="foo active" // Two classes "foo" and "active"

how to change css with jquery and .each?

I have several div with the .item class and want to change the css if the id is 1
</div>
<div class="item" id="0">
</div>
$('.item').each(function(i){
var estatus = $(this).attr('id');
if (estatus == '1')
// change only item with id = 1
});
Just modify your selector...
$('#1').css('whatever', 'yep');
Please see the comments section to see why this works in this scenario, but you're gonna have bad time if selecting it in a stylesheet. I'd recommend using the method in T.J.'s answer, because of jQuery ever switch to funnelling these calls through querySelectorAll(), it will blow up).
My recommendation is to not use id attributes that start with a number.
With CSS, it's awkward to use id values starting with a digit; the simplest thing is to avoid using them.
But with what you have, you can do this:
$(".item[id='1']").css(/*...*/);
Just using #1 as a selector may work in certain select situations provided they don't rely in CSS parsing, but is invalid. If you must have an id value starting with a digit, to use it with a CSS selector, you have to escape it. The escaped version of #1 is #\31, which gets even more awkward when written as a JavaScript string: $("#\\31").css(/*...*/);.
But this works and is in-spec:
$("#\\31").css(/*...*/);
This works in jQuery as of the current version and is not in spec:
$("#1").css(/*...*/);
It could stop working at any time, however, as it's not in-spec, and breaks if you combine it with various things.

Use JavaScript to rewrite CSS with class and tag at the same time

I am able to easily change the style or the tag of an element based on certain criteria using JavaScript:
document.getElementsByTagName("mainclass")[0].style.color:#ffffff;
However, is there a way to do this is the style contains multiple classes and a tag like so
.mainclass .secondaryclass div td {
color: #000000;
}
The following is not working for me so im sure there is a totally different way of doing it:
document.getElementsByTagName(".mainclass .secondaryclass div td")[0].style.color:#ffffff;
...
The other option if easier is to figure out how to use JS to embbed a external style sheet (and not at the end of head, just where the JS code is thats where the CSS should go)
Thanks!
getElementsByTagName does not accept CSS selector syntax. You're looking for querySelectorAll but you'll have to iterate over the returned list to assign the style, and it's not completely supported across browsers.
...which is why everyone uses jQuery.
Example, assuming you want to modify just the first matched element:
document.querySelectorAll(".mainclass .secondaryclass div td")[0].style.color = '#ffffff';
Note the change from : to =, and wrapping the color value in quotes. JavaScript has different syntax from CSS; I suggest that you take some time to learn it.

Does jQuery internally convert HTML5 data attribute keys to lowercase?

I am trying to conform my JavaScript coding style to my Zend coding style as much as possible, which is using camelCase. So, in my HTML5 data attributes, I am naming them as in this example:
<button class="action" data-actionClass="user" data-actionMethod="delete" data-actionRequest="/user/delete/user-id/1" data-actionComplete="{reload:users}">Delete User #1</button>
<div id="users" data-reloadRequest="/user/index"> ... </div>
Pretty unobtrusive way to harness Jquery for actions, but when I call $('.action').data(), the attribute names are converted to lowercase.
Any workarounds for this?
I never though JavaScript variables should have dashes in them, and I can't understand why jQuery is internally doing this for me? Or maybe it is HTML5?
If you use
data-action-method="delete"
then you can access the attribute with
$('.action').data('actionMethod')
This is part of the HTML5 DOM API:
The custom data attributes is transformed to a key for the
DOMStringMap entry with the following rules:
any dash (U+002D) is removed;
any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.
First off, see this part of the source code of JQuery, it assumes you have lower case attributes.
Secondly, by convention, all HTML5 attributes should be lowercase, see: http://www.htmlbasictutor.ca/html-tag-attributes.htm
Finally, be warned you may encounter futher problems if you insist on using upper cases, see Django: Unable to add UPPERCASE attribute name in HTML input element

JavaScript String .replace method is replacing all my content?

I have successfully implemented finding and replacing some text with something else in the following way:
$(".class").html($(".class").html().replace(/\text\b/g, '<span class="newclass newclass2">new text</span>'));
When I apply this to my element 'class' it finds all the 'text' and replaces with 'new text' and everything relating to the new classes.
However, if I have more than one element on the page with the same class, it replaces all the classes with whatever text is in the first class.
For example, if my first class has the content "Hello everyone", when the script is applied to this class, it works fine. Any subsequent class of the same name is then replaced with "Hello everyone". These also have the function applied in the same way as the first occurrence of that class.
IE, it applies the script, then replicates this in every single class of the same name on the page.
I do not understand why it would do this, and rather renders the function pointless in many ways if it can't be used to change text throughout different sections without setting up new scripts and different classes.
Hopefully there is something simple at work here that I am not aware of, any help would be much appreciated.
Many thanks
Richard
That is the nature of class selectors--the .html(...) will replace the HTML of everything that matches the .class selector.
If you want to replace text in each individual .class element, you can use the .each function. (There are probably jQuerier ways, too.)
$(`.class`).each(function(n, el) {
var myHtml = $(this).html();
myHtml = mungeIt(myHtml);
$(this).html(myHtml);
});
If you want to select only an individual .class element, then you either (a) don't really want to be using classes, but IDs, or (b) need to understand enough of your structure or the context you wish to operate in to select only the targeted DOM element.
(And hope the structure or context doesn't change without a corresponding code update.)
You're specifying a class with the jQuery selector $(".class") That's what the period indicates. jQuery has a ton of selectors to choose from. A list is provided in the documentation here: http://api.jquery.com/category/selectors/
Also, I'd look at http://api.jquery.com/hasClass/ for your problem as you could then use if...then statements to not run into others
Dave is right about needing to use the .each method. We need to loop through each element at a time because .html() will only return the first element when there are multiple matches.
Try:
$('.class').each(function() {
$(this).html($(this).html().replace(/someWord/g,'withAnother'));
});

Categories