We Keep Coding

How do I make the text scroll continously

I have no code to show yet because I have no idea how to do that... my question is: How do I make the text scroll continously i.e., as soon the line 9 is getting up, rather show the blank space, show the contents of line 1 and so on, so there's no empty space. I supposed to do that with JS, I guess but I don't know how to get those offsets or show the contents from top right after the bottom lines is moving up... my current code goes like this:
#jobs_container {
background: transparent;
width: 600px;
height: 300px;
border: 3px solid #e4e4e4;
border-radius: 12px;
border-style: dashed;
padding: 1px;
font-size: 12px;
}
#jobs_header {
display: flex;
justify-content: space-between;
height: 25px;
background-color: #e4e4e4;
border-radius: 12px 12px 0 0;
padding: 1rem;
}
#jobs_header_left {
display: flex;
align-items: center;
}
#jobs_header_left > span {
padding-right: 4px;
cursor: pointer;
color: #0048FF;
}
#jobs_header_center {
text-align: center;
font: 20px Verdana;
color: darkblue;
}
#jobs_header_right {
display: flex;
align-items: center;
}
#jobs_today {
margin-inline: 5px;
cursor: pointer;
color: #0048FF;
}
#jobs_nextButton {
background: transparent;
border: none;
padding: 0px 3px;
cursor: pointer;
}
#jobs_prevButton {
background: transparent;
border: none;
transform: scaleX(-1);
padding: 0px 3px;
cursor: pointer;
}
#jobs_content {
font-style: calibre;
margin-left: 10px;
margin-top: 10px;
position: relative;
overflow-x: scroll;
max-height: 300px;
text-align: justify;
}
#jobs_content #jobs_listOfEvents {
overflow: hidden;
animation-name: jobs_agendaSlide;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
}
#jobs_listOfEvents:hover {
animation-play-state: paused;
}
#keyframes jobs_agendaSlide {
from {
top: 10px;
}
to {
top: -200px;
}
}
<div id="jobs_container">
<div id="jobs_header">
<div id="jobs_header_left">
</div>
<div id="jobs_header_center">
Center text
</div>
<div id="jobs_header_right">
</div>
</div>
<div id="jobs_content">
<div id="jobs_listOfEvents">
line1<hr>
line2<hr>
line3<hr>
line4<hr>
line5<hr>
line6<hr>
line7<hr>
line8<hr>
line9<hr>
</div>
</div>
</div>

Issue with CSS Text box rendering in IE

I have been trying to build a search engine using basic HTML and CSS for my Uni but IE just doesnt seem to like text boxes. Works perfectly fine in Chrome and Edge but for some reason doesnt work well in IE.
Screenshots attached below.
Image in IE
Image in Chrome
Any help would be highly appreciated.
Code for the search box and the search text button:
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
}
/*
.search-box:hover ~ .category-box {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box:hover {
width: 400px;
opacity: 1;
visibility: visible;
}
.category-box {
position: absolute;
align-items: center;
top: 38%;
left: 50%;
text-decoration-color: white;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
width: 0px;
color: white;
visibility: collapse;
opacity: 0;
transition: width 1s, height 1s, transform 1s;
transition: opacity 1s;
}
*/
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
color: red;
}
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>

Can you set 400px in .search-box class should be work

Try to add the height property for the .search-text, code as below:
.search-text {
font-family: VFRegular;
border: 1px red solid;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
line-height: 40px;
width: 0px;
height:58px;
}
The output as below:

CSS not applying to newly added elements through Javascript

