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>
Related
I'm trying to add a text search field that will filter content. The code I have, however, will filter out literally anything that doesn't match, including parts of the <div> I want to include.
In other words, I want to have a text search that will search throughout the headers/titles of a series of <div>'s and then return the entire content of that <div> based on the title.
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Check out my fiddle: https://codepen.io/anon/pen/zQVreM
In the fiddle, try searching for "header" to see what happens. What I'd like to happen, is that the entire card is shown.
You don't need to use both toggle and filter.
You could hide all of the cards, filter out the ones that match, and show those only.
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
});
html {
scroll-behavior: smooth;
}
.now-content ul li:before {
background-image: none;
}
.pageFooter {
width: 100%;
background-color: #000;
}
.ddPageWrap {
min-height: 750px;
}
.grpContainer {
width: 95%;
margin: 20px auto 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.ddCard {
display: flex;
width: 100%;
box-sizing: border-box;
flex-direction: column;
flex: 0 0 100%;
margin: 1rem auto;
border: 1px solid #323232;
}
.ddCardHeader {
display: flex;
flex-direction: column;
margin-bottom: auto;
align-self: flex-start;
padding: .5em;
}
.ddCardFooter {
margin-top: auto;
display: block;
padding: .5em;
border-top: .5px solid #ccc;
}
.ddCardFooter p {
color: #626262;
font-size: 15px;
}
.fa-ul {
padding-left: 0 !important;
margin-left: 1em !important;
}
.fa-ul li {
color: #626262 !important;
font-size: 15px !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.ddCardContent {
padding: .5em;
}
.ddMoreInfo {
display: inline-block;
padding: 10px;
background-color: #0052e7;
margin-bottom: 10px;
border-radius: 5%;
border: 1px solid #0052e7;
cursor: pointer;
}
.ddMoreInfo a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.ddMoreInfo:hover {
background-color: #fff;
transition: .1s ease;
border: 1px solid #0052e7;
}
.ddMoreInfo:hover a {
color: #0052e7;
}
.ddBtn {
display: inline-block;
border: none;
outline: none;
padding: 12px 16px;
margin: 0.4em auto;
background-color: #f1f1f1;
cursor: pointer;
transition: all 0.2s;
}
.ddBtn:hover {
background-color: #ddd;
}
.ddBtn.active {
background-color: #666;
color: white;
}
#media all and (max-width: 800px) {
.ddBtn {
display: block;
margin: 0.4em auto;
width: 100%;
}
}
.ddToolTip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #0052e7;
cursor: pointer;
width: auto;
}
.ddToolTip .ddToolTipText {
visibility: hidden;
min-width: 240px;
background-color: black;
color: #fff;
border-radius: 5%;
left: 50%;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
line-height: 1.2;
font-size: 13px;
}
.ddToolTip .ddToolTipText::after {
content: "";
position: absolute;
top: 100%;
left: 30%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ddToolTip:hover .ddToolTipText {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
<div class="ddCard">
<div class="ddCardHeader">
<h3>Other Card</h3>
</div>
<div class="ddCardContent">
<p>More stuff</p>
<div class="ddMoreInfo">
Other info
</div>
<div class="ddCardFooter">
<p>Footer</p>
</div>
</div>
</div>
</div>
Here is an updated version of your script:
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer .ddCard").each(function() {
$(this).toggle(this.innerText.toLowerCase().indexOf(value) > -1)
});
});
});
It uses each instead of filter
It looks in the whole card for a matching text
It uses the innerText property to look for a match
I have a hamburger menu icon displayed and want it to have a drop down menu, shown here:
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="about" href="#about">about</a></li>
<li><a id="work" href="#work">work</a></li>
<li><a id="contact" href="#contact">contact</a></li>
</ul>
</div>
This menu's display is set to "none". Below is my jQuery I am using to display the nav list. I want it to appear when clicked and disappear when clicked again (toggle). Why does this not work? What adjustments need to be made? jsfiddle here
$(document).ready(function() {
var n = $("#nav-list");
$("#nav-icon").click(function() {
if (n.css("display, none")) {
n.css("display, block");
} else {
n.css("display, none");
}
});
});
I would use :hidden to check if the menu is hidden/visible, then you need to separate the CSS in $.css() with quotes.
$(document).ready(function() {
var $n = $("#nav-list");
$("#nav-icon").click(function() {
if ($n.is(':hidden')) {
$n.css("display","block");
} else {
$n.css("display","none");
}
});
});
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display: none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>
The problem is with the typos you have in your code (https://codepen.io/anon/pen/rwyNqM):
$(document).ready(function() {
var n = $("#nav-list");
$("#nav-icon").click(function() {
// This is how we check the current display value.
if (n.css("display") === "none") {
// First parameter and second parameter should be in quotes.
n.css("display", "block");
} else {
n.css("display", "none");
}
});
});
Play with toggle class more easy and simply can apply some effect just by CSS. Check out this 2 option:
with pure javascript:
document.getElementById("nav-icon").onclick = function(){
this.classList.toggle('show-nav-list');
}
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display:none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
.show-nav-list #nav-list {
display:block !important;
}
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list" >
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>
or With Jquery:
$(function(){
$('#nav-icon').click(function(){
$("#nav-list").toggleClass("show-nav-list")
})
})
/* Check last line of this CSS, i add .show-nav-list class CSS*/
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display: none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
.show-nav-list {
display:block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>
Your code is good u have few syntax mistakes
$(document).ready(function() {
var n = $("#nav-list");
$("#nav-icon").click(function() {
if (n.css("display") == "none") {
n.css("display","block");
} else {
n.css("display","none");
}
/*
* n.slideToggle();
* n.toggle();
* n.fadeToggle();
*
*/
});
});
#nav-icon {
display: block;
padding: 1.3em;
position: absolute;
top: 1.6em;
right: .8em;
cursor: pointer;
}
#hamburger-nav,
#hamburger-nav::before,
#hamburger-nav::after {
content: "";
display: block;
width: 2.3em;
height: 3px;
background: #000;
}
#hamburger-nav::after {
transform: translateY(-.75em);
}
#hamburger-nav::before {
transform: translateY(.6em);
}
#nav-list {
display: none;
list-style: none;
position: absolute;
top: 4.2em;
left: -6em;
width: 12em;
height: 10em;
z-index: 5;
background: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#nav-list li {
text-align: center;
position: relative;
right: 2.8em;
padding: .95em;
width: 12em;
font-weight: 600;
border-top: 1px solid #ccc;
}
#nav-list a {
color: #000;
text-decoration: none;
}
#top:hover {
border-bottom: 2px solid #0f0;
}
#middle:hover {
border-bottom: 2px solid #f00;
}
#botttom:hover {
border-bottom: 2px solid #00f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-icon">
<div id="hamburger-nav"></div>
<ul id="nav-list">
<li><a id="top" href="#about">about</a></li>
<li><a id="middle" href="#work">work</a></li>
<li><a id="bottom" href="#contact">contact</a></li>
</ul>
</div>
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>
I'm trying to use a button to remove the class .computer-off and add .computer-on and vice versa when clicked again. I've tried quite a few approaches, but to no avail. Here's one approach:
HTML:
<div id="computer-screen" class="computer-off">
<button onclick="computerPower()" class="power-button">Power</button>
</div>
JS:
function computerPower() {
if ( $("#computer-screen").hasClass('computer-off') ) {
document.getElementById('computer-screen').removeClass('computer-off').addClass('computer-on');
} else {
document.getElementById("computer-screen").removeClass('computer-on').addClass('computer-off');
}
};
I'd suggest, given that you appear to (be trying to) use jQuery:
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
$('#power').on('click', function() {
$('#computer-screen').toggleClass('computer-off computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
Or, in plain JavaScript:
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
document.getElementById('power').addEventListener('click', function() {
var screen = document.getElementById('computer-screen');
screen.classList.toggle('computer-off');
screen.classList.toggle('computer-on');
});
#computer {
width: 60%;
margin: 1em auto;
padding: 1em;
border: 1px solid darkgrey;
overflow: hidden;
border-radius: 0.4em 0.4em 0 0;
}
#computer-screen {
border-radius: 0.5em;
height: 15em;
}
.computer-off {
background-color: #000;
}
.computer-on {
background-color: #060;
box-shadow: 0 0 1.0em #060;
}
#power {
cursor: pointer;
position: relative;
float: right;
width: 2em;
height: 2em;
line-height: 2em;
border-radius: 50%;
border: 1px solid #aaa;
margin-top: 0.3em;
}
.computer-on + #power {
box-shadow: inset 0 1px 3px #666;
}
#power::before {
content: '';
position: absolute;
top: 0.3em;
bottom: 0.75em;
left: 0.9em;
right: 0.9em;
background-color: #ccc;
}
#power::after {
content: '';
height: 1em;
width: 1em;
position: absolute;
border: 0.2em solid #ccc;
border-top-color: transparent;
border-radius: 50%;
bottom: 0.3em;
left: 0.3em;
}
#computer-screen.computer-on + #power::before {
background-color: #0f0;
}
#computer-screen.computer-on + #power::after {
border-color: #0f0;
border-top-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="computer">
<div id="computer-screen" class="computer-off"></div>
<div id="power"></div>
</div>
References:
JavaScript:
document.querySelector().
Element.classList.
jQuery:
toggleClass().
Here's the JSFiddle http://jsfiddle.net/7mzH2/ It's an easy version of what I have right now.
I have two problems which I can't seem to figure out.
The first problem: I want the dot to stay filled when it's on the active page.
Second problem: I want a label to appear on the right of the menu when you hover the dots.
I've tried several ways and in other designs I never had this problem, so I don't understand what I should do.
Hope someone can help me out.
This is the HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav> Home
De mogelijkheden
Restauratie
Het Proces
Werkplaats
Ambacht en Handwerk
Mogelijkheden
Contact
</nav>
</div>
<ul class="content">
<li class="first" id="first">
<div id="pagina01"></div>
<li class="second" id="second">
<div id="pagina02"></div>
</li>
<li class="third" id="third">
<div id="pagina03"></div>
</li>
<li class="fourth" id="fourth">
<div id="wrapper04">
<div id="first04"></div>
<div id="second04"></div>
</div>
</li>
<li class="fifth" id="fifth">
<div id="pagina05"></div>
</li>
<li class="six" id="six">
<div id="pagina06"></div>
</li>
<li class="seven" id="seven">
<div id="pagina07"></div>
</li>
<li class="eight" id="eight">
<div id="pagina08"></div>
</li>
</ul>
This is the CSS
body {
background: white;
min-width: 300px;
height: 100%;
font:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
}
ul.options {
margin-top: 0px;
width: 100%;
}
ul.options li {
display: inline-block;
margin-bottom: 20px;
}
ul.options li h4 {
color: rgba(0, 0, 0, 0.8);
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
ul.btn-group {
color: #000;
margin: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
ul.btn-group li {
background: #7958b8;
border-bottom: 1px solid #563f83;
border-left: 1px solid #563f83;
border-top: 1px solid #563f83;
cursor: pointer;
display: inline-block;
float: left;
margin: 0;
padding: 7px;
}
ul.btn-group li:hover, ul.btn-group li.active {
background: rgb(150, 110, 226);
}
ul.btn-group li:first-child {
border-radius: 2px 0 0 2px;
padding-left: 7px;
}
ul.btn-group li:last-child {
border-radius: 0 2px 2px 0;
border-right: 1px solid #563f83;
padding-right: 7px;
}
ul.content {
margin-top: 0px;
width: 100%;
}
ul.content li {
display: block;
height: 100%;
width: 100%;
}
ul.content li h1 {
color: #000;
padding-top: 20px;
}
.scroller {
background: #CCC;
box-shadow: inset 0 0 5px 0 black;
height: 1px;
overflow: hidden;
}
.scroller h3 {
color: rgba(0, 0, 0, 0.3);
font-size: 30px;
margin-top: 20px;
text-align: center;
}
ul.content li.first {
background: url('../inhouds/images/page01.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.second {
background: url('../inhouds/images/page02.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.third {
background: url('../inhouds/images/page03.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fourth {
background: url('../inhouds/images/page04.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fifth {
background: url('../inhouds/images/page05.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.six {
background: url('../inhouds/images/page06.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.seven {
background: url('../inhouds/images/page07.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.eight {
background: url('../inhouds/images/page08.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid transparant;
background:#666;
}
#pagina01 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8ffff;
}
#pagina02 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beff;
}
#pagina03 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beb0;
}
#pagina04 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6abeb0;
}
#pagina05 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: white;
}
#pagina06 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6a6d6d;
}
#pagina07 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d6d;
}
#pagina08 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d39;
}
Sorry for the long code's but I though maybe this will make it easier to help.
For the labels you can use CSS3 pseudo-elements to create a custom tooltip, and HTML5's data- tag to get the content (text) of the tooltip.
Pseudo-elements are :after and :before
To create a label or tooltip, try to add this to your CSS code:
nav a:hover:before {
pointer-events: none;
content: attr(data-name);
position: absolute;
display: block;
width: 30px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
background: #000;
top: -4px;
right: -40px;
}
..and in your HTML add this to your links: data-name="your text here".
(You can call the data attribute whatever you want. It just has to start with data-).
To make the dots stay filled, you can use jQuery.
When you click on the nav a it adds an .active-class to the <a> which make the dot stay filled. But first we have to make sure that all the other dots gets inactive. Else we suddenly would have every dots active. To do that we first remove the .active-class on all dots. Then we add an .active-class, on that <a> we have clicked on:
$(document).ready(function() {
$('nav a').click(function() {
$('nav a').removeClass('active');
$(this).addClass('active');
});
});
Then we change the .cbp-fbscroller > nav a:hover in your css to .cbp-fbscroller > nav a:hover, nav a.active. Now the active dot, has the same style like when we hover it.
You can test it all, in this Fiddle:
http://jsfiddle.net/7mzH2/3/
P.S:
I think it's better to move the tooltip/label to the left instead of to the right. Right now, you can't add much text, because of the space.
Hope this helped.