Develop Reference

How to reverse the order of zindex in the whole site

I want to reverse the z-index of my website, so that objects with lower z-index are on top of objects with higher z-index - is there a solution for this ?

I don't know of any standard solutions, but you can always write a custom function to do it. Check if this works for you:
document.querySelector('button').addEventListener('click', reverseZIndex);
function reverseZIndex(){
// Get all body elements
Array.from(document.body.querySelectorAll('*'))
// Reverse those that have z-index
.forEach((elem, idx) => {
const zIndex = window.getComputedStyle(elem).getPropertyValue('z-index');
if (zIndex !== 'auto' && zIndex != 0) {
elem.style.zIndex = zIndex * -1;
}
})
}
button {
margin-bottom: 10px;
}
.container {
position: relative;
}
.z {
width: 50px;
height: 50px;
position: absolute;
left: 0;
}
.z1 {
z-index: 1;
background-color: green;
top: 0;
}
.z2 {
z-index: 2;
background-color: blue;
top: 20px;
left: 5px;
}
.z3 {
z-index: 3;
background-color: yellow;
top: 40px;
left: 10px;
}
.z4 {
z-index: 4;
background-color: grey;
top: 60px;
left: 15px;
}
.z5 {
z-index: 5;
background-color: red;
top: 80px;
left: 20px;
}
<button>Reverse z-index</button>
<div class="container">
<div class="z z1"></div>
<div class="z z2"></div>
<div class="z z3"></div>
<div class="z z4"></div>
<div class="z z5"></div>
</div>

