We Keep Coding

Hiding block from top to bottom

I have a filter , on click I'm hiding it. It has transition property and it goes from BOTTOM to TOP . I have recorded my screen , you can check it here https://pics.rocketfirm.com/jamilya/Screencast_14-48_13-08-2019.mp4 . The problem is I need to hide it from TOP to BOTTOM. Making same thing but opposite way , ending up when filter button shows up .
.filter-block {
background-color: #fff;
padding: 20px 0 1px;
position: relative;
transition: max-height 0.5s ease, padding 0.5s ease 0.3s;
> .container {
transition: opacity 0.5s ease-in 0.2s;
opacity: 1;
}
&--hide {
max-height: 0;
padding: 0;
overflow: hidden;
> .container {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
}
}
<div className={cn('filter-block', {
'filter-block--hide ': !showMainFilter
})}> code inside </div>

$('.shide').click(function(){
$(this).next().slideToggle();
});
.slidediv {
height:300px;
background-color: red;
color: #fff;
padding:20px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shide">Show/hide</div>
<div class="slidediv">
Hi Man. </div>
Look at: http://jsfiddle.net/uniak/249ybqgv/

javascript: how can i get DIV width/height instantly even if changed on hover

i am trying to get a div width and height through Java-script, and i got width and height when page load, but i hover div so it is not showing me width/height update size. i need when div on hover increase width or height also move/increase and show in div size increasing. i also need when i make css animation with/height 50% to 100% so also show me the width/height animation in pixels.
here is Example what i need. when div width/height increase so also increase values in top black area Video Link
$(document).ready(function() {
$("#w-count").html($('.animating-width').width());
$("#h-count").html($('.animating-width').height());
});
html {
background: #292a2b;
color: #FFF;
}
.animating-width {
padding:10px 0;
text-align:center;
background: #e78629;
color: white;
height: 100px;
width: 50%;
-moz-transition: width 2s ease-in-out;
-o-transition: width 2s ease-in-out;
-webkit-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
}
.animating-width:hover {
cursor: pointer;
width: 100%;
}
hr{
border-color:#e78700;
border-bottom:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

You can create interval using setInterval() and get width of element in interval.
setInterval(function(){
$("#w-count").html(
Math.round($('.animating-width').width())
);
$("#h-count").html(
Math.round($('.animating-width').height())
);
}, 10);
$("#w-count").html($('.animating-width').width());
$("#h-count").html($('.animating-width').height());
setInterval(function(){
$("#w-count").html(
Math.round($('.animating-width').width())
);
$("#h-count").html(
Math.round($('.animating-width').height())
);
}, 10);
html {
background: #292a2b;
color: #FFF;
}
.animating-width {
padding:10px 0;
text-align:center;
background: #e78629;
color: white;
height: 100px;
width: 50%;
-moz-transition: width 2s ease-in-out;
-o-transition: width 2s ease-in-out;
-webkit-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
}
.animating-width:hover {
cursor: pointer;
width: 100%;
}
hr{
border-color:#e78700;
border-bottom:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>
Also you can use .animate() instead of CSS transition.
$("#w-count").html($('.animating-width').width());
// store first width of element
var width = $(".animating-width").width();
// mouseover & mouseout event
$(".animating-width").mouseover(function(){
anim('100%');
}).mouseout(function(){
anim(width);
});
// function of animation
function anim(width){
$(".animating-width").stop().animate({
width: width
}, {
duration: 1500,
step: function(){
$("#w-count").html($(this).width());
}
});
}
html {
background: #292a2b;
color: #FFF;
}
.animating-width {
padding:10px 0;
text-align:center;
background: #e78629;
color: white;
height: 100px;
width: 50%;
}
.animating-width:hover {
cursor: pointer;
}
hr{
border-color:#e78700;
border-bottom:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Using setInterval will render the height and width of the div at specific intervals on hover.
$(document).ready(function() {
$("#w-count").html($('.animating-width').width());
$("#h-count").html($('.animating-width').height());
});
$(".animating-width").hover(function(){
setInterval(function(){
$("#w-count").html( Math.trunc($('.animating-width').width()));
$("#h-count").html( Math.trunc($('.animating-width').height()));
}, 100);
});
html {
background: #292a2b;
color: #FFF;
}
.animating-width {
padding:10px 0;
text-align:center;
background: #e78629;
color: white;
height: 100px;
width: 50%;
-moz-transition: width 2s ease-in-out;
-o-transition: width 2s ease-in-out;
-webkit-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
}
.animating-width:hover {
cursor: pointer;
width: 100%;
}
hr{
border-color:#e78700;
border-bottom:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Personally, I wouldn't bind it to a .hover() or .mouseover() method. I'd build it externally and encapsulated to be more flexible.
const [d,resize,opt,ani] = [
$('div'),
()=> d.html(Math.ceil(d.width())+'px'),
{duration:1e3, step:()=> resize()},
n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))
const [d,resize,opt,ani] = [
$('div'),
()=> d.html(Math.ceil(d.width())+'px'),
{duration:1e3, step:()=> resize()},
n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))
resize()
div {
width: 50%;
background: orange;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
fiddle

You can also use transition end event
$(document).ready(function () {
DetectTransitionEnding = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
calcSize = function() {
$("#w-count").html($('.animating-width').width());
$("#h-count").html($('.animating-width').height());
}
calcSize(); // first writting
myBox = $(".animating-width");
myBox.hover(function () {
myBox.addClass('changeSize');
myBox.one(DetectTransitionEnding, calcSize);
});
myBox.mouseout(function () {
myBox.removeClass('changeSize');
myBox.one(DetectTransitionEnding, calcSize);
});
});
html {
background: #292a2b;
color: #FFF;
}
.animating-width {
padding: 10px 0;
text-align: center;
background: #e78629;
color: white;
height: 100px;
width: 50%;
-moz-transition: width 2s ease-in-out;
-o-transition: width 2s ease-in-out;
-webkit-transition: width 2s ease-in-out;
transition: width 2s ease-in-out;
cursor: pointer;
}
.animating-width.changeSize {
width: 100%;
}
hr {
border-color: #e78700;
border-bottom: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%
<hr />
<span id="w-count"></span>
x
<span id="h-count"></span>
</div>

var targetElement = document.getElementById('target');
var height = 0;
var width = 0;
var updatePosition = function(){
height = targetElement.offsetHeight;
width = targetElement.offsetWidth;
};
updatePosition();
targetElement.addEventListener("mouseover", updatePosition);
window.addEventListener("resize", updatePosition);
window.addEventListener("scroll", updatePosition);

jQuery sidebar menu backdrop wont hide click outside

My jQuery sidebar menu show on click got something problem after sidebar hide, the overlay (.backdrop) wont hide.
Here is the fiddle
HTML
<li class="topHeaderMenu leftMenu listMenu" id="open"><div class="listMenuDiv"><i class="glyphicon glyphicon-align-justify"></i></div></li>
<div class="backdrop"></div>
<div class="sidebar">
content
</div>
jQuery
$('#open').click(function()
{
$(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
$('.sidebar').toggleClass('active');
$(".backdrop").toggle();
})
$(document).click(function(e)
{
var sidebar = $(".sidebar, #open");
if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
{
$('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
sidebar.removeClass('active');
}
});
CSS
p {
text-align: center;
}
ul
{
list-style: none;
}
.sidebar
{
position: fixed;
transform: translateX(-120%);
display: inline-block;
height: 100vh;
background: lightblue;
transition: all 0.3s ease-in;
width: 200px;
z-index: 8;
}
.active
{
transform: translateX(0);
}
.backdrop
{
height: 100vh;
width: 100%;
z-index: 7;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
So the problem is, after sidebar hide the .backdrop not hide. What I want is hide when click outside sidebar.

you are removing the 'active' class but not hiding your backdrop div. Please use below code
$('#open').click(function()
{
$(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
$('.sidebar').toggleClass('actives');
$(".backdrop").toggle();
})
$(document).click(function(e)
{
if($(".sidebar.actives").length > 0)
{
var sidebar = $(".sidebar, #open");
if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
{
$('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
sidebar.removeClass('actives');
$(".backdrop").hide();
}
}
});

How: Add text in back-to-top button

thanks for visiting.
I need to know how can I add in my back-to-top button a "text" saying:
"Back to top" or similar.
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
body {
width:100%;
height:1200px;
background-color:#242424;
margin:0;
padding:0;
}
body > div {
width:100%;
height:75px;
background-color:#393939;
text-align:center;
position:fixed;
}
.text {
font-size:40px;
color:white;
line-height:75px;
}
.cd-container {
width: 90%;
max-width: 768px;
margin: 2em auto;
}
.cd-container::after {
content: '';
display: table;
clear: both;
}
.cd-top {
display: inline-block;
height: 40px;
width: 80px;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
opacity: .5;
}
.no-touch .cd-top:hover {
color:#1769ff;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div>
<span class="text"> Scrolldown.</span>
</div>
BackToToP
<!-- Im using Back to Top from here:
https://codyhouse.co/demo/back-to-top/index.html
-->
</body>
</html>
If you see, I add "BackToTop" text but nothing happend.
I tried using different ways but I dont know how.
Thanks.

You must remove text-indent: 100%.
That will push the text back to it's original position.
EDIT:
If you then want the text to be next to the arrow you can do something like this:
.cd-top {
text-indent: 0;
width: auto;
line-height: 40px;
text-decoration: none;
font-family: Arial;
color: #FFF;
padding: 0 50px 0 20px;
background-position: right 20px center;
}
Combined with your code:
.cd-top {
display: inline-block;
height: 40px;
line-height: 40px;
width: auto;
position: fixed;
bottom: 40px;
right: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
font-family: Arial;
text-indent: 0;
text-decoration: none;
color: #FFF;
white-space: nowrap;
background: rgba(231, 142, 46, 0.8) url(https://codyhouse.co/demo/back-to-top/img/cd-top-arrow.svg) no-repeat right 20px center;
padding: 0 50px 0 20px;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}

The css property 'text-indent' is the one giving you the issue. Remove it and you will see the text. A good way to debug this kind of stuff is using developer tools and then inspecting the element.

Unnatural move for navigation menu

I have a problem with my navigation bar because I am using a script to fix its position on top of the site. But base position for navigation bar isn't on top, so I configured it to jump to the top if the user scrolls the website down. This jump to top is really unnatural and I need to make it better than that. I want to make it behave more natural.
My actually scripts:
CSS:
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: fixed; // Here i tried replace it for "relative" but after this change script dont work.
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
.f-nav { // If i change upper css for position relative so i tried used here position: fixed or relative but its still dont work.
top:0;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
Javascript:
$("document").ready(function($){
var nav = $('#menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
This result work but with unnatural move for first scroll than navigation menu jump to top.
I find and tried down script but it destroy my header because i dont know how to configurate for my website and it show my navigation bar only when i scroll up but if i scroll down my website so this navigation bar was hide with down script.
CSS:
body {
margin: 0;
padding: 0;
}
.fxdHdr {
-webkit-transform: translateY(-60px);
-moz-transform: translateY(-60px);
-ms-transform: translateY(-60px);
-o-transform: translateY(-60px);
transform: translateY(-60px);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.28);
}
header {
height: 60px;
background: #d3145a;
position: fixed;
left: 0;
right: 0;
top: 0;
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-ms-transition: -ms-transform 500ms ease;
-o-transition: -o-transformtransform 500ms ease;
transition: transform 500ms ease;
text-align:center;
line-height:60px;
}
Javascript:
var lastScroll = 0;
var scrollToStick = $("header").height();
$(window).on('scroll', function (evt) {
var newScroll = $(window).scrollTop();
$('header').toggleClass('fxdHdr', newScroll > lastScroll && newScroll > scrollToStick);
lastScroll = newScroll;
});
So can you help me make a more natural movement for my navigation bar because jump from base position to top from first scroll is really horrible.
My website:
here

Few changes to be made
Note:
Header height comes to be 160px and you are adding f-nav class after 125px that may create glitch. This will give you smooth transistion.
if ($(this).scrollTop() > 160) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
CSS CHANGES
#menu {
text-align: center;
height: 65px;
width: 100%;
z-index: 9999;
position: relative;
background-color: #0F1113;
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #63842d;
}
make position relative and add position in f-nav class
.f-nav{
position: fixed !important;
}

If you can or want to use jQuery-UI, one possibilty would be the .switchClass()-function:
JQuery
if ($(this).scrollTop() > 50) {
nav.switchClass( "", "f-nav", 300);
} else {
nav.switchClass( "f-nav", "", 200);
}
CSS
.f-nav {
top:0;
}
Demo