I am trying to toggle a div overlay when either a menu button or search button is clicked. However, when I click one button and then the next button it turns off.
How do I keep the overlay on when it another button is clicked but close it when the menu or search is closed?
// menu
$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').toggleClass('show-overlay');
});
// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').toggleClass('show-overlay');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar db dt-xl w-100 border-box bg-white fixed absolute f6 d z-999">
<div class="pa3 ph4-m ph5-l ph5-xl">
<div class="center">
<div class="nav-buttons db absolute right-0 mr3 mr5-ns mr4-m dn-xl fr">
<a class="link dib grey hover-teal pv2 ph3 pointer search-icon" tabindex="0"><i class="fas fa-search"></i></a>
<a class="link dib grey hover-teal pv2 ph3 ml2-ns pointer hamburger-icon" tabindex="0"><i class="fas fa-bars"><span class="sr-only">Toggle Menu</span></i></a>
</div>
<ul class="nav-items dn dtc-xl v-mid w-100 pa0 ma0 mt3 tl">
<li></li>
</ul>
</div>
</div>
<div id="search" class="search fixed w-100 left-0 z-5">
<form action="{{ url('/search/results') }}" class="w-100 h-100">
<input type="search" name="q" placeholder="Search..." class="sans-serif w-100 h-100 ph3 ph4-m ph5-l ph5-xl br0 bn bg-white f4 f2-xl">
<button class="sr-only" type="submit"><i class="fas fa-search h-100"></i>Submit</button>
</form>
</div>
</nav>
<div class="overlay pointer"></div>
Your issue here is you use the jQuery's toggleClass to toggle the overlay, the toggle() method will toggle between hide and show. Since you have toggle in both the menu and the search, when you click on one, then the other, the overlay gets turn off upon second click since it got toggled.
Use jQuery's hasClass() method to check if your menu or search have the css class that makes them visible, it will return a boolean value true or false.
You can do something like this:
https://www.w3schools.com/jquery/html_hasclass.asp
$('.hamburger-icon').click(function() {
$('.search').removeClass('is-visible');
$('.navbar').toggleClass('show-nav');
$('.nav-items').toggleClass('db');
$('.overlay').addClass('show-overlay');
if(!($('.navbar').hasClass('show-nav'))) {
$('.overlay').toggleClass('show-overlay');
}
});
// search
$('.search-icon').click(function() {
$('.navbar').removeClass('show-nav');
$('.nav-items').removeClass('db');
$('.search').toggleClass('is-visible');
$('.overlay').addClass('show-overlay');
if(!($('.search').hasClass('is-visible'))) {
$('.overlay').toggleClass('show-overlay');
}
});
You can easily solve it here the example my code:
Description: normally a button is clicked to toggle the target element and target your actions. I added a tiny logic here when menu button is clicked. Then, it adds new class menuActive and checks if the parent is Search active. when the active search bar. then first remove the searchActive class form the parent and then toggle similarly mention the previous line.
I hope this code will solve your prblem.
//when menu button click
jQuery(document).on('click','.menuButton', function(){
if(jQuery('.parent').hasClass('searchActive')) {
jQuery('.parent').removeClass('searchActive');
jQuery('.parent .searchCont').slideUp(0);
}
jQuery('.parent').toggleClass('menuActive').children('.menu').slideToggle(200);
})
//when search button click
jQuery(document).on('click','.searchButton', function(){
if(jQuery('.parent').hasClass('menuActive')) {
jQuery('.parent').removeClass('menuActive');
jQuery('.parent .menu').slideUp(0);
}
jQuery('.parent').toggleClass('searchActive').children('.searchCont').slideToggle(200);
})
.menu,
.searchCont { display:none}
.menuButton,
.searchButton {
display: inline-block;
width: 50px;
height: 20px;
margin: 5px;
background: gray;
border: 2px solid #fff;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="menuButton">menu</span>
<span class="searchButton">Search</span>
<div class="parent">
<div class="menu">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="searchCont">
<input type="text" placeholder="search" />
<input type="submit" vlaue="find">
</div>
</div>
= = = = Thank you = = = =
Related
I am trying to delete dynamically added item by clicking on delete button .delete on modal box.
I have one modal and it pops-up when I click on button <i class="fa-solid fa-ellipsis">.
Code:
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = object.target.querySelector(".optionsModal");
optionsModal.classList.toggle("hide");
}
}
function deletePost() {
// delete specific li-item from the list
}
document.querySelector("body").addEventListener("click", showOptions(event));
document.querySelector(".delete").addEventListener("click", deletePost);
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis"></i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
And I have a problem how to pass to deletePost function specific <i class="fa-solid fa-ellipsis"> when I click on them. I was trying to nest one eventListener in another but it doesn't work.
When you open the modal, add a class to the item you clicked on. Then find the item in deletePost.
The modal isn't inside object.target, so you shouldn't use object.target.querySelector() to find it, use document.querySelector().
You shouldn't toggle the hide class when clicking on a list items. That will hide the modal if you click on a different item before cancelling the modal (although if you make it truly modal, you shouldn't be able to click on something else). I just remove the class to display the modal.
function showOptions(object) {
if (object.target.matches(".fa-ellipsis")) {
let optionsModal = document.querySelector(".optionsModal");
optionsModal.classList.remove("hide");
let oldSelected = document.querySelector(".selected");
if (oldSelected) {
oldSelected.classList.remove("selected");
}
object.target.classList.add("selected");
}
}
function deletePost() {
let selected = document.querySelector(".selected");
if (selected) {
selected.closest(".posts-list-item").remove();
}
}
document.querySelector("body").addEventListener("click", showOptions);
document.querySelector(".delete").addEventListener("click", deletePost);
.selected {
background-color: red;
}
.hide {
display: none;
}
<body>
<ul class="posts-list">
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 1</i>
</div>
</div>
</li>
<li class="posts-list-item">
<div class="post">
<div class="post-option">
<i class="fa-solid fa-ellipsis">Item 2</i>
</div>
</div>
</li>
<!-- every li item is added dynamically -->
</ul>
<div class="optionsModal hide">
<p class="delete">Delete</p>
<p class="cancel">Cancel</p>
</div>
</body>
I am trying to automatically click/open Tab2 in a web page whenever Tab1 loads so that Tab2 becomes the active tab. I'm not sure what needs to happen here since there is no specific URL to direct a user to, so would appreciate any assistance and feedback.
Thanks!
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch">
<span id="xy1:primaryForm:xy22:0:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:0:tabSwitch.stop"></span>
</span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav">
<span id="xy1:primaryForm:xy22:1:tabSwitch">
<span id="xy1:primaryForm:xy22:1:tabSwitch.start" style="display: none">
<img src="/img/loading.png" class="loadingimg">
</span>
<span id="xy1:primaryForm:xy22:1:tabSwitch.stop"></span>
</span>
Tab2
</div>
---------UPDATE-------------
I tried to simplify this a bit by not paying attention to all the functions inside the link and just wanted to click on the link based on the text()..
.active {
background: red;
}
<div id="xy1:primaryForm:xy22:0:xy23" class="nav active">
<span id="xy1:primaryForm:xy22:0:tabSwitch"></span>
Tab1
</div>
<div id="xy1:primaryForm:xy22:1:xy23" class="nav ">
<span id="xy1:primaryForm:xy22:1:tabSwitch"></span>
Tab2
</div>
The following jQuery sort of works, but it continues to click on Tab2 even when Tab2 is already active, so I want to get it to only click Tab2 if Tab1 has an active class:
var elements = $('a');
elements.each(function(index, domElement) {
var $element = $(domElement);
if ($element.text() === "Tab2") {
$element.click();
return false;
}
});
Is there a better JavaScript Solution to click some text() only if it's a child of an .active class?
I am using navigation drawer of Framework7 plugin on my hybrid app. The drawer can be open/close using the button as well as using swipe/slide left/right.
Now when the navigation drawer was open, the class <div class="panel panel-left panel-reveal"> added another class which is active class.
So when opened: <div class="panel panel-left panel-reveal active ">
when closed: <div class="panel panel-left panel-reveal>
Based on that event, is it possible to add style to other class?
Example is this class: <div class="views"> to <div class="views" style="opacity: 0.5">
What to accomplish: When the drawer is open, the class view will add style, when drawer is close remove the view class style.
Is it possible to catch that event and accomplish what I would like to do?
Sorry for the delay, so below is the sample code to add a css class to a div only on hover event. I have done this using html and css only. (No DOM manipulation).
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
NOTE - Just remember to use the appropriate CSS selector based on your HTML structure.
Hope this helps. Let me know if you have any questions. Happy to help.
Hi Yes it is Possible. Using HTML and Javascript itself. You can also achieve this using JQUERY DOM manipulation. Let me know which one would you want to know.
I have modified your HTML a little
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
Just add this JavaScript function and you will be good to go.
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS will be
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
I hope this helped.
menu screenshot
When drop-down menu appears (id="sub-menu-1" or "sub-menu-2", etc) after the click on top buttons (class="toggle-1" or "toggle-2", etc), it shifts the display down to the anchor and hides the top button menu (class="mobile-menu"). How I can prevent this shift? I tryed "pointer-events: none;", but then drop-down menu doesn't work at all.
$('.mobile-menu').each(function() {
var $_navbar = $(this);
var $_toggles = $_navbar.find('.toggle');
var $_panels = $_navbar.find('.sub-menu');
var active_classname = 'active';
$_toggles.each(function() {
var $_this_toggle = $(this);
var $_this_panel = $( $_this_toggle.attr('sm-id') );
$_this_toggle.click(function() {
$_toggles.not($_this_toggle).removeClass(active_classname);
$_this_toggle.toggleClass(active_classname);
$_panels.not($_this_panel).slideUp();
$_this_panel.stop().slideToggle();
});
});
});
<nav class="mob-nav">
<div class="mobile-menu">
<a sm-id="#sub-menu-1" class="hotdog toggle toggle-1" href="#sub-menu-1"></a>
<a sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>
<a sm-id="#sub-menu-3" class="mob-menu-phone toggle toggle-3" href="#sub-menu-3"></a>
<a sm-id="#sub-menu-4" class="mob-menu-search toggle toggle-4" href="#sub-menu-4"></a>
</div>
<div class="sub-menu-wrapper">
<div id="sub-menu-1" class="sub-menu">
<ul>
<li>Продукция</li>
<li>Технологии применения</li>
<li>Объекты</li>
<li>Документация</li>
<li>О компании</li>
<li class="profile-links">
<span>
Заказчику
</span>
<span>
Проектировщику
</span>
</li>
<li class="profile-links">
<span>
Подрядчику
</span>
<span>
Частным клиентам
</span>
</li>
</ul>
</div>
<div id="sub-menu-2" class="sub-menu">
<form action="post" class="email-feedback">
<input type="text" name="user-name" class="mob-nav-input" placeholder="Ваше имя">
<input type="text" name="mobile-number" class="mob-nav-input" placeholder="Номер телефона">
<textarea name="interest" class="mob-nav-input" placeholder="Что Вас интересует?"></textarea>
Отправить
</form>
</div>
<div id="sub-menu-3" class="sub-menu">
<ul>
<li>+7 812 423-85-85</li>
<li>+7 812 423-85-85</li>
</ul>
</div>
<div id="sub-menu-4" class="sub-menu">
<form action="post" class="mobile-search">
<input type="search" class="mob-nav-input">
<input type="submit" class="search-param-sub" value="">
</form>
</div>
</div>
.mobile-menu {
overflow: hidden;
}
.mobile-menu a {
border: #3a3a3a 1px solid;
height: 60px;
display: block;
width: 25%;
float: left;
}
.sub-menu {
padding-top: 10px;
display: none;
}
Where I should search the solution? In CSS or JS?
You're looking for event.preventDefault()
$_this_toggle.click(function(e) {
e.preventDefault();
Since your anchors have an href which begins with a # and that hash value corresponds to an element on the page with the same id or name browsers will scroll the page down to the matching element, and also change the hash in the URL. You need to prevent the default browser behaviour.
add to a tag this onclick="event.preventDefault()"
<a onclick="event.preventDefault()" sm-id="#sub-menu-2" class="mob-menu-mail toggle toggle-2" href="#sub-menu-2"></a>
the simplest solution is this. when you click a tag with attribute href="#example" naturally it is forcing browser to go a tag which has id="example" attribute. Avoid for this you should use event.preventDefault() properly
Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!
Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.
You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>