I have an element with a a script for a mouseover to show an image. I can't change the HTML, so is it possible to disable the javascript in the link, but still keep the link for the href intact? I cant use the id of the a element since it isn't unique.
HTML:
<div class="container">
<a id="a211094" onmouseout="etim();" onmouseover="stim('/imgs/7c24b548-4f4c-418e-ad4f-53c73cf52ace/250/250',event,this.id);" href="/products/Computers/Desktops/Acer/Acer-Aspire-TC-705W-Towermodel-1-x-Core-i3-41?prodid=211094"><img src="" alt="">
</a>
</div>
if you want to make all ancher tag or you can give class for those anchor tags on which you want to perform this and instead of $( "a" ) write $( ".myClass" )
$( "a" ).each(function( index ) {
$( this ).removeAttr("onmouseout");
$( this ).removeAttr("onmouseover");
});
use can use attr("disabled", "disable"); to disable it
Overwriting the JavaScript:
document.getElementById("a211094").onmouseover = null
document.getElementById("a211094").onmouseout = null
document.getElementById("a211094").removeAttribute("onmouseout");
document.getElementById("a211094").removeAttribute("onmouseover");
If you can consistently access and control the containing element you could try a slightly left-field approach using an onmouseover event on the container.
There's a function called setCapture() which you can call during a mouse event to "capture" all mouse events of that kind for the element it's called against, until a mouseup event or releaseCapture() is called. So you could do something like the following:
jQuery(document).ready(function() {
$container = jQuery("#<yourcontainerid>");
$container.on("mouseover", function(e) {
if (e.target.setCapture) e.target.setCapture(true);
});
$container.on("mouseout", function() {
document.releaseCapture();
});
});
The (true) argument is important (I think, without testing) as it prevents any descendent events firing, which is what you want here.
The mouseout function will then release the capture when it leaves the area of the container.
Will this work? can't say for sure, I haven't tested it in your exact case, but in theory it should!
UPDATE: you can use ".container" rather than "#yourcontainerid" in the JQuery if you so wish to enable this for everything of class container.
Related
I have a file called main.html that contains several div's each with 2 classes:
1st is their specific class 2nd is a class called menu-item which I use to determine if an event will triggered when clicked.
The file contains this:
<div id="load-here">
</div>
<div class="item-1 menu-item">
click this
</div>
I also have a gallery.html file which I want to be loaded into the main.html file in the #load-here div, and let's say it contains this:
<div class="menu-item>
<!-- some image here -->
<img href="img/1.jpg />
</div>
The script I have is this:
$(document).ready(function() {
$( "div" ).click(function() {
if ( $( this ).hasClass( "menu-item" ) ) {
$("#load-here").load("gallery.html" + this.class);
}
});
});
The problem: It's not working. I've tried various changes. Somehow it's not loading into the #load-here div
Take a look at this: http://api.jquery.com/load/
$( "#b" ).load( "article.html #target" );
There seem to several issues:
By this: $( "div" ).click(function() ... you are registering the click on all divs available. This might cause strange behaviour. Better use: $("div.menu-item").click( ...
Make sure you understand the context and the event target in your callback function. Sometimes this is cheating you, as the context of the call may be different. Things are more clear if you handle the event as explicit parameter and check the event target.
I guess you would like to give a parameter for your gallery.html, but as #charlietfl mentions, there is no .class. But, in the DOM there is a .className. Better try to use the jQuery $().attr('class'). Also, the parameter needs a separator: gallery.html?parameter
To sum it up, here my suggestion:
$("div.menu-item").click( function(event) {
var jqTarget = $(event.target).closest('.menu-item');
if ( jqTarget.hasClass( "menu-item" ) ) {
$("#load-here").load("gallery.html" + "?" + this.class);
}
});
closest() will attempt to find the closest matching element, in case the click target was not on the div itself, but rather a child img or else. So, the condition in the suggestion should be used to find out about more specific about which menu item was clicked: if ( jqTarget.hasClass( "that-specific-item" ) ...
I am working with a Jquery plugin and I would like to trigger the modal (div) by calling it's value instead of calling it's ID name.
So if the attribute value is "554" meaning attrId="554" I will display the modal with the matching "554" attribute. Please keep in mind that the attribute value could be a variable.
My JSFiddle Code Example is here
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Any help is appreciated. Thanks so much
You can use an attribute equals selector: [attribute="value"]
If your popup div has an attribute like this:
<div id="element_to_pop_up" attrId="554">
<a class="b-close">x</a>
Content of popup
</div>
You can use the following:
var x = '554';
$('div[attrId="' + x + '"]').bPopup();
jsfiddle
Ultimately it needs a unique selector unless you are okay with triggering multiple modals. One way to do it is to use the jQuery each function, and check each div for the matching attribute.
$( "div" ).each(function() {
var criteria = 'example_criteria';
if ($( this ).attr( "attributename" ) == criteria)
{
$(this).bPopup();
}
});
This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0
$("#"+el).fadeOut(500);//el must be the id of the element
If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});
A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle
Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});
Good morning,
I have a set of boxes on a page that are presented as a list, and within these boxes there might be some links that can be clicked. I want the links within the boxes to work as normal (i.e. bubble up and either perform the default action or then be handled by event handlers further up the DOM), but if the box is clicked anywhere else then it should be caught by a particular event handler attached to the "list" containing all the boxes.
Simple html representation
<div class="boxlist">
<div class="box" data-boxid="1">
Some text, and possibly a link and another link, and perhaps even a third link.
</div>
<div class="box" data-boxid="2">
Some more text, this time without a link.
</div>
</div>
The javascript that I thought should work.
$(function () {
$('.boxlist').on('click', '.box :not(a)', function (e) {
var boxid= $(this).closest('.box').data('boxid');
console.log('open: ' + boxid);
});
});
My expectation was that the above javascript should handle all clicks that did not originate from tags. However, for some reason when the box is clicked (either the box itself, or an tag, doesn't matter), it fires this event X times, where X is the total number of tags within the list of boxes.
So I have two questions:
1. What am I doing wrong with the :not() selector.
2. Is there a better way to handle this scenario?
Thank you for helping!
linkUsing jQuery :not selector actually is very slow ex:http://jsperf.com/not-vs-notdasdsad/4 and it's way better to just use event delegation. So in this case you want to keep track of every click on the .boxlist but check the node type to see if its an anchor or not. This is an example.
$(function () {
$('.boxlist').on('click', function(ev){
if(ev.target.tagName != "A"){
// handle box click code
console.log('box click');
return false;
}
// Otherwise allow event to bubble through.
});
});
and here is a jsfiddle example
http://jsfiddle.net/drXmA/
Also their are a few reasons your code doesn't work
.box :not(a)
should be
.box:not(a)
and the reason this also does not work is because .box is not an anchor tag it has children elements that are anchor tags it will never find an anchor tag named .box if their is one the callback would not execute. Changing the .box to an anchor tag will make it so the code doesn't execute because .box is an anchor and it is only running when .box:not(a)
I guess you want something like this:
$('.boxlist').on('click', '.box:not(a)', function (e) {
var boxid = $(this).closest('.box').data('boxid');
console.log('open: ' + boxid);
}).on('click', '.box a', function (e) {
e.preventDefault().stopPropagation();
});
DEMO FIDDLE
I think better to stop the default behavior and stop the event bubbling to its parent. .on() chain to the .box items excluding <a> from it and stop the default behavior and event bubble with e.preventDefault().stopPropagation();
Okay so I want to click an item, then have that item become unclickable, and not execute the jQuery attached to it. I am currently using this
$(clicked_id).prop('disabled', true);
However that is not working.
Any help is much appreciated!
EDIT:
This is the HTML:
<img src="imgs/card.jpg" id="card0" name="card0" onclick="getCard(this.id); ">
disabled is only for disabling input elements (and it doesn't change the clickability of the object -- just that the default animation isn't executed).
To make it so that the click event is removed from an object, use .off()
$(clicked_id).off('click')
But this only works if the onclick was added via jquery
Instead, you may do this:
$(clicked_id)[0].onclick=false
Since your handler is assigned as an attribute, you can just nullify the property for that event handler.
document.getElementById(clicked_id).onclick = null;
just make sure you don't have a leading # on the ID.
Or us jQuery like this:
$(clicked_id).prop("onclick", null);
Or you can pass the element itself instead of passing the ID.
<img src="imgs/card.jpg" id="card0" name="card0" onclick="getCard(this); ">
And then change your function so that it receives the element instead of the ID of the element. Once you do that, you can access the element directly.
elem.onclick = null;
There is another solution:
function getCard(objId){
if( !($('#'+objId).attr('used') == '1') )
{
alert('Click is working for '+objId);
// do something
$('#'+objId).attr('used', '1');
}
}
Here is a working example:
http://jsfiddle.net/HqHut/