I'm adding a new <div> to the page on button click. The problem is that the styling isn't applying to the new div, well to parts of it, mainly the inner divs which is where i need it. I have looked at some questions and tried using escape charaters but nothing seems to work.
The styling works if the div is there when the page loads.
The javascript to add the div:
AddNewSection: function () {
var me = IndexController;
$("#addNew").before('<div id="New' + me.options.count + '" class="block center">\
<div style="width:100%;flex:1;display:inline-flex" >\
<div class="group">\
<input id="Question' + me.options.count + '" type="text" class="inputHighlight">\
<span class="bar"></span>\
<label class="labelHighlight">Question</label>\
</div>\
<div class="group">\
<label>Type</label>\
</div>\
<div class="group">\
<input id="Drop'+ me.options.count + '" value="1" />\
</div>\
</div>\
<div id="TypeDiv'+ me.options.count + '">\
</div>\
</div>');
me.CreateDropDown(me.options.count);
me.options.count++;
},
The div that is hardcoded on the page:
<div id="New1" class="block center">
<div style="width:100%;flex:1;display:inline-flex">
<div class="group">
<input id="Question1" type="text" class="inputHighlight" required>
<span class="bar"></span>
<label class="labelHighlight">Question</label>
</div>
<div class="group">
<label>Type</label>
</div>
<div class="group">
<input id="Drop1" value="1" />
</div>
</div>
<div id="TypeDiv1">
</div>
CSS
<style>
p {
margin: 10px;
}
body {
background: white;
min-height: 100%;
}
#Page {
position: relative;
padding: 5px 10px;
background-color: whitesmoke;
margin: 60px auto;
font: normal 12px/21px sans-serif;
color: #444;
}
#Page.wide {
width: 70%;
}
#Page.narrow {
width: 30%;
}
#Page:before, #Page:after {
content: '';
position: absolute;
left: 0;
box-shadow: 0 0 10px black;
border-radius: 50%;
width: 100%;
height: 20px;
display: none;
}
#Page.top-shadow:before {
display: block;
top: 0px;
clip: rect(-40px auto 0 auto);
}
#Page.bottom-shadow:after {
display: block;
bottom: 0px;
clip: rect(20px auto 40px auto);
}
.AddNew {
width: 90%;
height: 100px;
border: thin solid #ddd;
flex: 1;
text-align: center;
}
.center {
margin: 15px auto 15px;
padding: 10px;
}
.block {
width: 90%;
height: 150px;
border: thin solid #ddd;
flex: 1;
text-align: center;
}
.block.center {
margin: 15px auto 15px;
padding: 10px;
}
.group {
position: relative;
margin-bottom: 45px;
}
.inputHighlight {
font-size: 18px;
padding: 10px 10px 5px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}
.inputHighlight:focus {
outline: none;
}
/* LABEL ======================================= */
.labelHighlight {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
/* active state */
.inputHighlight:focus ~ .labelHighlight, .inputHighlight:valid ~ .labelHighlight {
top: -10px;
font-size: 14px;
color: #5264AE;
}
/* BOTTOM BARS ================================= */
.bar {
position: relative;
display: block;
width: 300px;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #5264AE;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.bar:before {
left: 50%;
}
.bar:after {
right: 50%;
}
/* active state */
.inputHighlight:focus ~ .bar:before, .inputHighlight:focus ~ .bar:after {
width: 50%;
}
The output:
Let me know if you need anything else.
Thank you in davance.

how do i show a div on clicking another div and hide it on clicking that same div?

i have a div with 7 children, on hover an item changes background and text pads left from center. I've done that with CSS.
now i want when the user clicks on an item it shows another div (.wrapper) with JavaScript. if the user click again it hides the particular div.
how can i achieve this logic with JavaScript?
here is my html snippet
<div class="category">
<div class="furniture">Furniture</div>
<div class="tableware">Tableware</div>
<div class="jewellery">Jewellery</div>
<div class="shoes">Shoes</div>
<div class="water_bottles">Water Bottles</div>
<div class="clothes">Clothes</div>
<div class="textiles">Fabric Patterns</div>
</div>
<div class="upload">
<div class="wrapper">
<div class="control"><img src="back.png"></div>
<div class="content"></div>
<div class="content_desc"></div>
<div class="control"><img src="forward.png"></div>
</div>
</div>
CSS code
/*styles individual divs in the category class*/
.category > div:hover {
cursor: pointer;
transform-style: flat;
animation-delay: 0.1s;
display: flex;
border: 1px 1px 1px 1px solid;
background-color: #898488;
color: #7AC4EE;
border-left-color: yellow;
box-sizing: border-box;
}
/*class that i want to display on click*/
.wrapper {
display: none;
flex-wrap: wrap;
justify-content: space-between;
background-color: white;
box-sizing: border-box;
width: 623px;
padding: 0;
align-self: center;
height: 100%;
margin-bottom: auto;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
flex: 1;
background:white;
position: relative;
}
.content {
flex: 4;
height: 92%;
width: 415px;
margin-top: 5px;
margin-bottom: 5px;
background: lightblue;
position: relative;
}
.content_desc {
flex: 2;
height: 22px;
width: 415px;
margin-top: 370px ;
margin-left: 104px;
margin-right: 98.5px;
background-color: white;
border: 0.3px solid;
position: absolute;
}
.control img {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
background: white;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.control img:hover {
cursor: pointer;
background-color: yellow;
transition-delay: 0.2s;
animation: 0.1s ease-in;
}
JavaScript
$(document).ready(function() {
$('.category' > div ).on('click', function(){
$('.wrapper').show();
})
});

I am not sure about the term particular div here. May be you can try with toggle(). You also have syntax error in wrapping the selector:
$(document).ready(function() {
$('.category > div').on('click', function(){
$('.wrapper').toggle();
})
});
/*styles individual divs in the category class*/
.category > div:hover {
cursor: pointer;
transform-style: flat;
animation-delay: 0.1s;
display: flex;
border: 1px 1px 1px 1px solid;
background-color: #898488;
color: #7AC4EE;
border-left-color: yellow;
box-sizing: border-box;
}
/*class that i want to display on click*/
.wrapper {
display: none;
flex-wrap: wrap;
justify-content: space-between;
background-color: white;
box-sizing: border-box;
width: 623px;
padding: 0;
align-self: center;
height: 100%;
margin-bottom: auto;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
flex: 1;
background:white;
position: relative;
}
.content {
flex: 4;
height: 92%;
width: 415px;
margin-top: 5px;
margin-bottom: 5px;
background: lightblue;
position: relative;
}
.content_desc {
flex: 2;
height: 22px;
width: 415px;
margin-top: 370px ;
margin-left: 104px;
margin-right: 98.5px;
background-color: white;
border: 0.3px solid;
position: absolute;
}
.control img {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
background: white;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.control img:hover {
cursor: pointer;
background-color: yellow;
transition-delay: 0.2s;
animation: 0.1s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category">
<div class="furniture">Furniture</div>
<div class="tableware">Tableware</div>
<div class="jewellery">Jewellery</div>
<div class="shoes">Shoes</div>
<div class="water_bottles">Water Bottles</div>
<div class="clothes">Clothes</div>
<div class="textiles">Fabric Patterns</div>
</div>
<div class="upload">
<div class="wrapper">
<div class="control"><img src="back.png"></div>
<div class="content"></div>
<div class="content_desc"></div>
<div class="control"><img src="forward.png"></div>
</div>
</div>

You made a mistake in your css selector, it's not '.category' > div, it should be '.category > div'
$(document).ready(function() {
$('.category > div').on('click', function(){
$('.wrapper').toggle();
})
});

use this code
$(document).ready(function() {
$('.category>div' ).on('click', function(){
$('.wrapper').toggle();
})
});
and add this css to hide div in starting
.wrapper{
display:none
}

Set focus to textinput after transition ended

Is there a way to set the focus - so that typing automatically goes into the text input field - after a transition ended? I want then the user types the keyboard inputto go automatically go into the textinput field. If possible, can one do it with CSS only? Or is JavaScript (no jQuery!) needed?
Something like
document.getElementByClassName('text-input').focus();
doesn't do it.
<div class="wrapper">
<div class="element"></div>
<input class="text-input" type="text" name="search" />
</div>
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
Here is a codepen
https://codepen.io/anon/pen/MqjmQz

I see other solutions, it's better to use transitionend event listener. Just adding one more way to do so. Please have a look.
JS:
var txtInput = document.querySelector('.text-input');
txtInput.addEventListener("transitionend", function(e){
document.getElementById('inputField').focus();
}, false)
https://codepen.io/anon/pen/MqjmQz

Here you go. Pure JS Solution
document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
function mouseOver(){
document.getElementById('inputField').focus();
}
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
<div class="element"></div>
<input class="text-input" id="inputField" type="text" name="search" />
</div>
Edit
You can also call a mouseout function so that whenever the cursor goes out, the field get blur.
document.getElementById("wrapper").onmouseover = function()
{
setTimeout(function(){mouseOver()},600)
};
document.getElementById("wrapper").onmouseleave = function()
{
mouseOut()
};
function mouseOver(){
document.getElementById('inputField').focus();
}
function mouseOut(){
document.getElementById('inputField').blur();
}
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input {
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
<div class="wrapper" id="wrapper">
<div class="element"></div>
<input class="text-input" id="inputField" type="text" name="search" />
</div>

There's no such feature I fear, but as you know how long the transition take (0.6s) you can use a setTimeout.
var wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('mouseover', function() {
setTimeout(function() {
wrapper.classList.add('focus');
document.querySelector('.text-input').focus();
}, 600)
});
Then you need some CSS changes to prevent shrink when mouse goes out.
.wrapper {
height: 40px;
width: 75px;
border-style: solid;
border-width: 2px;
border-radius: 40px;
border-color: red;
display: flex;
align-items: center;
padding-left:30px;
-webkit-transition: width 0.4s ease-in-out;
box-sizing:border-box;
}
.element {
background-color: hotpink;
width: 10px;
height: 10px;
}
.wrapper:hover,
.wrapper.focus {
width: 100%;
}
.text-input {
max-width: 0;
float: left;
padding: 0px;
border: 0px transparent;
-webkit-transition:max-width 0.6s ease-in-out;
transition:max-width 0.6s ease-in-out;
}
.wrapper:hover .text-input,
.wrapper.focus .text-input{
max-width: 50%;
padding: 2px;
border: 1px solid #d4d4d4;
}
https://codepen.io/lucafbb/pen/Eegmrx?editors=1111