We Keep Coding

Does anyone know how to create a menu without exiting the page?

Does anyone know how to create a menu without exiting the page? I want to create a settings menu.
<style>
.material-symbols-outlined {
align: right;
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
</style>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<a OnClick="open()" <span class="material-symbols-outlined">
engineering
</span></a>
<div class="menu">
<p>Settings</p>
</div>
(I know that i should not use onclick but i don't know how to use anything else)
<script>
function show(){
div.menu.show=(true)
}
</script>
I wanted it to show div but div is always shown

Welcome!
you want to use style="display:none" on your div
and in the show() function, you want to try this :
document.getElementsByClassName('menu')[0].style.display = "block";

The issue why your <div> is always showing is that you never used any CSS to hide it, and the reason why your onClick handler isn't working is because you are calling a function that hasn't been defined.
You can add an event listener to the link and toggle the .style.display attribute of the menu.
document.getElementById('openMenu').addEventListener('click', () => {
const menu = document.getElementById('menu');
if (menu.style.display === 'block') menu.style.display = 'none';
else menu.style.display = 'block';
});
#menu {
display: none;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200" />
<a id="openMenu">
<span class="material-symbols-outlined">engineering</span>
</a>
<div id="menu">
<p>Settings</p>
</div>

Bootstrap 5 update Tooltip Title with Javascript

In Bootstrap 4 I used the following sample code to update the title of the tooltip (where 'statusIcon' is the element, in this case is a font awesome icon, but same principal would apply for a button or anything else:
$(statusIcon).attr('data-original-title', 'Check Error logs for details').tooltip();
Razor page html element:
<i class="fas fa-circle fa-lg" id="statusIcon:#item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
Reading the manual for Bootrap 5, they don't appear to tell us how to achieve this with Vanilla JS
What I've tried so far in Javascript:
var statusIconId = 'statusIcon:' + pluginId + '';
var statusIcon = document.getElementById(statusIconId);
document.getElementById(statusIconId).setAttribute("data-bs-original-title", 'Check Error logs for details');
Am using variables in the element Id because I'm working with element in a Razor List View.

You can update the tooltip title by changing the data-bs-original-title attribute
$(function () {
// Init
$('[data-toggle="tooltip"]').tooltip()
// Update jquery
// $('#tt').attr('data-bs-original-title', 'New Tooltip Title');
// Update js
document.getElementById('tt').setAttribute('data-bs-original-title', 'New Tooltip Title');
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id='tt' class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip title">
Tooltip
</button>

Since Bootstrap 5.0 no longer requires jQuery, use document.querySelector(), then reinitialize the tooltip after modifying the element:
// initialize
const tooltipElement = document.querySelector('[data-bs-toggle="tooltip"]')
let bsTooltip = new bootstrap.Tooltip(tooltipElement)
// update
tooltipElement.title = 'New Title'
bsTooltip = new bootstrap.Tooltip(tooltipElement)
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<i class="fas fa-circle fa-lg" id="statusIcon:#item.Id" data-bs-toggle="tooltip" data-bs-placement="right" title="Started" data-bs-animation="false" style="font-size: 1.5em; color: #28A745"></i>
(updated to use your Razor page element)

Here is example if your tooltip is in loop, and you want to update the clicked button tooltip.
Use case:
Copy button in table row using clipboard.js
Code:
index.blade.php
<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to clipboard" class="btn-clip btn btn-primary" data-clipboard-text="{{ user.domain }}">Copy</button>
index.js
let clipboard = new ClipboardJS('.btn-clip');
clipboard.on('success', function (e) {
let trigger_button = e.trigger;
// update the tooltip title, get the tooltip instance, and show it
trigger_button.setAttribute('data-bs-original-title', 'Copied!');
let btn_tooltip = bootstrap.Tooltip.getInstance(trigger_button);
btn_tooltip.show();
// reset the tooltip title
trigger_button.setAttribute('data-bs-original-title', 'Copy to clipboard');
});

I had to do the following to get it working with Bootstrap 5 and ClipboardJS 2:
<script src="js/clipboard.js"></script>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script>
$(document).ready(function () {
// Tooltip
$('[data-bs-toggle="tooltip"]').tooltip()
// Clipboard
const clipboard = new ClipboardJS('.btn-clipboard')
clipboard.on('success', function(e) {
$('.tooltip-inner').html('Copied!')
$(e.trigger).tooltip('update')
e.clearSelection()
})
clipboard.on('error', function (e) {
var fallbackMsg = /Mac/i.test(navigator.userAgent) ? 'Press \u2318 to copy' : 'Press Ctrl-C to copy'
$('.tooltip-inner').html(fallbackMsg)
$(e.trigger).tooltip('update')
})
})
</script>
<button type="button" class="btn btn-clipboard" data-clipboard-text="copied text" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click/touch to copy">Button</button>

only thing worked for me was disposing tooltip and rebuilding it again with setTimeout and 'enable' instead of 'show' for repeat hover..
$('#shareLink').on('click', function (e) {
$('#shareLink').tooltip('dispose').attr('title', 'Link copied!');
$('#shareLink').tooltip('show');
setTimeout( function () {
$('#shareLink').tooltip('dispose').attr('title', 'Copy link to Clipboard');
$('#shareLink').tooltip('enable');
}, 2000);
});

For bootstrap 5.2, use this:
const tooltipInstance = bootstrap.Tooltip.getInstance(tooltipElement);
tooltipInstance.setContent({ '.tooltip-inner': 'new title'});
where tooltipElement is either a html element or a string which represents the query selector. E.g. : '.tooltip'

.text() affects html elements inside h1

I have the following markup:
<h1>A text <span class="createTask glyphicon glyphicon-plus"></span></h1>
What I want to do is when I double click an h1 to change its text.
To do this I wrote the following code inside a document ready function
$("h1").on("dblclick",function(){
var newTitle = prompt("Enter a new title");
if(newTitle){
$(this).text(newTitle);
}
})
However this code instead of just changing the text of the h1 it removes the glyphicon span.
Any Ideas why?
Also note that I cannot change the markup.

Using $(this).text() (.html() is the correct syntax), you are changing the entire h1 content, including the glyph inside it.
If you want to keep the glyph (with the span), seperate them from the h1 like so:
<h1>A text </h1><span class="createTask glyphicon glyphicon-plus"></span>
Or, as you requested - without changing the markup:
$(this).html(newTitle + "<span class='createTask glyphicon glyphicon-plus'>");

You need to update the first text node within the h1: $(this).contents().get(0).nodeValue = newTitle;.
$("h1").on("dblclick", function() {
var newTitle = prompt("Enter a new title");
if (newTitle) {
$(this).contents().get(0).nodeValue = newTitle;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<h1>A text <span class="createTask glyphicon glyphicon-plus"></span></h1>

Add another span inside the h1 element and then
<h1>
<span id="text">A text </span>
<span class="createTask glyphicon glyphicon-plus"></span>
</h1>
$("h1").on("dblclick",function() {
var newTitle = prompt("Enter a new title");
if (newTitle){
$(this).find('#text').text(newTitle);
}
})

You can use Node.previousSibling to get previous sibling of SPAN DOM element and then its nodeValue can be set.
$("h1").on("dblclick", function() {
var newTitle = prompt("Enter a new title");
if (newTitle) {
var span = $(this).find('span').get(0); //get the DOM element
span.previousSibling.nodeValue = newTitle;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<h1>A text <span class="createTask glyphicon glyphicon-plus">+++++</span></h1>

.text() replaces the contents of the element with the specified text.
Since the icon span is inside the element it will be replaced.
You can target the text node directly and replace its text.
this.firstChild.nodeValue = newTitle;

How to toggle between 2 icons

I have to toggle between two icons based on some criteria. How do I do this in jQuery?
<a href='' id="home" onclick="myfunction(this)" data-toggle="toggle">
<span class="fa fa-train"></span>
</a>
myfunction($this) {
// ...
if ($($this).hasClass("fa fa-train")) {
$($this).removeClass("fa fa-train");
$($this).addClass("fa fa-car");
}
else {
$($this).addClass("fa fa-car");
$($this).addClass("fa fa-train");
}
// ...
}

clicked anchor element do not have class added, its child span does :
function myfunction($this) {
$($this).find('span').toggleClass('fa-train fa-car');
}

Do something like this
$('a#home').on('click', function(){
var childSpan = $(this).find('span');
if(childSpan.hasClass('fa-train')){
childSpan.removeClass('fa-train');
childSpan.addClass('fa-car');
}
else if(childSpan.hasClass('fa-car')){
childSpan.removeClass('fa-car');
childSpan.addClass('fa-train');
}});

you are using this which will check the a tag if has class . while you should check in the span next to a tag .you should use like this
myfunction($this) {
// ...
if ($($this).next('span').hasClass("fa fa-train")) {
$($this).next('span').removeClass("fa fa-train");
$($this).next('span').addClass("fa fa-car");
}
else {
$($this).next('span').addClass("fa fa-car");
$($this).next('span').addClass("fa fa-train");
}
// ...
}

With a condition in one line:
$($this)
.addClass((condition=(Math.random() > .5)) ? 'fa-car' : 'fa-train')
.removeClass(condition ? 'fa-train': 'fa-car')
Note: This will not work if you "use strict" and of course your code will be less readable.

Thanks everyone, yes i had to search for 'span' and add toggle class. hasClass is also good way to check beforehand that the class exist or not.

This is a concept that I came with which is a bit logical. Instead of using complicated language, what this does is it hides the add button and makes a times button while showing the message that was hidden. It is fairly simple JQuery.
$(document).ready(function() {
$("#addCross").click(function() {
document.getElementById("addCross").style.display = "none";
document.getElementById("addAdd").style.display = "inline-block";
document.getElementById("hello").style.display = "block";
});
$("#addAdd").click(function() {
document.getElementById("addCross").style.display = "inline-block";
document.getElementById("addAdd").style.display = "none";
document.getElementById("hello").style.display = "none";
});
});
/*
Unoptional CSS
Just to make the buttons look better in the snippet.
*/
button {
background: transparent;
border: none;
}
button:focus {
outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9b271ce18a.js" crossorigin="anonymous"></script>
<div>
<label>Press the Button: </label>
<button id="addCross"><i class="fas fa-plus"></i>
<button id="addAdd" style="display: none;"><i class="fas fa-times"></i></button>
<div style="display: none;" id="hello">
<p>Hello. I was hidden by the Magic of JQuery.</p>
<label>This design also makes a cool rotating add sign if you look closely. Ha Ha!!</label>
</div>

Multirow selection(getRangeAt) and surroundContents() for text editor

Im trying to create a simple text editor for a web site.
I want to add to him something like the code button in this site.
So by selecting a specific text, color it's background with gray color.
Here is what i have for now but if i have a multi row text selected(rows created by pressing enter) the function test() doesn't work. It works only if i select a row each time.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="Awesome/css/font-awesome.css">
</head>
<body onload="InitEditable()">
<div style="margin-left:10px;">
<p>
<div class="btn-group">
<a class="btn" href="#" onclick="fontEdit('bold')"><i class="icon-bold"></i></a>
<a class="btn" href="#" onclick="fontEdit('italic')"><i class="icon-italic"></i></a>
<a class="btn" href="#" onclick="fontEdit('underline')"><i class="icon-underline"></i></a>
<a class="btn" href="#" onclick="test()"><i class="icon-link"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyLeft')"><i class="icon-align-left"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyCenter')"><i class="icon-align-center"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyRight')"><i class="icon-align-right"></i></a>
<a class="btn" href="#" onclick="fontEdit('justifyFull')"><i class="icon-align-justify"></i></a>
</div>
</p>
</div>
<div style="margin-left:10px;"><iframe id="textEditor" style="width:500px;height:170px;font-family:arial;font-size:11px;"></iframe></div>
<script type="text/javascript">
var editorDoc;
var editor;
function InitEditable()
{
editor = document.getElementById("textEditor");
editorDoc = editor.contentwindow.document;
var editorBody = editorDoc.body;
if ('contentEditable' in editorBody) {
// allow contentEditable
editorBody.contentEditable = true;
}else { // Firefox earlier than version 3
if ('designMode' in editorDoc) {
// turn on designMode
editorDoc.designMode = "on";
}
}
}
function fontEdit(x,y)
{
editorDoc.execCommand(x,"",y);
editorDoc.focus();
}
function test(){
var range = document.getElementById("textEditor").contentwindow.window.getSelection().getRangeAt(0);
var newNode = document.createElement('div');
newNode.style.backgroundColor = "gray";
range.surroundContents(newNode);
return false;
}
</script>
</body>
</html>
There must be a problem with surroundContents() and divs but cannot think something to solve it.
Any idea is welcomed!
Thanks in advance.

One option is the class applier module of my Rangy library (demo)
Live demo: http://jsfiddle.net/D7s5j/
CSS:
.code {
background-color: #ccc;
font-family: Courier New, monospace;
}
JS:
var codeApplier = rangy.createCssClassApplier("code");
codeApplier.applyToSelection();

So the problem is that the contenteditable object, creates <div> so this couldn't let surroundContents() work properly and add it's own <div>s around the selected range.
I solve my problem finally by adding this code
$("#textEditor>div").replaceWith(function() { return $(this).contents(); });
which deletes <div>s tags from the contenteditable object.
Also you can add this for create a <br> tag after enter pressed.
$("#textEditor > div").before("<br />").contents().unwrap();
For the second code thank VisioN.