Develop Reference

CSS transition on element with unknown height (vanilla JS only)

I try to build "read more/less" functionality with fade in/out text.
Since CSS transitions do not work on height: auto;, I am forced to hardcode the value in CSS with my approach. Which could be too small or too big. The fade-in text can vary in length from element to element where the JS will be applied on.
I can read the real height of the <p id="txt"> element which includes the transparent text before any css is applied:
document.addEventListener("DOMContentLoaded", function(event) {...});
So I know about the height I need to transform to before the toggle happens but I can't figure out a way to make it work. Is this even possible with my approach?
Changing the height property right after the toggle with currentText.style.height = realHeight + "px"; does not work since it's too late here.
document.addEventListener("DOMContentLoaded", function(event) {
// Get the height including the transparent text
var realHeight = document.getElementById("txt").scrollHeight;
var heightDisplay = document.getElementById("realHeight");
heightDisplay.innerHTML += realHeight + "px";
});
const btn = document.querySelector(".read-more-btn");
const text = document.querySelector(".read-more");
const wrapper = document.querySelector(".wrapper");
wrapper.addEventListener("click", e => {
const current = e.target;
const isReadMoreBtn = current.className.includes("read-more-btn");
if (!isReadMoreBtn)
return;
const currentText = e.target.parentNode.querySelector(".read-more");
currentText.classList.toggle("read-more_open");
// currentText.style.height = realHeight + "px";
current.textContent = current.textContent.includes("Read More") ? "Read Less" : "Read More";
});
/* toggle classes */
.read-more {
display: block;
opacity: 0;
height: 0;
transition: all 0.5s;
}
.read-more_open {
display: block;
opacity: 1;
height: 5em;
}
/* other styles */
.wrapper {
width: 20rem;
background-color: black;
color: white;
margin: auto;
}
.contents {
padding: 0.25rem;
}
.title {
font-size: 1.7em;
margin-bottom: 1rem;
letter-spacing: 1px;
}
p {
font-size: 0.8rem;
}
.read-more-btn {
display: inline-block;
color: white;
background-color: grey;
padding: 0.6rem 1.5rem;
font-size: 1em;
position: relative;
z-index: 1;
transition: all 0.5s;
cursor: pointer;
}
.read-more-btn:hover {
background-color: #fff;
color: grey;
box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
}
<span id="realHeight">Real height: </span>
<div class="wrapper">
<div class="contents">
<h1 class="title">Some Title</h1>
<p id="txt">
ALWAYS VISIBLE CONTENT
<span class="read-more">
Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in an unknown height of the paragraph.
</span>
</p>
<p class="read-more-btn">Read More</p>
</div>
</div>

