We Keep Coding

Button Onclick only working on first element

When clicking button on elements, overlay box only works with first one, not the rest
I tried already to add 2 classes but not working as I read that that might be the issue, but I am not able to make it work properly.
<div class="container">
<input type="button" value="Contactar ahora" id="Overly" class="overly"
/>
</div>
<div id="ogrooModel" class="modalbox ogroobox" >
<div class="dialog">
<button title="Close" onClick="overlay()" class="closebutton" id="close">close</button>
<div style="min-height: 150px;">
</div>
</div>
</div>
<script>
//only javascript
document.getElementById("Overly").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display = 'block';
}) ;
document.getElementById("close").addEventListener("click", function(){
var e =document.getElementsByClassName("modalbox");
e[0].style.display= 'none';
});
</script>
What exactly to change in that code so the rest of elements display the box after clicking on button?

You don't need onClick="overlay()" for your close button, as you are already binding it with a click event listener in your script.

Get parent form class when you click on an element jQuery

Let's start with the HTML:
<form class="send_units">
<div class="buttons">
<div id="button_attack" class="button">
<div class="caption at">Attack!</div>
</div>
<div id="button_support" class="button">
<div class="caption sp">Support!</div>
</div>
</div>
</form>
This is an example of the code on a website. I've made a script for that website. To run that script, a player can use Tampermonkey. It just adds some code to the webpage. Note: We cannot change the HTML!
So, I've to get the classname of the form (send_units in this example), when you click on the Attack! button.
To figure out on which element the user clicks, we use Javascript:
window.onclick = function(e){
var clickedClass = e.target.className;
var clickedID = e.target.id;
if(clickedClass == 'caption at'){
// Check if parent form has class send_units
}
}
So, when the user clicks on the button with class = 'caption at', we have to check if the form class is send_units.
I've tried this to get the class:
jQuery(e).find('form').parent().prop('class')
but it returns "undefined". (Logic says to me: Get the parent of the clicked element, with element "form" and get the className of that element).
Can anyone explains to me what I'm doing wrong here?
Thanks!

Use .parents( selector ) to traverse multiple levels up the DOM to the element you need and .hasClass( class ) to test for presence of a class.
window.onclick = function(e){
var clickedClass = e.target.className;
var clickedID = e.target.id;
if(clickedClass == 'caption at'){
var is_send_units = $( e.target ).parents( 'form' ).hasClass( 'send_units' );
console.log( is_send_units );
if( is_send_units ){
// do stuff
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="send_units">
<div class="buttons">
<div id="button_attack" class="button">
<div class="caption at">Attack!</div>
</div>
<div id="button_support" class="button">
<div class="caption sp">Support!</div>
</div>
</div>
</form>

Try this out since you know the div levels already.
$(e.target).parent().parent().parent().attr("send_units")

Get parent of the parent of div

I have searched and tried many things to do this such as closest() and parents() and parent() and find() But i couldnt make it to work at all .
I have this html
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'></div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'></div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng"></div>
</div>
</div>
</div>
So what i want is when i click on on div class deletepng i want to remove the two divs unlikepng and likepng .
this js
$(document).on ("click", ".deletepng", function () {
$this = $(this);
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
});
I just wonder why they dont work those my trying . Where it can be my mistake ?
EDIT:
i dont know if this have a role or not , i have what i tried inside Dialog box like that
$(document).on ("click", ".deletepng", function () {
$this = $(this);
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>'); // do something here
$(this).dialog("close");
//alert( $this.closest(".like").html()); I could just make this to work
// alert( $this.parents(".like_holder").html()); wont work
// alert( $this.closest(".like_holder").html()); wont work
// alert( $this.parent().parent().html()); wont work
// alert( $this.closest(".like_holder").find(".like_holder").html()); wont work
}
}
});
});

