how to change height specific div when scroll inside this div - javascript

I need help in JS :
I have page with div class .maincom inside with overlay-y: scroll. I want to scroll this div, and when scrolling I want to change height of div class .maincom from 160 to 350 .
Important: I don't want to change height of this div when I'm scrolling entire site (window). I want to change this height ONLY when I'm scrolling this div class .maincom .
Example code:
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
CSS:
.maincom {
position: fixed;
background-color: white;
width: 100%;
bottom: 0px;
right: 0px;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
Div "maincom" is overlay-y:scroll, with height: 160px . I'm searching for solution: when maincom is scrolled down, then height will be 350px . When scrolled up, height will be back as 160px
This isn't working correctly :
$(".maincom").on("scroll", function () {
var scrollTop = $(".maincom").scrollTop();
if (scrollTop > 100) {
$(".maincom").stop().animate({height: "160px"},200);
}
else {
$(".maincom").stop().animate({height: "350px"},200);
}
});
Any other solutions? :)
First step is completed now. here is the second/last one:
Update: Solution from Lime In The Coconut working fully great. Thanks a lot ! Now I have one more thing:
Example code 2:
<div class="reward">You can win 50 points for that</div>
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li></ul>
<h2>Your comment</h2>
<form>...</form>
</div>
and code for .reward class div:
.reward{
position: fixed;
background-color: white;
width: 100%;
bottom: 140px;
right: -20px;
height: 64px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 20px;
z-index: 5;
background-color: #0077dd;
color: white;
font-size: 10px;
opacity: 0.8;
}
And now: how to set JS - if .maincom is scrolled down (then height of .maincom increased) , bottom of .reward is increased from 140px to 300px .
if You know solution for that too, You are the best ! :)
Thanks !
Peter

try this, i have inserted more list elements in order to see the effects
let maincom = document.querySelector('.maincom')
maincom.addEventListener('scroll',function(){
if(this.scrollTop>0){
this.style.height ="360px"
}
if(this.scrollTop === 0){
this.style.height = '160px'
}
})
.maincom {
position: fixed;
background-color: red;
width: 100%;
height: 160px;
overflow-x: hidden;
overflow-y: scroll;
display: block;
clear: both;
background: white;
margin-bottom: 0px;
z-index: 4;
}
<div class="maincom">
<ul class="nav nav-tabs">
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
<li class="active">
Comments</li>
</ul>
<h2>Your comment</h2>
<form>...</form>
</div>

Related

JQuery Mouse Leave get triggers when leaving child element

I want to have an underline effect(which is in my CSS) on my menu I can easily do this with hover, but my challenge is I have a sub-menu, and I want to retain this underline effect when I hover over the submenu.
My Approach is, when I hover the anchor tag, I would CSS class(set-yellow-highlight) for the underline, and when I leave that list item, I would remove that CSS class, but my problem is even if I just leave the anchor tag it already triggers the mouse leave on li.
Can someone explain this to me?
You can see my menu here:
HTML
<ul class="elementor-nav-menu">
<li class="menu-item">
<span>Menu 1</span>
</li>
<li class="menu-item">
<span>Menu 2</span>
</li>
<li class="menu-item">
<a><span class="set-highlight">Menu 3</span><span class="sub-arrow"><i class=""></i></span></a>
<ul class="sub-menu ">
<li><span>ITEM 1</span></li>
<li><span>ITEM 2</span></li>
<li><span>ITEM #</span></li>
</ul>
</li>
<li class="menu-item">
<a><span class="set-highlight">Menu 4</span><span class="sub-arrow"><i class=""></i></span></a>
<ul class="sub-menu ">
<li><span>ITEM 1</span></li>
<li><span>ITEM 2</span></li>
<li><span>ITEM #</span></li>
</ul>
</li>
</ul>
JQUERY:
<script>
$(document).ready(function() {
$('ul.elementor-nav-menu>li').mouseleave(function(){
$(this).find('.set-highlight').removeClass('set-yellow-higlight');
});
$('.elementor-nav-menu .set-highlight').hover(function(){
$(this).addClass('set-yellow-higlight');
});
});
</script>
CSS
.elementor-nav-menu>li a span:first-child{
position: relative;
z-index: 1;
}
.elementor-nav-menu>li a span:first-child:hover:before{
position: absolute;
content: '';
background: #ffd458;
width: 100%;
height: 10px;
bottom: 2px;
left: 0;
z-index: -1;
}
.elementor-nav-menu .set-yellow-higlight:before{
position: absolute;
content: '';
background: #ffd458;
width: 100%;
height: 10px;
bottom: 2px;
left: 0;
z-index: -1;
}

Sidebar animation keeps playing on load

