I'm appending a class on click of a 'span'. I'm able to remove that appended div on click on other icon and append there. How can I add toggle on every icon clicked twice .This is my jquery below:
var toggle = true;
$('.extra-items span').on('click',function() {
$(".mid-side .same-category").remove();
if(toggle)
{
$(this).closest(".row").append($(".media-categories-all").html());
toggle = false;
}
else
{
$(this).closest(".mid-side .same-category").remove();
toggle = true;
}
})
There are a lot of 'span' also. When it's appended on first click on a icon.. it removes that also in the first click of another icon and nothing is appended in that first click.
Thank you brso05
You can create a global variable and use it to toggle:
var toggle = true;
$('.extra-items span').on('click',function() {
//removed remove() here
if(toggle)
{
$(this).closest(".row").append($(".media-categories-all").html());
toggle = false;
}
else
{
$(this).closest(".mid-side .same-category").remove();
toggle = true;
}
});
Related
I am building a chrome extension that adds a button to https://www.fashionnova.com/ items.
I'd like to only append my button once, but when I used an if statement my button did not appear. Any suggestions on how to solve this?
jQuery("document").ready(function ($) {
var button = CreateButton();
$(window).scroll(function () {
className = ".product-tile__badges";
console.log($(className).children()[1].className);
console.log("i work");
$(className).append(button);
$(".product-tile__badges").mouseenter(function () {
button.childNodes[1].style.display = "block"; // Makes the dropdown appear
});
$(".product-tile__badges").mouseleave(function () {
button.childNodes[1].style.display = "none"; // Makes the dropdown appear
});
});
});
You could use jQuery's unbind to remove the scroll event listener once the button has been appended.
That would give something like:
jQuery("document").ready(function ($) {
var button = CreateButton();
function injectButton() {
var className = ".product-tile__badges";
// append button
$(className).append(button);
// add event listener to show dropdown on mouse enter
$(className).mouseenter(function () {
button.childNodes[1].style.display = "block";
});
// add event listener to hide dropdown on mouse leave
$(className).mouseleave(function () {
button.childNodes[1].style.display = "none";
});
// remove handler from window scroll event listenenr
$(window).unbind('scroll', injectButton);
}
// attach the event handler on window scroll
$(window).scroll(injectButton);
});
I have a div who can be displayed or not. When it's display I want to pass display to none if you click somewhere not in that div. So what I did is :
document.addEventListener('click',closeDiv)
document.getElementById('myDiv').addEventListener('click',stopPropagation)
function closeDiv(){
let div = document.getElementById('myDiv')
div.style.display='none'
}
But with that even if I click on the div, the display goes to none
Found the solution :
document.addEventListener('click',closeModal)
document.getElementById('myDiv').addEventListener('click',stopPropagation)
function stopPropagation(e){
e.stopPropagation();
}
function closeDiv(){
let div = document.getElementById('myDiv')
div.style.display='none'
}
If you make an window.addEventListener('click', outDiv);
and this function :
let myDiv = document.querySelector('myDiv');
function outDiv (event) {
if (!myDiv.classList.contain(event.target)) {
// Make Something
}
}
Here's my function,
$(document).ready(function () {
$('.a').click(function () {
var here = $(this).next('.b');
if (here.is(":visible")) {
here.hide();
} else {
here.show();
}
return false;
});
});
So, whenever I click the button it opens a small tab on same webpage & whenever I click it again it closes it. But once I open the tab I can't close it by just clicking somewhere on webpage apart from tab. I have to click the button again to close it.
How can I close tab just by clicking somewhere on webpage also by on the button?
I end up searching for this on almost every project, so I made this plugin:
jQuery.fn.clickOutside = function(callback){
var $me = this;
$(document).mouseup(function(e) {
if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
callback.apply($me);
}
});
};
It takes a callback function and passes your original selector, so you can do this:
$('[selector]').clickOutside(function(){
$(this).removeClass('active'); // or `$(this).hide()`, if you must
});
Nice, chainable, elegant code.
On document click, the closest helps to check whether the tab has been clicked or not:
$(document).click(function (e) {
if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
$('.b').hide();
}
});
You want to check for a click on the body :
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
menu would be the id of the menu.
If the body is clicked and the id of the div clicked doesn't equal that of the menu, then it closes.
Check this implementation
jQuery(document).ready(function() {
$(document).on('click','body, #btn',function(ev){
ev.stopPropagation()
if(ev.target.id== "btn"){
if($('#modal').is(':visible')) {
$('#modal').fadeOut();
} else{
$('#modal').fadeIn();
}
} else {
$('#modal').fadeOut();
}
});
});
html, body {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">
Click Me!
</button>
<div id="modal" style="background-color:red;display:none;">
BLA BLA BLA
</div>
To check if the clicked element is outside of a given container, i.e. a menu, we can simply check if the event target is a child of the container. Using JQuery -
$('body').click(function(e) {
if ( 0 === $(e.target).parents('#container-id').length ) {
/// clicked outside -> do action
}
})
you have to add a click listener to the parent element, like here:
$('.parent-div').click(function() {
//Hide the menus if visible
});
Also because click events bubbled up from child to the parent,
you can exclude the click on the child element to get bubbled up and count as the parent click too. you can achieve this like below:
//disable click event on child element
$('.child-div').click(function(event){
event.stopPropagation();
});
<p id="testhome-1">Test</p>
<p id="testhome-2">Test</p>
Click
Click
When I click the anchor tag, I want to add a class to a particular id of Paragraph.
Plain JS:
window.onload=function() {
document.querySelector("[href=#testhome-1]").onclick=function() {
document.querySelector("#testhome-1").classList.add("clicked"); // or toggle
return false; // cancel link
}
}
or for any link:
window.onload = function() {
var links = document.querySelectorAll("a");
for (var i=0;i<links.length;i++) {
links[i].onclick = function() {
document.querySelector("#"+this.href.split("#")[1]).classList.toggle("clicked");
return false; // cancel link
}
}
}
.clicked { color:green }
<p id="testhome-1">Test</p>
<p id="testhome-2">Test</p>
Click 1 |
Click 2
While surfing I found an alternate code to add class to a particular id when i click to anchor tag.
It works for me. I don't know if it suits for all browsers.
Here I attached the code.
$("a").on("click", function() {
var id = $(this).attr('href');
$('.active').removeClass('active'); // remove existing active
$(id).addClass('active'); // set current link as active
});
Refer jsfiddle:
http://jsfiddle.net/PremalathaKumar/3J9WK/109/
The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)
Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)
use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});