We Keep Coding

How can I override javascript click event for only certain elements?

I'm working off of a tutorial from codrops. There is a hover event for each item, as well as a click event that triggers an anime.js function.
I'm trying to work this so certain items (grid cells) don't trigger the anime.js function when clicked, but the hover function still works.
I've tried simple css pointer-events, but that disables the hover function.
I've constructing the two groups as separate items in JS, but then the animation doesn't work the same (it staggers the two different classes).
I've tried things to stop the default javascript behavior, but it seems to have no impact on the code.
Help!!!
I've made a functioning codepen - in the option there I'm trying to disable click event for any grid item with the id="noClick" - to no avail.
$('noClick').observe('click', function(event) {
Event.stop(event);
});
This is the primary function that creates the event
this.DOM.items.forEach((item, pos) => {
// The item's title.
const title = item.dataset.title;
// Show the title next to the cursor.
item.addEventListener('mouseenter', () => cursor.setTitle(title));
item.addEventListener('click', () => {
// Position of the clicked item
this.pos = pos;
this.title = title;
// Start the effect and show the content behind
this.showContent();
// Force to show the title next to the cursor (it might not update because of the grid animation - the item under the mouse can be a different one than the one the user moved the mouse to)
cursor.setTitle(title);
});
});
where 'item' is
this.DOM.grid = this.DOM.el.querySelector('.grid');
// Thr grid items
this.DOM.items = [...this.DOM.grid.children];
// totla number of grid items
this.itemsTotal = this.DOM.items.length;
I've tried to create multiple items
this.DOM.grid = this.DOM.el.querySelector('.grid');
this.DOM.yesClick = this.DOM.el.querySelector('.yes-click');
this.DOM.yesClickTwo = this.DOM.el.querySelector('.yes-click-2');
this.DOM.noClick = this.DOM.el.querySelector('.no-click');
// Thr grid items
this.DOM.items = [...this.DOM.yesClick.children, ...this.DOM.yesClickTwo.children];
this.DOM.itemsNo = [...this.DOM.noClick.children];
this.DOM.allItems = [...this.DOM.noClick.children, ...this.DOM.yesClick.children, ...this.DOM.yesClickTwo.children];
// totla number of grid items
this.itemsTotal = this.DOM.allItems.length;
This works, but messes with the animaton.
Here is the codepen
I feel this is really simple and I'm missing something. Looking to learn, so a push in the right direction or any help would be greatly appreciated!

1. You have multiple elements with the same ID. But ID attribute must be unique.
2. You used $('noClick'), but ID selector would look like #noClick
If you want to mark few elements, use a class and select them like .elementclass. It is possible for element to have multiple classes, separated by space.

Your selector doesn't seem correct so you either need #noClick or .noClick as the selector however you can stop the javascript from bubbling like this :-
$(".noClick").click(function(e) {
// Do something?
e.stopPropagation();
});

How to stop a HTML element fading out using Javascript?

