Develop Reference

Add a class attribute to certain links

I have pages on my site that go through a translation proxy. I need the displayed text in certain links to not be translated. I can add class="notranslate" to the link and the translator will skip over it no problem. However, I have hundreds of pages created before I implemented the translator and I'll have hundreds more as I keep going along—manually adding the class is not really an option.
The links I'm specifically concerned with are ones whose display text are literal URLs or email addresses. The translator doesn't touch the href attributes so the links still work as expected, but the displayed string gets mangled. For instance, in Vietnamese, "organization#domain.com" is displayed as "tổ chức#domain.com," and a link whose display text should be "domain.com/committees" is translated to "domain.com/commitaries."
So I'm looking for a solution that finds a elements whose display text contains "#" or "/" and adds class="notranslate". I don't think I need too robust a solution as I otherwise don't use the "#" or "/" in link display text often, if ever, except in these situations. I would guess this could be done with Javascript, but I'm a JS beginner at best. An option that filters content on the backend through Wordpress could also be a nice solution.

This is simple using jquery, ideally this will need to load before your translations plugin.
Note: If you have jquery already loaded as most wordpress themes already do, then you can remove the first line from this code, which includes the jquery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("a").each(function() {
let text = $(this).text();
if(text.includes("#")) {
$(this).addClass('notranslate');
}
if(text.includes("/")) {
$(this).addClass('notranslate');
}
})
});
</script>

Finding a specific html element in a htmlCollection array using jquery

I hope I worded the title correctly.
Basically I am working in a sharepoint environment.
On every page of my site I have a sidebar menu with quicklinks to various other pages.
In my sidbar menu which is mostly, if not entirely, generated by SharePoint each menu item in the list is given the class 'menu-item-text'.
Now there is a specific menu item where I want to, using javascript, append text to the existing text. A counter specifically.
So I have something like this..
MenuItem1
MenuItem2
MenuItem3
MenuItem4
MenuItem5
and I want to do a calculation on page load and display the numeric results of the calculation to MenuItem3, such as..
MenuItem1
MenuItem2
MenuItem3 (5)
MenuItem4
MenuItem5
So I assume the way to do this is via javascript. And normally this would be easy if I could target it directly with an ID, but I have a generic class name like this - <span class="menu-item-text">MenuItem3</span>
If I use document.getElementsByClassName('menu-item-text'), i am given back a 'HTMLCollection[389]'
how can i find the 'MenuItem3' item in this array? I assume I can idenitfy by where the 'innerHTML' of the 'menu-item-text' object is equal to 'MenuItem3'.
But unsure how. :)
Thanks!
EDIT:
Here is what the html looks like on the page for the side bar. There is a lot to it...

Well either your class name or html text should be permanent fixed with html.
If li text are fixed like 'MenuItem3' and having class 'menu-item-text'
then you can do in this way.
var element = $('.menu-item-text:contains("MenuItem3")')
otherwise you should allocated id to each element based on your requirement.
Here is plunker

How to implement go-to javascript links? (plus highlight)

Is there a standard way for making all the links in a site, with the form href=#something, become 'go-to' links? (does this kind of links have a name?)
Let me describe these links further: When you click them, #something is added to the url. And if you go directly to that url from your browser, it takes you to that page, and then it scrolls down to that link.
Take this link as example: http://en.wikipedia.org/wiki/Universe#cite_note-Craig-45
Edit: As you can see, the div gets highlighted. How to make that happen automatically?

