We Keep Coding

Button with sup and sub text won't click

I have this button code.
<button id="plusminus" class="key topcolor" value="plusminus"><sup>+</sup>/<sub>−</sub></button>
I noticed that I can click the button just fine except when I accidentally click on the sup and sub text (+ and -), then it won't perform the action. I can click on / to perform the action with no problem.
Why is it doing this? I looked online everywhere and I couldn't find much info. How do I fix this?
P.S. The button is part of the javascript calculator that I'm coding. This button is supposed to convert the number to negative number.
Here's the link to my Javascript calculator: https://codepen.io/kikibres/pen/MWyyBxJ?editors=1010

Seems to not work on codepen only(?) == Your code is fine!
Got it to work!
CSS - add the following:
.plusminus {
position: relative;
z-index: 0;
}
.plusminussupsub {
position: relative;
top: 0;
left: 0;
z-index: -1;
}
HTML - modify the following:
<button id="plusminus" class="key topcolor plusminus" value="plusminus"><sup class="plusminussupsub">+</sup>/<sub class="plusminussupsub">−</sub></button>
Possible explanation:
click events (in codepen only?) don't go up from <sup> and <sub> elements.
Solution:
push them behind/under the button using z-index (which works only for non-static positioning, hence position: relative; + top: 0; and left: 0; so it would (not) be offset to where intended).
For trials:
works on my Chrome(V85)/Win10
<button
id="plusminus"
class="key topcolor"
value="plusminus"
onclick="console.log('clicked at '+(new Date().valueOf()))"
><sup>+</sup>/<sub>−</sub></button>

this works for me(i am using google chrome)
const button = document.getElementById("plusminus");
button.addEventListener("click", function(){
document.body.style.background = "red"; // just using this for testing
// do your code to convert to a negative number here
});

Place a button and its div with one command

Currently, I have a button class which lets me place a clickable button inside a sentence, and a div class which lets me add content to the button which I placed at the end of the paragraph containing the sentence.
This is an example of how I use them
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
When this text is displayed on the page, the two sentences are placed inside two different paragraphs, so the div object is placed between them.
Here is a snippet with the css classes and the javascript.
( function() {
coll = document.getElementsByClassName("col");
conn = document.getElementsByClassName("con");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].setAttribute('data-id', 'con' + i);
conn[i].setAttribute('id', 'con' + i);
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = document.getElementById(this.getAttribute('data-id'));
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
} )();
.col {
cursor: help;
border-radius: 0;
border: none;
outline: none;
background: none;
padding: 0;
font-size: 1em;
color: red;
}
.con {
padding: 0 1em;
max-height: 0;
overflow: hidden;
transition: .3s ease;
background-color: yellow;
}
Try to click <button class="col">THIS</button> and see what happens.
<div class="con">nice!</div>
Did you try?
I wonder if it is possible to implement a shortcut to place the two objects with one command, that is to obtain the previous example by using something like this
Try to click [[THIS|nice!]] and see what happens.
Did you try?
What I mean is that the command [[THIS|nice!]] should place the object <button class="col">THIS</button> in the same position and the object <div class="con">nice!</div> at the end of the paragraph containing the command.
Is it possible to implement such a command (or a similar one)?
EDIT
I forgot to say that the content of the button, ie what is written inside the div, should also be possible to be a wordpress shortcode, which is a shortcut/macro for a longer piece of code or text.

