Change the content(icon) of a div when clicked - javascript

I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!

You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>

This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>

$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});

Related

Progress bar with steps styling

How to style my progress bar so it looks like the design? I tried to moved the text but they keep staying in the circle. Also not sure how to create the circle within another circle dot with css. It should be non clcikable. Here is the css and html files. Also not sure how to let active/finished steps be in a tick icon.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXXX</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">1</li>
<li class="step">2</li>
<li class="step">3</li>
<li class="step">4</li>
<li class="step">5</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>
<script src="./bar script.js"></script>
</body>
</html>
--------------------- css file
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #fff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
Here is the reference picture
I hope that's what you meant
#progress {
position: relative;
margin-bottom: 30px;
}
#progress-bar {
position: absolute;
background: #4584ff;
height: 5px;
width: 0%;
top: 50%;
left: 0;
}
#progress-text {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
#progress-text::before {
content: "";
background-color: lightgray;
position: absolute;
top: 50%;
left: 0;
height: 5px;
width: 100%;
z-index: -1;
}
#progress-text .step {
border: 3px solid lightgray;
border-radius: 100%;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
background-color: #fff;
font-family: sans-serif;
font-size: 14px;
position: relative;
z-index: 1;
}
#progress-text .step.active {
border-color: #4584ff;
background-color: #4584ff;
color: #4584ff;
}
.btn {
background: lightgray;
border: none;
border-radius: 3px;
padding: 6px 12px;
}
/* added css */
#progress-text .step {
display:flex;
justify-content:center;
}
#progress-text .step label{
margin-top:120%;
font-size:.7rem;
font-weight:bold;
font-color:inherit;
}
#progress-text .step.active::after {
content:"✓";
color:#fff;
z-index:2;
position:absolute;
top:2px;
left:8px;
font-size:12px;
font-weight:bold;
}
#progress-text .step.progress{
border-color:#4584ff;
}
#progress-text .step.progress::after{
content:"•";
transform:scale(3);
position:absolute;
left:10px;
top:1.5px;
color:#4584ff;
}
#progress-text .step.progress label{
color:#4584ff;
}
<div id="progress">
<div id="progress-bar"></div>
<ul id="progress-text">
<li class="step active">
<label>Review</label>
</li>
<li class="step active">
<label>Assignment</label>
</li>
<li class="step progress">
<label>Investigation</label>
</li>
<li class="step">
<label>Handling</label>
</li>
<li class="step">
<label>Resolution</label>
</li>
</ul>
</div>
<button id="progress-prev" class="btn" disabled>Prev</button>
<button id="progress-next" class="btn">Next</button>

Custom tooltip CSS issue with the header

