stay multi drop down page for given time - javascript

i designed a drop down and that second level drop down page is form now when i want that second level drop down page stay longer , for that i used java script code that is here
<script>
var timer;
$(".parent").on("mouseover", function() {
clearTimeout(timer);
openSubmenu();
}).on("mouseleave", function() {
timer = setTimeout(
closeSubmenu
, 1000);
});
function openSubmenu() {
$(".submenu").addClass("open");
}
function closeSubmenu() {
$(".submenu").removeClass("open");
}
</script>
And here is code for making multiple drop down
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;"> Action <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li><button class="btn btn-default btn-sm remove" ><i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i></button></li>
<div class="divider"></div>
<li class="dropdown-submenu parent">
<i class="fa fa-hand-o-left" aria-hidden="true"style="padding-left:10px;">Edit-File</i>
<ul class="dropdown-menu submenu">
Here is code of form
</ul>
</li>
</ul>
</div>
and this is css i am using , i just want when i am drop down from edit-file then my drop down page should stop for given time
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
right: 100%;
margin-top: -210px;
margin-left: -150px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float:left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.multi-level
{
position:justify;
right:100%;
margin-left:-60px;
}
Please help me .


Check this...
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
right: 100%;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float:left;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.multi-level
{
position:justify;
right:100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" style=" padding-top: 3px; padding-bottom: 3px;">Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>
<a href="index.php?index_edit_id=<?php echo $c_id;?>">
<button class="btn btn-default btn-sm remove" >
<i class="fa fa-pencil-square-o fa-lg" aria-hidden='true' style=" font-weight:10px;"> Edit-Update</i>
</button>
</a>
</li>
<div class="divider"></div>
<li class="dropdown-submenu parent">
<i class="fa fa-hand-o-left parent" aria-hidden="true"style="padding-left:10px;">Edit-File</i>
<ul class="dropdown-menu submenu">
<li>
<form>
<p><input /></p>
<p><input /></p>
<p><input /></p>
</form>
</li>
</ul>
</li>
</ul>
</div>
<script>
var timer;
$(".parent").on("mouseover", function() {
clearTimeout(timer);
openSubmenu();
}).on("mouseleave", function() {
timer = setTimeout(
closeSubmenu
, 1000);
});
function openSubmenu() {
$(".submenu").show();
}
function closeSubmenu() {
$(".submenu").hide();
}
</script>

Related

Stop context menu from getting cut in the right of the page

I Have a context menu that gets cut when I right-click in the right portion of the page as shown here:
The menu is getting cut at the edge of the page, so I want the menu to move to the other side of the cursor like they do in Chrome or other popular apps.
I tried visiting other pages in StackOverflow and trying some demos, but they all say about the same thing shown above.
I also tried commenting on some other posts, seeing if they will answer, but still nothing.
Update
Code:
var menu = document.querySelector('.menu');
function showMenu(x, y) {
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.classList.add('menu-show');
}
function hideMenu() {
menu.classList.remove('menu-show');
}
function onContextMenu(e) {
e.preventDefault();
showMenu(e.pageX, e.pageY);
document.addEventListener('mousedown', onMouseDown, false);
}
function onMouseDown(e) {
hideMenu();
document.removeEventListener('mousedown', onMouseDown);
}
document.addEventListener('contextmenu', onContextMenu, false);
/* Page */
html {
width: 100%;
height: 100%;
background: radial-gradient(circle, #fff 0%, #a6b9c1 100%) no-repeat;
}
.container {
position: absolute;
top: 20%;
left: 0;
width: 100%;
margin: auto;
text-align: center;
}
h1,
h2 {
color: #555;
}
/* Menu */
.menu {
position: absolute;
width: 200px;
padding: 2px;
margin: 0;
border: 1px solid #bbb;
background: #eee;
background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
z-index: 100;
border-radius: 3px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
opacity: 0;
transform: translate(0, 15px) scale(.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.menu-item {
display: block;
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
.menu-btn {
display: block;
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 13px;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 8px;
border-radius: 3px;
}
button.menu-btn {
background: none;
line-height: normal;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
text-align: left;
}
a.menu-btn {
outline: 0 none;
text-decoration: none;
}
.menu-text {
margin-left: 25px;
}
.menu-btn .fa {
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
}
.menu-item:hover>.menu-btn {
color: #fff;
outline: none;
background-color: #2E3940;
background: linear-gradient(to bottom, #5D6D79, #2E3940);
border: 1px solid #2E3940;
}
.menu-item-disabled {
opacity: .5;
pointer-events: none;
}
.menu-item-disabled .menu-btn {
cursor: default;
}
.menu-separator {
display: block;
margin: 7px 5px;
height: 1px;
border-bottom: 1px solid #fff;
background-color: #aaa;
}
.menu-item-submenu::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: #808080;
}
.menu-item-submenu:hover::after {
border-left-color: #fff;
}
.menu .menu {
top: 4px;
left: 99%;
}
.menu-show,
.menu-item:hover>.menu {
opacity: 1;
transform: translate(0, 0) scale(1);
pointer-events: auto;
}
.menu-item:hover>.menu {
transition-delay: 300ms;
}
<ul class="menu">
<li class="menu-item">
<a href="#" class="menu-btn">
<i class="fa fa-folder-open"></i>
<span class="menu-text">Open</span>
</a>
</li>
<li class="menu-item menu-item-disabled">
<button type="button" class="menu-btn">
<span class="menu-text">Open in New Window</span>
</button>
</li>
<li class="menu-separator"></li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-reply"></i>
<span class="menu-text">Reply</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-star"></i>
<span class="menu-text">Favorite</span>
</button>
</li>
<li class="menu-item menu-item-submenu">
<button type="button" class="menu-btn">
<i class="fa fa-users"></i>
<span class="menu-text">Social</span>
</button>
<ul class="menu">
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-comment"></i>
<span class="menu-text">Comment</span>
</button>
</li>
<li class="menu-item menu-item-submenu">
<button type="button" class="menu-btn">
<i class="fa fa-share"></i>
<span class="menu-text">Share</span>
</button>
<ul class="menu">
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-twitter"></i>
<span class="menu-text">Twitter</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-facebook-official"></i>
<span class="menu-text">Facebook</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-google-plus"></i>
<span class="menu-text">Google Plus</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-envelope"></i>
<span class="menu-text">Email</span>
</button>
</li>
</ul>
</li>
</ul>
</li>
<li class="menu-separator"></li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-download"></i>
<span class="menu-text">Save</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-edit"></i>
<span class="menu-text">Rename</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-trash"></i>
<span class="menu-text">Delete</span>
</button>
</li>
</ul>
<div class="container">
<h1>Context Menu</h1>
<h2>(right-click anywhere)</h2>
</div>

This should be possible with a simple comparison. Where you set the position of the context menu (menu.style.left = e.pageX + "px";) you can instead check if it will fit:
var contextMenuWidth = 250;
var contextSubMenuWidth = 250;
var leftPos = ''
if (e.pageX < window.innerWidth - contextMenuWidth) {
leftPos = `${e.pageX}px`;
} else {
leftPos = `${e.pageX - contextMenuWidth}px`;
}
if (e.pageX < window.innerWidth - contextMenuWidth - contextSubMenuWidth) {
menu.classList.remove("sub-left");
} else {
menu.classList.add("sub-left");
}
menu.style.left = leftPos;
This is checking if the cursor position (e.pageX) is within the context menus width (contextMenuWidth) distance of the right side of the screen (window.innerWidth). If so, we set the left position to the current cursor position minus the width.
We also use this if statement to add a class to the menu based on it's position, to modify the position of the sub-menu.
.sub-left .menu-sub-list {
left: -100%;
right: 0;
}
This also uses template literals for your CSS strings, effectively replacing numberVariable + "px" with:
`${numberVariable}px`
since using the + operator for string concatenation is best avoided where possible.
This is applied in this example with a hard coded context menu width, I would suggest using a variable and storing it somewhere relevant:
document.onclick = hideMenu;
document.oncontextmenu = rightClick;
function hideMenu() {
document.getElementById("contextMenu").style.display = "none";
}
function rightClick(e) {
e.preventDefault();
var contextMenuWidth = 250;
var contextSubMenuWidth = 250;
var menu = document.getElementById("contextMenu")
menu.style.display = 'block';
var leftPos = ''
if (e.pageX < window.innerWidth - contextMenuWidth) {
leftPos = `${e.pageX}px`;
} else {
leftPos = `${e.pageX - contextMenuWidth}px`;
}
if (e.pageX < window.innerWidth - contextMenuWidth - contextSubMenuWidth) {
menu.classList.remove("sub-left");
} else {
menu.classList.add("sub-left");
}
menu.style.left = leftPos;
menu.style.top = e.pageY + "px";
}
feather.replace()
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--color-bg-primary: #d0d6df;
--color-bg-primary-offset: #f1f3f7;
--color-bg-secondary: #fff;
--color-text-primary: #3a3c42;
--color-text-primary-offset: #898c94;
--color-orange: #dc9960;
--color-green: #1eb8b1;
--color-purple: #657cc4;
--color-black: var(--color-text-primary);
--color-red: #d92027;
}
body {
font-family: "Inter", sans-serif;
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
}
.menu {
background-color: var(--color-bg-secondary);
border-radius: 10px;
box-shadow: 0 10px 20px #40404015;
}
.menu-list {
margin: 0;
display: block;
width: 100%;
padding: 8px;
}
.menu-list+.menu-list {
border-top: 1px solid #ddd;
}
.menu-sub-list:hover {
display: flex;
}
.menu-sub-list {
display: none;
padding: 8px;
background-color: var(--color-bg-secondary);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(#404040, 0.15);
position: absolute;
left: 100%;
right: 0;
z-index: 100;
width: 100%;
top: 0;
flex-direction: column;
}
.sub-left .menu-sub-list {
left: -100%;
right: 0;
}
.menu-item {
position: relative;
}
.menu-button:hover {
background-color: var(--color-bg-primary-offset);
}
.menu-button:hover+.menu-sub-list {
display: flex;
}
.menu-button:hover svg {
stroke: var(--color-text-primary);
}
.menu-button {
font: inherit;
border: 0;
padding: 8px 8px;
padding-right: 36px;
width: 100%;
border-radius: 8px;
display: flex;
align-items: center;
position: relative;
background-color: var(--color-bg-secondary);
}
.menu-button--delete:hover {
color: var(--color-red);
}
svg:first-of-type {
stroke: var(--color-red);
}
.menu-button--orange svg:first-of-type {
stroke: var(--color-orange);
}
.menu-button--green svg:first-of-type {
stroke: var(--color-green);
}
.menu-button--purple svg:first-of-type {
stroke: var(--color-purple);
}
.menu-button--blacksvg:first-of-type {
stroke: var(--color-black);
}
.menu-button--checked svg:nth-of-type(2) {
stroke: var(--color-purple);
}
.menu-button svg {
width: 20px;
height: 20px;
margin-right: 10px;
stroke: var(--color-text-primary-offset);
}
.menu-button:nth-of-type(2) {
margin-right: 0;
position: absolute;
right: 8px;
}
.container {
position: absolute;
width: 250px;
display: flex;
align-items: center;
justify-content: center;
}
ul {
list-style: none;
}
<div class="context-menu">
<div class="container" id="contextMenu" style="display:none">
<!-- code here -->
<div class="menu">
<ul class="menu-list">
<li class="menu-item"><button class="menu-button"><i
data-feather="corner-up-right"></i>Share</button></li>
<li class="menu-item"><button class="menu-button"><i data-feather="edit-2"></i>Rename</button></li>
</ul>
<ul class="menu-list">
<li class="menu-item"><button class="menu-button menu-button--black"><i data-feather="circle"></i>No
status<i data-feather="chevron-right"></i></button>
<ul class="menu-sub-list">
<li class="menu-item"><button class="menu-button menu-button--orange"><i
data-feather="square"></i>Needs review</button></li>
<li class="menu-item"><button class="menu-button menu-button--purple"><i
data-feather="octagon"></i>In progress</button></li>
<li class="menu-item"><button class="menu-button menu-button--green"><i
data-feather="triangle"></i>Approved</button></li>
<li class="menu-item"><button class="menu-button menu-button--black menu-button--checked"><i
data-feather="circle"></i>No status<i data-feather="check"></i></button></li>
</ul>
</li>
<li class="menu-item"><button class="menu-button"><i data-feather="link"></i>Copy Link
Address</button></li>
<li class="menu-item"><button class="menu-button"><i data-feather="folder-plus"></i>Move to</button>
</li>
<li class="menu-item"><button class="menu-button"><i data-feather="copy"></i>Copy to</button></li>
<li class="menu-item"><button class="menu-button"><i data-feather="lock"></i>Make Private</button>
</li>
<li class="menu-item"><button class="menu-button"><i data-feather="download"></i>Download</button>
</li>
</ul>
<ul class="menu-list">
<li class="menu-item"><button class="menu-button menu-button--delete"><i
data-feather="trash-2"></i>Delete</button></li>
</ul>
</div>
</div>
</div>
<script src="https://unpkg.com/feather-icons"></script>

adding click to open a menu for each anchor tag

I was wondering if someone had done this before. I am trying to get the click event to happen for each .elipsBtn and just show .IntOptions menu for that click. There are multiple .elipsBtn classes on the page. Is there a way to toggle .IntOption for only the clicked anchor tag?
$(document).ready(function() {
$('a, .elipsBtn').click(function(e) {
e.preventDefault();
$(this).closest("ul").find(".IntOptions").toggle();
});
$(".lockTxt").click(function() {
$(this).css("line-height", "35px").text(function(i, v) {
return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
});
$(".IntOptions").hide();
});
});
body {
padding: 60px;
}
.IntOptions {
padding: 4px 15px 4px 15px;
float: left;
position: absolute;
font-family: Helvetica, Arial, "sans-serif";
font-size: 15px;
font-weight: 200!important;
text-decoration: none;
list-style-type: none;
display: none;
margin-top: -30px;
margin-left: 30px;
box-shadow: 0 0 5px #909090;
border-radius: 3px;
text-align: center;
background: #fff;
}
.IntOptions li {
padding: 8px 0 8px 0
}
.IntOptions a:link {
color: #282828;
text-decoration: none
}
.IntOptions a:visited {
color: #282828;
text-decoration: none
}
.IntOptions a:hover {
color: #0B7BBE;
text-decoration: none
}
.elipsBtn {
color: #0B7BBE;
width: 20px;
font-size: 22px;
background-color: #f6f6f6;
padding: 8px 10px 6px 10px;
border-radius: 30px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a href="#">
<div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<ul class="IntOptions">
<a href="#">
<li>Add Integration</li>
</a>
<a href="#">
<li>Delete Integration</li>
</a>
<a href="#" class="lockTxt">
<li>Unlock Parameters</li>
</a>
</ul>
<br>
<a href="#">
<div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<ul class="IntOptions">
<a href="#">
<li>Add Integration</li>
</a>
<a href="#">
<li>Delete Integration</li>
</a>
<a href="#" class="lockTxt">
<li>Unlock Parameters</li>
</a>
</ul>
</body>

You cannot use the closest selector because the 2 elements are in different levels of the DOM. You have to go up one level, and then you can use next like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{padding:60px;}
.IntOptions{
padding:4px 15px 4px 15px;
float: left;
position: absolute;
font-family:Helvetica, Arial, "sans-serif";
font-size:15px;
font-weight:200!important;
text-decoration:none;
list-style-type:none;
display: none;
margin-top:-30px;
margin-left:30px;
box-shadow:0 0 5px #909090;
border-radius:3px;
text-align:center;
background:#fff;
}
.IntOptions li{padding:8px 0 8px 0}
.IntOptions a:link{color:#282828;text-decoration:none}
.IntOptions a:visited{color:#282828;text-decoration:none}
.IntOptions a:hover{color:#0B7BBE;text-decoration:none}
.elipsBtn{color:#0B7BBE;width:20px;font-size:22px;background-color:#f6f6f6;padding:8px 10px 6px 10px;border-radius:30px}
</style>
<script>
$(document).ready(function(){
$('a, .elipsBtn').click(function(e) {
e.preventDefault();
$(this).parent().next("ul").toggle();
});
$(".lockTxt").click(function () {
$(this).css("line-height","35px").text(function(i, v){
return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
});
$(".IntOptions").hide();
});
});
</script>
<div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
<ul class="IntOptions">
<li>Add Integration</li>
<li>Delete Integration</li>
<li>Unlock Parameters</li>
</ul>
<br>
<div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
<ul class="IntOptions">
<li>Add Integration</li>
<li>Delete Integration</li>
<li>Unlock Parameters</li>
</ul>

One solution is to add unique data attribute values to the anchor and their corresponding popup. When a user clicks on an anchor, get its data attribute value and use that to target the corresponding popup. See the snippet below.
$(document).ready(function() {
$('.elipsBtn-anchor').click(function(e) {
e.preventDefault();
// Hide any opened popups
$('.IntOptions').hide();
// Get the data-target value from the anchor
let thisTarget = $(this).attr('data-target');
// Target the corresponding popup using the data-target value from the anchor
$('.IntOptions[data-target=' + thisTarget + ']').toggle();
});
$(".lockTxt").click(function() {
$(this).css("line-height", "35px").text(function(i, v) {
return v === "Unlock Parameter" ? "Lock Parameter" : "Unlock Parameter"
});
$(".IntOptions").hide();
});
});
body {
padding: 60px;
}
.IntOptions {
padding: 4px 15px 4px 15px;
float: left;
position: absolute;
font-family: Helvetica, Arial, "sans-serif";
font-size: 15px;
font-weight: 200!important;
text-decoration: none;
list-style-type: none;
display: none;
margin-top: -30px;
margin-left: 30px;
box-shadow: 0 0 5px #909090;
border-radius: 3px;
text-align: center;
background: #fff;
}
.IntOptions li {
padding: 8px 0 8px 0
}
.IntOptions a:link {
color: #282828;
text-decoration: none
}
.IntOptions a:visited {
color: #282828;
text-decoration: none
}
.IntOptions a:hover {
color: #0B7BBE;
text-decoration: none
}
.elipsBtn {
color: #0B7BBE;
width: 20px;
font-size: 22px;
background-color: #f6f6f6;
padding: 8px 10px 6px 10px;
border-radius: 30px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Add data-target attribute with a unique value to the anchor -->
<a href="#" class="elipsBtn-anchor" data-target="anchor1">
<div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<!-- Add a corresponding data-target attribute to the target element -->
<ul class="IntOptions" data-target="anchor1">
<a href="#">
<li>Add Integration</li>
</a>
<a href="#">
<li>Delete Integration</li>
</a>
<a href="#" class="lockTxt">
<li>Unlock Parameters</li>
</a>
</ul>
<br>
<!-- Add data-target attribute with a unique value to the anchor -->
<a href="#" class="elipsBtn-anchor" data-target="anchor2">
<div class="elipsBtn"><i class="fas fa-ellipsis-h"></i></div>
</a>
<!-- Add a corresponding data-target attribute to the target element -->
<ul class="IntOptions" data-target="anchor2">
<a href="#">
<li>Add Integration</li>
</a>
<a href="#">
<li>Delete Integration</li>
</a>
<a href="#" class="lockTxt">
<li>Unlock Parameters</li>
</a>
</ul>

Accordion menu is not clickable

the menu is showing correctly, but it is not clickable(can't open the item to show the sub items), I'm new to javascript so not sure if the javascript is correct.
I also added a link for the font-awesome style sheet and used it to get the icons for the menu.
is this the best way to do the menu, or can I do it without javascript
$(document).ready(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var dropdownlink = this.el.find(".dropdownlink");
dropdownlink.on(
"click", {
el: this.el,
multiple: this.multiple
},
this.dropdown
);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass("open");
if (!e.data.multiple) {
$el
.find(".submenuItems")
.not($next)
.slideUp()
.parent()
.removeClass("open");
}
};
var accordion = new Accordion($(".accordion-menu"), false);
});
ul {
list-style: none;
}
a {
text-decoration: none;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
background: #fff;
border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;
}
.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}
.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}
.submenuItems {
display: none;
background: #C8E6C9;
}
.submenuItems li {
border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}
.submenuItems a:hover {
background-color: #CDDC39;
color: #fff;
}
<div>
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-user" aria-hidden="true">
</i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Personal1</li>
<li>Personal2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria- hidden="true"></i> Leave
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Leave1</li>
<li>Leave2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="far fa-sun" aria-hidden="true">
</i> Configuration
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Configuration1</li>
<li>Configuration</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-receipt" aria- hidden="true"></i> Report
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Report1</li>
<li>Report2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-align-justify" aria- hidden="true"></i> Attendance
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Attendance1</li>
<li>Attendance2</li>
</ul>
</li>
</ul>

Include jquery in head tag and Keep your script tag at the end of the html to ensure that it runs after html is loaded.
ul {
list-style: none;
}
a {
text-decoration: none;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
background: #fff;
border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;
}
.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}
.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}
.submenuItems {
display: none;
background: #C8E6C9;
}
.submenuItems li {
border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}
.submenuItems a:hover {
background-color: #CDDC39;
color: #fff;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-user" aria-hidden="true">
</i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Personal1</li>
<li>Personal2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria-
hidden="true"></i> Leave
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Leave1</li>
<li>Leave2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="far fa-sun" aria-hidden="true">
</i> Configuration
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Configuration1</li>
<li>Configuration</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-receipt" aria-
hidden="true"></i> Report
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Report1</li>
<li>Report2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-align-justify" aria-
hidden="true"></i> Attendance
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Attendance1</li>
<li>Attendance2</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var Accordion = function (el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var dropdownlink = this.el.find(".dropdownlink");
dropdownlink.on(
"click",
{ el: this.el, multiple: this.multiple },
this.dropdown
);
};
Accordion.prototype.dropdown = function (e) {
var $el = e.data.el,
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass("open");
if (!e.data.multiple) {
$el
.find(".submenuItems")
.not($next)
.slideUp()
.parent()
.removeClass("open");
}
};
var accordion = new Accordion($(".accordion-menu"), false);
});
</script>

Wizard form validation

I have a wizard form made in bootstrap, i need to validate each step of the form wizard, how it is now is possible to go to the next step with empty inputs. And since there is quite a issue regarding bots, etc, what is the best way of validating each step on a form?
Here is the snippet:
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i{
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
#media( max-width : 585px ) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs > li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>

A simple but effective method for stopping a bot is called a honey spam pot. To implement this you can add an extra input at the end of your form and hide it within the css. Using PHP (advised for form validation!) you can check if that field is empty or not. If it is not empty then you know a bot has entered data into the input because a bot will try and avoid any validation by filling all the fields in. Validation in JavaScript or jQuery is more of a feature than a MUST use as it can be turned off by the user in their browser.

Why does the social icon does not show up

body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
float: left;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
ul.social-icons li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
ul.social-icons li a.facebook {
background-position: 0px 0px;
}
ul.social-icons li a.facebook:hover {
background-position: 0px -50px;
}
ul.social-icons li a.instagram {
background-position: -150px 0px;
}
ul.social-icons li a.instagram:hover {
background-position: -150px -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="connect-social">
<li></li>
<li></li>
</li>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
I have added the code to show social icons in the nav bar, but the image for icons is not shown, if hovered on the area it shows that it is clickable but image does not loads. Any help would be appreciated

It appears that you don't have anything inside of the href tags for your media links. In this codepen link, specifically on line 150 I added in an example image for the linkedin icon.
<li><img src="http://static2.intelimedia.pl/sub/Narysuj-sobie-Gonka-w17896.jpg" style="height:30px;"></li>

change some CSS & HTML
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="social"></li>
<li class="social"></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
CSS
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
li.social a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
li.social a.facebook {
background-position: 0px 0px;
}
li.social a.facebook:hover {
background-position: 0px -50px;
}
li.social a.instagram {
background-position: -150px 0px;
}
li.social a.instagram:hover {
background-position: -150px -50px;
}
https://jsfiddle.net/7pycxo8k/3/

Categories

Resources