Have a sidebar on my website but when I load the page it plays the animation of it closing. how would I stop this?
I have a class #sidebar thats the class in its normal state and a class active that makes it move out
#sidebar {
margin-left: -250px;
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 0;
background: #222222;
color: #fff;
transition: 0.3s;
visibility: hidden;
}
#sidebar.active {
width: 250px;
margin-left: 0px;
transition: 0.3s;
z-index: 999;
visibility: visible;
}
Javascript for changing the active class
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
UPDATE
Html code for the sidebar. if it helps I am using mustache js for templating if that is of importance to this
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Admin Panel</h3>
</div>
<ul class="list-unstyled components">
<p>Admin controls</p>
<li>
Menu's
<ul class="collapse list-unstyled" id="menuSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Categories
<ul class="collapse list-unstyled" id="catSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Dish's
<ul class="collapse list-unstyled" id="dishSubmenu">
<li>
Add
</li>
<li>
Edit
</li>
</ul>
</li>
<li>
Staff
<ul class="collapse list-unstyled" id="staffSubmenu">
<li>
Register
</li>
<li>
Delete
</li>
</ul>
</li>
<li>
Site settings
</li>
<li>
<a id="logout" href="/logout" class="btn btn-primary">Sign out</a>
</li>
</ul>
</nav>
Can you try below CSS
#sidebar {
position: absolute;
top: 0;
left: -250px;
bottom: 0;
width: 250px;
height: 100vh;
z-index: 999;
background: #222222;
color: #fff;
transition: 0.3s;
}
#sidebar.active {
left: 0;
}
Plus you have to pass active class to your sidebar also if you want to be active by default
<nav id="sidebar" class="active">

Slick carousel: Slide variable number of elements

