Inputbox width on body click remove function - javascript

I am new with JavaScript and I am trying to use it on my Inputbox.
I know how to add the width when I click on the Inputbox but I don't know how to remove the function on body click.
Check out this JSFiddle.

Use blur event on textbox:
var box = $$('.inputbox');
box.addEvent('blur', function myfunction(event){
box.morph({width:210});
});​
See Demo: http://jsfiddle.net/r4nEv/1/

I would probably add the click event the result and not to the document body as well as use blure to make sure that the box is reset. here is a quick fiddle to demonstrate this.
http://jsfiddle.net/r4nEv/4/
Hope this helps!

Related

Click on first onclick function inside tag by class selected

I'm new here ... so let me know how I can click on the first onclick within this div . Note that if you do $ (".giornoweekcorrente" ) i select the entire interior of the div but my problem is, how do I get to click the function visualizzaEvento ... through the class " giornoweekcorrente " .
Take a look for this image to understand.
Thanks for any help !
Try like this. Hope this helps.
$('.giornoweekcorrente a:first').click();
A possible workaround:
// get the first anchor child of the element and trigger the desired event:
$('.giornoweekcorrente').on('click', function(){
$('a', this).first().trigger('click');
});
var target = $(".giornoweekcorrente").children()[0]
$(target).click(function(){
visualizzaEvento();
});
just find the children of your div, and find the first child.
see : https://api.jquery.com/children/
Your anchor tag has an id why not use that:
$("#lente_click_gio").click();
Markus, you might want to attach "onclick" to the element with id "lente_click_gio" directly. You can do that using the following code:
$(document).ready(function(){
$("#lente_click_gio").on('click',function(){
//Your code here .. Call visualizzaEvento
});
});
But this would just attach the click event and the callback to it. Instead if you want to trigger a click event on the anchor element where you have attached the function, try the following code:
$("#lente_click_gio").click(); /* Generate a click event on the element with the ID lente_click_gio */
This would trigger a click event on that element. Hope this would help.

Table colour change over mouse click

I would like to change the particular html table cell colour while the mouse click event occurs. Which one is most suit to my need whether CSS or Javascript?
Here is a jquery function that should do the trick
$(document).on('click', '#tableID', function(e){
$(this).css('background','#000080');
});
Here is jquery function to change particular html table cell color when mouse click event occurs.
CODE:
$(document).on('click', '#TABLEID', function(e){
$(e.target).css('background','#6688ff');
});
DEMO:
http://jsfiddle.net/Ra2VP/
Refer this for creating click event on table row.
http://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row
use css to set the color for the table or by,
mycurrent_row.style.backgroundColor = "#EEF4EA";
You can use like this
$('td').click(function(){
$(this).css('background-color','red');
$('td').not($(this)).css('background-color','white');
});
See this demo

jquery blur not working on "exiting" text input even though "click" does

I'm trying to make a custom dropdown be able to be "tabbed into" using jquery. That is, it is made of a ul, and I want the text input directly above it, when tabbed out of give some sort of focus to the ul. But for some reason this
var input = $("ul.dropdown_ul").prev("input");
$("#container").on("blur", input, function(){
alert("test");
});
does not work. With click as the event, the alert fires. But blur is not working.
JSBIN
Any ideas on why this doesn't work? Thanks.
Your #container is a div. Typically blur is used on inputs, thats why it not working. The following works fine.
$("#container input").on("blur", function () {
alert("test");
});`
Update Regarding Comment:
If your looking to have a specific element have the on blur event. Just make sure you select it properly and apply the listener to it. I think this is what you're trying to accomplish.
var $input = $("ul.dropdown_ul").prev('input')
$input.on("blur", function () {
alert("test");
});
Example

Set focus on appear

I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you
Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE
this should work:
<textarea autofocus></textarea>
Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});

JQuery - What can I do to make this work?

http://jsfiddle.net/piezack/X8D4M/5/
I need the change created by clicking the button to be detected. At the moment you have to click inside the field and then outside for it to detect any change.
Thanks guys.
The code for the button CANNOT be altered. Good tries so far though.
Was overcomplicating things. Answer http://jsfiddle.net/piezack/X8D4M/56/
Example using trigger:
//waits till the document is ready
$(document).ready(function() {
$('button.butter').click(function() {
var $form6 = $('#FormCustomObject6Name');
$form6.val('Text has changed');
$form6.trigger('change')
});
$('#FormCustomObject6Name').change(function() {
var x = $('#FormCustomObject6Id').val();
$("a").filter(function() {
return this.href = 'http://www.msn.com'
}).attr('href', 'http://www.google.com/search?q=' + x);
alert(x);
});
});
i think that jmar has the right idea...if i understand correctly you want to be able to type whatever in the box and without clicking out of it to have the button change it to the text has changed.
i dont know if that alert is really necessary, but you can do this if the alert is not needed:
http://jsfiddle.net/X8D4M/24/
To trigger the change event simply add a .trigger after setting the value.
Also, you're selector for the link wasn't working so I just changed it to #link.
http://jsfiddle.net/X8D4M/22/

Categories