I have image in header, and when I click on the image a popup opens. I need to hide this image when popup is open and show when popup is closed.
Second Image: 2
Website:https://clavis-schule.de/home-dev/
If you're making use of event listeners you can swap out classes/styling of the element that is firing the event. Onclick works too but I personally only use it on button elements, choose what you prefer most
In case you're using jQuery you can use
$('img').on('click', (e) => {
e.toggle()
});
https://api.jquery.com/toggle
alternatively if you're not using jQuery you could use
document.addEventListener('click', function (event) {
event.target.classList.toggle("d-none")
}
// (more specifically)
document.getElementById("menu-img").classList.toggle("d-none")
where d-none is a bootstrap class. It could simply be a custom class as well
.d-none {
display: none
}
You will need to toggle the image back when clicking away the modal and since you've provided no code example I can only tell you to figure that part out on your own.
Related
I have elements working with native Jquery's toggle. These elements are toggled using buttons with inline script onclick="$('#elementname').toggle();return false" that toggles each element, all using the same jQuery's Toggle. How can I hide the divs when user click outisde these divs with compatible jQuery's Toggle code?
You can use onblur="toggle(false)" inside your #navmenu, but that will only work if #navmenu is a form element such as input or textarea.
Another way to do it is detect click on the document to hide #navmenu, and prevent click on #navmenu. You also need to prevent propagation of all clicks on #navmenu and the button. Trouble is that the return false in your button onclick does not work, meaning that the document click will fire. You would need to have some logic with flags to prevent that, but it's easier to remove the inline script, which is recommended anyway. Then you get something like:
https://jsfiddle.net/3Luo34m1/
<button></button>
<p id="navmenu">Testing 123</p>
$(document).on("click", function(e) {
if (e.target.id == 'navmenu') return false; // prevent click on #navmenu
$('#navmenu').toggle(false); // hide()
});
$('button').on("click", function() {
$('#navmenu').toggle();
return false;
});
BTW, if you have multiple buttons and #navmenu's you need to use classes instead of id's.
Try with this:
$(document).click(function(event){
if(event.target.classList.contains('.target-div') === false){
$('.target-div').removeClass('remove toggled class');
}
});
I tried to find solution to close bootstrap menu when clicking outside of it(in mobile window size), but cant get it to work, I get it to work when clicking one of the 'a' links by this code:
// menu buttons collapses when clicking a link
$('document').ready(function()
{
if ($('a').on('click', function()
{
$('.collapse, #mainContainer').removeClass('in');
$('.navbar-toggle').toggleClass('collapsed'); // button
}));
});
but how to close menu by clicking outside the menu navbar?
here's my page that shows the problem
iwebdesign.se
and yes i tried this already, not working:
similar question
Assuming you want to do something different when clicking outside of the menu (i.e. collapse the menu) than what happens when you click inside the menu, you probably want something like this to determine if you're clicking inside or outside of the menu:
$('body').click(function(event){
// check if the clicked element is a descendent of navigation
if ($(event.target).closest('.navigation').length) {
return; //do nothing if event target is within the navigation
} else {
// do something if the event target is outside the navigation
// code for collapsing menu here...
}
});
https://jsfiddle.net/L3qg4pa8/5/ shows the concept, roughly.
Of course, you will need to replace '.navigation' in the .closest() statement with the appropriate selector for the container of your navigation.
$(document).on('click',function(){
$('.collapse').collapse('hide');
});
Just copy the code and past your custome script or index.html
thank's Remy
click outside to hide bootstrap toggle menu close(hide) it
Here the answer :
(document).on('click',function(){
$('.collapse').collapse('hide');
})
Hope it's help :)
Remy
I've added colorbox to a site that contains product attributes. When a user has selected the attributes and closed the popup I either want to change the background colour of the button used to open the popup, or display a marker so that they know they have chosen the options for that product out of the grid layout.
I have got a close event firing ok on colorbox. I tested it with alert("closed"), so i know that it is activating correctly.
So i added:
$(document).bind('cbox_closed', function(){
document.getElementById('.inline').style.backgroundColor = "#f3f3f3";
});
but it didn't change the background colour of the "inline" class.
What am i doing wrong?
If i decide to go with a check mark that is hidden with display:none; what is the process for overriding the display:none; css?
Thanks
There are a couple problems I see here:
A. You're incorrectly accessing a class name "by id". Switch to jQuery CSS selector and css() method to change the BG color:
$(document).bind('cbox_closed', function(){
$('.inline').css({backgroundColor: "#f3f3f3"});
});
B. You may want to add your event listener directly in the colorbox options in the constructor, rather than on the document, which ought to perform better, and will kill the listener when the colorbox is destroyed (no memory leaks):
$('#my_colorbox').colorbox({
// options
onClosed: function() {
$('.inline').css({backgroundColor: "#f3f3f3"});
}
});
You can't access the class with document.getElementById(). Use document.querySelectorAll('.inline') instead.
or use jquery way
$('.inline').css('backgroundColor', '#f3f3f3');
Use
$(document).bind('cbox_closed', function(){
document.querySelectorAll('.inline').style.backgroundColor = "#f3f3f3";
});
I have simple script which make layer on background when popup div is shown.
jQuery(".openForm").click(function() {
jQuery("#popup").show();
jQuery("body").append('<div id="layer"></div>');
});
This works fine but, when I click somewhere it should close popup with this script
jQuery("#layer").click(function() {
jQuery("#popup").hide();
jQuery("#layer").remove();
});
anyway nothink happens, there is no error even.
I'm guessing #layer doesn't exist when you attempt to bind the handler. Use event delegation instead:
jQuery(document).on('click', "#layer", function() {
jQuery("#popup").hide();
jQuery("#layer").remove();
});
Alternatively, you could hide/show the #layer div (like the #popup div) instead of adding and removing it each time.
I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:
$('.downloads').hide()
$('.downloads').css({visibility:'visible'})
var Dshow=false;
$('.allLink').click(function() {
if(!Dshow){
Dshow=true;
$(".downloads").fadeIn("fast");
$('#footer2').html($('#footer1').html());
$('#footer1').html('');}
});
$('.hideAllLink').click(function() {
if(!!Dshow){
Dshow=false;
$(".downloads").fadeOut("fast");
$('#footer1').html($('#footer2').html());
$('#footer2').html('');}
});
I want $('.allLink').click(function() to have 2 states - on first click it shall show ".downloads" and on second click hide.
How to do such thing with jQuery?
You can use .toogle(). This method will hide element if it's visible, or make it visible if it's hidden.
$('.allLink').click(function()) {
$('.downloads').toggle();
}
I think what you are looking for is a toggler: Use of jQuery toggle function
Use
$( "#idofthebutton" ).toggle(
function() {
/// hide the link
$(".downloads").fadeOut("fast");
}, function() {
///show the link
$(".downloads").fadeIn("fast");
}
);
This will work automatically to hide and show the links....
Note: In this case keep the links visible at first place. If you don't want that then change the order of the functions inside the .toggle