use closest then use the second argument as the context.
$(document).on("click", ".deletepng", function() {
var $holder = $(this).closest('.like_holder');
$('.likepng, .unlikepng', $holder).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width='28px' src="link to image" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'>hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'>like</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'>unlike</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete</div>
</div>
</div>
</div>
EDIT
Since your update, you need to set a global variable to remember $this or the container/holder. try this:-
var $holder;
$(document).on("click", ".deletepng", function() {
$holder = $(this).closest('.like_holder');
$('<div>' + c_delete + '</div>').dialog({
resizable: false,
buttons: {
"Yes": function() {
chat_text_h.html('<div class="removed"> Removed</div>');
$(this).dialog("close");
$('.likepng, .unlikepng', $holder).remove();
}
}
});
});

$this.closest(".like").html(); => this will return HTML of parent div, where delete button is. Not removing the element
$this.parents(".like_holder").html() => this will return html of div.message_holder. Not removing the element.
$this.closest(".like_holder").html() => this will return html of div.like_holder
$this.parent().parent().html(); close enogh, but still far => html of div.like_holder
$this.closest(".like_holder").find(".like_holder").html(); return null => no child element with class like_holder in div.like_holder.
Kind of example
$(document).on ("click", ".deletepng", function () {
var $parent = $(this).parent().parent();
$parent.find('.likepng').remove();
$parent.find('.unlikepng').remove();
});
.deletepng{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='message_holder area2 user45 chatid32'>
<a class='avatar' title='jhon'>
<img height='28px' width = '28px' src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />
</a>
<div class='flag_holder'>
<div class='edited png32'></div>
<div class=' png32'></div>
</div>
<div class='message user_chat'> hghgghgh</div>
<div class='like_holder'>
<div class='chattime'>02-12 22:16</div>
<div class='likepng'> like me</div>
<div class='likescore'>5</div>
<div class='unlikescore'>0</div>
<div class='unlikepng'> unlike me</div>
<div class="like">
<div class="editpng"></div>
<div class="deletepng">delete button</div>
</div>
</div>
</div>
UPDATE
If you want to make it from dialog box, or other things - you can't use this variable. This is not making any sense. You should provide unique id to your message_box and then use it, like
$(id_of_message_box).find('.likepng, .unlikepng').remove()
or as I can see from your code:
var $parent = $this.parent().parent();
$parent.find('.likepng, .unlikepng').remove();
It means you should use $this in your function instead of $(this)

You can access the parents parent of your $(this) like:
var likeholder;
likeholder = $(this).parent().parent();
However this is generally ill advised. You'll have a jquery object though.
Let me know how you get on

In order to select the parent of a parent of an element you try this:
$(document).on ("click", ".deletepng", function () {
alert( $($(this).parent()).parent().html());
});
Since you can only execute the parent() method on Jquery Objects.
Here's an example unrelated to your code. JSFiddle.

Try this, you need sibling of parent;
alert( $this.closest(".like").parent().find(".unlikescore").html());
alert ($this.closest('.like').siblings('.unlikepng').html()) ;
working js fiddle

Fullcalendar add icon to event and not trigger eventClick

I'm trying to add custom "options" icon to the event. I want that if i click on this icon, small tooltip appears. But if i click on this icon, eventClick is triggered.
This is my html
<div class="fc-event-content">
<div class="fc-event-title" style="float: left">
<div class="title_info" id="prvni_radek">Text on row one</div>
<div class="title_info">Text on row two</div>
</div>
<div class="tecky"><img src="./image/tecky.png"></div>
</div>
I tried this JS
<script>
$(".tecky").on("click", function(event){
event.stopPropagation();
alert("test");
});
</script>
event.stopPropagation(); i found in this article but it won't help

Try use event.preventDefault(). It should help you.

if event.stopPropagation() does not work, give the below a try
$( '#outer' ).click ( function ( event ) {
if ( $( event.target ).is( '#inner' ) ) {
//code if inner got clicked
} else {
//code if outer got clicked
}
}

delegate jQuery toggle event to the rest of the document

I have a dropdown menu activated on click.
I use toggle to activate it when you click on the .hello_panel
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello </div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
jQuery
$('.hello_panel').bind('click', function(){
$('.menu_popup').toggle();
})
if I click it it works fine, it does the show and hide effect when the .hello_panel
is clicked.
what I want is it to be shown if the .hello_panel is clicked and hidden back if when clicking anything else on the page except the .menu_popup

You can hide it whenever you click on the document
JavaScript
$(document).click(function () {
$('.menu_popup:visible').hide();
});
$('.hello_panel').bind('click', function (e) {
$('.menu_popup').toggle();
e.stopPropagation();
});
HTML
<div class="container">
<div class="login_panel">
<div class="hello_panel">
<div class="hello_label">Hello</div>
<div class="hello_value">foofoo</div>
</div>
</div>
</div>
<div style="display:none" class="menu_popup">menu_popup</div>
Demo
http://jsfiddle.net/6bo1rjrt/16/
Another way if you don't want to stopPropagation is passing a call back function that registers a once time click listener to that document to hide the menu
$('.hello_panel').bind('click', function () {
$('.menu_popup').show(function () {
$(document).one('click', function () {
$('.menu_popup:visible').hide();
});
});
});
Demo
http://jsfiddle.net/6bo1rjrt/17/