Using jQuery, closest() find the nearest <p> element and add <div class="con">nice!</div> after <p> element. To toggle you can use class active and add or remove .con element.
$('.col').click(function(){
let traget = $(this).closest('p');
if(traget.hasClass('active')) {
traget.removeClass('active');
traget.next('.con').remove();
} else {
traget.addClass('active');
traget.after(`<div class="con">${$(this).data('message')}</div>`);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Try to click <button class="col" data-message="Hello">THIS</button> and see what happens.</p>
<p>Did you try?</p>

You usually dont use div to type text. you use it to define areas or group items. you could obtain what youre asking for in a 1 sentence like this:
html
<h1> some random text <a class="btnID">button</> some more text<h1>
css
.btnID {
color: red;
}

HTML Elements inside Contenteditable?

I have a contenteditable tag, and I want my users to be able to type code into it. However, when I type into the contenteditable tag, my code shows up as text rather than an actual element. Is there a way for a user to create a full, working HTML element in a contenteditable box? I know it is possible for the client to insert code using javascript, but what about users who do not have access to javascript? How could users get code such as buttons inside a contenteditable box?
<p contenteditable="true">Try typing code in here as user, code will only be text...</p>
Is there a javascript way to accomplish this without JQUERY?
EDIT
I spent a long time searching for answers on Google, but nothing came up. The best solution I've gotten at this point has been #Dekel's comment on CKEditor. If there is another solution, I want to hear it. If there isn't, I'm sticking to CKEditor. I don't have much time, so I need a solution fast.
MORE EDIT =D
I recently developed my own answer to my question by looking at #Brandon's .replace answer (which only worked for client-coding, not user-coding) and modifying it to work with user-coding.

This isn't pretty, but you could make it work if you are looking to add HTML only. Otherwise an inline editor might work best.
var el = document.querySelector('p')
el.addEventListener('blur', function() {
var map = {amp: '&', lt: '<', gt: '>', quot: '"', '#039': "'"}
var html = this.innerHTML.replace(/&([^;]+);/g, (m, c) => map[c]);
this.innerHTML = html;
});
<p contenteditable="true">Try typing <b>code</b> in here as user, code will only be text...</p>

This answer is similar to #Brandon's idea, but is much more simple.
https://jsfiddle.net/azopqLe4/
<iframe width="100%" height="300" src="//jsfiddle.net/azopqLe4/embedded/js,html,result/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
function convertit() {
var convet = document.getElementById("convet");
var text = convet.innerHTML;
var newtext;
newtext = text.replace(/</g, "<").replace(/>/g, ">");
convet.innerHTML = newtext;
}
//this version runs onrightclick =D
<p contenteditable="true" oncontextmenu="convertit();" id="convet">
Type some code here, then right-click... =D
</p>
In the second snippet, I typed <b>Test</b>, right-clicked it, and it became Test! My answer works through simple array replacement methods, although it is frustrating and time-wasting to keep right-clicking all the time. To prevent the actual contextmenu from popping up, just add .preventDefault().

You can't insert code, but you can insert DOMElements with JS. No need for jQuery.
var element=document.createElement("button");
element.innerHTML="Hello";
document.getElementById("yourContentEditable").append(element);
The idea with this would be to have a button to prompt for the code and insert it. Something like this:
(It is very ugly and buggy but it's just an example I just wrote)
var editorSelection=null;
function openCodePopup() {
//Store cursor position before editor loses focus
editorSelection=getEditorSelection();
//Open the popup
document.querySelector("#codePopup").style.display="block";
var ta=document.querySelector("#userCode");
ta.value="";
ta.focus();
}
function closeCodePopup() {
document.querySelector("#codePopup").style.display="none";
}
function insertCode() {
var code=document.querySelector("#userCode").value;
closeCodePopup();
if(code=="") return;
insertIntoEditor(html2dom(code));
}
function getEditorSelection() {
//TODO make crossbrowser
//TODO (VERY IMPORTANT) validate if selection is whitin the editor
var sel=window.getSelection();
if(sel.rangeCount) return sel.getRangeAt(0);
return null;
}
function insertIntoEditor(dom) {
if(editorSelection) {
editorSelection.deleteContents();
editorSelection.insertNode(dom);
} else {
//Insert at the end
document.querySelector("#editor").append(dom);
}
}
function html2dom(code) {
//A lazy way to convert html to DOMElements, you can use jQuery or any other
var foo=document.createElement('div'); //or you could use an inline element
foo.contentEditable=false;
foo.innerHTML=code;
return foo;
}
#editor {
height: 180px;
overflow: auto;
border: 1px solid #ccc;
}
#toolbar {
position: relative;
}
#codePopup {
position: absolute;
left: 10px;
top: 15px;
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
display: none;
}
#userCode {
display: block;
width: 200px;
height: 100px;
}
<div id="toolbar">
<button onclick="openCodePopup()"></></button>
<div id="codePopup">
<textarea id="userCode" placeholder="Type code here"></textarea>
<button onclick="insertCode()">Ok</button>
<button onclick="closeCodePopup()">Cancel</button>
</div>
</div>
<div contenteditable="true" id="editor"></div>
With the same idea you could create other options to convert element (example, text->link, etc.).

Jquery, Open div inside its parent limits

I have a responsive image that contains some tickets ,
and I want that the tickets don't accross its container limits when opened
i can't describe well the problem but this is the example
http://jsfiddle.net/tnYjP/
<div class="container">
<img src=""/>
<div class="some" style="top:80%;left:80%">
<span>Title</span>
<p style="display:none;">Description
Description
DescriptionDescription</p>
</div>
</div>
And the jquery script is:
$('.some').hover(function(){
var description = $(this).find('p');
description.show('slow');
}, function(){
var container = $(this);
var description = container.find('p');
description.hide("slow");
});
Thanks

If I understand your question correctly (which can easily not be the case), you want to open the description within the giant TEST container. To do this, you need to set the position elements of the item to be based on bottom and right:
.some{
z-index: 4;
position: absolute;
bottom:10%;
right:10%;
background-color: rgba(12, 12, 12, 0.6);
}
Here is an updated jsFiddle
I also took the liberty of moving your inline styles to CSS, and updating your .hover() function to be the more effective .on().

Adding a counter to a slideshow

Hi
Does anyone know how I would go about adding a counter (i.e. 1/12, 2/12, 3/12 etc.) to this slideshow?
http://www.switchonthecode.com/tutorials/jquery-creating-a-slideshow
Also, I would like the option to have another button that takes the user back to the first image at any given point during the slideshow.
Any help on this would be really appreciated.
Thanks!!

The following should work for creating a counter:
New HTML
<div id="slideshow-area">
<div id="slideshow-scroller">
... slideshow holder html (same as in the example) ...
</div>
<div id="slideshow-previous"></div>
<div id="slideshow-next"></div>
<div id="slideshow-counter"></div>
<div id="slideshow-reset"></div>
</div>
Additional CSS
#slideshow-counter {
width: 100%;
height: 50px;
position: absolute:
left: 0;
bottom: 0;
}
Additional Javascript
function updateCounter() {
$('#slideshow-counter').html(currentSlide + "/" + totalSlides);
}
function showFirstSlide() {
currentSlide = 1;
updateContentHolder();
updateButtons();
updateCounter();
}
Then add updateCounter(); in a new line after updateButtons() is called in document.ready, showPreviousSlide and showNextSlide
Also in the $(document).ready() function you'll need to add the following line: $("#slideshow-reset").click(showFirstSlide)