You're referring to anchor tags. Here's an example of a JavaScript-less internal link:
Go to my div!
<div id="myDiv">
This is content
</div>
If you want to send someone to myDiv using JavaScript, then you could do it this way:
<span onclick="window.location.hash = '#myDiv'">Go to my div!</span>
<div id="myDiv">
This is content
</div>
Here's a jsFiddle that demonstrates both the HTML and JavaScript methods.
You can also use a similar method to allow the use to navigate to page and then scroll them to the appropriate element on the page. Simply add the hash (#) plus the ID of the element to the URL. For example:
Go to my page and then div!
Or, with JavaScript
Go to my page and then div!

Use the id attribute of the a tag. Place the following at the location you would like to link to:
<a id="example"></a>
You can then link to that using:
Go to example
If you want to link to a specific anchor on a different page, simply use the # character after the URL:
Go to different page example
Here's an example.

The thing after the # is called an anchor, and is defined using the a-tag: <a id="something">.
If you just have #something as a link, like <a href="#something">, it will resolve relatively to the current page. So if your page is at http://myurl/mypage.html then it will open http://myurl/mypage.html#something.

How to create interactive tags in html file?

I don't know anything about programming, so I'm trying to find out where to start learning + how difficult my problem is. Since I don't have any programming knowledge, I'll try to describe my problem in natural language, hope that is OK.
I have the html file of the penal code (a type of law). It contains many different rules, that are in numbered paragraphs (§ 1, § 4, etc).
Now I want to look at the source code and manually “tag” the paragraphs according to specific criteria. For example all the paragraphs that concern the use of a weapon get the “weapon” tag, or that have a minimum sentencing of 1 year and higher get a “crime” tag, etc.
At the end I want to view an interactive html file in Firefox/Chrome, where I could for example click on a “crime” button, and all §§§ that were tagged with “crime” would appear in bold red, keeping the rest of the document intact. Ideally I would also be able to click on “weapon” and would only see the §§§ tagged with “weapon”, making the rest of the document disappear.
The function it's just for me, so it would only need to work on a Xubuntu 11.04 desktop with Firefox or Chrome. The original source file would be http://bundesrecht.juris.de/stgb/BJNR001270871.html. The code looks strange to me, is there a way to convert it into something more easily manually editable?
Any help would be greatly appreciated. Primarily I don't know where to start learning. Do I need to know HTML, jQuery, or a programming language like Python? Do I need to set up an Apache server on my PC? Perhaps because of my ignorance of programming, this seems like a not too complex function. Am I mistaken in the belief that an amateur could build something like thins maybe one month?

I think this is not very difficult to make, although the tagging process can be quite labour-intensive.
You don't need much programming skills, especially when you want to tag stuff manually. You probably only need basic HTML and CSS and some Javascript to pull this off.
What I would do is the following
Create a local copy of the HTML file (use Save As in your browser)
Manually tag each § by giving it the appropriate tag as a classname
Create a list of all available tags and let javascript filter out the § you'd like to see
Now Step 1 is pretty easy I guess, so I'll go right to Step 2. The paragraphs in the HTML file are formatted according to a certain pattern, e.g.:
<div class="jnnorm" id="BJNR001270871BJNE009802307" title="Einzelnorm">
<div class="jnheader">
<a name="BJNR001270871BJNE009802307"/>Nichtamtliches Inhaltsverzeichnis
<h3><span class="jnenbez">§ 31</span> <span class="jnentitel">Rücktritt vom Versuch der Beteiligung</span></h3>
</div>
<div class="jnhtml">
<div>
<div class="jurAbsatz">
(1) Nach § 30 wird nicht bestraft, wer freiwillig etc.
</div>
</div>
</div>
</div>
What you want to do now is add your tag to the <div> element with the class jnnorm. So the above example would become (if the tag weapon would be appropriate):
<div class="jnnorm weapon" id="BJNR001270871BJNE009802307" title="Einzelnorm">
You do that for each paragraph in the HTML. This will be pretty boring, but okay.
Now Step 3. First create a list of links of all the tags you've just created. How you create lists in html is explained here. Put this at the top of the HTML document. What you want to do with javascript is when you click on one of the links in your list that only the paragraphs with the given class are shown. This is most easily done with jQuery's click event and the show and hide methods.
Updated with jQuery example
Make a menu like this
<ul id="menu">
<li id="weapon">Weapons</li>
<li id="crime">Crime</li>
</ul>
And then use the following jQuery
<script>
$(document).ready(function(){
// When a <li> element inside an <ul> with the id "menu" is clicked, do the following
$('ul#menu li').click(function(){
// Get the id of the <li> element and append a '.' so we get the right name for the tag (class) we want to show
var tag = '.' + $(this).attr('id');
// Hide all elements of class 'jnnorm'
$('.jnnorm').hide();
// Show all elements with the class name of tag we want
$(tag).show();
});
});
</script>
Note: HTML classes are denoted as .classname in jQuery whereas HTML id's are denoted as #idname.
Good luck!

This could be done using purely HTML/CSS and Javascript, so not server would be needed. JQuery would make the javascript side easier.
Basic idea of how to do it:
Use CSS style classes for your "tags"
Have a button for each tag with an onclick handler that uses JQuery to highlight everything with that tag (or make everything else invisible)
The HTML source code actually looks nicely structured, though it could use a few more linebreaks for sub-paragraphs. Any good HTML/XML editor has an autoformat feature that handles this, though you could get any specific format you want using a programming language with convenient text-manipulation facilities, such as Perl, awk or Python.

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink.
eg.
suppose the value is ABC so on mouse hover should show AppleBoyCat.
need to use onmouseover. let me know how to do it..

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.
Also, the abbr tag can be used as tooltips too:
<abbr title="test">stuff</abbr>

You can go about it in two ways:
1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever
or
2 - you can rewrite the html of the particular element you're mousing over.
You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).
jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Perhaps not the cleanest solution but something like this:
<a class='hover' rel='tooltip'>Link</a>
//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>
$(function() {
$('.hover').mouseover(function() {
var tooltip = $(this).attr('rel');
$('#' + tooltip).fadeIn();
});
});
And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.
This is a quick and dirty solution, can be made alot smoother if you just work with it a little;)
There also alot of plugins out there allowing the same functionality in a cleaner fashion.
*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

As TJHeuvel already said, you can simply use the title attribute.
Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.
Show us some more code to get more/better help.

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel
If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library.
One that works nicely without jQuery ist wz_tooltip download here, documentation here
When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:
Homepage