I have few forms that I used to create advertisement for my client website. How do I disable other links until the user fill first form? Please look at my images.
This is the thing I want to achieve.
Here is my html code
<div class="col-md-12">
<div class="col-md-4">
<div class="post-new-ad-link">
Post free ad
</div>
<div class="other-links">
<ul>
<li>
<a href="#">
<i class="fa fa-pencil-square-o fa-lg fa-fw" aria-hidden="true"></i> Basic details</a>
</li>
<li>
<a href="#">
<i class="fa fa-camera fa-lg fa-fw" aria-hidden="true"></i> Images</a>
</li>
<li>
<a href="#">
<i class="fa fa-money fa-lg fa-fw" aria-hidden="true"></i> Price</a>
</li>
<li>
<a href="#">
<i class="fa fa-map-marker fa-lg fa-fw" aria-hidden="true"></i> Location</a>
</li>
<li>
<a href="#">
<i class="fa fa-info-circle fa-lg fa-fw" aria-hidden="true"></i> Contact and status</a>
</li>
</ul>
</div>
</div>
css
.post-new-ad-link {
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
border-bottom: 0;
font-size: 1.7rem;
text-align: center;
background: #53bff7;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.post-new-ad-link a {
transition: all 0.5s ease;
color: #fff;
display: block;
padding: 50px;
}
.other-links {
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
border-top: 0;
border-bottom: 1px solid #e0e0e0;
background: #fff;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.other-links ul {
list-style-type: none;
padding: 0;
}
.other-links li {
font-size: 1.5rem;
}
.other-links li a {
padding: 15px 0 15px 20px;
display: block;
color: #666666;
transition: all 0.5s ease;
}
.other-links li a:hover {
text-decoration: none;
background:#ddd;
}
Fiddle
Any jquery option or other one?
Pointer event :none should do the trick. I have modified your HTML and CSS file to achieve the same. You have to write your own logic under what event(completion), the next li should be enabled. At present i have written a logic to enable the second li on the click of first li. To enable the third li you should click second li....
Make sure to add data-disabled attribute to the <li> tag.
Refer the Fiddle
Related
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>
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>
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>
I want the text to be editable when click on the edit icon. The div is already draggable. It has to be done using javascript. Can anyone help me?
HTML code
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
CSS code
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
.drag-area i {text-align:center; width:100%; padding-top:9px; font-size:16px; color:#ccc;}
contenteditable="true" does the trick, click the text you want to edit
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title" contenteditable="true">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title" contenteditable="true">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title" contenteditable="true">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
$('.fa-pencil').click(function() {
console.log();
$(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', true)
});
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
see the snippet. when you click on pencil icon than you can edit the content of div.
clicking on pencil will set the attr contentEditable to true.
$('.fa-pencil').click(function() {
if($(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable') === "true"){
$(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', false);
} else {
$(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', true);
$(this.parentNode.previousElementSibling.previousElementSibling).focus();
}
});
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
See the updated code snippet, once you again click on pencil icon your changes will get saved.
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span id="title1" class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right" onclick='document.getElementById("title1").setAttribute("contenteditable", "true");'><i class="fa fa-pencil"></i></a>
</li>
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/