I'm looking to change the class (hide) of certain div's dependent on their attribute values.Here's my code, it might make a bit more sense once you've seen this:
jQuery('#menu1').click(function() {
jQuery([.attr('imageref')]!=[.attr('menuref')]).removeClass('pics').addClass('.pics-hidden').removeClass('pics').fadeOut(200);
jQuery('#projectimages').masonry('reload');
});
So what I'm after is that if you click on #menu1 it will remove .pics with the same imageref attribute as the #menu1 atrribute menuref.
So clicking on #menu1 which has menuref equal to 1, will hide the relevant .pics with an imageref also equal to 1.Hopefully that makes sense, any help would be greatly appreciated!
You can use the css selectors to make this.
ie:
jQuery('#menu1').click(function()
{
jQuery('[imgeref="menuref"]').removeClass('pics').addClass('pics-hidden');
});
edit:
this will search all the elements wich his atribute 'imageref' is set to 'menuref' and then remove the class pics and add the class pics-hidden.
if it's only necesary to img tags. then you could change:
jQuery('[imgeref="menuref"]')
to
jQuery('img[imgeref="menuref"]')
You might use the jQuery filter function.
http://api.jquery.com/filter/
Description: Reduce the set of matched elements to those that match the selector or pass the function's test.
var menuref = ("#menu1").attr('menuref')
// Get all pics with an imageref attribute
jQuery(".pics[imageref]")
// Filter them
.filter(function(){
return $(this).attr('imageref') != menuref;
})
// Do what ever you want e.g. remove the pics class
.removeClass('pics')
You use the attribute-equals selector, and concatenate into the selector the value of the menuref attribute.
jQuery('#menu1').click(function() {
var menu = $(this).attr('menuref');
jQuery(".pics[imageref='" + menu + "']").toggleClass('pics pics-hidden')
.fadeOut(200);
jQuery('#projectimages').masonry('reload');
});
Related
I am trying to set an id attribute "gradient" to child element of the main one, which is grabbed by its id of "bg-gradient" , with below code, seems simple but its not working. Code is below, and the id "bg-gradient" is the only one in the document. It should set an id of "gradient" to the next div class "bg-gradient" when click the edit button but doesn't.
editSwatch() {
let elem = document.getElementById('#bg-gradient');
elem.childElement.setAttribute("id","gradient");
}
Any tips welcome.
Thanks
There is no childElement property for the DOM element instead use firstElementChild property to get the first child. In addition to that remove # from the argument since getElementById requires an id value and not a CSS selector.
editSwatch() {
let elem = document.getElementById('bg-gradient');
elem.firstElementChild.setAttribute("id", "gradient");
}
Or alternately you can use querySelector method to get the element.
editSwatch() {
document.querySelector('#bg-gradient > .bg-gradient').setAttribute("id", "gradient");
}
change
let elem = document.getElementById('#bg-gradient'); to
let elem = document.getElementById('bg-gradient');
and change
elem.childElement.setAttribute("id","gradient"); to
elem.firstElementChild.setAttribute("id","gradient");
dont put #. It is used by jquery like $("#bg-gradient")
I have a basic jQuery click function to shows/hides items based on their data-filter attribute—not using a plugin like Isotope, just a simple show/hide function— and I'd also like to apply the filter using the URL hash, when present, and append an 'active' class to the corresponding filter button.
In the markup, there is a grid of divs with the 'item' class, each of which contain anchor elements with the relevant data-filter, like so:
<div class="item">
Item
</div>
In my approach below, I'm trying to get the URL hash, hide all elements whose anchors do not match the hash string, and append the active class to the matching .filter-button element:
$(window).load(function () {
var hash = window.location.hash.substring(1);
if (hash) {
$('.item').each(function() {
$(this).children('.item-anchor').data('filter') !== hash;
}).hide();
$('a.filter-button[href="hash"]').addClass('active');
}
});
I got some assistance from this thread, but my case is a bit different. Interestingly, the code above is causing all the .item divs to hide and the .active class is not being appended as desired, so I'm not sure where I'm going wrong here. Any assistance is greatly appreciated, and please let me know if any further clarification is needed.
You should be invoking the filter function, instead of the each function. Additionally, you need to return the Boolean that we should filter based on. I'm not too sure what your link .active does, but I'm pretty sure you want to filter it by hash.
$(window).load(function () {
var hash = window.location.hash.substring(1);
if (hash) {
$('.item').filter(function() {
return $(this).children('.item-anchor').data('filter') !== hash;
}).hide();
$('a.filter-button[href="#'+hash+'"]').addClass('active');
}
});
How to disable Anchor(a ) tag on pageload or (by default disable) and enable it using jquery or Javascript??
You can change href attribute to data-href and add href attribute using:
$(function() {
$('[data-href]').each(function() {
var self = $(this);
self.attr('href', self.data('href'));
});
});
this will iterate over all elements that have data-href and add href attribute.
Since you need to disable the anchor tags by default, you can add a class to each tag and remove the calss using javascript.
.not-active {
pointer-events: none; // disables all the clicks
cursor: default; // shows the default cursor when you hover it instead of hand
}
Also you can change the font color and others so that the text does not appear like a link.
[EDIT]
<script>
var anchorElements=document.getElementsByTagName("a"); //Gives the list of all anchor tag elements in the page as an array.
for(i=0;i<anchorElements.length;i++) // Iterate over the array
anchorElements[i].classList.remove("not-active"); // for each element .classList returns the list of classes specified. remove() is an array function to remove an element in the array
</script>
If you are using jQuery you can use removeClass() jQuery function
$("a").removeClass("not-active");
To answer your comment ("How can I Remove calss using javascript ?? plz help") on removing class, there is a property called classList that contains its class attributes. This property provides methods that make it easy to add or remove a class. Something like:
var myItemClasses= document.getElementById("item").classList;
myItemClasses.remove("my-classname"); // to remove
myItemClasses.add("my-classname"); // to add
Hope this helps.
I have the following JS which sets a background class. However, is it possible to remove the previous set class?
I cannot remove them all as it contains other classes so just whatever is set from that on mouseover function or maybe if that's not possible removing wildcard class?
Classes being set all end with *-bean-bags so maybe we could do that but guess not that flexible.
Whats expected:
Hover item and set class
Hover another item and remove previous set class and set new class
Anyone have any ideas?
$('.ty-menu__submenu-list li').on("mouseover", function () {
var menuBackground = $(this).attr("data-background");
//console.log(menuBackground);
$("div.ty-menu__submenu.ty-menu__submenu-to-right").removeClass (function (index, css) {
return (css.match (/\b-bean-bags\S+/g) || []).join(' ');
});
$("div.ty-menu__submenu.ty-menu__submenu-to-right").addClass(menuBackground);
});
Store the class to remove in a custom attribute, like this:
$('.ty-menu__submenu-list li').on("mouseover", function () {
//Get the names of the new class
var menuNewBackground = $(this).attr("data-background");
//Get a reference to the element with the classes.
elm = $("div.ty-menu__submenu.ty-menu__submenu-to-right");
//Get the name of the old class
var menuOldBackground = elm.attr("data-background-old");
//First remove the old, add the new, and save the name of the new,
//so that it can be used to remove it later.
elm.removeClass(menuOldBackground)
.addClass(menuNewBackground)
.attr("data-background-old", menuNewBackground);
});
At the same time that you add the class to the parent div, add the same value to a data-prev-class (or whatever you wish to call it) attribute of the parent div. With it being in two places, you will be able to access it from a more variable like way.
I would like to find all elements inside a container that have a certain data attribute set to 1 as well as all elements that don't have this attribute set at all.
The data attribute is as follows:
$("#element").data("activate")
It can have a value of 1 or 0. If an element doesn't have an "activate" data property set I want to treat it as a 0.
I have the following code at present:
$("#content").find("[data-activate='0']").off();
However I would also like to do something like this:
$("#content").find("all where data-activate NOT exists").off();
ie if an element doesn't have the attribute even set.
You can use :not:
$('#content :not([data-activate])').off();
Or filter():
$('#content div').filter(function() {
return !$(this).attr('data-activate');
}).off();
$("#content").find(":not([data-activate])").off();
TRY
$("#content div").map(function {
$(this).data("activate","1")
}
This will simply add data-activate = 1 to all div inside #content whether it is 0 or that attribute does not exist
You can use the two selector at once to select the element, separting them (selectors) by comma
:not() Selector.
Attribute Equals Selector.
$("#content [data-activate='0'], #content :not([data-activate])").off();