Add class to dynamically changing element - javascript

I'm trying to use the attrchange plugin to listen to a change in one element and add a class to another element. Kind of novice to jquery and javascript and could use some help with this...
function navchange() {
document.getElementByClassName("sticky-element-cloned").addClass('shrinkwrap');
}
$(".sticky-element-original").attrchange({
trackValues: true,
callback: function (event) {
//event.attributeName - Attribute Name
//event.oldValue - Prev Value
//event.newValue - New Value
navchange();
}
});
Thanks for any insight.

Two things. Firstly, fix your DOM method to make it valid.
document.getElementsByClassName(".sticky-element-cloned")[0].classList.add("shrinkwrap");
Secondly - isn't the class sticky-element-cloned? Then why are you using sticky-element-original in your jQuery?
$(".sticky-element-cloned").attrChange({...});
Or (do one or the other, not both)
Change it in your JavaScript:
document.getElementsByClassName(".sticky-element-original")[0].classList.add("shrinkwrap");

On the navchange function you're mixing your pure Javascript with your jQuery. Try:
$(".sticky-element-cloned").addClass("shrinkwrap");

Related

Encapsulate jQuery block for reuse

I have this jQuery code that I was originally planning to use only once, but now it turns out I have to use it on multiple instances, but I am not very familiar with code encapsulation.
So my question is, first the block:
$('.share-checklist-trigger').click(function () {
$('body').addClass('no-overflow');
$(document).scrollTop(-1);
$('.widget-top-drawer.share-checklist-drawer').slideToggle(244, "linear").dimBackground({
darkness: 0.2
});
$('.widget-top-drawer-header').slideToggle(244, "linear").attr('style', 'display: flex;');
$('.dashboard-main').addClass('top-draw-out');
}).stop();
The things that will change from object reference to another is the class after the main class .widget-top-drawer.share-checklist-drawer , e.g. - .share-checklist-drawer will be something else and the main selector e.g. - .share-checklist-trigger to something else.
How am I able to turn this into a sort of a plugin-type block, so that I can use it on multiple objects, without copy-pasting the same code over and over again?
You don't necessarily need to create an entire plugin for this. Instead you can use the common .share-checklist-trigger class to group the required elements. You can then place a data attribute on those elements to change the executed logic within the event handler. Try this:
<div class="share-checklist-trigger" data-target=".widget-top-drawer.share-checklist-drawer">Foo</div>
<div class="share-checklist-trigger" data-target=".fizz.buzz">Bar</div>
$('.share-checklist-trigger').click(function () {
var target = $(this).data('target');
$('body').addClass('no-overflow');
$(document).scrollTop(-1);
$(target).slideToggle(244, "linear").dimBackground({
darkness: 0.2
});
$('.widget-top-drawer-header').slideToggle(244, "linear").css('display', 'flex');
$('.dashboard-main').addClass('top-draw-out');
}).stop();
Also note the use of css() over setting the style directly using attr(). this could be further improved by setting the display: flex rule in a class in an external stylesheet and using addClass() in your JS code.

jQuery - addClass not adding class to html element

I try to add CSS class to <li> element, when I click on the button but addClass not working.
Here is my JS:
$('.test').click(function(event) {
var centrum1 = $('.p17');
$('section.bok-map').find( centrum1 ).addClass('active-region');
});
And this how is looking HTML code:
Where is the problem? find() returns true.
Here is demo: http://demo.vrs-factory.pl/mapDemo/
You had a couple of errors, as you were not selecting the correct element, hence the length of the selector was 0.
Firstly, the class is called pl7 not p17 and secondly, when using removeClass you don't put the . before the name of the class. As you are using removeClass it is understood that you want to target a class, hence not requiring you to specify this by adding the dot.
<script>
var centrum1 = $('.pl7');
$('.test').click(function(event) {
$('section.bok-map').find( centrum1 ).removeClass('pl7');
});
</script>
Also, it may be worth noting that since you are only referencing$(.pl7) once you do not necessarily have to assign it to a variable. You could also write it as below. It is up to you.
$('.test').click(function(event) {
$('section.bok-map').find('.pl7').removeClass('pl7');
});

jquery selector on javascript variable

Hey guys I'm having trouble implementing some jQuery code. I have a javascript function that stores the element that the function was called from (a td) and then selects it's parent node and changes the class of that parentnode (a tr). I would like to change it to jQuery so I can take ad vantage of the .addClass tool. Here is the code
function draftHandler(teamID, element, from, name, pos)
{
if(...something...)
element.parentNode.className = "drafted";
}
I have been trying something like...
element.closest('tr').addClass('drafted');
...without any luck. Thanks in advance!
$('td').parent('tr').addClass('drafted').
You can replace $('td') with the element.
The parent('tr') is only added security making sure you indeed add the class to the parent tr element. It's not needed IF the first parent of your td is in fact a tr.
$(element).closest('tr').addClass('drafted');
Try:
$(element).parent().addClass('drafted');

How to use in jQuery :not and hasClass() to get a specific element without a class

