Develop Reference

Match div to window size with css or javascript

I have an element which drops down when I toggle my menu bars.
I can make the element as large or as small as I like but can't make it fit to screen so it doesn't scroll and no page shows underneath. It's a WordPress site and I started off with an an i class fa-bars. It wasn't possible to animate font awesome so I replaced it with this.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1"
onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
<script>
function myFunction(x) {
x.classList.toggle('change');
}
</script>
</div>
This worked to toggle the menu amd make it drop but it didn't cover the screen. The element controlling the dropdown area was too small so I enlarged it by increasing height, like so:
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
This made it too high but making it any lower would show the page underneath.
Is there a way I can modify my existing javascript or css to make it fit to screen exactly, responsively with no scroll and no page showing underneath?
It's located in my header.php so it would go there I'm assuming, if there's a way to modify what i already have. If not, what's a good way to approach this?
here on mobile
Html dropdown.
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>
I've tried applying min-height to element collapse max- height and 100% None worked.
Here's a pen https://codepen.io/adsler/pen/bGVXNVM

You can used position: fixed to size the element with respect to the frame:
.your-selector {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
This will make it take up the entire window. It's not clear if you're wanting it to cover the window in all dimensions, but you can choose where the top/bottom/left/right anchor selectively.
If you're also wanting to make the body (or if it's not the body some other scrollable element) non-scrollable, set the overflow style to hidden.

How to undo javascript function

I have a function like so which toggles my dropdown menu.
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<a id="mobile-nav" href="#">
<div class="container1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>.
</div>
</a>
</div>
<script>
function myFunction(x) {
x.classList.toggle('change');
document.body.style.overflow ='hidden'
}
</script>
The last part of it
document.body.style.overflow = 'hidden'
Keeps the page from overflowing at the top when the dropdown menu is open. The problem is that when I click on my menu bars, whilst the overflow disappears, clicking on the bars again reveals the page but locks it due to the overflow being hidden.
I'd like to undo
document.body.style.overflow = 'hidden'
When the menu is closed and the closest I've got to understanding it is the function doBack. Can I somehow add doBack to my existing function?
Mobile page here
It's a WordPress site and the javascript above toggles the dropdown by pressing on the bars. In order to extend the dropdown, I made the class collapse bigger, like so.
#media (max-width: 768px) {
.collapse {
position: absolute;
height: 775px;
background-color: white;
z-index: 99999 !important;
top: 75px;
left: -50px;
line-height: 10px;
}
}
HTML:
<div class="module-group right">
<div class="module left">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id="menu" class="menu">
<li id="menu-item-15050" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-15050 dropdown">
<a title="Contact" href="url">Contact
<ul role="menu" class="dropdow n-menu">
</ul>
</a>
</li>
</ul>
</div>
</div>
</div>

You can eliminate the style attribute by using:
document.body.style.overflow = null

You can simply add a new CSS class:
.body-overflow {
overflow: hidden;
}
and in your javascript function add another .classList.toggle() but this time on the body:
function myFunction(x) {
x.classList.toggle('change');
document.body.classList.toggle('body-overflow');
}

Auto collapse sidebar menu list when lost focus

