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
});
Related
I am using this script to open a drop down menu and then close it when anything else but the trigger is clicked. Now I am trying to add a second drop down to another area on the page and repeat the script but it is breaking.
For instance, I click button A (Gravatar), and drop down A opens.
However when I add the second script and click button B (category) to open drop down B, down down A stays open.
Also adding the second script breaks the drop down close function of the first script.
Here is the script:
<script>
function openAccount(event) {
event.stopPropagation();
document.getElementById("gravatar").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<script>
function openCategory(event) {
event.stopPropagation();
document.getElementById("category").classList.toggle("open");
}
window.onclick = function(event) {
document.getElementById("gravatar").classList.remove("open");
}
</script>
<li class="gravatar">
<a href="#" class="dropbtn" onclick="openAccount(event)">
<img src="<?php echo $gravatar; ?>" alt="" />
<span class="fa fa-icon fa-caret-down"></span>
</a>
<ul class="dropdown" id="gravatar">
<li class="header">
<?php echo $user['email']; ?>
</li>
</ul>
</li>
<div class="category">
Properties<span class="fa fa-icon fa-caret-down"></span>
<div id="category">Test</div>
</div>
Goals:
Multiple drop down menus on different parts of the page.
On click opens drop down.
Click on anywhere else on the page closes the drop down.
On click also closes any previously opened menu.
I'd do something really simple like putting a data* attribute on the element that's clicked on that contains the ID of the element to show or hide, e.g.
// Toggle hidden class on/off
function toggleVis(event) {
// Stop click on element bubbling (to body)
event.stopPropagation();
// Get target element
var el = document.getElementById(this.dataset.id);
// If non-target elements are visible, hide them
hideAll(el);
// Toggle target
el.classList.toggle('hidden');
}
// Hide all, excluding passed element
function hideAll(el) {
Array.from(document.querySelectorAll('ul:not(.hidden)')).forEach(function(node){
if (el != node) node.classList.add('hidden');
});
}
// Attach listeners
window.onload = function() {
// Add to linkLike spans
Array.from(document.querySelectorAll('.linkLike')).forEach(function(node) {
node.addEventListener('click', toggleVis, false);
});
// Add hideAll listener to wndow
window.addEventListener('click', hideAll, false);
// Run hideAll
hideAll();
}
/* style span like link */
.linkLike {
text-decoration: underline;
cursor: pointer;
}
/* class to hide element */
.hidden {
visibility: hidden;
}
<ul id="a"><li>A</ul>
<ul id="b"><li>B</ul>
<ul id="c"><li>C</ul>
<ul id="d"><li>D</ul>
<div><span class="linkLike" data-id="a">Toggle A</span></div>
<div><span class="linkLike" data-id="b">Toggle B</span></div>
<div><span class="linkLike" data-id="c">Toggle C</span></div>
<div><span class="linkLike" data-id="d">Toggle D</span></div>
Of course there are other ways to do the association, but ID is simple, explicit and doesn't depend on document layout or formatting.
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'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");
}
});
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 {
}
});
I'm trying to create a web page which generates a series of unique DIV IDs, each displaying different content based off of the entries in an SQL table.
Each div has a "hide" and "show" button, which work independently when manually giving each div a unique name.
I can get the divs themselves to generate based on class names in PHP, which displays the divs correctly.
The problem lies in the "hide" and "show" buttons since they're controlled by JavaScript. The code is as follows:
for ($j = 0 ; $j < $rows ; ++$j)
{
for($i =0; $i < $rows2; $i++)
{
if (mysql_num_rows($ans) > 0) //check if widget table is empty
{
$widgetusr[$j] = mysql_result($ans,$j,'wname')or die(mysql_error()); //user's widget
$widgetstore[$i] = mysql_result($ans2,$i,'wname'); //store widget
if($widgetusr[$j] == $widgetstore[$i] && $widgetusr[$j] != 'Medieval Calendar') //check if user has already purchased the widget
{
echo "<div class=widget_container".$j%2 .">"; //container divs are named 1 and 0. j mod 2 should return either 1 or 0
?>
<!----Start of weather Widget--->
<!---Script for show/hide buttons weather widget--->
<script>
var widg = "<?php echo $widgetusr[$j]; ?>";
var id = "#" + widg;
$(document).ready(function(){
$("#hide1").click(function(){
$(id).hide();
});
$("#show1").click(function(){
$(id).show();
});
});
</script>
<button id="hide1">Hide</button>
<button id="show1">Show</button>
<!---End Script for show/hide buttons weather widget--->
<?php
echo "<div class = 'widget' id='$widgetusr[$j]'>
</div>
</div>
<!----End of Widget---> ";
}
}
else
{
echo "You have no widgets please visit <a href='store.php'> the store </a> to purchase some. <br/>"; //widget table is empty. Redirect to widget store.
}
}
}
?>
I tried to pass the php varriable (containing an SQL value) to JavaScript (which works successfully, I was able to print out "#financial widget" as an id name.), however neither the show, nor hide button works. The generated divs all have the correct names also.
If additional information is required please ask. I tried to be as general as possible.
You really only need one button. Change your php to render the following html
<div class="widget_container">
<button class="btn ">Hide</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget2</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget3</div>
</div>
and output the following Outside of the loop, ensuring jQuery is loaded:
<script type="text/javascript">
//Standar jquery doc ready event, fires when the dom is loaded
$(document).ready(function(){
//add an event listener elements with a class of "btn"
$('.btn').click(function () {
//"this" is the element click, so we find siblings of this with a class
//of "widget" and toggle its visibility
$(this).siblings('.widget').toggle();
//Change the text of the button the below is short hand for:
//if($(this).text() == "Hide"){
// $(this).text("Show");
//}else{
// $(this).text("Hide");
//}
$(this).text($(this).text() == "Hide" ? "Show" : "Hide");
});
});
</script>
Example
Some useful links:
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/click/
http://api.jquery.com/siblings/
http://api.jquery.com/closest/
http://api.jquery.com/toggle/
http://api.jquery.com/text/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Example with fixed height widgets: http://jsfiddle.net/bdpm4/2/
Update 2
Perhaps a better way to do it: http://jsfiddle.net/bdpm4/3/
you should use class instead of id and dont put your $(document).ready() in the loop.
HTML:
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget2</div>
</div>
JS:
$(document).ready(function(){
$('.btn').on('click', function (evt) {
var btn = $(evt.target);
btn.siblings('.widget').toggle();
btn.parent().find('.btn').toggle();
});
});
CSS:
.showBtn {
display:none;
}
here is an example: http://jsfiddle.net/xdA4r/4/