I'm looking for a way to run some JS when a textarea gets resized.
After an hour of searching and fiddling I have something that kinda works, but it is not good enough.
titleTextArea.mouseup(function() {
popup.update(); titleTextArea.focus();
});
The problem with the above code is that it also runs when clicking in the textarea. The code I am running causes the textarea to get re-rendered, which should not happen while someone is working in it, as it messes with the focus.
I've tried using jQuery resizable as per this SO post. For some reason the resize event does not fire. And really I'd prefer not needing to pull in jQuery UI for this.
Is there a way to run code on textbox resize (only on completion of resize is fine) that does not get triggered by a bunch of different actions as well?
(PS: why is there no vanilla event for this?!)
A simple solution can be just adding a check for width/height, not a perfect solution though:
var ta = document.getElementById("text-area");
var width = ta.clientWidth, height = ta.clientHeight
document.getElementById("text-area").addEventListener("mouseup", function(){
if(ta.clientWidth != width || ta.clientHeight != height){
//do Something
console.log('resized');
}
width = ta.clientWidth;
height = ta.clientHeight;
});
<textarea id="text-area" rows="4" cols="50"></textarea>
Please try this.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css"
type="text/css" media="all">
</head>
<body>
<textarea></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$("textarea").resizable({
resize: function() {
alert("xxx");
}
});
</script>
</body>
</html>
Related
I am trying to pass keyboard events to a special class of HTML element (mathquill span). (Key presses get caught at a higher level, so I have to spoon-feed them down.) The standard way of doing this seems to be with jQuery's .trigger, as proposed in this previous question. However, that solution does absolutely nothing on my end. I cannot for the life of me find what's wrong.
This code is supposed to create a MathQuill box and then enter the letter 'f' into it. But the box remains empty.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mathquill-master/mathquill.css">
</head>
<body>
<!-- loading external scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="mathquill-master/mathquill.min.js"></script>
<!-- MathQuill box -->
<span class="mathquill-editable" id="mathquill_box"></span>
<script type="text/javascript">
$(function() {
$('.mathquill-editable').focus();
// creating 'fake' custom event (pressing the 'F' key)
// (this is taken directly from the answer to the previous question)
var customKeyDownEvent = $.Event('keydown');
customKeyDownEvent.bubbles = true;
customKeyDownEvent.cancelable = true;
customKeyDownEvent.charCode = 70; // key code for 'F'
customKeyDownEvent.keyCode = 70;
customKeyDownEvent.which = 70;
// send the event to the MathQuill box
$('.mathquill-editable textarea').trigger(customKeyDownEvent);
});
</script>
</body>
</html>
Any help would be immensely appreciated!
Use mathquill's built in write method to insert latex at the current cursor position. For instance:
$('.mathquill-editable').mathquill('write', 'x^2')
Refer to my previous answer for how to focus it afterwards.
What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.
I am trying to execute a function on pinch in of the body and then another function on pinch out.
Since i'm already using jquery.hammer.js in this document and hammer can listen for in and out pinches, I thought it would be best to use it to listen for the pinches.
But, instead of running the functions, I would just run alerts instead for now.
This seems like it should work, but when I pinch in and pinch out, the alerts are not fired.
What am I doing wrong?
Here is my code:
<!Doctype HTMl>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pinch me!</title>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//raw.github.com/EightMedia/hammer.js/master/dist/jquery.hammer.min.js"></script>
<script type="text/javascript">
var element = $('body').get();
var hammertime = Hammer(element).on("pinchin", function(event) {
alert("pinch in!");
});
var hammertimes = Hammer(element).on("pinchout", function(event) {
alert("pinch out!");
});
</script>
</body>
</html>
I would greatly appreciate any help in getting these alerts to fire on pinch in and out.
I think your script is just malformed? .get() is for making Ajax calls. To select an element, you just wrap it in the jQuery selector.
Try setting element like this -
var element = $('body');
It's not clear to me why you're binding the pinch events to variables in this simple example either, but it shouldn't stop it from working.
You don't need jQuery here. Just use Hammer(document.body).on(...)
I faced a very interesting issue.
I'm trying to set the focus on a input field using Javascript (no jQuery, I tried that also but not worked) using window.onLoad.
Just take a look at this fiddle : setFocusOnLoad
It's working fine in chrome browser but not in Firefox. Is there any issue in Firefox? How can I resolve it.
Edited:
Here is the code I copied in html file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function onloadFocus(){
var name = document.getElementById('name');
// name.value='window.onload called';
name.focus();
}
window.onload=onloadFocus();
</script>
</head>
<body>
<div><input type='text' value='' id='name' name='name'></div>
</body>
</html>
Try adding a slight delay:
function onloadFocus(){
setTimeout(function() {
document.getElementById('name').focus()
}, 10);
}
Update jsFiddle
You must wrap the function-call into a function, otherwise it will be called immediately, not onLoad(the input is still unknown at this time):
window.onload=function(){onloadFocus();}
you should use window.onload=onloadFocus; instead of window.onload=onloadFocus(); because in case of window.onload=onloadFocus(); onloadFocus will run immediately and at that time input field may not be available.
jsfiddle
I got the solution for it. If you want to focus in Firefox. Write the focus function at the starting of the script tag.
<script type="text/javascript">
document.getElementById('name').focus();
// rest of the code here.
</script>
Hope this will help you.
Have stumbled upon what seems to be a bug with how mobile safari renders the cursor when a window.scrollTo() is executed while a user is entering text into a textarea. Have attached source code which illustrates the issue. I'm wondering if anyone has any advice on how I might work around this.
The issue: If a user is entering text into a textarea and a window.scrollTo() is executed, the cursor remains rendered at the position the textarea used to be, not at it's current position.
To recreate: Load the following web page using mobile safari. Touch the textarea, which will open the keyboard. Type a couple of characters and wait. As text is added dynamically to the page, and the window scrolled, you'll see the cursor artifact
Have tried setting the focus() back to the textarea after the scroll, but that doesn't seem to have any effect.
Thanks!
<html>
<head>
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style type="text/css" media="screen">
textarea {
margin-top:50px;
}
</style>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load', function() {
setTimeout(addContent,5000);
}, false);
function addContent() {
var elem = document.createElement('p');
elem.appendChild(document.createTextNode('Some new text'))
document.getElementById('newContentContainer').appendChild(elem);
window.scrollTo(0,20);
setTimeout(addContent,5000);
}
</script>
</head>
<body>
<div id="newContentContainer"></div>
<div>
<textarea></textarea>
</div>
</body>
</html>
Here's a photo which shows the problem:
I'm pretty sure this may solve the problem, and most likely will also make the on-screen keyboard flash off and back on for a tiny bit too. Call this code after you use scrollTo():
yourTextArea.blur();
yourTextArea.focus();