I want to smoothly display div from display:none to display:block. I know it can't be done to display:none, so I tried firstly to apply display:block and then perform transition, but this isn't working.
HTML
<input type="text" class="inp">
<div class="div"></div>
CSS
.div {
display: none;
visibility: hidden;
opacity: 0;
height: 100px;
width: 100px;
background: #000;
transition: 2s;
}
.block {
display:block;
}
.div-focused {
visibility: visible;
opacity: 1;
transition: 2s;
}
.one {
background: #ff0;
}
jQuery*
$(document).ready(function() {
$(".inp").on("keyup", function () {
if ( !$(this).val() ) {
$(".div").removeClass("one");
}
else {
$(".div").addClass("block");
$(".div").addClass("div-focused");
$(".div").addClass("one");
}
});
});
Here is the jsfiddle
$(document).ready(function() {
$(".inp").on("keyup", function () {
if ( !$(this).val() ) {
$(".div").removeClass("one");
}
else {
$(".div").addClass("block");
$(".div").addClass("one");
$(".div").animate({opacity: "1"},500);
}
});
});
jsfiddle
Try This
You asked for an hack ? Element.offsetTop is your friend.
When you request this property, the browser is forced to make a reflow of the page, so the class are added and the transitions can trigger, synchronously.
$(document).ready(function() {
$(".inp").on("keyup", function() {
var $div = $('.div');
if (!$(this).val()) {
$div.removeClass("one");
} else {
$div.addClass("block");
$div[0].offsetTop; // here is the magic
$div.addClass("div-focused one");
}
});
});
.div {
display: none;
visibility: hidden;
opacity: 0;
height: 100px;
width: 100px;
background: #000;
transition: 2s;
}
.block {
display: block;
}
.div-focused {
visibility: visible;
opacity: 1;
transition: 2s;
}
.one {
background: #ff0;
}
<input type="text" class="inp">
<div class="div"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
$(document).ready(function() {
$("div").hide();
$(".inp").on("keyup", function () {
if ( $(this).val()=="") {
$("div").fadeOut(3000);
} else {
$("div").fadeIn(4000);
}
});
});
.div {
height: 100px;
width: 100px;
background: red;
transition: 2s;
}
.block {
display:block;
}
.div-focused {
visibility: visible;
opacity: 1;
transition: 2s;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div class="div"></div>
Replace your css and script with the below code.
/* style */
.div {
display: none;
height: 100px;
width: 100px;
background: #000;
}
/* Script */
$(document).ready(function() {
$(".inp").on("keyup", function () {
if ( !$(this).val() ) {
$(".div").css("opacity",0);
}
else {
var item = $(this).val();
var length = item.length;
var opacity = length/10;
$(".div").css("display","block");
$(".div").css("opacity",opacity);
}
});
});
Try dis : https://jsfiddle.net/priyaraj/ggqztzvh/
Related
This question already has answers here:
Swap css class
(4 answers)
Closed 10 months ago.
I want to make these two divs always have opposite skew angles.
But it doesn’t work and when I click on body, then they have the same skewY value.
Does anyone know how to correct this? Thank you!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1 content skew1">
</div>
<div class="div2 content skew2">
</div>
.div1 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.div2 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.skew1 {
transform: skewY(20deg);
transition: transform 1s;
}
.skew2 {
transform: skewY(-20deg);
transition: transform 1s;
}
$(function () {
$("body").on("click", function () {
if ($(".content").hasClass("skew1")) {
$(".content").removeClass("skew1").addClass("skew2");
} else {
$(".content").removeClass("skew2").addClass("skew1");
}
});
});
The problem is that .removeClass and .addClass both operate on ALL the elements in .content. Which means after one click they will have exactly the same classes. Use .toggleClass instead.
Exmaple:
When your App runs $('.content') will return [ <div1 class="skew1">, <div2 class="skew2"> ]
On the first click .removeClass('skew1') will return [ <div1>, <div2 class="skew2"> ]
Then, .addClass('skew2') will return [ <div1 class="skew2">, <div2 class="skew2"> ]
$(function () {
$("body").on("click", function () {
$(".content").toggleClass("skew1 skew2");
});
});
.div1 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.div2 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.skew1 {
transform: skewY(20deg);
transition: transform 1s;
}
.skew2 {
transform: skewY(-20deg);
transition: transform 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1 content skew1">
</div>
<div class="div2 content skew2">
</div>
This should help:
$(function() {
$("body").on("click", function() {
const div1 = $(".div1");
const div2 = $(".div2");
if (div1.hasClass("skew1")) {
div1.removeClass("skew1");
div1.addClass("skew2");
div2.removeClass("skew2");
div2.addClass("skew1");
} else {
div1.removeClass("skew2");
div1.addClass("skew1");
div2.removeClass("skew1");
div2.addClass("skew2");
}
});
});
you can do this using toggleClass
$(function () {
$("body").on("click", function () {
$('.content').toggleClass('skew1').toggleClass('skew2')
});
});
.div1 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.div2 {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
}
.skew1 {
transform: skewY(20deg);
transition: transform 1s;
}
.skew2 {
transform: skewY(-20deg);
transition: transform 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1 content skew1">
</div>
<div class="div2 content skew2">
</div>
I am making a loading animation and now I am having a loading animation circle type below :
var waitingMask = {
show: function() {
var body = $('body');
var static_pos;
var spinner = body.children('.spinner');
if (spinner.length && !spinner.hasClass('spinner-remove')) return null;
!spinner.length && (spinner = $('<div class="spinner' + (static_pos ? '' : ' spinner-absolute') + '"/>').appendTo(body));
animateSpinner(spinner, 'add');
body.addClass("spinner-fade");
},
hide: function() {
var body = $('body');
var complete;
var spinner = body.children('.spinner');
spinner.length && animateSpinner(spinner, 'remove', complete);
body.removeClass("spinner-fade");
}
}
function animateSpinner(el, animation, complete) {
if (el.data('animating')) {
el.removeClass(el.data('animating')).data('animating', null);
el.data('animationTimeout') && clearTimeout(el.data('animationTimeout'));
}
el.addClass('spinner-' + animation).data('animating', 'spinner-' + animation);
el.data('animationTimeout', setTimeout(function() {
animation == 'remove' && el.remove();
complete && complete();
}, parseFloat(el.css('animation-duration')) * 1000));
}
function showLoading() {
return waitingMask.show();
}
function hideLoading() {
return waitingMask.hide();
}
/* The spinner */
#keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner,
.spinner:before {
width: 80px;
height: 80px;
box-sizing: border-box;
}
.spinner:before {
content: '';
display: block;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner .6s linear infinite;
}
.spinner-absolute {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
/* Animations */
.spinner-add,
.spinner-remove {
animation-fill-mode: both;
animation-duration: .4s;
}
.spinner-add {
animation-name: spinner-add;
}
#keyframes spinner-add {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.spinner-remove {
animation-name: spinner-remove;
}
#keyframes spinner-remove {
to {
transform: scale(0);
}
}
.spinner-fade {
content: '';
display: block;
/* position: fixed; */
top: 0;
/* bottom: 0; */
left: 0;
/* right: 0; */
width: 100%;
height: 100%;
background-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
ABC
</h1>
<button onclick="showLoading()">Add Spinner</button>
<button onclick="hideLoading()">Remove Spinner</button>
jsfiddle
But I want to improve my to circle loading to floating bar loading like below:
Anyone can give me a solution for my problem?
Thanks.
https://codepen.io/-dhaval-/pen/yMJKgE
above is the link of where i am trying this...
below is code:
function typeAp(target, toType, stepTime){
var n = 0;
var chars = Array.from(toType);
setInterval(function(){
$(target).append(chars[n]);
n++;
},stepTime);
};
typeAp('.init',"initializing",100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
I want to add blinking "_" after each character so that it looks like the text is typed and it feels like command line.
Suggest any mistakes, or extra things i could add to this code if u like.
This is a pure jQuery solution, but it can also be done by css.
I've added a callback function to your typeAp and it insert the "_" and makes it blink.
This trigger the callback when its done writing.
if (n == chars.length) {
callback(target)
}
function typeAp(target, toType, stepTime, callback) {
var n = 0;
var chars = Array.from(toType);
setInterval(function() {
$(target).append(chars[n]);
n++;
if (n == chars.length) {
callback(target)
}
}, stepTime);
};
typeAp('.init', "initializing", 100, function(target) {
$(target).append("<span class='blink'>_</span>")
function blinker() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blinker, 1000);
});
body {
background-color: #ccc;
}
.container {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
.cmd {
background-color: #111;
border-radius: 5px;
padding: 20px;
width: 600px;
height: 200px;
}
p {
letter-spacing: 2px;
white-space: nowrap;
overflow: hidden;
font-family: courier;
color: lime;
}
::selection {
background: #111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
You could use pseudoelement and simple animation:
.init::after {
content: '_';
display: inline-block;
animation: flash 1s linear infinite;
}
#keyframes flash {
50% {
opacity: 0;
}
}
codepen
Add the cursor to your HTML:
body
.container
.cmd
p.init
span.prompt $Robot~
span.cursor _
p.perc
Style the cursor:
.cursor {
animation: blink 1s linear infinite;
}
#keyframes blink {
50% { opacity: 0; }
}
And change the JS to target the new span:
typeAp('.prompt',"initializing",100);
Add to styles
.init::after {
content: '_';
animation: blink 0.2s linear infinite;
}
#keyframes blink {
0% {
opacity: 0;
}
100% {
opaicty: 1;
}
}
A possible solution with jQuery:
function typeAp(target, toType, stepTime){
$('.dash').hide();
var n = 0;
var chars = Array.from(toType);
var interval = setInterval(function(){
$(target).append(chars[n]);
n++;
if (n >= chars.length) {
clearInterval(interval);
$('.dash').show();
}
},stepTime);
};
setInterval(function() {
$('.dash').toggleClass('hide');
}, 700);
typeAp('.text',"initializing",100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
.dash.hide {
opacity: 0;
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p>
$Robot~ <span class="text"></span><span class="dash">_</span>
</p>
</div>
</div>
</body>
Using CSS and pseudoelement :after
function typeAp(target, toType, stepTime){
target = $(target).addClass('typing');
var n = 0;
var chars = Array.from(toType);
var interval = setInterval(function(){
target.append(chars[n]);
n++;
if (n >= chars.length) {
clearInterval(interval);
target.removeClass('typing');
}
},stepTime);
};
typeAp('.init', "initializing", 100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
.init:not(.typing)::after {
content: '_';
animation: blink 1s ease .5s infinite;
opacity: 0;
}
#keyframes blink {
50% {
opacity: 1;
}
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
In my application I have 2 toggle buttons and 3 panels. Button1 switches between panel 1 and 2. And button2 switches between panel 1 and 3. I could make it work some how by giving display: none; property to div panels. but once it only works once for each button and then it makes all sub divs to display: none;
Have a look at the sample please:
$(function () {
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
div.mainSection > .panel3 > p{
margin-top:80px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">
<div>panel1</div>
<div>panel1</div>
</div>
<div class="panel2" style="display: none;">
<div>panel2</div>
</div>
<div class="panel3" style="display: none;">
<p>Panel3</p>
<div>panel3</div>
<div>panel3</div>
</div>
</div>
<div class="dashboard">
<button class="panel2">button1</button>
<button class="panel3">button2</button>
</div>
</div>
As you can see, each panel has some inner divs. the first time, it shows all inner divs. but once you switch between panels, it will not show inner divs inside. I tried to disappear the panels div only but it seems it does it for every div within that panel.
So any idea to keep make it work so switching between panels will not affect the inner divs?
You need to change your javascript in this way:
$(function () {
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection > div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection > div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
});
The problem is in your selector $('.mainSection div:visible');. This select also the child div and when you try to show the correct panel the child div are hidden. If you use $('.mainSection > div:visible'); you get only the direct child divs.
My web application is made of various panels and a dashboard that has buttons to access each panel. So each button is a toggle between the purposed panel and the main panel.
For example, if we have 3 panels, panel1 is the default one and two buttons to toggle between other two panels the the default one:
button.panel2 should switch between panel1 and panel2
button.panel3 should switch between panel1 and panel3
I have almost achieved it but my code shows both panel2 and panel3 overlapping.
$(function () {
$(".panel2").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
$(".panel3").on("click", function() {
var visibleObj = $('.mainSection div:visible');
var inVisibleObj = $('.mainSection div:hidden');
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
});
});
});
div.app {
margin:50px auto;
width: 400px;
height: 400px;
border-radius:10px;
overflow: hidden;
position: relative;
}
div.app > .blur {
width: 100%;
height: 100%;
background: url(http://goo.gl/0VTd9W);
-webkit-filter: blur(5px);
}
div.mainSection, div.dashboard{
position: absolute;
left: 0px;
text-align:center;
color:#fff;
font-size:20px;
}
div.mainSection{
width:100%;
height:85%;
background:rgba(0,0,0,0.5);
top:0;
}
div.dashboard{
width:100%;
height:15%;
background:rgba(255,0,0,0.5);
bottom:0;
}
div.mainSection > .panel1,
div.mainSection > .panel2,
div.mainSection > .panel3 {
width: 100%;
Height: 100%;
Background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
top: 0px;
}
div.mainSection > .panel3 > p{
margin-top:80px;
}
.grid-button {
background: none;
border: none;
padding: 3px;
width: 100%;
}
.grid {
display: inline-block;
height: 4px;
position: relative;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid:after, .grid:before {
content: '';
position: absolute;
background-color: #FFF;
display: inline-block;
height: 4px;
left: 0;
width: 32px;
transition: all 0.3s ease-in-out;
}
.grid.open {
background-color: #FFF;
}
.grid.open:after {
top: 10px;
}
.grid.open:before {
top: -10px;
}
.grid.close {
background-color: transparent;
transform: scale(0.9);
}
.grid.close:after, .grid.close:before {
top: 0;
transform-origin: 50% 50%;
}
.grid.close:before {
transform: rotate(135deg);
}
.grid.close:after {
transform: rotate(45deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app">
<div class="blur"></div>
<div class="mainSection">
<div class="panel1">Panel1</div>
<div class="panel2" style="display: none;">Panel2</div>
<div class="panel3" style="display: none;"><p>Panel3</p></div>
</div>
<div class="dashboard">
<button class="panel2">button1</button>
<button class="panel3">button2</button>
</div>
</div>
So I want to make button1 responsible to switch between panel 1 and 2. and button2 to switch between panel 1 and 3.
Any idea how to do it?
I think you need something like this. just these jquery code will be useful.
var currentPanel = 1;
$('.panelControlBtn').on("click", function() {
var ID = $(this).attr('data-id');
if (ID != currentPanel) {
$(".panel").fadeOut('fast', function() {
$("#panel" + ID).fadeIn('fast');
});
currentPanel = ID;
}
});
How about this? https://jsfiddle.net/oez0488h/53/
$("button.panel2").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel2").css("display") == "none") {
var inVisibleObj = $("div.panel2")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});
$("button.panel3").on("click", function() {
var visibleObj = $('.mainSection div:visible');
if ($("div.panel3").css("display") == "none") {
var inVisibleObj = $("div.panel3")
}
else {
var inVisibleObj = $("div.panel1")
}
visibleObj.fadeOut(500, function() {
inVisibleObj.fadeIn(500);
})
});