I've created a tooltip using CSS but what I can't achieve is keeping the tooltip head into center. So if you notice it says £30.00 in the tooltip. If you write £300.00 or increase words in the tooltip the head of the tooltips doesn't stay in the center.
Can anyone help?
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 31%;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 32%;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text"><i class="fa fa-bolt search-bolt-icon-map"></i>£30.00</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
The problem is that 31% and 32% are specific, and rely on the current width of the element. Instead, center the triangle with left: 50; transform: translateX(-50%);:
.tooltip-card {
display: inline-block;
position: relative;
border: 1px solid #777777;
background: #FFF;
text-decoration: none;
border-radius: 2px;
padding: 5px 10px;
margin-top: 50px;
margin-bottom: 40px;
}
.tooltip-card-text:before {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.tooltip-card-text:after {
content: '';
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
.search-bolt-icon-map {
color: #02b875;
margin-right: 5px;
}
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30000000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £3000.00
</div>
</div>
<div class="tooltip-card">
<div href="#" class="tooltip-card-text">
<i class="fa fa-bolt search-bolt-icon-map"></i> £30.00
</div>
</div>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">

Hide custom dropdown menu li once input checked

I have a custom dropdown menu in pure html . i have tried everything to get it to close but nothing works. I just want it to close once something was selected / somewhere outside the menu is clicked. it appears as my custom css is preventing any simple solution.
here is the code i have for it and css and current js. i understand that this may be a frequently asked question but im still a novice at javascript and even though i feel as if i've implemented all the solutions i could, its possible i havent done so correctly. thank you
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>
Add this to your Javascript.
Include id to you <h1>
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
And you can even hide the dropdown by $('.dropdown').hide();
$('#dropdown li').click(function() {
$('#result').replaceWith('<h1 id="result">' + $(this).text() + '</h1>');
});
$(document).ready(function() {
// Show hide popover
$(".dropdown").click(function() {
$(this).find("#dropdown").slideDown("fast");
});
});
$(document).on("click", function(event) {
var $trigger = $(".dropdown");
if ($trigger !== event.target && !$trigger.has(event.target).length) {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
margin-left: -25%;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<label class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id = "dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</label>
</div>
You can simply use $(event.target).hasClass() condition to open or hide the dropdown...
Also don't use div inside a label because
Element div not allowed as child of element label in this context.
Stack Snippet
$('#dropdown li').click(function() {
$(".dd-button:first-child").text($(this).text());
});
$(document).on("click", function(event) {
if ($(event.target).hasClass("dd-button")) {
$("#dropdown").slideDown("fast");
} else {
$("#dropdown").slideUp("fast");
}
});
.dropdown {
display: inline-block;
position: relative;
}
.wrapper {
text-align: center;
align-items: center;
align-content: center;
}
.dd-button {
display: inline-block;
border: 1px solid gray;
border-radius: 4px;
padding: 10px 30px 10px 20px;
background-color: #ffffff;
cursor: pointer;
white-space: nowrap;
width: 375px;
}
.dd-button:after {
content: '';
position: absolute;
top: 50%;
left: 90%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid black;
}
.dd-button:hover {
background-color: #eeeeee;
}
.dd-input {
display: none;
}
.dd-menu {
position: relative;
top: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0;
margin: 2px 0 0 0;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
background-color: #ffffff;
list-style-type: none;
width: 375px;
}
.dd-input+.dd-menu {
display: none;
}
.dd-input:checked+.dd-menu {
display: block;
}
.dd-menu li {
padding: 10px 20px;
cursor: pointer;
white-space: nowrap;
}
.dd-menu li:hover {
background-color: #f6f6f6;
}
.dd-menu li a {
display: block;
margin: -10px -20px;
padding: 10px 20px;
}
.dd-menu li.divider {
padding: 0;
border-bottom: 1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="result"></div>
<div class="dropdown" name="dropdown">
<div class="dd-button"> Selection</div>
<input type="checkbox" class="dd-input center-block" id="test">
<ul id="dropdown" class="dd-menu">
<li>plan1 </li>
<li>plan2 </li>
<li>plan3 </li>
<li>Plan4 </li>
</ul>
</div>
</div>

Keep element with hover effect visible only if tooltip is being displayed

I have an anchor element which is hidden and turns visible only by hovering over it. When the user clicks the anchor a custom tool-tip appears with the native link of the anchor. The tool-tip is being displayed until the user clicks the "x" button or somewhere outside it. I want to keep the anchor(with the hover effect) visible as long as the tool-tip is being displayed and when the tool-tip is not displayed the anchor should again hidden and visible only by hovering.
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.anchor i {
visibility: hidden;
}
h1:hover .anchor i {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>
Please see example, seems to do what you need?
Basically i created a css class which i add and remove when the tooltip is shown. Also changed visibility to display.
Relative parts
CSS
.icon-chain-link {
display: none;
}
h1:hover .icon-chain-link {
display: inherit;
}
.icon-show {
display: inherit;
}
Javascript these lines
$(this).find("i").addClass("icon-show");
$(".icon-chain-link").removeClass("icon-show");
$('a.anchor').click(function(event) {
event.stopPropagation();
$(this).find("i").addClass("icon-show");
var thistool = $(this).parent().find('div.tooltip');
$('div.tooltip').not(thistool).hide();
thistool.toggle();
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).parent().hide();
$(".icon-chain-link").removeClass("icon-show");
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('div.tooltip').hide();
$(".icon-chain-link").removeClass("icon-show");
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.icon-chain-link {
display: none;
}
h1:hover .icon-chain-link {
display: inherit;
}
.icon-show {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>
This could be one solution, add a class to the parent element when the tooltip is visible, i hope this can help you :)
$('a.anchor').click(function(event) {
event.stopPropagation();
var thistool = $(this).parent().find('div.tooltip');
$(this).closest('h1').toggleClass('tooltip-open');
thistool.find('input').select();
});
$('.icon-decline').on('click', function() {
$(this).closest('h1').removeClass('tooltip-open');
});
$('div.tooltip').on('click', function(event) {
event.stopPropagation();
});
$(document).on('click', function() {
$('h1').removeClass('tooltip-open');
});
span {
position: relative;
}
.tooltip {
display: none;
position: absolute;
font-size: 15px;
line-height: 20px;
font-weight: normal;
color: #7b7a79;
width: auto;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
border-radius: 6px;
background: #fff;
z-index: 1;
right: -208px;
bottom: -11%;
border: 2px solid #7b7a79;
}
.tooltip-arrow {
top: 50%;
left: -9px;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 7px solid #7b7a79;
border-bottom: 5px solid transparent;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #eff4f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-open .tooltip{
display: block;
}
input {
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
background-color: #eff4f9;
}
.icon-decline {
display: block;
float: right;
position: relative;
top: -4px;
right: 2px;
height: 20px;
cursor: pointer;
}
.anchor i {
visibility: hidden;
}
h1:hover .anchor i, .tooltip-open .anchor i {
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
<input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
</div>
</div>
<a href="#intro" class="anchor">
<i class="icon-chain-link">#</i>
</a>
</span>
</h1>

how to position div in the right side of parent div

Hey I have a small navbar which is split into 2 sections: left section and right section.
The left section contain an arrow icon and the right section should contain 2 icons: envelope & exclamation triangle. I am tried to position the right section on the right corner of the navbar(which is a div). so far no success, I am adding the code below:
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu{
position:relative;
display:block;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
position: absolute;
float:right;
margin:0px;
padding:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
Remove the absolute positioning style element from the id #upper_right_menu
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu{
position:relative;
display:block;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
float:right;
margin:0px;
padding:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
you can use CSS flexible boxes and just remove the position:relative; from your navbar .upper_menu
See this live demo
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
nav{
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu {
position: relative;
display: flex;
justify-content: space-between;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu {
margin: 0px;
padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
You just need to modify:
#upper_right_menu{
position: absolute;
float:right;
margin:0px;
padding:0px;
}
to
#upper_right_menu{
position: absolute;
right: 0;
top: 0;
}
Try to sue display:table; solution
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.arrow:after {
background: gray;
color: #FFF;
content: ">";
display: inline-block;
font: bold 11px "Georgia";
height: 25px;
line-height: 25px;
margin-left: 2px;
text-align: center;
width: 25px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.upper_menu{
position:relative;
display:table;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
display: table-cell;
vertical-align: middle;
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
<div id="upper_left_menu">
</div>
<div id="upper_right_menu">
<i class="exclamation-triangle fa fa-exclamation-triangle"></i>
<i class="envelope fa fa-envelope-o"></i>
</div>
</nav>
This is my solution
#upper_right_menu{
position: absolute;
top: 0px;
right: 0px;
}

Categories