I am trying to focus a textarea after a click on a another element. desktop browsers seems to be working fine but not the Iphone.
$('.reveal_below').on('change', function(e) {
e.preventDefault();
var item_id = $(this).attr('data-item-id');
if (this.checked) {
$('.hidden_below__' + item_id).css({
'margin-left': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-left': '15px',
opacity: '1'
},
250, function() {
console.log("-----------");
$("#x").focus();
})
} else {
$('.hidden_below__' + item_id).slideUp();
}
});
here is a little demo
it will focus a textarea on change event of the checkbox. That is the issue and how to can i solve this with the animation as in the demo?
You have to use touchstart event to fix this issue.
$(document).ready(function() {
$('button').on('click', function() {
$('#x').css({
'margin-top': '0px',
display: 'block',
opacity: '0'
}).animate({
'margin-top': '15px',
opacity: '1'
},
100
)
$('#x').trigger('touchstart'); //trigger touchstart
});
$('textarea').on('touchstart', function() {
$(this).focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea id="x" style="width: 100%;height:6em;display: none" placeholder="Return notes..." cols="30" rows="10"></textarea>
<button type="button">focus textarea</button>
Related
I have a code that when you click on an image it associates a point to it.
What I would like is that every time I click, the associated point on the image is stored in a table.
If I add 3 points on the image, let those 3 points be stored in a table.
Because afterwards I would like to be able to click on these points to be able to add information.
Thank you very much for your help, and sorry for my English.
Here is my code js
<script>
$(document).ready(function () {
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(document).click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
}
});
});
</script>
<body>
<button class="button">Add a point</button>
<div class="div1">
<img src="photo1.jpg" />
</div>
</body>
You can try the code below:
$(document).ready(function () {
let count = 0
let resultArray = []
var addPoint = false;
$(".button").on('click', function () {
addPoint = !addPoint // will toggle false -> true or true -> false;
});
$(".div1").click(function (ev) {
if (addPoint == true && ev.pageY > 40 && ev.pageY < 990) {
$(".div1").append(
$('<div></div>').css({
position: 'absolute',
top: ev.pageY + 'px',
left: ev.pageX + 'px',
width: '20px',
height: '20px',
borderRadius: '20px',
background: 'blue',
color: 'white',
textAlign: 'center',
})
);
count = count +1
$("#myTBody").append(
"<tr id='point"+count+"'><td>"+count+"</td><td>"+ev.pageX+"</td><td>"+ev.pageY+"</td></tr>"
)
let point = {
id:count,
x:ev.pageX,
y:ev.pageY
}
resultArray.push(point) // You could use this array to do something you want
$("#point"+count).on('click', function () {
var output = "ID :"+ $(this).children(":first").text()+" X,Y :"+$(this).children().eq(1).text()+""+$(this).children().eq(2).text()
$("#pointInfo").text(output)
});
}
});
});
.div1 {
width:200px;
height:100px;
background-color:red;
}
tr:hover {
background-color:yellow;
cursor:pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button class="button">Add a point</button>
<div class="div1">
</div>
<table>
<thead id="myTHead">
<tr>
<th>PointID</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody id="myTBody">
</tbody>
</table>
<div id="pointInfo"><div>
</body>
So the problem is every time I click outside the input focus keeps on
i tried several codes but they didn't work for me
$(document).ready(function(){
$("input").focus(function(){
const background = true;
if(background == true){
$('form').css({
'background-color': '#fff',
'transition': 'background-color 1s ease-out'
});
}
else {
$('input').blur(function(){
if(background == false){
$('form').css({
'background-color': 'transparent'
});
}
})
}
})});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline">
<div class="input-group">
<input type="text" class="form-control input" placeholder="How may we help you?">
<div class="input-append">
<button type="button" class="btn"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
I think you wanna do something like this
On Focus- Change color of form background to #fff(White)
On unfocus - Change form background to transparent
$('input').focus(function () {
$('form').css({
'background-color': '#fff',
'transition': 'background-color 1s ease-out'
});
});
$('input').blur(function () {
$('form').css({
'background-color': 'transparent'
});
});
$(document).ready(function(){
$("input").focus(function(){
$('form').css({
'background-color': '#fff',
'transition': 'background-color 1s ease-out'
});
});
$('input').blur(function(){
$('form').css({
'background-color': 'transparent'
});
});
});
Try this.
I have a bootstrap text input and with jquery I would like to:
Expand textform on hover and retract on hover out. ✓ (already done in this jsfiddle)
When textform is focused/selected (insertion point is inside text box), the form is expanded and does not retract on cursor hover out. ✗ (to be compelted)
Html
<div class="col-md-3 col-sm-3">
<div class="input-group">
<input class="form-control" placeholder="Search"></input>
</div>
</div>
Javascript
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": "+=" + form.width() * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": '100%'}, "slow");
});
});
try this
$(function(){
var form = $('.input-group');
var start_width = form.width();
form.find('#input-target').mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
}).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).focus(function(){
$(this).unbind('mouseout');
$(this).unbind('mouseenter');
}).blur(function(){
form.animate({ "width": start_width+'px'}, "slow");
$(this).mouseout(function(){
form.animate({ "width": start_width+'px'}, "slow");
}).mouseenter(function(){
form.animate({ "width": "+=" + start_width * 1.4}, "slow");
});
});
});
see at this
http://jsfiddle.net/ZQ3nZ/
Solved http://jsfiddle.net/mY8uU/6/
$(function(){
var form = $('.input-group'), w = form.width();
form.mouseenter(function(){
form.animate({'width': '100%'}, 'slow');
}).mouseout(function(){
if(!$('.form-control:focus').length) form.animate({'width': w}, 'slow');
})
$('.form-control').on('blur', function(){
form.animate({'width': w}, 'slow');
});
});
Is CSS3 out of the question?
In that case you can do without Javascript and use
.textbox{
width: 200px;
transition: width 1S;
}
.textbox:hover
{
width:250px;
transition: width 1S;
}
This is just an example, but you can change it to your liking.
You could always employ some CSS3:
input#search {
transition: width .5s;
-webkit-transition: width .5s;
}
input#search:hover, input#search:focus { width:300px; }
this one worked for me:
$(function(){
var form = $('.input-group');
form.mouseenter(function(){
form.animate({ "width": form.width() * 1.8}, "slow");
}).mouseout(function(){
form.animate({ "width": form.width() / 1.8}, "slow");
});
});
jsfiddle: http://jsfiddle.net/mY8uU/2/
I'm using jquery re-sizable textarea. Everything is working fine but on left click it does not focus the textarea. Right click work for focus and cursor movement but left click isn't working. I want to focus the textarea by left click or click.
JSFiddle
HTML:-
<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
<textarea style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
JS:-
$(function () {
$('.drag-item').draggable({
snap : true,
cursor : "move",
delay : 100,
scroll : false,
cancel: "text",
containment : "parent",
drag: function(e, ui){
//some code
}
}).resizable({
containment : "parent",
stop: function(e, ui) {
var width = ui.size.width;
var height = ui.size.height;
var hereDrag = this;
if($(hereDrag).find('textarea').length > 0){
$(hereDrag).find('textarea').css('width', width - 10);
$(hereDrag).find('textarea').css('height', height - 10);
}
},
resize: function(e, ui){
//some code
}
})
});
CSS:-
div {
float: left;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
border:3px solid;
}
The issue is because the entire div is used for dragging, so the click event is stopped from bubbling to the textarea. You need to use a handle to do the dragging instead. Try this:
$('.drag-item').draggable({
handle: '.drag-handle',
// other settings...
})
<div class="drag-item item-txt txt-static">
<div class="drag-handle"></div>
<textarea style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
</div>
Note you can make the .drag-handle appear however you need, I just made my example for speed.
Example fiddle
use this JS:
$(function () {
$('.drag-item').draggable({
snap : true,
cursor : "move",
delay : 100,
scroll : false,
cancel: "text",
containment : "parent",
drag: function(e, ui){
//some code
}
}).resizable({
containment : "parent",
stop: function(e, ui) {
var width = ui.size.width;
var height = ui.size.height;
var hereDrag = this;
if($(hereDrag).find('textarea').length > 0){
$(hereDrag).find('textarea').css('width', width - 10);
$(hereDrag).find('textarea').css('height', height - 10);
}
},
resize: function(e, ui){
//some code
}
});
$('.drag-item').click(function(){
$("#text").focus();
});
});
Working for me in fiddle.
I want to just click a button create my object which is a form but when the button fires it loads the form. My constructor could all be wrong so if you find any faults or suggestions they would be appreciated. I've commented my code where Im having trouble
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
current = jQuery('.wikiform .wizard :first');
var width = 0;
function positionForm() {
jQuery('.wikiform .wizard .view').each(function () { width += jQuery(this).width() });
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height() + 10)
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width() + 10)
.css('left', -jQuery('.wikiform').width())
.css('overflow', 'hidden')
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('width', width)
.css('height', jQuery('.wikiform .wizard .view:first').height());
}
if (this.Mode == "Wizard") {
return this.each(function () {
/* <-- this function here not binding */
jQuery(this).bind('load', function (){
positionForm();
});
jQuery('.wikiform .navigation input[name^=Next]').click(function () {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '-=' + current.width() + "px" }, 750, null, function () {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function () {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({ marginLeft: '+=' + current.prev().width() + 'px' }, 750, null, function () {
current = current.prev();
});
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
/*
jQuery(window).bind("load", function () {
});
*/
jQuery('button[name=button1]').bind('click', function (e) {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed: 750, ease: "expoinout" });
/* problem here initalizing the load */
e.preventDefault();
});
});
</script>
<style type="text/css">
* { margin: 0; padding: 0 }
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute; display:block;
}
.wizard
{
overflow:hidden;
}
.wizard .panel
{
}
.view
{
float:left;
}
.wizard .panel .view
{
float:left;
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:400px;
height:400px;
}
#view3
{
background-color:Lime;
width:300px;
height:300px;
}
</style><form action="" method="">
<div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
<button id="button1" name="button1" value="1"> Click Me! </button>
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
<div id="view3" class="view">
<div class="form">
Content 3
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div>
Could you just place the call to positionForm() at the end of the initialization code? Something like this:
if (this.Mode == "Wizard") {
return this.each(function() {
jQuery('.wikiform .navigation input[name^=Next]').click(function() {
if (current.next().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '-=' + current.width() + "px"
}, 750, null, function() {
current = current.next();
});
});
jQuery('.wikiform .navigation input[name^=Back]').click(function() {
if (current.prev().length == 0) return;
jQuery('.wikiform .wizard').animate({
marginLeft: '+=' + current.prev().width() + 'px'
}, 750, null, function() {
current = current.prev();
});
});
positionForm();
});
}
I updated your code in a fiddle here: http://jsfiddle.net/andrewwhitaker/vztcq/
Edit: To center your modal dialog vertically, use $(window).height() instead of window.screen.availHeight when calculating the vertical position. See jQuery's documentation for height for more info. Updated fiddle here: http://jsfiddle.net/andrewwhitaker/bBCeq/
A few other things I noticed:
You could be using $ instead of jQuery inside of your plugin code. The anonymous function that sets up the plugin takes a parameter called $ and takes jQuery in as a parameter. This will make your code a little more readable, in my opinion.
When you're setting multiple CSS rules with jQuery, you can use an object that defines multiple properties: $(..).css({'width': '10px', 'height': '10px'}); for example.
Make sure your <form> has an ending </form>. In the code you posted the closing tag was missing.
Cache commonly used queries (e.g. var $wikiForm = $(".wikiform"))
Use id selectors rather than class selectors whenever possible.