the solution to this problem is probably pretty simple, but I need some help.
var x;
for(x in document.getElementsByTagName("img"))
x.addEventListener('click',openPage, false);
function openPage() {
alert("clicked");
}
I'm not getting an alert when I click on an <img src="something" /> tag. Anyone know why? Also, is my loop necessary?
This code produces an error - in a for..in statement, 'x' is the key of your object (in this case, your document.getElementsByTagName call). What you want is:
var x,
imgs = document.getElementsByTagName("img");
for(x in imgs) {
if (imgs[x] instanceof Element) {
imgs[x].addEventListener('click',openPage, false);
}
}
function openPage() {
alert("clicked");
}
Might I suggest using a Javascript framework (like jQuery), which can help simplify your code as such:
$('img').each(function() {
$(this).click(function() {
alert('Clicked!');
// Now that we're in the callback context, $(this) will be the current
// target - the specific image that was clicked.
// i.e. $(this).fadeOut() would slowly fade out the clicked image.
});
});
Related
Edit: I think I got the solution! I want to try and fix this myself before I ask for further help = )
First script inhibits the second one from functioning as the click event from the first one overides the second one. Because the second one does not function it is impossible to open the drop down menu to select a list item to trigger the first scripts click.
What I tried was replacing all return false statements with event.stopPropagation(). Didnt work however. Tried re-ordering my scripts but that failed as well. I was thinking of making my second script target another parent div but that didnt work either.I also tried event.stopImmediatePropagation() and .bind methods.
Any idea?
First script that makes the drop down function. Contains click event.
function DropDown(el) {
this.f = el;
this.placeholder = this.f.children('span');
this.opts = this.f.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.f.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var f = new DropDown( $('#f') );
$(document).click(function() {
// all dropdowns
$('.filter-buttons').removeClass('active');
});
});
Second script that does the filtering, also contains click event:
jQuery(document).ready(function(e) {
var t = $(".filter-container");
t.imagesLoaded(function() {
t.isotope({
itemSelector: "figure",
filter: "*",
resizable: false,
animationEngine: "jquery"
})
});
$(".filter-buttons a").click(function(evt) {
var n = $(this).parents(".filter-buttons");
n.find(".selected").removeClass("selected");
$(this).addClass("selected");
var r = $(this).attr("data-filter");
t.isotope({
filter: r
});
evt.preventDefault();
});
$(window).resize(function() {
var n = $(window).width();
t.isotope("reLayout")
}).trigger("resize")
});
html structure
<div id="f" class="filter-buttons" tabindex="1">
<span>Choose Genre</span>
<ul class="dropdown">
<li>All</li>
<li>Electronic</li>
<li>Popular</a></li>
</ul>
</div>
This doesn't really solve your problem but I was bored while drinking my coffee and felt like helping you write your dropdown plugin a little nicer
My comments below are inline with code. For uninterrupted code, see DropDown complete paste.
We start with your standard jQuery wrapper (function($){ ... })(jQuery)
(function($) {
// dropdown constructor
function DropDown($elem) {
First we'll make some private vars to store information. By using this.foo = ... we expose things (probably) unnecessarily. If you need access to these vars, you can always create functions to read them. This is much better encapsulation imo.
// private vars
var $placeholder = $elem.children("span");
var $opts = $elem.find("ul.dropdown > li")
var value = "";
var index = -1;
Now we'll define our event listeners and functions those event listeners might depend on. What's nice here is that these functions don't have to access everything via this.* or as you were writing obj.f.* etc.
// private functions
function onParentClick(event) {
$elem.toggleClass("active");
event.preventDefault();
}
function onChildClick(event) {
setValue($(this));
event.preventDefault();
}
function setValue($opt) {
value = $opt.text();
index = $opt.index();
$placeholder.text(value);
}
Here's some property descriptors to read the index and value
// properties for reading .index and .value
Object.defineProperty(this, "value", {
get: function() { return value; }
});
Object.defineProperty(this, "index", {
get: function() { return index; }
});
Lastly, let's track each instance of DropDown in an array so that the user doesn't have to define a special listener to deactivate each
// track each instance of
DropDown._instances.push(this);
}
This is the array we'll use to track instances
// store all instances in array
DropDown._instances = [];
This event listener deactivate each "registered" instance of DropDown
// deactivate all
DropDown.deactiveAll = function deactiveAll(event) {
$.each(DropDown._instances, function(idx, $elem) {
$elem.removeClass("active");
});
}
Here's the document listener defined right in the plugin! The user no longer has to set this up
// listener to deactiveAll dropdowns
$(document).click(DropDown.deactiveAll);
Might as well make it a jQuery plugin since everything in our DropDown constructor relies upon jQuery. This let's the user do var x = $("foo").dropdown();
// jQuery plugin
$.fn.dropdown = function dropdown() {
return new DropDown($(this));
};
Close the wrapper
})(jQuery);
Now here's how you use it
$(function() {
var x = $('#f').dropdown();
// get the value
f.value;
// get the index
f.index;
});
Anyway, yeah I know this doesn't really help you with your click listeners, but I hope this is still useful information to you. Off to the Post Office now!
I think you're going to need to simplify this to figure out what's going on. There's actually not enough information to see what elements the events are being attached to here.
For argument's sake, open the console and try the following:
$(document).on('click', function() { console.log('first'); return false; });
$(document).on('click', function() { console.log('second'); return false; });
Then click in the page. You'll see that both events are triggered. It might well be that your code is actually attaching the events to different elements (you don't say anywhere). If that's the case then you need to understand how event bubbling works in the DOM.
When you trigger an event, say a click on an element, that event will fire on that element, and then on it's parent, then grandparent etc all the way to the root node at the top.
You can change this behaviour by calling functions in the event itself. evt.stopPropagation tells the event to not bubble up to the ancestor nodes. evt.preventDefault tells the browser not to carry out the default behaviour for a node (eg, moving to the page specified in the href for an A tag).
In jQuery, return false from an event handler is a shortcut for, evt.preventDefault and evt.stopPropagation. So that will stop the event dead in its tracks.
I imagine you have something like:
<div event_two_on_here>
<a event_one_on_here>
</div>
If the thing that handles event_one_on_here calls stopPropagation then event_two_on_here will never even know it has happened. Calling stopPropagation explicitly, or implicitly (return false) will kill the event before it travels to the parent node/event handler.
UPDATE: In your case the issue is that the handler on .filter-buttons a is stopping the propagation (so #f doesn't get to run its handler).
$(".filter-buttons a").click(function(evt) {
// your code here...
// Don't do this - it stops the event from bubbling up to the #f div
// return false;
// instead, you'll probably just want to prevent the browser default
// behaviour so it doesn't jump to the top of the page ('url/#')
evt.preventDefault();
});
A variety of elements on my page have the content editable tag.
When they are clicked I do this:
$('[contenteditable]').on('click', this.edit);
p.edit = function(e) {
console.log(e.currentTarget);
e.currentTarget.on('keydown', function() {
alert("keydown...");
});
};
I get the current target ok, but when I try to add keydown to it, I get the err:
Uncaught TypeError: undefined is not a function
It's a native DOM element, you'll have to wrap it in jQuery
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
e.currentTarget should equal this inside the event handler, which is more commonly used ?
It's a little hard to tell how this works, but I think I would do something like
$('[contenteditable]').on({
click : function() {
$(this).data('clicked', true);
},
keydown: function() {
if ($(this).data('clicked'))
alert("keydown...");
}
});
Demo
First issue is you are trying to use jQuery methods on a DOM element. Second issue is I do not think you want to bind what is clicked on, but the content editable element itself.
It also seems weird to be adding the event on click instead of a global listener. But this is the basic idea
$(this) //current content editable element
.off("keydown.cust") //remove any events that may have been added before
.on('keydown.cust', function(e) { //add new event listener [namespaced]
console.log("keydown"); //log it was pressed
});
Edited: I had a fail in code. It works fine now.
Getting your code, I improved to this one:
$(function(){
$('[contenteditable]').on('click', function(){
p.edit($(this));
});
});
var p = {
edit: function($e) {
console.log($e);
$e.on('keydown', function() {
console.log($(this));
alert("keydown...");
});
}
}
You can check it at jsFiddle
You need to wrap the e.currentTarget(which is a native DOM element) in jQuery since "on" event is a jQuery event:
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
EDIT:
$('[contenteditable]').on('click', p.edit);
p.edit = function(e) {
$(e.currentTarget).on('keydown', function() {
alert("keydown...");
});
};
You're defining p.edit AFTER $('[contenteditable]').on('click', p.edit); resulting in an error since p.edit doesn't exist when declaring the on.
In case you don't know, you are defining p.edit as a function expression, meaning that you have to define it BEFORE calling it.
I have a sortable list (jQuery UI) that I want to sort programmatically using the ids of the
"li" elements. (they are all numbers).
To do that, I have made this function:
function resetList()
{
var orderedItems = new Array();
var unorderedItems = $("#sortable").find('li');
for(var i = 0; i < unorderdItems.length; i++)
{
var counter = 0;
var check = false;
do {
if(unorderedItems[counter].id == (i+1))
{
check = true;
orderedItems.push(unorderedItems[counter]);
}
counter++;
} while (!check && counter < unorderedItems.length);
}
$("#sortable").empty().html(orderedItems);
}
I think that works quite well (i am new to javascript, so i don't know if that code is "professional")
The problem is that after I've called the function no jQuery hover or mouseover events are firing anymore (have been working before)
The content of my "li" elements:
<li class="ui-state-default">
<div class="image" style=\"height:100%; width:100%;">
<img class="overlay" src="img/pic.png" height="200" width="200" style="height:200px; width:200px; visibility:hidden;" />
</div>;
</li>
The JavaScript:
$(".image").hover(function(e)
{
//make overlay visible
}, function(e)
{
//hide overlay
});
Any ideas why the hover function does not work after I called resetList()?
Sorry about the bad english and thank you for any help!
-Nick
if you are using jquery 1.7 or higher use .on else use .delegate
$(".image").on("mouseover mouseout",function(evt){
if (evt.type == 'mouseover') {
// do something on mouseover
alert("over");
} else {
// do something on mouseout
alert("out");
}
});
earlier version of jquery
$("body").delegate(".image","hover",function(evt){
if (evt.type == 'mouseenter') {
// do something on mouseover
alert("over");
}else {
// do something on mouseout
alert("out");
}
});
you are right,changed to delegate
Dafen, hover wont work elements that are dynamically created from javascript, hence using .on or delegate, anyways you have found your answer, just correcting my answer so that no one does same mistake i have done.
I'm pretty sure that after you sort your elements, new dom elements get added to your page, replacing the old ones. As a result your event handlers get lost. You should be able to fix it quite easily by using delegated events with on
$(".ui-state-default").on("mouseenter", ".image", function() { .....
$(".ui-state-default").on("mouseleave", ".image", function() { .....
Just to be difficult, integers aren't valid HTML IDs (IDs should start with a letter [A-Za-z])
I have function:
function doBlamingItem($cell, showEditMark) {
$cell.hover(function () {
$cell.toggleClass('clickable-cell', showEditMark).toggleClass('editing-cell', !showEditMark);
}, function() {
$cell.removeClass('clickable-cell editing-cell');
} );};
in $(document).ready() I apply this function for some cells in my table (~500) and when I move my mouse upon it - in FF or Chrome all is okay, but IE7-9 starts lagging and I don't know how to fix it :(
and code from $(document).ready():
var i = firstRowOnPage();
while (table.GetRow(i) != null) {
if (condition) {
var row = table.GetRow(i);
var elementInCellId = column.fieldName + '_' + rowKey;
var $cell = $(row.cells[realIndex]).attr('id',elementInCellId);
doBlamingItem($cell, true);
setClickable(editInfo, $cell);
}
i++;
}
I use doBlamingItem for every cell because for some of them showEditMark=true, for other showEditMark=false
Your code basically (1) finds those ~500 elements, (2) iterates them to (3) assign hover events (consisting of mouseenter and mouseleave). Have you heard of delegated events?
The setup time is virtually none (only 2 event handlers, instead of 1000 are registered). No elements are selected and traversed.
(function($, undefined){
// if you want it global
var showEditMark = true;
// otherwise save that state to some element's data()
$(function(){
$(document.body).delegate('.your-table-selector td', {
mousenter: function(e){
$(this)
.toggleClass('clickable-cell', showEditMark)
.toggleClass('editing-cell', !showEditMark);
},
mouseleave: function(e){
$(this).removeClass('clickable-cell editing-cell');
}
});
});
})(jQuery);
Thanks to all who answered my question, but as I realized problem was not in javascript... My page has big DOM-tree of elements and many CSS-styles, so IE has problems with rendering of it
I'm new to the whole JavaScript and jQuery coding but I'm currently doing this is my HTML:
<a id="tog_table0"
href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a>
And then I have some slightly ponderous code to tweak the element:
function toggle_table(button_id, table_id) {
// Find the elements we need
var table = $(table_id);
var button = $(button_id);
// Toggle the table
table.slideToggle("slow", function () {
if ($(this).is(":hidden"))
{
button.text("show");
} else {
button.text("hide");
}
});
}
I'm mainly wondering if there is a neater way to reference the source element rather than having to pass two IDs down to my function?
Use 'this' inside the event. Typically in jQuery this refers to the element that invoked the handler.
Also try and avoid inline script event handlers in tags. it is better to hook those events up in document ready.
NB The code below assumes the element invoking the handler (the link) is inside the table so it can traverse to it using closest. This may not be the case and you may need to use one of the other traversing options depending on your markup.
$(function(){
$('#tog_table0').click( toggle_table )
});
function toggle_table() {
//this refers to the element clicked
var $el = $(this);
// get the table - assuming the element is inside the table
var $table = $el.closest('table');
// Toggle the table
$table.slideToggle("slow", function () {
$el.is(":hidden") ? $el.text("show") : $el.text("hide");
}
}
You can do this:
show
and change your javascript to this:
$('a.tableHider').click(function() {
var table = $(this.name); // this refers to the link which was clicked
var button = $(this);
table.slideToggle("slow", function() {
if ($(this).is(':hidden')) { // this refers to the element being animated
button.html('show');
}
else {
button.html('hide');
}
});
return false;
});
edit: changed script to use the name attribute and added a return false to the click handler.
I'm sure this doesn't answer your question, but there's a nifty plugin for expanding table rows, might be useful to check it out:
http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx