JQuery .not(find()) or - can it be used? - javascript

I have the following html:
<div class="profileRowHeader"><!-- div 1 -->
<div class="folderIcon">
<i class="glyphicon glyphicon-arrow-close"></i>
</div>
</div>
<div class="profileRowHeader"><!-- div 2 -->
<div class="folderIcon">
<i class="glyphicon glyphicon-folder-open"></i>
</div>
</div>
<div class="profileRowHeader"><!-- div 3 -->
<div class="folderIcon">
<i class="glyphicon glyphicon-folder-close"></i>
</div>
</div>
When I click element with class .profileRowHeader, it does some stuff and changes the icon folder from closed to open. As in middle div above.
$this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
Works great. Now, if I click on div 3 above, div 2 still has icon folder-open, so to combat this i close all the folder icons whenever any profileHeaderRow is clicked.
$(".folderIcon").removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
Problem of course is that i'm using toggleClass, so the icon within the div i'm clicking will go to closed, then will toggle itself open again.
So, can I somehow find the class folderIcon within the div I clicked and not apply the class change to it. Hope that makes sense.
This is what I'm trying but simply does not work:
$(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').removeClass('greenDragBg').addClass('glyphicon-folder-close');
Full code as it is:
$('.profileRowHeader').click(function() {
$(".folderIcon").not(find(".folderIcon")).removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
$this.find(".folderIcon").toggleClass('glyphicon-folder-open glyphicon-folder-close');
});
Summary: I have x number of divs with class profileRowHeader within each of them is a folder icon, all closed... when I click any of the divs with class profileRowHeader I want that icon to become open, the rest are closed. When I click that div again, it changes to closed icon. However, if it is left open and another div is clicked it should close the open one, and the new folder icon within the new profileRowHeader becomes open.
Hope that's a bit clearer

This is how you can find elements inside the clicked element:
$(".folderIcon").not( $(this).find(".folderIcon") ) //...
Or a slightly shorter version setting a context for the selector:
$(".folderIcon").not( $(".folderIcon", this) ) //...

$('.profileRowHeader').click(function () {
// reset state of all icons back to closed
$('.glyphicon').removeClass('glyphicon-folder-open').addClass('glyphicon-folder-close');
$('.glyphicon').find(':first').toggleClass('glyphicon-folder-close glyphicon-folder-open');
});

Related

Accordion closing onClick anywhere in container

I am trying to create an accordion for a project I'm working on. For the sake of argument, lets assume this accordion only has one container. So far, I've got it all working, however when I expand the accordion, which will only expend if I click on the header, I am then able to close the open container by clicking anywhere in the container, rather than just the header.
I've tried a few different things resulting in null .toggle errors so far. Below is a snippet of the accordion itself, along with the JS I'm using with it. Please bare in mind the accordion functions correctly and displays correctly, its the click function that's the issue (meaning my CSS is fine so no point sharing):
JS:
const accordion = document.getElementsByClassName('container1');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active');
});
}
Accordion HTML:
<div class="accordion-body">
<div class="accordion">
<hr>
<div class="container1" id="container1">
<div class="label" id="linkId">Generate a payment link</div>
<div class="content">
<div class="form">
</div>
</div>
</div>
<hr>
</div>
</div>
Essentially, I only even want the accordion to open/close if the 'label' div is pressed. This is because within my accordion there are buttons, so at the moment when a button is pressed when accordion is open, it changes the class which closes the accordion back up. Right now I understand that the clickable area is 'container1' but I've not been able to make it work against the label div.
I can also provide a link to the webpage where it is happening, happy to provide this via PM.
I tried changing the JS to the below:
const accordion = document.getElementsByClassName('container1');
const linkId = document.getElementById('linkId');
for (i=0; i<accordion.length; i++) {
document.getElementById('linkId').addEventListener('click', function () {
accordion.classList.toggle('active');
});
}
However the above produces the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')
at HTMLDivElement. (txninfo.php:825:25)
LINE 825 is the following:
accordion.classList.toggle('active');
Any help would be massively appreciated
accordion in that case is instance of HTML-Collection and not Element as you assume.
So you correctly iterate over the collection of elements, you now just want to select the current element (where key == i) of iteration instead of the whole collection.
accordion[i].classList.toggle('active');
then you should have an Element and should be able to access it´s properties like classList
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Apply class to neighbor div when div gets class

