I'm trying to hide my offcanvas menu while i'm clicking outside the div where the menu is in.
It is a menu which only appears while the bootstrap xs class will be loaded.
My button is inside my header and the menu is a page on his own.
this is how my button looks like:
<p class="pull-left visible-xs">
<?php if($data['title'] == 'Producten' || $data['title'] == 'Winkeltjes' || $data['title'] == 'Home'){?>
<button type="button" onClick="document.getElementById('sidebar').scrollIntoView();"
class="btn btn-primary btn-default" data-toggle="offcanvas">
Filters
</button>
<?php }
</p>
I've found a couple ways on stackoverflow and tried those, but these all didnt workout with my offcanvas div. the div that should be opened has the following class and id:
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
I don't have any functions anymore at the moment.
hopefully I've give you guys enough information and I'm looking forward to any reply.
Try This Code...
function hideWhenClickedElseWhere(container, callback){
$(document).mouseup(function (e){
if (!container.is(e.target) && // if the target of the click isn't the container...
container.has(e.target).length === 0) // ... nor a descendant of the container
{
callback();
}
});
}
The first argument is the nodes in which you don't want to close the menu when clicked.
The Second argument is the callback - what should we do if clicked elsewhere.
hideWhenClickedElseWhere( $(".buttonClass, .menuClass") ), function(){
$(".menuClass").hide();
$(".buttonClass").removeClass("acctive");
});
Use this code..
$(document).click(function (e) {
if (
!$(e.target).hasClass('menuClass') &&
!$(e.target).hasClass('') &&
$(e.target).parents('.buttonClass').length == 0 &&
$(e.target).parents('.menuClass').length == 0
) {
$(".menuClass").hide();
$(".buttonClass").removeClass("acctive");
}
});
Related
I have multiple modals with different id's.
<div id="#Modal" tabindex="-1" class= active" style="left: Opx;" role="dialog" >
<div id="#Modal-text' tabindex="0">
<div class="container">
<div class= close-btn">
<a class="closer noprint href=" javascript:void(0) aria-label="Close dialog" tabindex="0"></a>
</div>
</div>
<div class= content">..modal content goes here</div>
<div class="focus-guard" tabindex="0"></div>
</div>
<div id="#Modal-anothertext' tabindex="0"></div>
<div id="#Modal-sample' tabindex="0"></div>
</div>
The jquery function add a focus guard div and add an event listener to it whenever a tab or keyboard navigation, through it, it will go again to the close button:
"use strict"
jquery(document).ready(function ($) {
// Check if modal exists
if ($(" [id+='Modal-']").length {
// Check id's if containstring of 'Modal-' and check if modal has child with #focus-guard
if ($("[id*='Modal-']").find("focus-guard").length === 0) {
console.log("does not exist");
const focusGuard = document.createElement("div");
focusGuard.setAttribute("class", "focus-guard");
focusGuard.setAttribute("tabindex", "0");
// Add focus guard to parent
$("[id*='Modal-']").append(focusGuard);
// The closer button is being added in the DOM upon clicking modal, that's why I used DOMNodeInserted
$(document).bind("DOMNodeInserted", function (e) {
if (e.target.className="container") {
const close = document.querySelector(".closer");
console.log(close);
focusGuard.addEventListener("focus", () => {
close.focus();
});
}
});
}
});
}
Have tried also some possible selectors and isolating a single modal.
Unfortunately, the eventlistener on focus guard div does not trigger and I cannot target speciffically the "closer noprint" class.
I know it's not right to have a selector like an array("[id=Modal-]"*) to refer to the parent element of the modal but since it's multiple, not sure if this will be the right thing to do. Might there be a simple solution for this one.
Also stuck with a function that focuses on the last item clicked after dismissing the modal.
I have a button:
<button type="button" class="btn btn-sm btn-primary" data-bind="attr: { 'data-target': '#MoreOptions' + Provider() }" data-toggle="collapse">More Options</button>
That controls when this div is open or closed to show 'more options'.
<div class="panel-collapse" data-bind="attr: { id: 'MoreOptions' + Provider() }, css: { collapse: $root.IsCollapsed }">---</div>
And I use a Knockout.js observable to keep it open when the data refreshes inside the div. I don't want a data refresh to collapse the div. The issue is when I do this and keep the div open, the button thinks that the div is closed. So the next time the user clicks the button, the div closes real quick and opens back up again, requiring two clicks on the button to get the div to close.
The expected behavior is to keep the div open during a data refresh, but have the button know that the div is open and close it with just one click.
I've set the CSS collapse with knockout in the div and I'm looking for a similar way to set the button for it to know that the div is not collapsed.
I've noticed that when the button is clicked to expand the div, the aria-expanded attribute is set to true where it didn't exist when the button is initially rendered; and when the button is clicked to collapse the div, the CSS property 'collapsed' is added to the button. I've played around with adding and changing these via knockout with no success.
It should be noted that the button is refreshed with the data.
I've decided to remove the bootstrap toggle button functionality and just go with the jQuery toggle in combination with knockout. The jQuery way just offers more control.
<button type="button" class="btn btn-sm btn-primary"
data-bind="click: $root.ChangeMoreOptions">
More Options
</button>
<div id="MoreOptionsDiv" style="padding-top: 10px; display: none;">
--- content ---
</div>
Knockout:
//Open or close div
self.ChangeMoreOptions = function () {
if (self.IsCollapsed() === true) {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(false);
} else {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(true);
}
}
//Keep div open on refresh if it is already open
//Search for 'none' in the style display: none
self.FixMoreOptions = function () {
if (($('#MoreOptionsDiv').attr('style').search('none') > -1)
&& (self.IsCollapsed() === false)) {
//Toggle closed div back to open
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
}
}
I have a search result div which have contains search result list items according to user's search. but i want to hide that result div when user click any where on the screen.
here is my search div code:
<div id="user_search">
<div class="inpt-head-place" style="width:9em;">
<?php echo form_open( '',[ 'class'=>' navbar-left navbar-change','id'=>'search_form']) ?>
<?php echo form_input([ 'type'=>'text','class'=>'form-control form-media search_user_bar','placeholder'=>'Search Here','name'=>'search']); ?>
<div id="search_result" class="search_result"> </div>
</div>
<div class="inpt-head-place" style="width: 20px;">
<button class="btn btn-default btn-resize" type="submit" name="submit" id="submit_here"> <i class="fa fa-search"></i> </button>
<?php echo form_close(); ?>
</div>
</div>
And here is a Snap of search Bar with their results:
Kindly suggest me.. Thanks
You can check if the clicked element, or any child element is the one clicked or the child of the one clicked by binding the click to the document or body:
$(document).on('click', function(e) {
if (!$('#search_result').is(e.target) && $('#search_result').has(e.target).length === 0){
$('#search_result').hide();
}
});
Check below code, it will hide search_result div when you click outside of search_result.
$(document).mouseup(function (e) {
var container = $("#search_result"); //ID of dic you want to hide
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
you can do this using JS by wrapping the body in a div (or just use the body) and then adding a on click event listener to that div, if the body is clicked just close the search results.
somthing like,
document.getElementById('body-div').addEventListener("click", function(){
//set style of search result to display: none or hide in some reasonable way
});
I am doing a comment system for my webpage.
The website shows a group of elements from the database, that everyone can comment:
Element 1 ($element_id=1)-> Read comments...
Element 2 ($element_id=2)-> Read comments...
Element 3 ($element_id=3)-> Read comments...
When someone want to read comments of one element, can click in the "Read comments...", and a new div opens:
<div class="comments_more" id="comments_more"> Read comments...
<div class="comments_div" id="comments_div" >
<?php include/comments.php ?>
<?php echo $element_id; ?>
</div> </div>
The jquery code to open the div works perfect for every element:
$(document).ready(function(){
$( '.comments_more' ).click(function() {
$(this).find( '#comments_div' ).show('slide');
});
})
Now, I found a nice jquery to close the div when user clicks outside of it:
$(document).mouseup(function (e){
var container = $("#comments_div");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{ container.hide(); }
});
The problem is that it only works for the first "Read comments..." (first element).
You can't have multiple IDs on one page, try using a class as a selector instead like:
$(".comments_div")
I'm guessing here at what the repeated HTML looks like, but try something like this:
$(document).ready(function() {
$('.comments_more').click(function() {
$(this).find('.comments_div').show('slide');
});
})
$(document).mouseup(function(e) {
var container = $(".comments_div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
.comments_div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="comments_more"> Read comments...
<div class="comments_div">
Comments 1
</div>
</div>
<div class="comments_more"> Read comments...
<div class="comments_div">
Comments 2
</div>
</div>
<div class="comments_more"> Read comments...
<div class="comments_div">
Comments 3
</div>
</div>
I put a panel inside a bootstrap dropdown, but when I click inside the panel, the dropdown goes away. I got many solution on stackoverflow but it didn't work for me. How can i prevent panel from disappearing when i click inside.enter code here
<span class="input-group-addon dropdown">
<label class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown aria-expanded="false">Advanced Search <span class="caret"></span></label>
<div class="panel panel-default panel-body dropdown-menu " role="menu"" aria-labelledby="dropdownMenu1" style="width:860px; margin-left:-700px">
Panel content
</div>
</span>
Try to do something like this:if you click on the body it checks the parent class,if you click on the dropdown if parent has class .dropdown-parentclass then the dropdown does not close.
$('body').click(function(event){
if ($(event.target).parent('.dropdown-parentclass').size()>0) {
return false;
}
});
try using the code below. It will close the dropdown only when you click out side the container.
$(document).on("mouseup", function (e) {
var container = $(".panel");
if (!container.is(e.target) // if the target of the click isn't the container
&& container.has(e.target).length === 0) // nor a descendant of the container
{
container.hide();
}
else {
}
});