We Keep Coding

add transitional effect (fade-in) from small image to large image on button click

Noob here.
I've written a javascript which will trade/swap out a small image for a larger (both wider and taller) image.
The SMALLER IMAGE (the default) appears on load and is part of the brief/condensed view. When we CLICK ON THE HEADLINE, we open the larger/detailed view and the short descriptions are replaced by more in-depth/longer text descriptions.
I am unfamiliar with js, but I've managed to get myself to this point which everything I want to happen is happening. However, looking at the result, it feels a little jarring, hence i'd like to ease the speed of the transformation - as the depth of the window is largely determined by transition/replacement of the larger image, I would like to if it is possible, transform/transition/animate the replace of the small image to the large on taking maybe a second to do so?
I am looking for help in achieving. The end goal being that the the replacements don't appear quite so fast so as not to be so jarring.
I would like to avoid jQuery if possible.
function sw_switchDETAILS() {
// transoform content
// changing div class => allows hide/show of specific content
const element = document.getElementById("description00");
if (element.className == "showTHIS") {
element.className = "hideTHIS";
} else {
element.className = "showTHIS";
}
}
function pictureChange() {
// transoform image
if (document.getElementById("image00").src == "<?=$square;?>") {
document.getElementById("image00").src = "<?=$profile;?>";
} else {
document.getElementById("image00").src = "<?=$square;?>";
}
}
.wp-100 {
width: 100%;
}
.wx-200 {
width: 200px;
}
.wx-50 {
width: 50px;
}
.wx-60 {
width: 60px;
}
.wx-80 {
width: 80px;
}
.wx-100 {
width: 100px;
}
.mwx-200 {
max-width: 200px;
}
.showTHIS {
/* border:4px solid lightgoldenrodyellow; */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
.hideTHIS {
/* border:4px solid lightblue; */
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}
/* hide extended content => Full Description, Participants, Location */
div#description00.hideTHIS p#hd-description.contentHIDE,
div#description00.hideTHIS p#hd-participants.contentHIDE,
div#description00.hideTHIS p#hd-location.contentHIDE {
display: none;
overflow: hidden;
}
/* show small img => as we are in teaser / short / minimal content mode */
div#image00.hideTHIS img.largeIMG {
display: none;
overflow: hidden;
}
/* show breif/basic teaser content => breif description
/* hide breif as we know are showing full description */
div#description00.showTHIS p#sw-breif {
display: none;
overflow: hidden;
}
/* hide small img - use larger image as we have available white space */
div#image00.showTHIS img.smallIMG {
display: none;
overflow: hidden
}
.btn_toggleTITLE {
writing-mode: horizontal-tb !important;
font-weight: bold;
font-size: 18px;
font-family: 'ff-bscompMED';
color: #981e21;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-align: left;
background-color: transparent;
margin: 0 0 .3em 0;
padding: 0px;
border-width: 0px;
border-style: outset;
border-color: transparent;
border-image: initial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mSIDES-8px mb-8px " style="border:4px solid #dedede!important;">
<table id="" class="">
<tr>
<td class="va-top pa-8px pr-none">
<img id="image00" src="http://placekitten.com/80/80">
</td>
<td class="va-top wp-100 pa-8px">
<p id="" class="mb-4px">
<button id="btn00" onclick="sw_switchDETAILS(); pictureChange()" class="btn_toggleTITLE ta-justify fs-20px ff-bscompMED">STORY / ARTICAL TITLE HERE</button>
<sup class="fs-14px">x | x | x</sup>
go 2 thread <i class="fas fa-rocket"></i>
</p>
<div id="description00" class="hideTHIS">
<p id="sw-breif" class="wp-100 ta-justify mb-4px"><strong class="c-redDARK">BRIEF:</strong> Breif description visible if extended desc hidden; 128 characters or less</p>
<!-- this content should be hidden on initial load, revealed with mouse click on title -->
<p id="hd-description" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">DESCRIPTION:</strong> Extended descrip hidden if breif desc visible; Upto 1000 characters; That's great. You did the hardest part. You took the jump, you didn't know where you were gonna come down. And that's it. That's
those little brave baby steps we gotta take. To try and become whole again, try and find purpose. I went in the ice in '45 right after I met the love of my life. Woke up 70 years later. You gotta move on. Gotta to move on. The world is in
our hands. It's left to us guys, and we got to do something with it. Otherwise... Thanos should have killed all of us.</p>
<!-- this content should be visible on initial load, hidden on mouse click of title -->
<p id="sw-order" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">ORDER:</strong> Breif description visible if extended desc hidden; 128 characters or less</p>
<p id="hd-participants" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">PARTICIPANTS:</strong> Extended descrip hidden if breif desc visible; Upto 1000 characters; </p>
<!-- this content should be hidden on initial load, revealed with mouse click on title -->
<p id="hd-location" class="wp-100 ta-justify mb-4px contentHIDE"><strong class="c-redDARK">LOCATIONS:</strong> Extended descrip hidden if breif desc visible; Upto 1000 characters; </p>
</div>
</td>
</tr>
</table>
</div>
<?php
# st test variables
$profile = 'http://placekitten.com/200/500';
$square = 'http://placekitten.com/80/80';
?>

I want to only (physically) print the content of my div with contenteditable="true"

I am working on an assignment for University, and I want to create a Rich Text Editor using HTML, CSS and JS.
I am using the MIDAS API and I know it is not recommended to use it but it's only for a short term project.
My problem is with printing the content of my div since it always appears where my div is situated and not on the top of my page.
Requested Solution: A way to print only the content of the contenteditable div or a way to move it to the top of the page.
HTML
<button class="fa fa-print" onclick="printtext()"></button>
<div id="editor1" class="border1" contenteditable="true" style="min-height:10em; padding:1em;">
</div>
JS
function printtext() {
window.print();
}
CSS
<style type="text/css" media="print">
body {
visibility: hidden;
}
#editor1 {
visibility: visible;
border: none !important;
}
#page { size: auto; margin: 0; }
</style>

Funny enough when i was creating this question, the bulb in my head lit.
I added these 3 lines to my CSS.
CSS
#editor1 {
visibility: visible;
border: none !important;
position: absolute;
z-index: 1;
top: 5em;
}

How to hide an element behind a smaller one?

I am creating an AutoComplete component but I am having a problem because I want the suggestions to animate into existence by sliding down. I am using the transform: translateY CSS in order to have it be performant on mobile.
So basically what I need to have happen is for the suggestions to hide behind the textbox, and to slide down and appear when the user begins typing. This only slightly works because the suggestions list is taller than the textbox. As a result, it can't fully hide behind textbox as it clips out of the top.
I have created a working example that demonstrates the problem at this link, and also have reproduced the code here (try typing into the textbox):
document.querySelector(".autocomplete").oninput = e => {
let value = e.target.value;
if (value.length > 0) {
document.querySelector(".suggestions").classList.add("open");
} else {
document.querySelector(".suggestions").classList.remove("open");
}
}
.autocomplete {
border: 1px solid #ddd;
padding: 5px;
width: 500px;
background-color: yellow;
z-index: 1;
position: relative;
}
.suggestions {
border: 1px solid #ddd;
height: 125px;
width: 500px;
transform: translateY(-30px);
transition: .25s;
background-color: #eef;
}
.open {
transform: translateY(0);
}
<p>Some text and a paragraph preceding the autocomplete</p>
<div>
<input class="autocomplete" />
<div class="suggestions">apple, banana, carrot, dog</div>
</div>
I would like to make the transform: translateY(-30px); instead to be transform: translateY(-130px);, but then it clips before the textbox. I want it to hide behind the textbox instead. Also, I don't think I can use scale here because I don't want it to look bad and distorted while animating in.
Depending on the state of the application, I may have different elements preceding this, so while a bandage solution of "put something before it" might work, it seems sloppy and not very scalable.
Is there any way to do this?

you can add a placeholder="type here" for your input and then in your css sheet add
input:not(:placeholder-shown)+div {
display: block;
}
.autocomplete {
display: none;
}
working pen:
https://codepen.io/yael-screenovate/pen/KKVxrrj

Switch Button - switching html

I'm looking for some assistance with a website I'm coding. I have an HTML and CSS switch button (or label):
HTML:
<label class="switch">
<input type="checkbox"></input>
<div class="slider round"></div>
</label>
CSS:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
Here is just what the button looks like: https://jsfiddle.net/pbxn2egc/
Essentially what I want or am trying to do is when the button is toggled, I would like for it to show the price of 5 items (that I hard-coded in, so like standard html) and then when you toggle the button it hides that text and shows the competitors price by showing that text.
So if the button is left, I want Walmart's prices. If the button gets toggled to the right, Walmart's prices hide, and Target's appear in the same location.
Can someone assist me with this? Thanks!

One approach is to listen for the onchange event on your <input> element.
Then, when the box is checked/unchecked, you can determine which element (price) is visible and display the other.
document.getElementById("mySwitch").onchange = function() {
var priceA = document.getElementById("priceA");
var priceB = document.getElementById("priceB");
if (priceA.classList.contains("hidden")) {
priceA.className = "shown";
priceB.className = "hidden";
} else if (priceB.classList.contains("hidden")) {
priceB.className = "shown";
priceA.className = "hidden";
}
}
.shown {
}
.hidden {
display: none;
}
<input type="checkbox" id="mySwitch"></input>
<div class="slider round"></div>
<div id="priceA" class="shown">Price A</div>
<div id="priceB" class="hidden">Price B</div>
If you're using jQuery, there's a toggleClass() method that will automatically toggle an element between two classes.