I want to use the slick slider to slide throug an variable number of elements.
The reason is, that I don't know how many slides fit in the screen width. So I don't want to set a fix number of slider items.
Here's something I've done with a normal list and an scrolling overflow.
But I need a arrow button on the right. Therefore I would use the slick carousel. Or is there any better solution?
Here's my current code (working example): https://codepen.io/cray_code/pen/WNvXRXP
.slider-subcats-wrapper {
width: 100%;
height: 100px;
padding: 20px 0;
overflow-x: scroll;
overflow-y: hidden;
position: relative;
white-space: nowrap;
position: relative;
}
.slider-subcats-container {position: relative;}
.slider-subcats-container:after {
content: "";
position: absolute;
height: 100px;
width: 5rem;
z-index: 10;
right: -1px;
top: 0;
background: linear-gradient(to right,#fff0 0,#fff 78%,#fff 100%);
}
.slider-subcats {margin: 0; padding: 0; white-space: nowrap}
.slider-subcats li {
display: inline-block;
/* if you need ie7 support */
*display: inline;
zoom: 1
}
.slider-subcats-link {padding: 0.5rem 0.75rem; border: 1px solid #dee2e6; border-radius: 0.25rem; display: inline-block; font-size: 0.875rem; margin-right: 0.25rem; letter-spacing: 0.005rem;}
.slider-subcats li:last-child .slider-subcats-link {margin-right: 2.5rem;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6 offset-3">
<div class="slider-subcats-container">
<div class="slider-subcats-wrapper">
<ul class="slider-subcats">
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Item</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Longer Item</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Item with more space</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Item</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Medium</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">2</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Item again</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Item with text</a>
</li>
<li class="slider-subcats-item">
<a class="slider-subcats-link" href="#">Nav</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You don't have to set the precise number of images you'll have on the slide!
Check out 'Slider Syncing' on Slick Slide's website.
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
slidesToShow indicates how many images will be on the slides and slidesToScroll indicates how many images will pass when you click an arrow.

How can I move an absolute positioned element if out of viewport?

I have many boxes with differents widths. All of them are displayed inline-block so they will be distributed differently as window width changes.
Every box has a big tooltip that will show on hover. These tooltips have a fixed width and height, same for all of the boxes.
These tooltips are position:absolute over the boxes and centered with:
left: 50%;
margin-left: -halfwidth;
My problem is that if the box is close to window left or right they will be partially hidden (I have no problem with top and bottom, they will never reach those edges)
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
any help, hint or comment will be greatly apreciated. Thank You
JSFIDDLE
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
Thats all you need, i detected the offset left position of the div, and added the class to li and a small tweaks in css.
$("li").mouseenter(function(){
var f = $(this).find('.hover-element');
var rightEdge = f.width() + f.offset().left;
var leftEdge = f.offset().left;
var screenWidth = $(window).width();
if(leftEdge < 0){
$(this).addClass("left");
$(this).removeClass("right");
}
else if(rightEdge > screenWidth){
$(this).addClass("right");
$(this).removeClass("left");
}
else{
$(this).removeClass("right lefft");
}
});
$("li").mouseleave(function(){
$(this).removeClass("right lefft");
})
html, body {margin:0;padding:0;height:100%;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li.left .hover-element{
left: 0;
margin-left: 0;
}
li.right .hover-element{
margin-left: 0;
left: auto;
right: 0;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
Have a look:
var windowWidth = document.body.scrollWidth || window.innerWidth;
$('li').on('mouseenter', function(e){
var $hover = $(this).find('.hover-element');
var coords = $hover[0] && $hover[0].getBoundingClientRect();
var rightDistance = 0;
if (coords.left <= 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - coords.left) + 'px'
})
}
rightDistance = windowWidth - coords.left - $hover.width() - 2 * $hover.css('borderWidth').split('px')[0];
if (rightDistance < 0) {
$hover.css({
'left': ($hover.css('left').split('px')[0] - (-rightDistance)) + 'px'
})
}
$('p').html($hover.css('left') + '/' + coords.left)
})
html, body {margin:0;padding:0;height:100%;overflow-x: hidden;}
ul {
width:100%;
text-align:center;
position:relative;
top:50%;
transform:translateY(-50%);
padding:0;
}
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
.hover-element {
position: absolute;
background-color: yellow;
z-index: 9999;
width: 350px;
height: 175px;
left: 50%;
margin-left: -175px;
bottom:25px;
display: none;
border:1px solid #000;
}
li:hover .hover-element {
display: block;
}
.hover-element:hover {
visibility: hidden;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<ul>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
<li>
<div class="hover-element"></div>
</li>
</ul>
The following links are a starting point for your question (if not the actual answer).
Is there any easy way with javascript (better if jquery) to detect when the element is out of the viewport and then change the left property accordingly to prevent it?
How to tell if a DOM element is visible in the current viewport?
Absolute position of an element on the screen using jQuery
I'm going to mention the steps here. If you'd need the code, just ask for it. I am currently on my mobile device, so typing the code would get hard!
Steps
To make things easy to include JS, change the display property using JS. Accomplish this using a mouse event on each of the list items, that changes their respective tooltip's display property. (Here's how to access the respective child)
In the same hover event, do these:
After changing the display, check if the tooltip element is in viewport. You can refer to the link Victor Medeiros provided.
If is not completely in viewport, change the margin-left property to -175px - (the number of pixels it crossed the boundary by). I just realised, if it crosses the viewport, just set the margin-left or margin-right (as applicable, find it by getBoundingClientRect) to 0.
Yep, that's it! I hope that should work, I haven't tried it out. What's the result?
Change
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: relative;
}
Whit
li {
display: inline-block;
background-color: red;
width: 100px;
height: 25px;
margin-right: 10px;
position: static;
}

Disable scrolling when menu is triggered

I'm trying to make a full screen menu, and I managed to have the block of a width: 100%; and min-height: 100%;. Now my page is a bit longer so when I scroll down, I see the full screen menu, does not apply for the rest of the page.
nav block is outside the container
<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-44" class="menu-item current_page_item menu-item-home">Home</li>
<li id="menu-item-18" class="menu-item">UI/UX Designer</li>
<li id="menu-item-21" class="menu-item">Front-End DEV</li>
<li id="menu-item-25" class="menu-item">Contact</li>
</ul>
</div>
<!-- end .menu-wrap -->
CSS:
#site-nav {
display: none;
background: rgba(34, 34, 34, 1);
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
top: 0px;
}
Is there a way to disable scrolling when this menu is triggered? Or some CSS trick?
Note:
As a final result, I want the body to be 100%, only when the menu block is triggered. Any solutions for that?
The simplest way to disable scrolling is to just use overflow: hidden; on the element that should not contain scroll (it can be body tag).
But in this case I propose to set position: fixed; instead of absolute and than your menu will be always fullscreen (but it will not hide scrollbar). It is totally the simplest way, and will not cause problems as body with overflow:hidden; and max-width: 100%; can do.
Set the body,html max-height to 100%, and overflow: hidden;
HTML:
<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-44" class="menu-item current_page_item menu-item-home">Home</li>
<li id="menu-item-18" class="menu-item">UI/UX Designer</li>
<li id="menu-item-21" class="menu-item">Front-End DEV</li>
<li id="menu-item-25" class="menu-item">Contact</li>
</ul>
</div>
<!-- end .menu-wrap -->
CSS:
body,html {
overflow: hidden;
max-height: 100%;
}
#site-nav {
display: none;
background: rgba(34, 34, 34, 1);
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
top: 0px;
}

Categories