Trying to make a custom scroll bar which allow me to scroll up and down for all my boxes that are populated using .each loop. I was able to get the grey scrollbar to appear but the blue slider does not show. I have listed all my relevant code below.
show.html.erb
<div class="containermessanger">
<div class="scrollBar">
<div class="slider"></div>
</div>
<div class="scroll">
<div class="content">
<% #chatroomall.each do |chatroom|%>
<div class="boxmessenger">
<div class="row">
<div class="col-md-2">
<% if chatroom.messages.empty? %>
No messages in this chatroom
<% else %>
<%= image_tag chatroom.messages.last.user.avatar.url(:thumb), id: "round-image-50" %>
<% end %>
</div>
<div class="col-md-8">
<%= chatroom.name %>
</div>
<div class="col-md-2">
<%= chatroom.messages.last(1).pluck(:created_at) %>
<br>
<li class="btn-group" id="profilenavbig">
<a class="dropdown-toggle" type="button" data-behavior="notifications-link" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="margin-left: 0%;">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<ul class="dropdown-menu">
<li>
<i class="fa fa-trash" aria-hidden="true"></i> Delete
</li>
<li role="separator" class="divider">
</li>
<li>
Report Spam<br>or Abuse
</li>
</ul>
</li>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-11">
<%= chatroom.messages.last(1).pluck(:body) %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
application.scss
.containermessanger{
overflow:hidden;
margin: 0;
height: 500px;
position:relative;
}
.scrollBar{
background: #49505a;
position: absolute;
right: 9px;
width: 5px;
height: 100%;
z-index: 1;
top:0;
}
.slider{
background: #5EAEE3;
width: 20px;
border-radius:10px;
left:-7px;
}
.scroll{
height: 100%;
overflow: hidden;
}
messengerscroll.js
$(document).ready(function(){
$bHeight = $(".content").height();
$sHeight = $('.scrollBar').height();
$sliderHeight = $sHeight/$bHeight*100;
$('.slider').height($sliderHeight+'%');
$('.slider').draggable({
containment:'parent',
axis:'y',
drag:function(){
$pos = $('.slider').position().top;
$ScrollPercent = $pos/$sHeight*100;
$ScrollPx = $ScrollPercent/100*$bHeight;
$('.scroll').scrollTop($ScrollPx);
}
})
});
Chrome Developer - HTML Element Page
Chrome Developer - Console
So with the help #jvillian I was able to hack together a solution that worked. The solution to fixing this problem was two fold.
Step 1.
Switch from:
$bHeight = $(".content").height();
To:
$bHeight = $(".containermessanger").height();
Step 2.
Modify equation from:
$sliderHeight = $sHeight/$bHeight*100;
To:
$sliderHeight = $sHeight/$bHeight*20;
Related
I have coded a series of bootstrap collapsible Divs using the Javascript forEach function in an EJS file. These divs all have a button to expand and collapse the div. Initially, pressing on any button will expand all divs but I have managed to overcome that by indexing the IDs of those divs.
My problem now is I have a separate JS file running jQuery. The jQuery is used to hide and show specific font-awesome icons. When the div is collapsed, it shows an arrow-down icon and hides the arrow-up icon. When a div is expanded, it shows an arrow-up icon and hides the arrow-down icon. My jQuery when activated will apply the changes to all divs but I only want to apply it to the div that I clicked. I briefly recall I could use $(this) but haven't been able to find anything that could help me with it.
Please see my JS and EJS files below.
list.js
$('#collapsibleDivBtn').on('click', () => {
var downHiddenStatus = $(".fa-caret-square-down").is("[hidden]")
var upHiddenStatus=$(".fa-caret-square-up").is("[hidden]")
$(".fa-caret-square-down").toggleClass('hidden')
$(".fa-caret-square-down").attr('hidden',!downHiddenStatus)
$(".fa-caret-square-up").toggleClass('hidden')
$(".fa-caret-square-up").attr('hidden',!upHiddenStatus)
});
list.ejs
<!-- Start of the page -->
<div class="container mt-3">
<!-- Title of the page -->
<h3>List of Racks</h3>
<% data.forEach((rack, index) => { %>
<div class="card mb-3" >
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title"><strong><%= rack['Cabinet ID'] %></strong></h5>
</div>
<div>
<a id="collapsibleDivBtn" href="#collapsibleDiv<%= index %>" class="btn p-0" data-toggle="collapse">
<i class="far fa-caret-square-down text-primary bg-white"></i>
<i hidden class="hidden far fa-caret-square-up text-danger bg-white"></i>
</a>
</div>
</div>
<h6 class="card-subtitle mb-2 text-muted"><%= rack['Abbreviated Address'] %></h6>
<hr>
<div id="collapsibleDiv<%= index %>" class="collapse">
<div class="row mb-2">
<div class="col">
<p class="card-text">User Status: <br />
<span id="siteStatus" class="statusUpdate" ><%= rack['User Status'] %>
</span>
</p>
</div>
<div class="col">
<p class="card-text">Site Status: <br />
<span id="userStatus" class="statusUpdate">Online
</span>
</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<p class="mb-0">After Service Status: <br />
<span id="aft_service_status" class="statusUpdate">Unknown
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</div>
No need for hiding elements. Just use CSS rotate for your icons.
$(".container").on("click", function(){
$(this).find("i").toggleClass("arrowUp");
});
.container{
width: 50px;
height: 50px;
font-size: 50px;
}
.container i{
transition: all 0.4s ease;
}
.arrowUp {
transform: rotateZ(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
</div>
Basically, there are four containers, each containing an image, I added a script that provides the ability to view the full image. But this function only works for the first container.
const img = document.querySelector("img");
const icons = document.querySelector(".icons");
img.onclick = function(){
this.classList.toggle("active");
icons.classList.toggle("active");
}
Html:
<div class="container">
<div class="wrapper">
<a href="#">
<img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
</a>
<div class="title">
Jeffrey
</div>
<div class="place">
Age | City, Country</div>
</div>
<div class="content">
<p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
<div class="btn">
<button>Message</button>
</div>
<div class="btn">
<button>Following</button>
</div>
</div>
</p>
</div>
</div>
<div class="icons">
<li><span class="fab fa-facebook-f"></span></li>
<li><span class="fab fa-twitter"></span></li>
<li><span class="fab fa-instagram"></span></li>
</div>
</div>
Updated HTML (1), some details; I changed the names for each container and wrapper, created different CSS files for each new one and it did not work, here is a part of the new updated html:
<div class="container3">
<div class="wrapper3">
<a href="#">
<img src="https://www.flaticon.com/premium-icon/icons/svg/3007/3007960.svg" alt="">
</a>
<div class="title">
Name</div>
<div class="place">
Age | City, Country</div>
</div>
<div class="content">
<p>
User Interface Designer and <br>front-end developer</p>
<div class="buttons">
<div class="btn">
<button>Message</button>
</div>
<div class="btn">
<button>Following</button>
</div>
</div>
</div>
<div class="icons">
<li><span class="fab fa-facebook-f"></span></li>
<li><span class="fab fa-twitter"></span></li>
<li><span class="fab fa-instagram"></span></li>
</div>
</div>
<script>
const images = [...document.querySelectorAll(".wrapper img, .wrapper1 img, .wrapper2 img, .wrapper3 img")];
images.forEach(img => {
img.addEventListener("click", function() {
images
.filter(img => img !== this)
.forEach(img => img.classList.remove("active"));
this.classList.toggle("active");
</script>
Modify this to your liking. Have fun...
const images = [...document.querySelectorAll(".images-2 img, .images img")];
images.forEach(img => {
img.addEventListener("click", function() {
images
.filter(img => img !== this)
.forEach(img => img.classList.remove("active"));
this.classList.toggle("active");
});
});
.images,
.images-2 {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.images-2 img,
.images img {
box-sizing: border-box;
width: 200px;
height: 100px;
object-fit: cover;
object-position: center;
margin-bottom: 1rem;
transition: all 250ms linear;
cursor: pointer;
}
.images-2 img.active,
.images img.active {
transform: scale(1.2);
box-shadow: 0px 10px 25px -10px #333;
}
<div class="images">
<img src="https://placeimg.com/640/480/nature?1" />
<img src="https://placeimg.com/640/480/nature?2" />
<img src="https://placeimg.com/640/480/nature?3" />
</div>
<div class="images-2">
<img src="https://placeimg.com/640/480/nature?4" />
<img src="https://placeimg.com/640/480/nature?5" />
<img src="https://placeimg.com/640/480/nature?6" />
</div>
You need querySelectorAll and a for loop.
Try:
const img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
img[i].addEventListener("click", function(e){
console.log(e);
});
}
i'm creating a discord bot list but i have a mistake, i want align side-by-side dynamicaly every div,
I have tested a lot of things but none of all work, i'm quite bad at html/css so sorry if it's easy to fix
Current:
[![Current][1]][1]
What i want:
[![whatiwant][2]][2]
<div id="outer">
<br>
<%for(var i = 0; i < bot.db.bots.all().length; i++) {%>
<% var out = bot.db.bots.all()[i] %>
<% var idd = out.ID %>
<div class="bots">
<div class="col-12 col-sm-6 col-md-4">
<div class="card card-lg botcard" style="box-shadow:5px 5px 5px rgba(0,0,0,0.1);border-radius:12px;overflow:hidden;border-color:#2C2F33;width:16rem;float:left;">
<div align="center" class="card-img">
<img src="<%=bot.db.bots.fetch(`${idd}.avatar`)%>" class="card-img-top" alt="Bot Avatar">
<br>
<% if (bot.db.bots.has(`${idd}.certified`) === true) { %>
<br><br><a style="color:limegreen"><img src="https://cdn.glitch.com/cd3da949-70c8-4b46-b845-a66c4ef66826%2Fverifiedbot.png?v=1587933532345" width="30px" height="30px"> Certified</a><br>
<% } %>
<div class="badge badge-primary"><strong style='color: white;'>Votes: </strong><span style='color:whitesmoke;text-transform: none;'><%=bot.db.bots.fetch(`${idd}.votes`)||0%></span></div>
<div style="color:#fff" class="badge badge-default"><%=bot.db.bots.fetch(`${idd}.library`)%></div>
</div>
<div align="center" class="card-block">
<div class="card-title">
<h4><%=bot.db.bots.fetch(`${idd}.name`)%></h4>
<p class="card-text" style="color:#7289DA"><%=bot.db.bots.fetch(`${idd}.short_desc`)%></p>
<hr>
<div class="button_slide slide_right"><h6 align="center">View</div>
<% if (user) { %>
<% if(bot.db.bots.fetch(`${idd}.ownerid`) === user.id) { %>
<div class="button_slide slide_right"> Edit</h6></div>
<% } %>
<% } %>
</div>
</div>
</div>
</div>
<% } %>
</div>
</div>
<!--- CSS code --->
<style>
#outer {
content: "";
display: table;
clear: both;
}
.bots {
float: left;
height: 470px;
width: 23%;
padding: 0 10px;
}
<!--- ... --->
</style>
if you need more information i can reply to you
[1]: https://i.stack.imgur.com/U36w5.png
[2]: https://i.stack.imgur.com/2mkqE.png
I used to use this if I wanted to align something
<div class="row">
I used this link to understand it better : https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
I am learning web development from a course on Udemy and I ran into a problem. I cannot seem to get the footer to behave the way I want it. The thing is that when there is more data, the footer starts overlapping on it, as I have put the position:relative for it in CSS. But if I remove that, if the page is not completely filled (e.g. Login page), the footer does not stay at the bottom of the page, instead jumps up to the lowest parts of the Login form.
I am seeking advice/help on how to make the footer stick to the bottom of the page and for it to stay there and get pushed in case the page fills up with data and reaches the edges of the footer.
Note: I am using EJS for this and have header and footer partials.
The Login form HTML:
<% include ./partials/header %>
<div class="row">
<div class="col-md-12">
<form class="form-signin" action="/login" method="POST">
<h1 class="mb-3 text-center">Please sign in</h1>
<label for="inputUsername" class="sr-only">Username</label>
<input type="text" id="inputUsername" class="form-control" name="username" placeholder="Username" required
autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password"
required>
<div class="mb-3">
Forgot password?
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
<div class="form-signin">
Go back
</div>
</div>
</div>
<% include ./partials/footer %>
The header:
<!DOCTYPE html>
<html>
<head>
<title>Yelp Camp</title>
<meta name="viewwport" content="width-device-width, initial-scale-1">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/united/bootstrap.min.css" rel="stylesheet"
integrity="sha384-udHIRBY7G8ZUr7aO8wRn7wD4bsGGRLR5orCz1FV93MZ7232xhAdjDYEvqeZLx45b" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
<a class="navbar-brand" href="/">YelpCamp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item <%= typeof page !== 'undefined' && page === 'campgrounds' ? 'active' : '' %>">
<a class="nav-link" href="/campgrounds">Home</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<% if(!currentUser){ %>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
<a class="nav-link" href="/register">Sign Up</a>
</li>
<% } else { %>
<li class="nav-item">
<a class="nav-link" href="#">Signed in as
<%= currentUser.username %></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
<% } %>
</ul>
</div>
</nav>
<div>
<% if (error && error.length > 0) { %>
<div class="alert alert-danger" role="alert">
<%= error %>
</div>
<% } %>
<% if (success && success.length > 0) { %>
<div class="alert alert-success" role="alert">
<%= success %>
</div>
<% } %>
</div>
<div class="container">
<div class="page-content">
The footer:
</div> <!-- /.page-content -->
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
© YelpCamp 2018 | Home
</p>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
</body>
</html>
The relevant CSS:
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.page-content {
min-height: 100% !important;
padding: 0 0 -60px !important;
position: relative;
}
footer .footer-push{
height: 60px !important;
position: absolute !important;
clear: both;
}
.container .text-muted{
margin: 20px 0 0;
}
I have tried a good dozen different attempts for sticky-footers, but none of them worked so far. The main problems were:
The page with almost no data (e.g. Login page) had the footer below the bounds of the screen (scroll needed to see it) or right after the login form (not at the bottom of the page where I would like to have it);
The page with enough data to fill the page had the footer overlapping the data in the middle of the page (even before scrolling).
Current problems:
The footer in the login page is not staying at the bottom of the page
Even though the footer's height is set to 60px, it just shrinks to around 19 (zoomed out view)
Codepen link for the Login Page example of the code. (Note: The problem is visible only in Full view)
I would be really grateful if anyone could assist me in finding a solution to this problem.
Thank you.
You aren't defining that the footer must be hugging the bottom of the screen. Try adding this.
.footer {
bottom: 0;
}
If you run into an issue with the other content now being covered by the footer, just add some margin/padding at the bottom of the last div that is of equal height to the footer.
Use position:fixed to define the sticky position and set bottom:0 to define the location where you want it to be.
Try this
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.page-content {
min-height: 100% !important;
padding: 0 0 -60px !important;
position: relative;
}
footer .footer-push{
height: 60px !important;
position: absolute !important;
clear: both;
}
.container .text-muted{
margin: 20px 0 0;
}
footer {position: fixed; bottom:0; text-align:center; width:100%; background:#fff;}
<div class="row">
<div class="col-md-12">
<form class="form-signin" action="/login" method="POST">
<h1 class="mb-3 text-center">Please sign in</h1>
<label for="inputUsername" class="sr-only">Username</label>
<input type="text" id="inputUsername" class="form-control" name="username" placeholder="Username" required
autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password"
required>
<div class="mb-3">
Forgot password?
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
<div class="form-signin">
Go back
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Yelp Camp</title>
<meta name="viewwport" content="width-device-width, initial-scale-1">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/united/bootstrap.min.css" rel="stylesheet"
integrity="sha384-udHIRBY7G8ZUr7aO8wRn7wD4bsGGRLR5orCz1FV93MZ7232xhAdjDYEvqeZLx45b" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
<a class="navbar-brand" href="/">YelpCamp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item <%= typeof page !== 'undefined' && page === 'campgrounds' ? 'active' : '' %>">
<a class="nav-link" href="/campgrounds">Home</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<% if(!currentUser){ %>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
<a class="nav-link" href="/register">Sign Up</a>
</li>
<% } else { %>
<li class="nav-item">
<a class="nav-link" href="#">Signed in as
<%= currentUser.username %></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
<% } %>
</ul>
</div>
</nav>
<div>
<% if (error && error.length > 0) { %>
<div class="alert alert-danger" role="alert">
<%= error %>
</div>
<% } %>
<% if (success && success.length > 0) { %>
<div class="alert alert-success" role="alert">
<%= success %>
</div>
<% } %>
</div>
<div class="container">
<div class="page-content">
</div> <!-- /.page-content -->
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
© YelpCamp 2018 | Home
</p>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
</body>
</html>
I wrote some jQuery so that when the mouse enters an area jQuery removes a display: hide; property.
It works when the page is first loaded, however, when one of the anchor tags is clicked, it in the element that was unhidden, the mouse opens the menu, but doesn't stay open once the mouse is moved over the menu.
How do I fix this?
$(document).ready(function() {
$('#kDropdown, .hidden-dropdown .row .columns').bind('mouseenter', function(e) {
$(".hidden-dropdown").removeClass("hide");
});
$('#kDropdown, .hidden-dropdown .row .columns').bind('mouseleave', function(e) {
$('.hidden-dropdown').addClass("hide");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-dropdown hide">
<div class="row">
<div class="small-6 large-6 columns">
<ul style="position: relative; float: left;">
<li>Motion Sensor</li>
<li>Water Detector</li>
<li>Smart Plug</li>
<li>Door Sensor</li>
<li>Door Sensor Pro</li>
</ul>
<ul style="position: relative; float: right;">
<li>Z-Wave Extender</li>
<li>Siren</li>
<li>Mouser</li>
<li>Water Valve</li>
</ul>
</div>
<!-- Trigger to open-->
<div class="hidden-dropdown hide">
<div class="row">
<div class="small-6 large-6 columns">
<ul style="position: relative; float: left;">
<li>Motion Sensor</li>
<li>Water Detector</li>
<li>Smart Plug</li>
<li>Door Sensor</li>
<li>Door Sensor Pro</li>
</ul>
<ul style="position: relative; float: right;">
<li>Z-Wave Extender</li>
<li>Siren</li>
<li>Mouser</li>
<li>Water Valve</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Make the dropdown menu a child of the navigation link.
Assuming you want the navigation/dropdowns to be like this site, I always use something similar to the following structure (XML):
<navigation>
<link position="relative" height="30px">
<text>About Us</text>
<dropdown position="absolute" top="30px">
<dropdowncontent></dropdowncontent>
</dropdown>
</link>
... more links ...
</navigation>
See how the dropdown is a child of the link? This means that when you attach a mouseenter event to your link, hovering over the dropdown actually counts as hovering over the link. To edit your code (and take out some unnecessary bits):
$(document).ready(function() {
$('.hidden-dropdown').hide();
$('.link').mouseenter(function(){
$(this).children('.hidden-dropdown').show();
});
$('.link').mouseleave(function(){
$(this).children('.hidden-dropdown').hide();
});
});
.link {
position: relative;
height: 20px;
background-color: #ccc;
}
.hidden-dropdown {
position: absolute;
top: 20px;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
<p>Product</p>
<div class="hidden-dropdown">
<div class="row">
<div class="small-6 large-6 columns">
<ul style="position: relative; float: left;">
<li>Motion Sensor</li>
<li>Water Detector</li>
<li>Smart Plug</li>
<li>Door Sensor</li>
<li>Door Sensor Pro</li>
</ul>
<ul style="position: relative; float: right;">
<li>Z-Wave Extender</li>
<li>Siren</li>
<li>Mouser</li>
<li>Water Valve</li>
</ul>
</div>
</div>
</div>
</div>