Solution 1
Use max-height instead, and add a value that is bigger than expected to make sure that the content fits.
Edited:
.read-more {
max-height: 0;
}
.read-more_open {
max-height: 500px;
}
Check JavaScript
The Code:
const btn = document.querySelector(".read-more-btn");
const text = document.querySelector(".read-more");
const wrapper = document.querySelector(".wrapper");
btn.addEventListener("click", e => {
// toggle the class 'read-more_open'
text.classList.toggle("read-more_open");
// if `text` contains the class 'read-more_open'
//set `btn` HTML to 'Read Less', else? set to 'Read More'
text.classList.contains("read-more_open") ? btn.innerHTML = "Read Less" : btn.innerHTML = "Read More";
});
/* toggle classes */
.read-more {
display: block;
opacity: 0;
max-height: 0;
transition: all 0.5s;
}
.read-more_open {
display: block;
opacity: 1;
max-height: 500px;
}
/* other styles */
.wrapper {
width: 20rem;
background-color: black;
color: white;
margin: auto;
}
.contents {
padding: 0.25rem;
}
.title {
font-size: 1.7em;
margin-bottom: 1rem;
letter-spacing: 1px;
}
p {
font-size: 0.8rem;
}
.read-more-btn {
display: inline-block;
color: white;
background-color: grey;
padding: 0.6rem 1.5rem;
font-size: 1em;
position: relative;
z-index: 1;
transition: all 0.5s;
cursor: pointer;
}
.read-more-btn:hover {
background-color: #fff;
color: grey;
box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
}
<span id="realHeight">Real height: </span>
<div class="wrapper">
<div class="contents">
<h1 class="title">Some Title</h1>
<p id="txt">
ALWAYS VISIBLE CONTENT
<span class="read-more">
Fade in text with unknown length which results in unknown height of the paragraph. Fade in text with unknown length which results in unknown height of the paragraph. Fade in text with unknown length which results in unknown height of the paragraph. Fade in text with unknown length which results in unknown height of the paragraph. Fade in text with unknown length which results in unknown height of the paragraph.
</span>
</p>
<p class="read-more-btn">Read More</p>
</div>
</div>
Solution 2
If the height value in px is important, you can get the full height first, and then hide the text and set max-height to 0 and show the wrapper. (The user won't notice the transition since wrapper has no transition property).
CSS Edited:
.wrapper {
opacity: 0;
}
.wrapper.show {
opacity: 1;
}
The Code:
const btn = document.querySelector(".read-more-btn");
const text = document.querySelector(".read-more");
const wrapper = document.querySelector(".wrapper");
const realHeightEl = document.getElementById('realHeight');
// Variable to hold the exact height of wrapper
let h;
window.addEventListener('load', () => {
// get text height
h = text.getBoundingClientRect().height;
// show height in HTML `realHeight` element
realHeightEl.innerHTML += `${h}px`;
// show the wrapper
wrapper.classList.add('show');
// hide the text
text.style.maxHeight = '0';
});
btn.addEventListener("click", () => {
// if the height is 0:
// set it to `h` (text `height`), `opacity` 1, and change `btn` text
if(text.style.maxHeight == '0px'){
text.style.maxHeight = h + 'px';
text.style.opacity = '1';
btn.innerHTML = "Read Less";
} else {
// else ? set the `height` and `opacity` to `0` and change btn text.
text.style.maxHeight = '0px';
text.style.opacity = '0';
btn.innerHTML = "Read More";
}
});
/* toggle classes */
.read-more {
display: block;
opacity: 0;
max-height: fit-content;
transition: all 0.5s;
}
.read-more_open {
display: block;
opacity: 1;
}
/* other styles */
.wrapper {
width: 20rem;
background-color: black;
color: white;
margin: auto;
opacity: 0;
}
.wrapper.show {
opacity: 1;
}
.contents {
padding: 0.25rem;
}
.title {
font-size: 1.7em;
margin-bottom: 1rem;
letter-spacing: 1px;
}
p {
font-size: 0.8rem;
}
.read-more-btn {
display: inline-block;
color: white;
background-color: grey;
padding: 0.6rem 1.5rem;
font-size: 1em;
position: relative;
z-index: 1;
transition: all 0.5s;
cursor: pointer;
}
.read-more-btn:hover {
background-color: #fff;
color: grey;
box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
}
<span id="realHeight">Real height: </span>
<div class="wrapper">
<div class="contents">
<h1 class="title">Some Title</h1>
<p id="txt">
ALWAYS VISIBLE CONTENT
<span class="read-more">
Fade in text with unknown length which results in unknown height of the paragraph. Fade in text with
unknown length which results in unknown height of the paragraph. Fade in text with unknown length which
results in unknown height of the paragraph. Fade in text with unknown length which results in unknown
height of the paragraph. Fade in text with unknown length which results in unknown height of the
paragraph.
</span>
</p>
<p class="read-more-btn">Read More</p>
</div>
</div>
Note:
the h variable holds the max-height value to set in JavaScript, in short, it's the same functionality in Solution 1.
// This CSS declaration is deleted in Solution2
.read-more_open {
max-height: 500px;
}
That means, in Solution2:
Replaced:
This in JavaScript -> max-height: h;
Instead of this in CSS: max-height: 500px;
This way we make sure that the max-height is dynamically declared no matter what is the height value of the text.

Used .contains to check if is contains the class read-more_open :
If yes then height is changed to scroll height
If no height is changed back to 0px
var heightDisplay = document.getElementById("realHeight");
var realHeight = document.getElementById("txt").scrollHeight;
const btn = document.querySelector(".read-more-btn");
const text = document.querySelector(".read-more");
btn.addEventListener("click", e => {
text.classList.toggle("read-more_open");
if (text.classList.contains("read-more_open")) {
heightDisplay.innerHTML = "Yes your text height matter to us";
document.querySelector(".read-more").style.height = realHeight + "px";
} else {
heightDisplay.innerHTML = "You are back where you started in height";
document.querySelector(".read-more").style.height = "0px";
}
btn.textContent = btn.textContent.includes("Read More") ? "Read Less" : "Read More";
});
/* toggle classes */
.read-more {
display: block;
opacity: 0;
height: 0;
transition: all 0.5s;
}
.read-more_open {
display: block;
opacity: 1;
}
/* other styles */
.wrapper {
width: 20rem;
background-color: black;
color: white;
margin: auto;
}
.contents {
padding: 0.25rem;
}
.title {
font-size: 1.7em;
margin-bottom: 1rem;
letter-spacing: 1px;
}
p {
font-size: 0.8rem;
}
.read-more-btn {
display: inline-block;
color: white;
background-color: grey;
padding: 0.6rem 1.5rem;
font-size: 1em;
position: relative;
z-index: 1;
transition: all 0.5s;
cursor: pointer;
}
.read-more-btn:hover {
background-color: #fff;
color: grey;
box-shadow: 0 0 2 rem rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
}
<span id="realHeight">Click Read more to see more </span>
<div class="wrapper">
<div class="contents">
<h1 class="title">Some Title</h1>
<p id="txt">
ALWAYS VISIBLE CONTENT
<span class="read-more">
Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in the unknown height of the paragraph. Fade in text with an unknown length which results in an unknown height of the paragraph.
</span>
</p>
<p class="read-more-btn">Read More</p>
</div>
</div>

Why does the color not change when I press the space bar after copying the hex value?

Once I click generate new color, a new color is generated. Once clicked, I can also press the space bar to generate new colors. But once I click 'Copy hex value', the space bar no longer functions the way is it supposed to. Is there any way to fix this? I assume I need to move the keypress somewhere else?
<!DOCTYPE html>
<html>
<head>
<title>
Color Generator
</title>
<style>
body {
margin: 0;
padding: 0;
background: #161818;
font-family: "Consolas";
}
.color {
margin-top: 300px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 100px;
text-transform: uppercase;
margin: 0px;
}
.color button {
background: none;
outline: 10px;
color: white;
cursor: pointer;
font-size: 20px;
border: 3px solid white;
}
.notification {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -100%);
transition: transform 0.6s ease;
border: 2px solid white;
padding: 12px 30px;
color: white;
}
</style>
</head>
<body>
<div class="color">
<span id="hex">#??????</span>
<button onclick="genNewColor()">Generate new random color</button>
<button onclick="copyHexValue()">Copy hex value</button>
</div>
<div class='notification'>
</div>
<script type="text/javascript">
function genNewColor() {
var symbols, color;
symbols = "0123456789ABCDEF";
color = "#";
for (var i = 0; i < 6; i++) {
color = color + symbols[Math.floor(Math.random() * 16)];
}
document.body.style.background = color;
document.getElementById("hex").innerHTML = color;
}
function copyHexValue() {
var copyHex = document.createElement("input");
copyHex.value = document.getElementById("hex").innerHTML;
document.body.appendChild(copyHex);
copyHex.select();
document.execCommand("copy");
// alert("Copied the hex value " + copyHex.value);
showNotification(copyHex.value);
console.log("Copied the hex value " + copyHex.value);
document.body.removeChild(copyHex);
}
document.body.onkeyup = function (e) {
if (e.keyCode == 32) {
}
};
const notification = document.querySelector(".notification");
function showNotification(color) {
let notificationText;
// If no color has been picked
if (color === "#??????") notificationText = "Generate a color first";
// Show Color Picked Message
else notificationText = `Copied hex value ${color}`;
//Slide down the notification
notification.style.transform = "translate(-50%,100%)";
// Add message to notification
notification.textContent = notificationText;
//Make Notification slide back up after 2s
setTimeout(function hideNotification() {
notification.style.transform = "translate(-50%,-100%)";
}, 2000);
}
</script>
</body>
</html>

