No jQuery, just JavaScript. I'm using prototype.js but can't find in documentation how can I do that.
I have the img element, and some event that change attr src, so my code is:
document.getElementById('image').addEventListener('change', myFunction(), false);
but this solution doesn't work with img element!
You can't use change event for img tag.
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user.
So try like this whenever a image is changed, it will be loaded, so bind it using load event.
I too am trying to move an old-IE solution using img onchange, which used to detect change to image's src attribute just fine.
However, the load event solution here (and similarly in Detect a img src change), while great for detecting change to a new image, unfortunately does not fire if you are setting src='' [EDIT: HTML5 does not allow empty, I have changed to use src='data:null'] (I guess because there is no image to load). This is a genuine case for me (user can pick "no image"), and I still want to change attributes like alt & title. Just a heads-up for anyone else.
Related
so I'm working on recreating the card game Dominion in Javascript. I'm using OO Javascript, creating a card object for each card.
Rather than posting all my code here I'll save some space and link you to it:
Site:
http://people.rit.edu/lxl1500/Prog4/Project%201/project1.html
Script:
http://people.rit.edu/lxl1500/Prog4/Project%201/main-script.js
Where I'm running into issues:
In my createActions() function I'm adding an onclick event to each image (I'm creating the images by grabbing the smallImage property of each object). This onclick should call my fullImage() function. This function will simply show a larger version of the card so the player can see the details. Therefore, I want to pass the image property, which holds the string for the source of the larger image to the function.
fullImage() will accept the object property as imageSrc. You'll see now by clicking on an image you'll get an alert of undefined. The only thing I can think of is when I'm calling fullImage(this.image) - this is reference to the image itself rather than the object...I'm not sure how to accomplish what I'm trying to do though. Any help would be greatly appreciated!
Thank you for your time.
You're setting onclick as an attribute. You might be able to work with that somehow, but it's a much more elegant solution to attach an event listener:
card.addEventListener('click', function() {
// Handle click.
}, false);
Then you can use actionCards[i] as normal... except you can't, because i will be one over the last index, for reasons I won't get into here.1 The easiest way to fix that is to bind the function before you add it as an event listener:
card.addEventListener('click', function() {
// Handle click.
}.bind(actionCards[i]), false);
(I should note that bind is not built-in in some older browsers. While I'm on the topic of browser compatibility, addEventListener isn't supported by old versions of Internet Explorer, either.) Then you can use this to refer to your Card object.
Footnotes
1 Okay, fine. It's because of JavaScript's function scope and that when the user has clicked it, the loop has finished, and when the loop has finished, i will be one over the number of cards.
not sure why you have this.image. image isn't a property of an image element. remember a onClick event handler will be called with this scope set to the element the onclick was happen. change it to just fullimage(this) and you'll see the img element is passed in, you could then change your fullimage method to imageSrc.src = 'some url'; to change the image src attribute.
Change fullImage(this.image)
to fullImage(this.src) to get the source.
on modern browsers do this:
card.addEventListener('click', fullImage.bind(actionCards[i]), false);
Yes, you're correct that the this.src reference isn't pointing to what you want it. When the Image card gets clicked, it runs the javascript
fullImage(this.image)
Since this javascript isn't run with any connection to the img that called it, Javascript won't know which image called it. One fix to this is hard-coding the correct src url into the function call when you set the properties for the card, so this:
card.setAttribute("onClick","fullImage(this.image)");
becomes this:
card.setAttribute("onClick","fullImage('" + card.src + "')");
This way the card's src is resolved before the function call is made, and when the function is called it knows which src to echo.
Hope this helps!
edited to include quotes
I've found a couple of search results here but they're all for jQuery and the couple I looked at weren't applicable to my case.
This is a small project and I've avoided using jQuery so far. I want to keep it like that as to not need the library.
Basically, I'm dragging an <article> element to a <div> element. The div has the background-image of a closed trashbin. In the CSS it is set to display the same, but open, trashbin when :hover is triggered.
Now, when I pull my article element to the div, the :hover effect isn't being triggered.
How do I do this?
All required elements are set draggable and the needed event listeners have been added, Console.log confirms they work.
You can define a CSS class called 'open_trash' and set the background image of a open trash there and then you can use javascript to change the class of the dragged element on mousedown like this
document.getElementById("draggedItem").className = "open_trash";
You can set the class name to either an empty string or something else onmousedown.
I'm about to make an inplace editor with jquery. It works by clicking the text you want to edit and it replaces the content of it with an input. In the current case with a select tag.
It works fine except with the <a> tag... If you click on an <a> tag it confirms you what to do. You can accept edit mode or cancel it.
If you accept the edit mode, it changes the content of the <a> with a <select>. The problem comes after this point: If you click on the select the parent tag (<a>) fires up a new page load.
I tried to bind a click event on the <a> with a false return, but in this case the select wont work by mouse.
The other way to solve this I think is to bind a click event to the <select> and manipulating somehow the event object...
How to do this? Or is this a wrong approach?
UPDATE:
The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)
Don't change the content, change the element. Store the a element somewhere, replace it with a select, and then when you're done, replace back. This way you don't have to bother with the link firing.
function ask ( e )
{
e.preventDefault (); //prevents default browser action
//do whatever
}
element.addEventListener ("click", ask);
why do you want to manipulate the event object? can't you just leave the a-event to return false and set another eventhandler to the select-tag?
Wrapping the <select> in an <a> tag is not valid HTML. Also, hijacking the click event handler of the <a> to fire the select's one is considered an ugly hack. I would recommend you to put the <select> after the <a> in the DOM, and hide the link temporarily for the duration of the editing.
One thing I would try is to play with jQuery's DOM manipulating methods. For example:
$('#my_select').detach().insertAfter('#my_link');
Here is a neat demonstration
(From the example:)
$('a').click(function(event) {
event.preventDefault();
$('#edit').show(500);
});
The base approach is invalid (select inside an a) but I found a solution: Remove the href parameter and you don't need ugly event hacking what does not even work in FF.
(similar problem and its explanation: Select tag inside hyperlink problem)
How do I set the cursor on a div-element in javascript?
I have a form(div-element not input) with a textstring attached on it. I want the textstring removed and the cursor set at the beginning of the element onclick.
I have removed the content in the div-element with onclick event with: divElement.innerHTML = '';
Now I want the cursor to be set?
If you mean the mouse pointer, use the CSS cursor style like this:
#mydiv {
cursor: help;
}
There are a whole load of standard options you can use. You can also define a graphic to use as the pointer (though this has cross-browser compatibility issues).
See this page on Quirksmode for more info.
Similarly, if you want to do it dynamically in Javascript, then just set the object's style:
document.getElementById('mydiv').style.cursor = 'help';
If by 'cursor', you mean the text cursor (aka the caret), I presume what you're really asking is how to make a div into an editable content box.
What you need is to set the contentEditable attribute on your div.
If you want it editable from the start, just include it in your HTML code:
<div contentEditable="true">....</div>
If you want to switch it on/off, you can set it in javascript:
mydiv.contentEditable="true"
However, the only time I can think of when it's better to use contentEditable rather than a textarea is if you're writing a WYSIWYG HTML editor.
Most of the rest of the time I would say it's probably preferable to use a <textarea>. You can style it to look like the rest of your page, and you can make it readonly or disabled when you don't want it changed. But it is much easier to work with in a form and in Javascript. The problem with using a div is that it can contain other html tags, which may affect how it works, and will likely open you up to security problems if you make it directly editable.
divElement.style.cursor = 'whatever';
If you want to move the cursor to be over the divElement, then you can't.
My question is:
Does have a span element the inner html change event?
I think about I have a span and when the span inner html is changing it will throw an event that I can reach?
I would like to use Jquery to bind to this event of span.
l.
From the jQuery documentation:
The change event is sent to an element
when its value changes. This event is
limited to <input> elements,
<textarea> boxes and <select>
elements.
At the moment, such events are not supported by browsers like IE, but what you are looking for is DOM events. See https://developer.mozilla.org/en/DOM_Events for more information.
No. As a rule of thumb, if something internal to a script changes something, it will not trigger an event.
Nothing external to a script can edit the innerHTML of a span (unless, perhaps, it is contentEditable) so there is no event.
Why not handle it when you make the change?
function updateHTML(el,newhtml,callback){
el.innerHTML=newhtml;
if(typeof callback=='function')callback(el);
}