UPDATE
I have a jsfiddle showing the issue here: http://jsfiddle.net/waf11s6u/1/ When you type a letter into the search bar, the custom scrollbar attached to the div disappears. The scrollbar may be getting faded out by the code that fades out non-matching words from the div?
~~
I’m creating a custom multi-friend selector for a Facebook game, it looks similar to this: http://tinyurl.com/gus79cf
The user can type into a search bar and any matching friend names appear in the area below.
I’m using a custom scrollbar plugin to design the scrollbar for scrolling down through the list of friends.
This is the plugin’s site: http://manos.malihu.gr/jquery-custom-content-scroller/
Visually the scrollbar is made up of two parts, the first is the track (I’ve drawn the track onto the background image, so it’s not actually part of the Javascript code), and the second part is the icon, the icon is the small image that moves up and down along the track.
The scrollbar works perfectly (meaning that the icon slides up and down correctly), except for one thing, whenever the user types a letter into the search bar the icon disappears, and it only becomes visible again when the search bar is empty.
The div which contains the names & images of friends is created dynamically in Javascript (it's called "mfsForm"). When the user begins typing a name, I have some Javascript that will fade out non-matching friend names & images.
I think that this code is also causing the icon to disappear.
This is the code in question:
// Earlier code here connects to Facebook's API.
// Then get the list of friends for this user with the Graph API
FB.api('/me/invitable_friends?limit=48', function(response) {
var container = document.getElementById('mfs');
// Creating the div "mfsForm" (this will hold the friend names & photos, and is also what the custom scrollbar is applied to.)
var mfsForm = document.createElement('form');
mfsForm.id = 'mfsForm';
mfsForm.className = " mCustomScrollbar mfsForm";
// Iterate through the array of friends object and create a checkbox for each one.
for (var i = 0; i < response.data.length; i++) { //Math.min(response.data.length, 10)
var friendItem = document.createElement('div');
friendItem.id = 'friend_' + response.data[i].id;
friendItem.style.cssText="width:100px; height:100px; padding:7px; color:#FFF;"
friendItem.style.cssFloat="left";
friendItem.innerHTML = '<input type="checkbox" name="friends" value="' + response.data[i].id + '" />';
var img = document.createElement('img');
img.src = response.data[i].picture.data.url;
img.style.cssText = 'width: 70px;height: 70px;'
friendItem.appendChild(img);
var labelName = document.createElement('label');
labelName.style.cssText = 'font-size: 14px;'
labelName.innerHTML = response.data[i].name;
friendItem.appendChild(labelName);
mfsForm.appendChild(friendItem);
}
container.appendChild(mfsForm);
console.log(mfsForm);
$(mfsForm).mCustomScrollbar();
// Create a button to send the Request(s)
var sendButton = document.createElement('div');
sendButton.id = 'sendButton';
sendButton.onclick = sendRequest;
container.appendChild(sendButton);
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val()//, count = 0;
// Loop through the comment list
$("#mfsForm div").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut("slow");
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
//Attempting to fade in the icon here:
$(this).next('.mCSB_dragger_bar').fadeIn("slow");
}
});
})
});
I think that $(this).fadeOut("slow"); is making the scrollbar icon fade out. I've tried to target the icon by referencing its class (mCSB_dragger_bar) and fading it in here:
$(this).next('.mCSB_dragger_bar').fadeIn("slow"); but it's not working.
Any help or suggestions on what I could try to fix this problem would be really appreciated, thank you in advance!