Hey when you click Generate new Random color your focus drops on this button and that is why by clicking the space bar you just clicking the focused button, when you click on the other button the focus changes.
You can fix it but adding the function call to your space press event
document.body.onkeyup = function (e) {
if (e.keyCode == 32) {
genNewColor()
}
};
let me know if it helps.

Change backgroundcolor of text in textarea

I want to change the backgroundcolor of the text in a textarea.
NOT the background color of the textarea. The background of each character.
Like selecting the text.
I want to see the spaces at the end of each line. Or a single line without text and only spaces. The color should appear even on typing new text.
If possible I don't want to use javascript. Only CSS.
It should look like this:
. This one is selected text. I want it to see it without selecting.

You need to use javascript for highlighting text in textarea.
const bgcolor = "#3297FD";
const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");
function highlight() {
bgtext.innerHTML = "";
let val = textarea.value;
let len = val.length;
for (let i = 0; i < len; i++) {
if (val[i] == "\n") {
bgtext.innerHTML += "<br />";
} else {
bgtext.innerHTML += "<span style=\"background-color: [[bgcolor]];\"> </span>".replace("[[bgcolor]]", bgcolor);
}
}
}
setInterval(highlight, 0);
.text {
position: fixed;
top: 20px;
left: 20px;
width: 300px;
height: 300px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
}
<style>
.text {
position: fixed;
top: 20px;
left: 20px;
width: 600px;
height: 600px;
background-color: transparent;
margin: 0px;
font-size: 14px;
font-family: monospace;
white-space: pre;
color: white;
}
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>