I have a div containing all my content, and then I have a div containing pop-up windows. So basically something like this:
<div class="content">
Some content
</div>
<div class="popup-wrapper">
Popup content
</div>
Then at some point a class is added to the popup-wrapper due to some button click, that in Angular would look something like:
<button (click)="popup = !popup">Click me</button>
<div class="popup-wrapper" [ngClass]="popup ? 'is-active' : ''">
Popup content
</div>
My question is: Are there some way (CSS wise. JS would probably also do if no other alternative is available) that when popup-wrapper has the class is-active I can also target content as well ?
The issue for me not just putting the same JS into the content div, i.e. [ngClass]="popup ? 'is-active' : ''" is because there are several instances that can activate a popup, and other popup wrappers as well. So if I were to do this I would have to go through every page that has this kind of popup-wrapper, and paste similar code into every content div, but with different state names.
So I just thought it would be much easier, if I could target the content div whenever the popup-wrapper div had the is-active class.
For my understanding, you'll need something like that:
function anyName () {
let x = document.getElementByClassName('is-active');
if (x === true) {
// do something
}
}
Depending on what ever you want to do next, you can either go for an identifier like your div's className ('content') or you try to target it by its position, like 'previousElementSibling'

VueJs 2.0 - When press spacebar add/activate CSS Class

A beginner question and not sure if vuejs can do this.
If you press a spacebar I want to add a css class. In this case to show the div
In this code I try something but that didn't work
<div #keyup.space:class="show" tabindex="0" >test</div>
https://jsfiddle.net/j7zoa2du/
The below example only works if the div (or any other element you want to add the #keyup) has the focus. If you want to trigger the events globally, it's worth checking out this package: https://www.npmjs.com/package/vue-global-events.
Once you added the package to your project, you could add this to your template section:
<GlobalEvents #keyup.space="activeClass=!activeClass"/>
to toggle the active class or set it to true alternatively.
its should be like this
<div #keyup.space="activeClass=true" :class="{'mycls':activeClass}" tabindex="0" >test</div>
and in the data you should have
data(){
return{
activeClass:false
//some other data you have
}
},
this will add the class mycls to div when spacebar is pressed (on the div)

How to get the div behind the div i clicked

Please take a look here at what I'm trying to achieve: http://jsfiddle.net/3m6r7ud2/4/
I have the following html page that looks like this:
<div class="page_conatiner" id="page1">
<img src=$file1>
<div class="page_conatiner" id="page2">
<img src=$file2>
<div class="page_conatiner" id="page3">
<img src=$file3>
And so on.
I also have a fixed button that shows up on hover:
<div class="rotate_button" id="rotate_left" ></div>
<div class="rotate_button" id="rotate_right" ></div>
This is the jQuery I'm using:
$(document).on("click", ".rotate_button", function(){
var direction = $(this).attr("id");
var page_num = ?
rotate_file(page_num,direction)
})
The buttons are in fixed locations on the page, and show on hover. When clicking on this button, I want to get which div was behind that div while clicking
so I could know which of the pages I need to rotate.
How can I do this?
First, I'm not certain what animation you are going for, but there might be a jQuery widget that will do what you want out of the box. Idk. The bootstrap one is handy, but maybe all of bootstrap is more than you want: http://getbootstrap.com/javascript/#carousel.
To answer your question: I would set a variable somewhere that keeps track of the current page num. Set it to 0 (or 1 if that's the first page number) when the page loads, and then in your click handler, increment it by 1. And then make sure to reset it to 0 (or 1) again when it gets high enough to start over. Does that answer your question?

display text when image on-click/hide text when different image click

I have created the following effects on the images seen here.
You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.
What jQuery or javascript code do I need to do this?
p.s. How do I properly post the code I have now. I tried to paste code in "enter code here," but received errors
This is fairly simple if you add rel="img-id" to each link you want to hide or show as follows:
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#">sunimg</a>
<a id="plane" href="#">planeimg</a>
<a id="nano" href="#">nanoimg</a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: Sun
2nd: Airplane
3rd: Nano
</div>
</div>
And then update your ready function jQuery as follows:
// target each link in the navigation div
$('#navigation a').click(function(e) {
// link that you clicked
clicked = $(this).attr('id');
// this is faster than the .each() you used
$('#navigation a').removeClass('active');
$(this).addClass('active');
// hide all links, then show the one with the same rel as the id clicked
$('#popuptext a').hide();
$('#popuptext a[rel='+clicked+']').show();
// prevent the default link action
return false;
});
​

Categories