What is the problem?
You do not show normal code to see where your script delete icon and i can say you to force your script to display this icon.
Put to input the code onchange="f()" or onkey pres or other.
And
<script>
function f(){ //$('#icon') the element witch contain icon that disapear
$('#icon').css('visibility','visible').css('display','block');
$('#icon').attr('background','url('/icon.png')')}`
/*$('#parent-of-icon').appendChild(icon );*/
And other depend why the icon disapear.
May be your script delete the icon (html element) then create it.
In this mode the icon will always appear on each key press.

Try $(this).find('.mCSB_dragger_bar').fadeIn("slow"); not $(this).next('.mCSB_dragger_bar').fadeIn("slow");
If element with class name mCSB_dragger_bar exist on $(this) element ( $this -> $("#mfsForm div") -> some div's on element with id=mfsForm) it will find it and show;
NEXT return only one element after $this, may be between $(this) and mCSB_dragger_bar exist another element.
Also try $(this).parent().find('.mCSB_dragger_bar').fadeIn("slow"); if mCSB_dragger_bar and $(this) is on the same doom level

Add class to sibling divs using a number to determine the amount of divs to add class to?

I am trying to add a class to the siblings of a nested div depndant on the length of a scope attached to the dom in itself, for the purpouse of demonstration i have just declared a variable with a number assigned to it, so here is my current js:
var countdates = $('.date').length;
var minstay = 5;
alert(countdates);
$('.date').on('click', function () {
$(this).addClass('dateset' + minstay);
});
and here is a example fiddle basically my question is if i click on a div i want the next 5 divs to have a class added to them even if they span across the nested divs??
I have tried to google this but i can't seem to get the terminology right.

Get the index of the current one, add the minstay, and use a selector that selects everything inbetween ?
var minstay = 5;
$('.date').on('click', function () {
var start = $(this).index('.date'),
end = start + minstay;
$('.date:lt('+end+'):gt('+(start-1)+')').addClass('dateset');
});
FIDDLE

Load different content in FancyBox2 based on table cell index

I have a table that shows presentations and their times. When a cell is clicked, it brings up a FancyBox with the presentation's title, description, and the speakers. The former two items are static, but the latter changes based on the time the presentation is being held.
What I'm trying to figure out is how to change the content of the same FancyBox depending on which table cell was clicked. The number of cells is known. I got up to getting the index of the cell, but not sure where to go from here.
Full page: https://secure.michebag.com/static/elevate-breakout/elevate-breakout.html
jQuery:
$(document).ready(function(){
// Get table cell index
// Assign dynamic content
$('table tr:first td:eq(1)').click(function(){
// What goes here?
});
});

EDIT: Since we're talking about static content, my post is long and useless. The gist of the problem is still how you introduce the information to your code - I would create some objects to describe what you want to add, identifying different meetings/talks with their hrefs. Since it's static content, you only need to do this once(as the page loads) - no need for any fancy click handlers and the like.
Sample code:
var meetings = {
"#pwap" : { color: "dark-pink", speakers: [ "Speaker Guy", "Speaker Girl" ] }
// And so on
}
// Then simply loop over the meetings and do your work over each one.
for (var href in meetings) {
// Color
var meeting = meetings[href];
$('a[href=' + href + ']').parent().addClass(meeting.color);
// Add speakers
var element = $(href);
var speakers = meeting.speakers;
for (var i = 0, length = speakers.length; i < length; i++) {
// Add each speaker as a paragraph with his name.
$('<p>').text(speakers[i]).appendTo(element);
}
}

Tracking changes in web application

I have an application in which the user needs to see the changes that have been made during the latest edit.
By changes I mean, the changes made in all inputs like a textarea, dropdowns.
I am trying to implement this by showing a background image on the right top and then when the user clicks this background image, a popup is shown which shows the difference.
I am using prototype 1.7.0.
My First question would be:-
1. What would be the best approach to implement this functionality?
2. Can I put a onClick on the background image?

There some functions in the jQuery library that I believe would be helpful to you. If you are using prototype, I would guess that there is some similar functionality you may utilize.
I would suggest writing some code like this:
var $input = $('input').add('textarea').add('select');
$input.each(function() {
var id = $(this).attr('id');
var value = $(this).val();
var hiddenId = 'hidden' + id;
var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId);
$(this).after(newHiddenInput);
});
The above code will create a new hidden input for each input, textarea, and select on your page. It will have the same value as the input it duplicates. It will have an id equivalent to prepending the id with the word 'hidden'.
I don't know if you can attach a click handler to a background image. If your inputs are enclosed inside a <div>, you may be able to get the result you want by attaching the click handler to your div.
In any case, you should now have the old values where you can easily compare them to the user's input so that you can prepare a summary of the difference.

Prototype gives us the Hash class which is almost perfect for this but lacks a way of calculating the difference with another hash, so let's add that...
Hash.prototype.difference = function(hash)
{
var result = this.clone();
hash.each(function(pair) {
if (result.get(pair.key) === undefined)
// exists in hash but not in this
result.set(pair.key, pair.value);
else if (result.get(pair.key) == pair.value)
// no difference so remove from result
result.unset(pair.key);
// else exists in this but not in hash
});
return result;
};
This is no way to tell if an element was clicked on just it's background image - you can find out the coordinates where it was clicked but that is not foolproof, especially since CSS3 adds complications like multiple backgrounds and transitions. It is better to have an absolutely positioned element to act as a button.
$('button-element').observe('click', function() {
var form_values = $H($('form-id').serialize(true));
if (old_values) {
var differences = old_values.difference(form_values);
if (differences.size()) {
showDiffPopup(differences);
}
}
window.old_values = form_values;
});
// preset current values in advance
window.old_values = $H($('form-id').serialize(true));
All that remains is to implement showDiffPopup to show the calculated differences.