function togglePrices() {
Array.from(document.querySelectorAll('.price')).forEach(function (f) {
f.classList.toggle('hidden');
});
}
.hidden {
display: none;
}
<input type="checkbox" onchange="togglePrices()"> Competitors Price
<div class="price">
<h3>Our Price</h3>
water $10.00<br/>
beer $12.00<br/>
wine $20.00
</div>
<div class="price hidden">
<h3>Competitors Price</h3>
water $12.00<br/>
beer $15.00<br/>
wine $24.00
</div>

In comparison with the answer from #rphv, this is how I would do it...
I have a div for pricing; within that is a div for our prices and another for their prices. The pricing container is unique on the page, and I give it an ID to signify its purpose.
I give the two price divs two classes each; they both get the class "price" and then either "ours" or "theirs", again to describe what they are (not how they look)
The HTML is now a descriptive structure of the data it contains, without bothering with appearance (because appearance is the job of CSS, not HTML)
We start off displaying our prices, so things with class "ours" are displayed when they are within the pricing div #pricing .price.ours; things with class "theirs" are not displayed #pricing .price.theirs.
Later, when the pricing div has class theirs we will show their prices, not ours — so let's hook up our toggle.
One should prefer attaching event handlers over using inline "onevent" javascript handlers, so I gave the checkbox an ID to easily select it, then use addEventListener so the change event will call togglePrices
The togglePrices could have been a one-liner, I only assigned the var because you often want to do several things with the selected element. Here I simply toggle the class "theirs" on and off.
What happens when that class is toggled is that it just makes a different set of CSS rules apply to the inner price divs. An "ours" within a "theirs" does not display frp, the #pricing.theirs .price.ours rule. A .theirs within a .theirs does display.
I wish the stack snippet showed in reverse the order used — I think this demonstration makes more sense reading the HTML first, then the CSS, and the JS third.
function togglePrices() {
var pricing = document.getElementById('pricing');
pricing.classList.toggle('theirs');
}
document.getElementById('competition')
.addEventListener('change', togglePrices);
#pricing {
margin-top: 1em;
}
#pricing .price.ours,
#pricing.theirs .price.theirs
{
display: block;
}
#pricing .price.theirs,
#pricing.theirs .price.ours
{
display: none;
}
<input type="checkbox" id="competition">
<label for="competition">Competitor's Price</label>
<div id="pricing">
<div class="price ours">
<strong>Our Price</strong><br>
water $1.00<br>
beer $3.00<br>
wine $4.50
</div>
<div class="price theirs">
<strong>Competitors Price</strong><br>
water $1.25<br>
beer $4.00<br>
wine $5.50
</div>
</div>

Change how fast "title" attribute's tooltip appears

Is there a way to change how fast the tooltip from an element's "title" attribute? I'd like it if the tooltip appeared immediately, but it seems to take a few seconds to appear.

No, there's no way. The title attribute is implemented in a browser dependent fashion. For example I remember differences between IE and FF when using \r\n inside it.
Mozilla's docs explain the limits and functionality well.
If you want customization you may take a look at third party plugins such as qTip2 which mimic it using divs and stuff and provide you full control.

You could use jqueryUI as suggested. An example of controlling the duration on the show property:
$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });

Jquery UI tooltip is extremely simple and customizable: Just download or include jquery UI in your page.
If you want all the tooltips of your page to show immediately at hover, just use this:
$(document).tooltip({show: null});
Note that this applies to all elements that have a 'title' attribute.
You can modify the selector to affect only a class, and set custom speed or effect:
$('.yourClass').tooltip({show: {effect:"none", delay:0}});

Unfortunately, there is no way to do this yet,
so I am using the following methods to help. (No dependencies required)
<style>
[title] {
position: relative;
}
[title]:after {
content: attr(title);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out; /* 👈 Change the time to meet your requirements. */
}
[title]:hover:after {
opacity: 1;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" title="hello world">my div</div>
<button title="for debug">button</button>
If you don't want the title to conflict with it, you can use data-* w3school.data-* help you, for example.
<style>
[data-tooltip] {
position: relative;
}
[data-tooltip]:after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: 100%; /* put it on the top */
background-color: yellow;
width: max-content;
opacity: 0;
-webkit-transition: opacity 0.75s ease-in-out;
}
[data-tooltip]:hover:after {
opacity: 1;
}
div[data-tooltip]:after {
left: 5px!important;
}
</style>
<div style="min-height:5rem"></div>
<div style="min-width: 5rem; border: 2px solid red;" data-tooltip="hello world">my div</div>
<button data-tooltip="for debug">button</button>
<button title="for debug">title only</button>
<button data-tooltip="my tool tip msg" title="my title msg">title and tooltip</button>
below link may help you too.
fade in and out on simple css tooltip

It isn't possible to change how fast default browser's tooltip appear, but you can use one of the tooltip plugins (here is few: http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/ ) where you can customise lot's of things, including delay.

TippyJS has a billion customization options.
https://atomiks.github.io/tippyjs
https://github.com/atomiks/tippyjs