One method that might work for your case is to dynamically, re-write the style sheet(s) using javascript.
Style sheets are html elements like any other and live references to them can be made using:
styleSheets = document.getElementsByTagName('style');
this creates a live html collection (see https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName). If you have a single style sheet it is referenced in index[0], additional style sheets have incremented indices. Cricially, the innerHTML of the collection can be modified as for any other element and, because the reference is 'live', changes to it are automatically applied to the html tree displayed in the browser.
The following example takes the innerHTML of the style sheet and splits it into an array of lines. Array.map is used to examine each line for the presence of a z-index rule. If present, the numerical value following it is extracted and multiplied by -1 so the largest value becomes the smallest and vice versa. Other lines are left unaltered. The check and multiplication is performed using a ternary operator conditional, but you could equally loop through the lines with a for loop.
The results of the mapping are joined as new lines and the resulting string used to replace the innerHTML of the style sheet.
This working snippet applies a custom reverseZ function to the style sheet each time the page is clicked. If you have several style sheets, interation through the collection will achieve the same result.
document.addEventListener('click', reverseZ);
const styleSheet = document.getElementsByTagName('style')[0];
function reverseZ() {
const lines = styleSheet.innerHTML.split("\n");
const newLines = lines.map(line => {
return (line.indexOf('z-index') > -1) ? `z-index: ${parseInt(line.slice(line.indexOf(':')+1, line.indexOf(';')))*-1};`: line;
});
styleSheet.innerHTML = newLines.join("\n");
} // end function reverseZ
div {
position: absolute;
width: 100px;
aspect-ratio: 1;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.red {
background: red;
z-index: -100;
top: 0;
left: 0;
}
.orange {
background: orange;
z-index: -70;
top: 20px;
left: 20px;
}
.yellow {
background: yellow;
z-index: -10;
top: 40px;
left: 40px;
}
.green {
background: green;
z-index: 0;
top: 60px;
left: 60px;
}
.blue {
background: blue;
z-index: 20;
top: 80px;
left: 80px;
}
.indigo {
background: indigo;
z-index: 50;
top: 100px;
left: 100px;
}
.violet {
background: violet;
z-index: 100;
top: 120px;
left: 120px;
}
<div class="red">click</div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="indigo"></div>
<div class="violet">click</div>

How can a span id that div classes are applied to be looped?

I'm new to coding, and I'm trying to learn the basics. I wanted to practice what I learned by making flashcards (nothing complicated like saving it, importing it, or exporting it). So far, I made a table that the user can edit. I know how to gather data from the table, but I don't know how to make a CSS flashcard appear every time the user adds a card to the table. I am aware that the code will not work since I put the CSS in JavaScript since this code is just meant to show what I am trying to do. Also, if I am taking a completely wrong approach, please let me know. Thank you! Please excuse the poor variable naming, I was just testing some things.
<script>
function getFlashcardValue() {
for (var repeat = 0; repeat < 200; repeat++) {
var Table = document.getElementById('flashcardsTable');
var column1 = 0;
var column2 = 1;
var numberOfFlashcards = 2;
for (var row = 0; row < numberOfFlashcards; row++) {
var Cells = Table.rows.item(1).cells;
var Question1 = Cells.item(column1).innerHTML;
var Cells1 = Table.rows.item(1).cells;
var Answer1 = Cells.item(column2).innerHTML;
document.getElementById("myFlashcardQuestion" + row).innerHTML = Question1;
document.getElementById("myFlashcardAnswer" + row).innerHTML = Answer1;
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<span id="myFlashcardQuestion1"></span>
</div>
<div class="flip-card-back">
<span id="myFlashcardAnswer1"></span>
</div>
</div>
</div>
}
}
}
</script>
<p style = "font-size: 25px">Hover over the flashcard to flip it!</p>
<style>
.flip-card {
background-color: transparent;
width: 350px;
height: 175px;
margin: auto;
padding: 5px 5px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
background-color: lightblue;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: lightblue;
width: 350px;
height: 175px;
color: black;
font-size: 35px;
text-alignment: center;
}
.flip-card-back {
background-color: red;
color: white;
font-size: 35px;
text-alignment: center;
transform: rotateY(180deg);
}
</style>

So first of all you can create a code snippet in stackoverflows editor (see below), or use jsfiddle and post a shared-link.
It depends on which action the user has to do after he enters the data.
If it is, for example, a button click, then it is possible to call a function that shows the user's input in the flashcard. Now if you want that for every single Q&A you have to create Elements in the for loop and edit them there. Here a little example.
var allCards = document.getElementById("allCards");
for (var i = 1; i <= 5; i++) { //i used 5, you should use length of data
var question = document.createElement("div");
question.textContent = "Question " + i;
question.classList.add("flip-card");
allCards.appendChild(question);
}
.flip-card {
background-color: lightblue;
width: 350px;
height: 175px;
margin: 10px auto;
padding: 5px 5px;
font-size: 35px;
text-align: center;
}
<div id="allCards"></div>
Edit:
As promised, here is an example of how you can set up the flip cards.
https://jsfiddle.net/ybu59hfp/1/
Your concern should now be resolved. If you have any further questions, feel free to write to me in the chat or read a little about JavaScript on the Internet.

Manipulate Pseudo Elements with Custom Fields

What I need to do is similar to this post, but I need the user to be able to change the Pseudo Element using a custom field. Still learning JavaScript and this has been a struggle!
User needs ability to change ~ border-right: 500px solid #4679BD;
The custom field is ~ $angle = get_field('contact_angle_color');
Here is my code without my failed JavaScript attempts:
.relative-wrap {
position: relative;
min-height: 150px;
}
.triangle-down-right {
width: 50%;
height: 0;
padding-top: 54%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.triangle-down-right:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:-500px;
border-top: 500px solid transparent;
border-right: 500px solid #4679BD;
}
<div class="triangle-down-right"></div>

I could not understand the part about custom field, but if you are planning on having unlimited control over pseudo-elements, well, good luck with that. Currently, manipulating pseudo-elements with Javascript is possible through injecting inline css into DOM as described in this post, but it is not recommended unless, of course, you absolutely have to.
So, the other way to change pseudo-elements is to add/remove/modify class names on the element. Please see the example code below and the JSFiddle: https://jsfiddle.net/9w4d6mts/
HTML:
<input type="button" id="direction" value="Change Direction">
<br>
<input type="button" id="color" value="Change Color">
<div id="demo" class="triangle-down-right alt"></div>
CSS:
.relative-wrap {
position: relative;
min-height: 150px;
}
.triangle-down-right,
.triangle-down-left {
width: 50%;
height: 0;
padding-top: 54%;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
.triangle-down-right:after,
.triangle-down-left:after {
content: "";
display: block;
width: 0;
height: 0;
margin-top:-500px;
border-top: 500px solid transparent;
}
.triangle-down-right:after {
border-right: 500px solid #4679BD;
}
.triangle-down-left:after {
border-left: 500px solid #4679BD;
}
.triangle-down-right.alt:after,
.triangle-down-left.alt:after {
border-color: transparent #D4679B transparent;
}
JS:
document.getElementById('direction').addEventListener('click', function(){
var d = document.getElementById('demo');
d.className = (d.className.replace(' alt','') === "triangle-down-right") ? d.className.replace('right','left') : d.className.replace('left','right');
});
document.getElementById('color').addEventListener("click", function(){
var d = document.getElementById('demo');
console.log(d.className);
d.className = (d.className.slice(-3) === "alt") ? d.className.replace(' alt','') : d.className + ' alt';
});
Basically, we are preparing the classes in CSS beforehand and switch them with Javascript based on user interaction. That's it.

Position bottom element of top parent element

I am making this simple tooltip where I want to position the tooltip bottom at the top of the parent element. I want to do this by getting the height of the tooltip element and set this number negative to the top positioning.
The problem is that at the time that I hover the element, the tooltip height is 0, according to console.log();
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
var height = html.height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
} else {
element.remove();
}
});
.element {
height: 50px;
width: 50px;
margin: 50px auto;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tip-content {
width: 180px;
margin-left: -98px;
padding: 10px 5px;
position: absolute;
left: 50%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #294a72;
font-size: 0.75em;
color: #fff;
text-align: center;
}
.tooltip .tip-content:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #294a72;
border-width: 5px;
margin-left: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>

At the time you're checking the height, the element has not yet been added to the DOM, and therefore can have no height. You simply need to switch the order of your statements. jQuery can and will change the CSS of the element even after it has been added.
var html = $('<p class="tip-content">' + content + '</p>');
$(this).prepend(html); //This line must go before the next
var height = html.height();
console.log(height);
However, you're still missing some pieces. height() does not include either margin or padding. To get padding, you can use outerHeight(), but margin you'll have to either read from the CSS or use a hard-coded value. Even worse, your arrow is using a pseudo-element, which *cannot* be read by DOM traversal, so your best bet there is to just hardcode it, sadly.
A better height calculation might look like:
var ARROW_HEIGHT = 5;
html.outerHeight() + parseInt(html.css('marginBottom'), 10) + ARROW_HEIGHT;

I think you have to prepend the HTML, and then get the height and reposition the element. Right now, you are getting the height of a variable, not an HTML element.

You just need to get height of 'tooltip' instead of 'tip-content'.
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
// Get height of parent element
var height = $(this).height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
} else {
element.remove();
}
});
.element {
height: 50px;
width: 50px;
margin: 50px auto;
background: #000;
}
.tooltip {
position: relative;
}
.tooltip .tip-content {
width: 180px;
margin-left: -98px;
padding: 10px 5px;
position: absolute;
left: 50%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #294a72;
font-size: 0.75em;
color: #fff;
text-align: center;
}
.tooltip .tip-content:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #294a72;
border-width: 5px;
margin-left: -5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element tooltip" data-tip-content="This is a test content">
</div>

