I've got a jQuery plugin installed on a website I'm working on. The plugin in question adds a modal dialogue to the website when a certain image is clicked. I wanted to add a second button to this modal, to close the window in addition to the close button that already does so, and I managed to do this by creating a div for the button in the HTML. Note that the content for the modal is set in the plugin's content variable, so looks like this:
content: '<p>Want to get in touch? Drop us an email at:</p><br/>
<p><input type="text" id="inset" name="inset"
value="shoesfromlastnight#gmail.com"
onClick="javascript:this.focus();this.select();"
readonly="readonly" size="30"/></p> <br/>
<span id="appendto"><p>We look forward to hearing from you!</p></span>
<div type="button" id="crmbutton">Okay</div>'
...where #crmbutton is the div I want to use as a button. For some reason, though, I'm having trouble with setting the event handler to the button created there in order to make it close the modal. It sounds simple enough, but for some reason won't work when I do:
$("#crmbutton").click(function() {
this.close();
});
Although I couldn't find any documentation on it, the close() method I'm using here is the very same that is used by the plugin's own X button to close the modal. For what it's worth, here's that button's code, first to create the close button and then, using the .on method, to close the modal on click:
this.closeButton = jQuery('<div/>', {'class': 'jBox-closeButton jBox-noDrag'}).on('touchend click', function(ev) { this.isOpen && this.close({ignoreDelay: true}); }.bind(this));
I also copied everything after the .on method and applied it to my code, but wasn't successful with that either.
I also tried other approaches, like adapting the code above to create the button on the fly, and then appending or prepending it using the append/prepend methods. This worked, but only when appending to the modal's container, which always added the button outside of the container. I had no luck with appending the button after certain elements, like the #appendto - the button just wouldn't be added.
Does anyone know where I could be going wrong here? This is the first time I've worked with jQuery, and it's frustrating me to no end. Thanks!
The problem is because you're not calling the close method in the correct scope. In your eventlistener, 'this' points to the button. But in the code that you looked at, 'this' has been changed to another scope with the .bind() method.
$("#crmbutton").click(function() {
/* 'this' points to the element #crmbutton, which doesn't have a close method */
this.close();
});
The example code, look at the bottom where the .bind() method is used.
this.closeButton = jQuery(
'<div/>',
{
'class': 'jBox-closeButton jBox-noDrag'
}
).on(
'touchend click',
function(ev) {
this.isOpen && this.close({ignoreDelay: true});
}.bind(this) /* The scope is being set to another 'this' */
);
Documentation about the .bind() method
Related
I have a button and when you hover over it, it shows some text and 2 more buttons but when I move my mouse out of it, it still stays on the hover. How do I make my code work so that it works on mouse out?
This is my Javascript:
var option1Button_Mouseout = function() {
console.log('option1Button_Mouseout()');
$('laStyle-option1-button')[0].innerHTML = outputTag;
};
var attachOption1ButtonListeners = function() {
console.log($('laStyle-option1-button')[0]);
$('laStyle-option1-button')[0].addEventListener('mouseover', this.option1Button_Mouseover);
// When you mouse out of the button it brings it back to the original
$('laStyle-option1-button')[0].addEventListener('mouseout', this.option1Button_Mouseout);
};
window.onload = function() {
this.attachOption1ButtonListeners();
};
this is what it currently looks like:
https://media.giphy.com/media/9A6MoIdWBiZVFtcHyW/source.mp4
See when I hover over it it shows text and 2 buttons, when I mouse out it should go back to the picture of the hand.
Sind it is not clear what your methods are doing, consider this example:
HTML
<div id="myDiv">
<div id="myDiv1"/>
</div>
JavaScript
$('#myDiv').on("mouseover mouseenter ", function (e) {
$("#myDiv1").show();
});
$('#myDiv').on("mouseleave mouseout", function (e) {
$("#myDiv1").hide();
});
When entering the parent div the inner div will be shown. When leaving the parent div the inner div will be hidden. Also using .on as you are using jquery.
Here is the JSFiddle: https://jsfiddle.net/GR8sk/21/
Since you're already using jQuery I would use its Mouseenter and mouseleave events like so:
$("document").ready(function(){
$(".laStyle-option1-button img").mouseenter(function(){
$(this).attr('src','https://media.giphy.com/media/xUOwGdPZ0chBWiQ6Ri/giphy.gif');
});
$(".laStyle-option1-button img").mouseleave(function(){
$(this).attr('src','https://media.giphy.com/media/l4pTgiQB2e2dpuKs0/giphy.gif');
});
});
Couple things to note:
You did not add a '.' to the beginning of your jQuery reference to laStyle-option1-button (look at how the period goes before) because its a class attribute.
You are performing unnecessary event listener loading. While this can be helpful for binding to click events, I would just use the 'bind' method to bind functions to click events:
$( "#btnButton" ).bind( "click", myFunction);
You need to change either the 'src' attribute of the image, or just remove the button completely and replace with another one. The former is better performing.
I am trying to turn the whitespace inside the pink boxes you see below into links associated with each object. I have been trying to just make the box clickable to google.com, and numerous tries do not swap the appropriate element. My most recent attempt is looks as follows, where the first jquery function of hovering over "article" does work, but the new one below it doesn't. The page is as follows:
https://jsfiddle.net/codyc54321/zpLy3og8/1/
$( ".linkbox" ).hover(
function() {
$( this ).attr("href", "www.google.com")
}, function() {
$( this ).attr("href", "#")
}
);
I need the Archive/Edit/Delete buttons to retain their functionality, even though the sit within the larger pink box. How can I make this box clickable without overriding my other 3 buttons using jquery?
You will need to stop propagation on click of your anchor to avoid to events firing. Like below:
$('a').click(function(e){
e.stopPropagation();
});
To activate click on your outer div, you may add the below function:
$('.article-link').on('click',function(){
// Do something
});
Wrap both these function inside document.ready and you are good to go.
Hello I have some links in my HTML code. I want to change the href property of each link on hover and then on clicking this link I want to open it up in a new tab. The code is as follows:
$('.identifierClass').hover(function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").off().click(function(e) {
$(element).attr("target", "_blank");
});
}
});
Everything is working properly in Chrome/Firefox, however, on clicking the link in IE 11 it simply hangs and click wont work.
Any help is appreciated.
You need to bind to a static or preexisting element that the dynamic elements will be created inside of:
$(document).on('mouseenter','.identifierClass',function(e) {
if(condition) // is true
{
$(element).attr("href", "url/goes/here").attr("target", "_blank");
}
});
Edit: here is a fiddle of it and I also had to use 'mouseenter' instead of 'hover' when using the string name for the event. jquery .hover() documentation
In the fiddle i show you two divs being added dynamically:
$('#place').html('<div class="identifierClass">hover1</div><div class="identifierClass2">hover2</div>');
Above that, I set my event handlers, for hover1 div, I set the event on the document using a specified selector:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi');
});
You can see this works when you hover of 'hover1' text on the right and, conversely, you can see hover2 doesn't work using this binding:
$('.identifierClass2').hover(function(e) {
alert('hi2');
});
here is a link to the jquery documentation on event delegation.
Edit2: I updated the fiddle to address the 'href' manipulation. It appears that you just want to change some attributes on the hover portion:
I modified the 'mouseenter' binding to look like this:
$(document).on('mouseenter','.identifierClass',function(e) {
alert('hi'); $('#someLink').attr('href','http://www.bing.com').attr('target','_blank');
});
I don't think you need the 'off' or the 'click', but that is based off of some assumptions, so please feel free to comment and I can update accordingly. This, though, will change the href when the mouseenters the dynamic element and change the target attribute as well.
I have 25 buttons like this:
<button class="Bouton_Clavier" onclick="Click_Bouton('Bouton-Name')">
Bouton-Name</button>
I want to change button style when i click on (only fort the clicked button).
So, the function is :
function Click_Bouton(Nom)
{
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
}
But it doesn't work.
If I change the function with :
function Click_Bouton(Nom)
{
$('button').click(function(){ $('button').removeClass('Bouton_Clavier')
.addClass('Bouton_Clavier_Select');
});
}
All buttons style are changed and its work after 2 clicks.
But I need to change only the style of clicked button.
Either manually set a context as Paul Draper did in his answer or (better) don't use inline event handlers:
$(".Bouton_Clavier").click(function () {
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});
It's because this is not set to what you think it should be.
<button class="Bouton_Clavier" onclick="Click_Bouton.call(this, 'Bouton-Name')"> Bouton-Name </button>
Also, I feel obligated to recommend not using onclick=, and instead using $.click.
Oh, and you don't seem to be doing anything with your argument Dom.
Change the button css after click event fired like this,
$(".Bouton_Clavier").click(function(){
$(this).removeClass('Bouton_Clavier').addClass('Bouton_Clavier_Select');
});
And in the last part of your code you mention $('button') that points to all buttons within your document. And that's why all button styles are changed on button click.
Demo
I'm trying to simulate two click to open a menu. The first one opens the menu and the second the submenu but after the first click() the function stops.
This is my JS code:
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
$('a#lien-menu-'+id_sub_menu).click();
}
I call my function in HTML with this code:
<span onClick="open_menu('0', '116')">Open sub-menu</span>
You're doing it too fast maybe.
Wrap the second one in a window.setTimeout()
can you do something like this ? set a bool after first click
var IsClick = false;
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
if (IsClick){ fnSecondClick();}
}
function fnSecondClick() {
//open submenu
}
or something like this - on click check if menu is visible:
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
if ($(element).is(":visible")){ fnSecondClick();}
}
Well you can give this a try, it is pretty much waht you had, other than the fact i don't have menu open somewhere
http://jsfiddle.net/tRg3e/2/
I think the .click() only works if you have a handler attached, it does not trigger the native click on the element.. I tried it without handler and the link does not go
You should stray away from 'onClick' declared in elements like that, it's bad practice if I do recall. Nonetheless, it still works.
If you could provide some HTML code it would help clarify the idea but you could set a trigger event for example:
http://jsfiddle.net/wrN2u/3/
EDIT: With a toggle - http://jsfiddle.net/wrN2u/18/