I am trying to update a div on click similar to orkut .. The div is updating fine. But when the user clicks on the textbox its value becomes null initially. So the user has to again type the whole thing. So what I need is a facililty for the user to add the text with the existing one. So when he clicks on the textbox, the existing value of textbox would remain there and allows user to append new text. Please find the code below for that..
$(document).ready(function () {
$('.photo_title').click(
function(e){
var text = $(this).text();
$(this).val('');
$('<input type="text" value="sdfsdfsdfsdf" />').appendTo($(this)).val(text).select().blur(
function(){
var newText = $(this).val();
if(newText==""){newText="enter text "}
$(this).parent().text(newText),find("form input:text" ).remove();
});
});
});
HTML
<div class="photo_title">My text goes here and type here to add more</div>
You should place something like the following at the top of your click handler
if (e.target != this) return;
Otherwise, the handler will be triggered when the user clicks in the text box as well since the event will bubble up. So your code will end up looking like:
$(document).ready(function () {
$('.photo_title').click(
function(e){
if (e.target != this) return;
...
}
);
});
Related
I'm using Boostrap to create a modal dialog that allows users to enter comments on a given page. I wanted to expand that to allow me to capture the selected text and add it to the content field in the modal:
$( document ).on("shown.bs.modal", function(){
var selectedText = '';
var selectedText = window.getSelection().toString();
if(selectedText != "") {
$('#comment_content').val("> " + selectedText);
}
});
#comment_content is the id of the input field for the modal form.
This works great the first time the modal is shown, but it fails to work on subsequent uses.
Whenever I click the Comment button with some selected text:
%a.btn.btn-primary.btn-sm{:id => 'comments_toggle', "data-toggle" => "modal", "data-target" => "#commentModal"}
Post a Comment
I get the modal back, but the selection isn't applied to the #comment_content field.
The other interesting thing, perhaps, is that it won't work on a page reload, either. Until the tab with that page is destroyed, or until I simply go to another page, every click of the button with text selected gives me an empty #comment_content field.
Try to embed it into a click function for that button:
$( document ).on("shown.bs.modal", function(){
$('#comments_toggle').click(function(){
var selectedText = '';
var selectedText = window.getSelection().toString();
if(selectedText != "") {
$('#comment_content').val("> " + selectedText);
}
});
});
I want to change this code to mouse hover.
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
When they hover on loginbox and Login form it should be visible otherwise the login form should be hidden.Right now when we click on it it shows up and when we click again it hides.
You want to use mouseover and mouseout instead of mouseup:
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseover(function() {
box.show();
button.addClass('active');
});
button.mouseout(function() {
box.hide();
button.removeClass('active');
});
});
From the docs:
The mouseover event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.
and
The mouseout event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.
Here's a simple jsFiddle to demonstrate:
http://jsfiddle.net/bryanjamesross/58TqM/1/
NOTE: You probably want to attach these events to a common parent of the box and button, so that the box doesn't hide when the mouse pointer leaves the button. Since the parent container will expand to fit the box when it gets shown, you will then be able to interact with the form until the mouse leaves the parent container area.
*EDIT*: Here's an updated version that uses CSS to achieve the intended effect, rather than manually showing/hiding the form: http://jsfiddle.net/bryanjamesross/58TqM/2/
Just use mouseenter and mouseleave instead. The last event handler seems to close the loginBox when clicked outside it, and you don't really need it, but there's no harm in keeping it as an extra precaution so the user can close the box if mouseleave for some reason should fail :
$(function() {
var button = $('#loginButton'),
box = $('#loginBox'),
form = $('#loginForm');
button.removeAttr('href').on('mouseenter mouseleave', function(e) {
box.toggle();
button.toggleClass('active');
});
$(document).on('click', function(e) {
if( !($(e.target).closest('#loginButton').length)) {
button.removeClass('active');
box.hide();
}
});
});
Can someone help me with my example on How to make input+label in a form appear one by one?
I have a <form> with some inputs and labels and i want to make them appear one by one. When the ENTER KEY will be pressed there the label #1 and the input #1 must dissapear and second label + input must appear.
My script + css and jss is up on the jsfiddle
http://jsfiddle.net/zApq4/
My js is:
$(document).ready(function() {
// First Show the First Element & Focus it
$("form.fieldContainer:first-child").fadeIn(500).focus();
// Setup a transition handler:
$("form.fieldContainer").keyup(function(ev) {
if $('#nextButton').click(show_next);
{
ev.preventDefault();
ev.stopPropagation();
var _next = $(this).parents('form.fieldContainer').next('form.fieldContainer');
_next.fadeIn(500);
_next.find("input").focus();
}
});
});
I guess i'm doing something wrong in my js but i can't realise what. Thanks to everyone
try following (is that what you want):
var $containers = $(".fieldContainer");
// First Show the First Element & Focus it
$containers.eq(0).fadeIn(500).find("input").focus();
// Setup a transition handler:
$containers.find("input").keyup(function(ev) {
ev.preventDefault();
ev.stopPropagation();
if($(this).val() == ""){
return;
}
//if enter is pressed
if(ev.which == 13){
var _next = $(this).parents().next();
_next.fadeIn(500);
_next.find("input").focus();
}
});
working fiddle here: http://jsfiddle.net/zApq4/3/
Or,
working fiddle here: http://jsfiddle.net/zApq4/4/
i hope it helps.
It is possible to check if a input was not changed using change() event?
I'm working with <input type='file' /> and i want to warning the user that no changes was made on his own action.
Right now, i just made a normal change() event:
// fire the thumbnail (img preview)
$("#file-input").on("change", function () {
readURL(this); // create the thumbnail
});
what i'm missing ?
Prev Solutuib:
well, i found a workaround for this, the real problem is that i give a option to the user to hide the thumbnail, and if he wants, open again...
but the thumbnail will only open when the user select a image, that's the problem, because the change event fire this option to open, so, if no change, no thumbnail open.
so, when i hide the thumbnail, i change the input file for a new one, making the change event always fire.
Use a variable to store the last value of the input, and compare to the current value on change event, if they are the same, no change was made :
var last_value = $("#file-input").val();
$("#file-input").on("change", function () {
if (this.value === last_value) alert('no change');
last_value=this.value;
});
EDIT: Or you can always just replace the input tag with another, like this SO answer suggest :
var $c = $("#container");
var $f1 = $("#container .f1");
function FChange() {
alert("f1 changed");
$(this).remove();
$("<input type='file' class='f1' />").change(FChange).appendTo($c);
}
$f1.change(FChange);
<input type="file" id="file-input" data-url="intial-value" />
$("#file-input").on("change", function () {
if($(this).val() != $(this).data('url'){
//value has changed
$(this).data('url', $(this).val())
}
else{
return false;
}
});
$("#file-input").on("change", function () {
if($(this).data('last-val')){
// do something
} else {
$(this).data('last-val',$(this).val());
//do something else
}
});
I have that text field:
<input type='text' id='title' name='title'>
<div id='error' class='error'></div>
When user clicks out of the text field and there is a validation problem, the div "error" appears.
What I want to do is to hide that little div when user clicks anywhere in the body.
I tried e.stopPropagation in the body click event but didn't work.
The div never appears because when I blur out of the textfield, it's considered a body click
Please let me know if you have any idea. Regards
EDIT:
I have updated the code. The code inside the body click event is supposed to hide the "error" div when anything but the text field is clicked, but can't get it to work.
$('body').click(function(event){
if ($(event.target).closest('#title').get(0) == null ) {
$("#error").hide();
}});
// Validation
$('#title').blur(function(){
var titleinput=$('#title').val();
if (titleinput.length <30 || titleinput.length >50){
$('#error').text('Your title must be between 30 and 50 characters').show();
}
});
Unfortunately, since blur and click are different events, you can't use stopPropagation. The only way I can think to do this is to fake it. You can ignore the first click that happens within a fraction of a second of the blur event.
http://jsfiddle.net/LeNDp/1
var ignoreClicks = false;
var timer;
$("body").click(function() {
if(!ignoreClicks){
$("#msg").fadeOut();
}else{
if(timer) clearTimeout(timer);
ignoreClicks = false;
}
});
$("input").blur(function(e) {
ignoreClicks = true;
$("#msg").stop(true,true).show();
if(timer) clearTimeout(timer);
timer = setTimeout(function(){ignoreClicks=false;}, 250);
});