text as background. need 2nd background, need expert

My text is like background (body image) using
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
I would like to add moving element like on example below, but as you see if text color is set to yellow, everything is visible, but when text is set same as background image you wont see output.
Here is my HTML
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 100px;
position: absolute;
background-color: red;
}
#animate{
position:relative;
text-align:center;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
z-index:20;}
#normal{
position:relative;
color:yellow;
z-index:22;
text-align:center;}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id ="myContainer">
<div id ="myAnimation"></div>
<p id="animate">some text with background color</p>
<p id="normal">some text with yellow color</p>
</div>
My Javascript
<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 10);
var len = 50;
var hei = 100;
function frame() {
if (pos == 80 && len <250) {
pos=80;
len++;
elem.style.width = len + "px";
}
else if (len >249) {
hei--;
elem.style.height = hei + "px";
}
else {
pos++;
elem.style.left = pos + 'px';
}
}
}
</script>
In example I have set the background color as yellow and box as red. in My main project i have full HD img and around 50 shapes to create animated text. Main problem is that when box(shape) cover text with id #animate the text taking box background when it should stay with main body background(img)

job done xD example pmwebdev.co.uk
code for background:
body{
background-image: url("bg.png");
background-size: cover;
background-attachment: fixed;
}
code for text:
#slide1text{
text-decoration-style: bold;
margin: 0px;
font-size: 30px;
text-align: center;
background-image: url("bg.png");
background-size: cover;
background-attachment: fixed;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
color: red;
position: relative;
z-index: 20;
}

Change the colour of a triangle div over time

EDIT: https://codepen.io/TechTime/pen/NjZOGE This is what I want to achieve, happening every few random amount of seconds with random colors.
EDIT2: How would this be done with multiple triangles? I've tried a few things, but it hasn't worked. Help would be appreciated
I was wandering if it were possible to change the color of a triangle div so that every few seconds it would glow a color then go back to normal. Below is my triangle code:
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #e6e6e6;
}
I don't mind if it uses css, javascript or jquery. Just that it works! Thanks in advance.

The accepted solution does not meet all the criteria currently requested by the OP, I believe this one does and those being:
Random colors.
Random time intervals.
Return to initial color.
"Glows".
We use JS to change bottom border color and transition duration to random values. We also respond to the transitionend event so we don't have to use setInterval and know that the transition between colors has fully completed. Every other transition returns to the default gray. Glows by fading between colors instead of the color instantly changing to next color.
I've done this through a function that allows you to assign the element that requires the animation/transition and min/max parameters to control the time interval range between color changes. You'll also notice that I removed the pseudo element and nested a regular DIV as changing pseudo element CSS properties can be tricky.
var colorizer = function ( el, min, max ) {
// #link https://stackoverflow.com/questions/5092808/how-do-i-randomly-generate-html-hex-color-codes-using-javascript
function getHexColor() {
return "#000000".replace( /0/g, function () {
return ( ~~( Math.random() * 16 ) ).toString( 16 );
} );
}
// #link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt( min, max ) {
return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
}
min = undefined == min ? 250 : min;
max = undefined == max ? 1500 : max;
var isDefaultColor = true,
style = el.style,
defaultColor = style.borderBottomColor,
color;
return function ( e ) {
el.offsetWidth; // Reset transition so it can run again.
color = isDefaultColor ? getHexColor() : defaultColor;
isDefaultColor = !isDefaultColor;
style.borderBottomColor = color;
style.transitionDuration = ( getRandomInt( min, max ) ) + 'ms';
};
},
triangle = document.querySelector( '.triangle > div' ),
triangleColorizer = colorizer( triangle, 750, 2000 );
triangle.addEventListener( 'transitionend', triangleColorizer );
// Kick it off!
triangleColorizer();
.triangle {
width: 5%;
height: 0;
padding: 0 0 5% 5%;
overflow: hidden;
}
.triangle > div {
width: 0;
height: 0;
margin-left: -500px;
border-right: 500px solid transparent;
border-left: 500px solid transparent;
border-bottom: 500px solid lightgray;
transition: border-bottom-color 1000ms ease-in-out;
}
<div class="triangle">
<div></div>
</div>

This changes the triangle color into a random color every 2 seconds. On the first function we iterate on a string of letters and return it with as a random hex code. The x function creates a style tag and appends it into the head tag then it toggles the class randColor defined inside the previous statement. Finally the setInterval function is called calling the functions every 2 seconds. The remover function just removes the style tag from the head so we don't keep appending style tags every 2 seconds. It changes color every 2 seconds then goes back to its original color. Hope this helps.
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function remover(){
$(".style-tag").remove();
}
function x(){
var style = $('<style class="style-tag">.randColor:after { border-bottom: 500px solid ' + getRandomColor() +'; }</style>');
$('html > head').append(style);
$(".triangle-up").toggleClass("randColor");
}
$(document).ready(function(){
setInterval(function(){
remover();
x();
}, 2000);
});
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #e6e6e6;
transition: all 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangle-up"></div>

So this is very crude, but the only way I see this possible is using jQuery and having a bunch of css classes. You cannot change the :after css rule via jquery, since it's not part of the dom. But we can do something like this (which I admit is tedious, but I don't quite see another way given your current html).
html
<div class="triangle-up blue">
</div>
jquery
var cachedColorName;
$(document).ready(function() {
setInterval(function(){
var newColor = 'red'; //(here you'd want to randomnly find a color that you have in your css
changeColor(newColor);
}, 3000);});
function changeColor(colorName) {
$('.triangle-up').removeClass(cachedColorName).addClass(colorName);
cachedColorName = colorName;
}
css
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
}
.triangle-up.blue:after {
border-bottom: 500px solid blue;
}
.triangle-up.red:after{
border-bottom: 500px solid red;
}
So you're just toggling different classes here. But this is the only way to make it random like you want (instead of hardcoded red that I did, you can programmatically pick a random color each time from a collection you have that has all the css classes that accompanies it).
Here's it in action:
https://jsfiddle.net/5b7wLv3r/2/
EDIT: if you need help randomly selecting a color, let me know. I can add that code.
EDIT 2: I made this a bit smarter for you
EDIT 3: finding the random color
css
.triangle-up {
z-index: 1;
float: left;
margin: 0.5%;
width: 5%;
height: 0;
padding-left: 5%;
padding-bottom: 5%;
overflow: hidden;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
}
.triangle-up.blue:after {
border-bottom: 500px solid blue;
}
.triangle-up.red:after{
border-bottom: 500px solid red;
}
.triangle-up.purple:after{
border-bottom: 500px solid purple;
}
.triangle-up.yellow:after{
border-bottom: 500px solid yellow;
}
.triangle-up.orange:after{
border-bottom: 500px solid orange;
}
.triangle-up.green:after{
border-bottom: 500px solid green;
}
html
<div class="triangle-up blue">
</div>
js
var cachedColorName;
var colorCollection = ['red', 'blue', 'purple', 'yellow', 'orange', 'green']
$(document).ready(function() {
setInterval(function(){
var newColor = randomItem(colorCollection); //(here you'd want to randomnly find a color that you have in your css
changeColor(newColor);
}, 3000);});
function changeColor(colorName) {
$('.triangle-up').removeClass(cachedColorName);
$('.triangle-up').addClass(colorName);
cachedColorName = colorName;
}
function randomItem(collection) {
return collection[Math.floor(Math.random()*collection.length)];
}
So basically, we have a collection here, which we randomly find a value in it, then pass the color name to our changeColor method. I did see in your question you want to change to random color, then back to default. Let me know if you need me to help you with that as well, basically just a boolean to see if you changed to random before. I would have implemented this in the code, but since you did not try it on your own I want to leave something up to you to figure out if so, just change to default. Otherwise, find the random color.
Working here:
https://jsfiddle.net/5b7wLv3r/3/