I have this line of code:
$('#sitesAccordion .groupOfSites').click(function() {
var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');
console.log(lastOpenSite);
});
I get "false" instead of getting one of the other elements (assuming that there is one - and there must be). I guess the problem is with:
.hasClass(':not(.closedTab)');
What is the problem?
My purpose is to create my own accordion (without using jQuery UI)
and I am trying to write it like this:
$('#sitesAccordion .groupOfSites').click(function() {
//Get the last opened tab
var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');
//Close last opened tab and add class
lastOpenSite.hide().toggleClass('closedTab');
//Open the current Tab
$(this).children('.accordionContent').toggle('fast');
// remove class from open tab
$(this).toggleClass('closedTab');
});
Is this the best way?
thanks,
Alon
Use the not function instead:
var lastOpenSite = $(this).siblings().not('.closedTab');
hasClass only tests whether an element has a class, not will remove elements from the selected set matching the provided selector.
It's much easier to do like this:
if(!$('#foo').hasClass('bar')) {
...
}
The ! in front of the criteria means false, works in most programming languages.
jQuery's hasClass() method returns a boolean (true/false) and not an element. Also, the parameter to be given to it is a class name and not a selector as such.
For ex: x.hasClass('error');
You can also use jQuery - is(selector) Method:
var lastOpenSite = $(this).siblings().is(':not(.closedTab)');
I don't know if this was true at the time of the original posting, but the siblings method allows selectors, so a reduction of what the OP listed should work.
$(this).siblings(':not(.closedTab)');

Javascript/jQuery .each and syntax issue

I'm having some trouble writing a function to change a background image on a div on document.ready
I haven't made a jsfiddle as i think the problem is just my poor (but improving) jQuery skills. Please let me know if you think one is needed.
Background Info ->
I have a collection of div's with a class of portlet-visible or portlet-hidden, each of these div's will have another class of red-arrow (or a different color, but once i have one color it should be easy to extrapolate). When the page loads i would like a function that can find all divs with a class of portlet-hidden or portlet-visible and see if those have a class of red-arrow. If they do then change the background image src to a different value.
Im really struggling to work this one out, and any help is much appreciated.
My HTML
<div class="portlet-visible red-arrow"></div>
My CSS
div.portlet-visible
{
position:absolute;
top:12px;
right:10px;
background-image:url(../images/red-arrow-up.png);
width:14px;
height:14px;
}
And finally my javascript
$(document).ready(function() {
$(".portlet-hidden" && ".portlet-visible").each(function() {
if ($("this").hasClass(".red-arrow")) {
$(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
};
});
});
Multiple selectors should be separated by a comma(,) and also css method takes a string or a map. Try this.
$(document).ready(function() {
$(".portlet-hidden, .portlet-visible").each(function() {
if ($(this).hasClass("red-arrow")) {
$(this).css('background-image', "url('../images/blue-arrow-up.png')")
};
});
});
I would have written the selector this way
$(".portlet-hidden, .portlet-visible")
Unless there's a specific reason you want to do this with jQuery you should just use CSS...
div.portlet-visible
{
background-image:url(../images/red-arrow-up.png);
width:14px;
height:14px;
}
div.portlet-visible.red-arrow
{
background-image:url(../images/blue-arrow-up.png);
}
Any div with the class "portlet-visible" is defined in the first block, and any div with the classes "portlet-visible" and "red-arrow" will use the same css, but also apply the new background image.
http://jsfiddle.net/johncmolyneux/gcm5b/
First... Archer's answer is spot on-- what you're trying to do with jQuery can be done with CSS alone.
But if for some reason you do need jQuery, a few things are wrong here.
First, as justtkt said in his answer, your selector is wrong. There is no need (and is syntactically wrong) to use conditional operators like && or || in a jQuery selector. This is simply because there is already conditional syntax built in to CSS, upon which jQuery selectors are directly based.
.this-class.that-class
Selects all elements with both .this-class, and .that-class.
#this-id.that-class
Is a very (possibly overly) specific declaration that select an element (there should only be one ID per page) with both #this-id and .that-class
For more on selectors, please read this very thorough, complete, and educational link http://www.w3.org/TR/selectors/
Additionally and importantly
This line:
$("this").hasClass(".red-arrow")
Is wrong! hasClass does not require a selector (the ".") because it only takes a class. It should be
$("this").hasClass("red-arrow")
Also!!
$(this).css(background-image, url('"url(../images/blue-arrow-up.png)"')
This line has some errors... should be:
$(this).css("background-image", "url(../images/blue-arrow-up.png)")
although I think the following syntax is easier:
css({'background-image' : 'url(../images/blue-arrow-up.png)'})
Your selector is just incorrect. If you want to match things with both classes, it'd be:
$('.portlet-hidden.portlet-visible').each( ...
If you want to match either of the classes:
$('.portlet-hidden, .portlet-visible').each( ...
The expression ".portlet-hidden" && ".portlet-visible" will always evaluate to just ".portlet-visible".
Instead of && two selectors together, use the multiple selector like $(".portlet-hidden, .portlet-visible") or the .add() method to build up your jQuery.
Your current line is actually anding the two strings together, which I believe will return boolean true in Javascript.
if ('$("this").hasClass(".red-arrow")') { <--- this condition is a string here
Should be:
if ($(this).hasClass(".red-arrow")) {
change in selector ".portlet-hidden,.portlet-visible"
change if condition to boolean from string
change in css.
$(".portlet-hidden,.portlet-visible").each(function(){
if ($("this").hasClass("red-arrow")){
$(this).css("background-image", "url('../images/blue-arrow-up.png')");
}
});

Categories

Resources