I just want to ask :
how to make the dropdown-menu collpase when the dropdown menu is active?
When the mouse hovers to the sidebar, the active dropdown menu expanded again?
i think i just wondering using hover but it doesnt work when i try it, so i hope someone can help me to solve this?
Simple Concept I Just want :
Mouse:hover to sidebar-icon/burger is clicked => sidebar-expanded => menu list that have:submenu clicked => dropdown-menu displayed => mouseOut from sidebar => icon is-collapsed
Mouse:hover to sidebar-icon again / sidebar:state(active) => dropdown menu is already expanded
well i dont know that you can understand my question or something.. but i hope u can make this auto collapse menu
$(document).ready(function() {
// Sidebar links
$('.sidebar .side-list li a').on('click', function() {
const $this = $(this);
if ($this.parent().hasClass('buka')) {
$this
.parent()
.children('.dropdown-menu')
.slideUp(200, () => {
$this.parent().removeClass('buka');
});
} else {
$this
.parent()
.parent()
.children('li.buka')
.children('.dropdown-menu')
.slideUp(200);
$this
.parent()
.parent()
.children('li.buka')
.children('a')
.removeClass('buka');
$this
.parent()
.parent()
.children('li.buka')
.removeClass('buka');
$this
.parent()
.children('.dropdown-menu')
.slideDown(200, () => {
$this.parent().addClass('buka');
});
}
});
// ٍSidebar Toggle
$('.burger').on('click', e => {
$('.konten').toggleClass('k-kebuka');
$('.sidebar').toggleClass('s-kebuka');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar bg-cerah">
<div class="sidebar-dalem">
<div class="side-konten">
<ul class="side-list">
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">ICON</span>
<span class="side-judul">MENU</span>
<span class="panah">[>]</span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #2</span>
<span class="panah">[>] ></span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item">
<a class="side-link" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="konten" class="konten">
<div class="konten-navbar sticky-top">
<ul class="navbar-kiri">
<li>
<a id="burger" href="javascript:void(0)" class="burger">BURGER ICO</a>
</li>
<li>
SEARCH ICO
</li>
</ul>
</div>
</div>

In pure CSS, .menu:hover definitely works, but you have to build the entire menu inside of the element that has the :hover pseudo class and also either touching or overlapping:
.popup {
position: relative;
}
button {
width: 8em;
height: 40px;
}
ul {
position: absolute;
top: 36px;
left: 8px;
background: #eee;
border: 1px solid black;
display: none;
margin: 0;
width: 14em;
min-height: 8em;
padding: 0.5em;
list-style: none;
}
.popup:hover ul {
display: block;
}
<div>
<div class="popup"><button>Menu</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
Certainly, you'd need to style everything properly.
I also seem to remember that JQuery has OnMouseEnter and OnMouseLeave events that work kind of like :hover too.

Hiding sidebar and dropdown menu

I want to hide drop down menu and sidebar when you click outside each "divs". I added #media rule and also have a button for each div the will show and hide each divs. I used javascript to hide and show the two divs. The problem now is when the resolution of the browser has a min-height of 992px the sidebar will hide when I click a slide toggle button the sidebar will show. I want to know how can I show and hide the divs.
HTML Code:
<div class="t-page-sidebar">
<div class="t-sidebar">
<a class="t-sidebar-brand" href="dashboard.php">
<img class="t-sidebar-brand-img" src="stylesheet/images/logo_2.png" alt="logo">
Dashboard
</a>
<h4 class="t-sidebar-title">Navigation</h4>
<ul class="t-sidebar-list">
<li class="t-sidebar-item">
<a class="t-sidebar-link is-active" href="dashboard.php">
<i class="fa fa-home"></i>
Dashboard
</a>
</li>
<li class="t-sidebar-item">
<a class="t-sidebar-link" href="store-locator.php">
<i class="fa fa-map"></i>
Store Locator
</a>
</li>
<li class="t-sidebar-item">
<a class="t-sidebar-link" href="distance-matrix.php">
<i class="fa fa-exchange"></i>
Distance Matrix
</a>
</li>
<li class="t-sidebar-item">
<a class="t-sidebar-link" href="gallery.php">
<i class="fa fa-camera-retro"></i>
Gallery
</a>
</li>
</ul>
</div>
</div>
<!-- MAIN BODY -->
<main class="t-page-content">
<!-- HEADER -->
<header class="t-navbar">
<!-- TOGGLE BUTTON -->
<button class="t-sidebar-toggle" id="sidebar-toggle">
<span class="t-sidebar-bar"></span>
<span class="t-sidebar-bar"></span>
<span class="t-sidebar-bar"></span>
</button>
<!-- HEADER CONTENT -->
<h2 class="t-navbar-title">Dashboard</h2>
<div class="t-dropdown">
<div class="t-avatar">
<img class="t-avatar-img" src="stylesheet/images/default_pic.png" alt="User's Profile Image" />
</div>
<div class="t-dropdown-menu">
<a class="t-dropdown-item" href="account-settings.php">Account Settings</a>
<a class="t-dropdown-item" href="logout.php?logout">Logout</a>
</div>
</div>
</header>
</main>
CSS Code:
.t-page-sidebar {
position: fixed;
top: 0;
bottom: 0;
width: 250px;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s,-webkit-transform .2s;
z-index: 300;
margin-left: -250px;
transition: all .2s ease-in-out;
}
#media all and (min-width: 992px){
.container {
max-width: 960px;
}
.t-page-sidebar {
margin-left: 0;
}
.t-page-content {
margin-left: 250px;
}
.t-sidebar-toggle {
display: none;
}
}
Javascript Code:
$(document).ready(function() {
$(".t-dropdown").click(function() {
$(".t-dropdown-menu").toggleClass("show");
});
$(document).on("click", ".t-sidebar-toggle", function(event){
$(".t-page-sidebar").css("margin-left","0");
});
});

On click of dashboard link, you can use toggleClass jQuery to append new class name and set the display property in CSS for the same.

Lawrence Agulto as Paurnima Partole said, you can use the toggleClass jQuery to resolve the problem.
$(".t-page-sidebar").toggleClass("open-menu");
Since the button is covered by the menu, I suggest you add in menu container another button to close the menu.
See if this resolve the problem - https://codepen.io/beduardo/pen/pLPmWO

Bootstrap 4 scroll to div

Im using Bootstrap 4 and for some reason the scroll to div function is only working on mobile phone/smaller screen sizes.
Javascript code:
<script>
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
}); </script>
Navbar link:
<li class="nav-item">
<a class="nav-link" href="#about-us"><button type="button" class="btn btn-green">About</button></a>
</li>
Div:
<div class="about" id="about-us">
<div class="container">
test
</div>
</div>

navbar-brand class is overlapping the navbar-nav.So add z-index to the navbar-nav in your html page i.e
<ul class="navbar-nav ml-auto" style="z-index:1;">

You can add following to your css file:
.navbar-brand.mx-auto {
width: 216px;
right: 0;
left: 0;
}