For html object gets a height automatically, you need first put in DOM. That the reason for you get height = 0. You need first append your object and then get the height.
See my example: https://jsfiddle.net/bwun82q4/
$('.tooltip').hover(function() {
var content = $(this).data('tip-content');
var element = $(this).find('.tip-content');
if(element.length == 0 ) {
var html = $('<p class="tip-content">' + content + '</p>');
var height = html.height();
console.log(height);
html.css('top', - height);
$(this).prepend(html);
$(this).find("p").css("top",- $(this).find("p").height());
} else {
element.remove();
}});

How to modify a general css using javascript and jquery and return the result as a new id

I have CSS with ids like this:
<style>
.HIDE-DISPLAY-k {
background-color: orange;
position: fixed;
width: 100%;
height: 100%;
top: 10px;
bottom: 0px;
left: 10px;
right: 0px;
overflow: hidden;
}
#SHOW-DISPLAY-k {
background-color: yellow;
position: fixed;
width: 70%;
height: 50%;
top: 100px;
bottom: 0px;
left: 10px;
right: 10px;
overflow: hidden;
display: none;
cursor: pointer;
}
.BUTTON-k {
background-color: orange;
position:absolute;
top: 50px;
left: 10px;
cursor: pointer;
}
</style>
im calling it from javascript file like this
<script type="text/javascript" src="Scripts/sliding_Documents.js" ></script>
<script type="text/javascript">
$(document).ready(function(docProperty) {
docProperty='|FROM_top|width|10|height|1500|top|30|bottom|""|left|500|right|""|'
sliding_NotePads(docProperty);
});
</script>
<a class="BUTTON-k" href="#"><button>NOTEPAD</button></a>
<div class="hidden_SHOW-DISPLAY" ></div>
<div id="SHOW-DISPLAY-k"></div>
//the docProperty is just an array where i put the specific values to use in changing css like width, height.
The javascript sliding_Documents.js is
function sliding_NotePads(docProperty) {
/*without clicking the hide-display-k is in place and nothing can be seen.
on click the if condition defines how the display appears*/
$('.HIDE-DISPLAY-k').hide()
/*get the information added to the button to customise the display window*/
$('.BUTTON-k').click(function () {
var css_changes = docProperty.split("|");
// docProperty='|FROM|right|width|100|height|50|top|30|bottom|""|right|20|left|""|'
//this is where i make changes to the css
$("#DISPLAY-k").css({//or use this format $("#DISPLAY-k").css("top", 10);
width: css_changes[css_changes.indexOf("width") + 1],
height: css_changes[css_changes.indexOf("height") + 1],
top: css_changes[css_changes.indexOf("top") + 1],
bottom: css_changes[css_changes.indexOf("bottom") + 1],
left: css_changes[css_changes.indexOf("left") + 1],
right: css_changes[css_changes.indexOf("right") + 1]
});
if(css_changes[1]==="FROM_top"|| css_changes[1]==="FROM_bottom"){
$('#SHOW-DISPLAY-k').css('z-index', 2).slideToggle("slow");
};
if(css_changes[1]==="FROM_left"|| css_changes[1]==="FROM_right"){
$('#SHOW-DISPLAY-k').css('z-index', 2).animate({width: 'toggle'}, "slow")
};
});
};
How can I call back the changes in the #SHOW-DISPLAY-k and give it a new ID or name so that it only affects one thing and not other things in the html?

That is some strange case mixing for class names and function names. To each their own, I suppose. Anyway!
I think you might want .clone()
var newDiv = $('#SHOW-DISPLAY-k').clone();
// do whatever, ex: give it a new id and append it to body
newDiv.attr('id', 'SHOW-DISPLAY-x');
$('body').append(newDiv);
Though I'm not sure I 100% understood your question. Does this accomplish what you're trying to do?