Passing key presses in jQuery (to MathQuill) - javascript

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.

Related

HTML textarea resize event

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>

Unable to trigger onmouseenter events?

I was able to make onmousesenter work correctly when I included the reference to the function directly in the html, but read that was bad form and wanted to improve my code- but now I can't get it to run, despite my code showing it does trigger the function, I'm just not sure why the rest of it fails to run now:
<DOCTYPE! html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>Sexism in Silicon Valley</title>
<script src="index.js"></script>
</head>
<body id="body1">
<div class="parent">
<img src="kstartup.png" class="logos" id="id1"></img>
<img src="uber.png" class="logos" id="id2"></img>
<img src="kpcb.png" class="logos" id="id3"></img>
<img id="id4" src="r1startup.png" class="logos"></img>
</div>
Javascript (index.js):
function mouseenter() {
alert("hey");
var z = document.getElementsByClassName("parent");
for (var i = 0; i < z.length; i++) {
z[i].style.background = "black";
}
var bod = document.getElementById("body1");
bod.style.background = "black";
}
document.getElementById("id1").onmouseenter = mouseenter();
The alert goes off as soon as I load the page instead of when my mouse enters the id1. Why isn't it triggered by my mouse entering the id?
Your document DOM is not ready when you try to access the ID id1 Element.
document.getElementById("id1").onmouseenter = mouseenter; // Don't execute()
// Since this code is inside HEAD, JS does not know about any #id1 Element yet.
cause you're calling the <script> tag inside <head> instead of at the bottom before the closing </body> tag.
<script src="index.js"></script> <!-- Makes sure parser readed all the elements -->
</body>
</html>
document.getElementById("id1").onmouseenter = mouseenter; // << no ()
// Assign, don't execute.
There are quite a number of issues here:
The doctype is incorrect
Image tags do not have a closing equivalent in HTML5, i.e. </img> does not exist (was a thing in XHTML)
You have not wrapped you JavaScript in <script> tags so it is being interpreted as HTML
You are calling the mouseenter function when you are assigning it, so you actually assigning the result. In other words you should just assign a reference to the function: document.getElementById("id1").onmouseenter = mouseenter
Working example here: http://plnkr.co/edit/fmBIM7U6QSS0cl7vqdlQ?p=preview (obviously the images will not load, as you only provided relative paths)

Problems with jMyCarousel

I'm completely stuck as to how to fix this. When I test it offline it works great. When I upload it and run it live none the images on my site load unless you click on the link for the page a second time. And on the press page it loads for a second and then its the same as the other pages but a second click on the link doesn't fix it. I've checked out this problem in firefox and safari.
P.S. I know my Menu's still are having issues if anyone has any suggestions for that I'd be super thankful. Mainly how can I get the hidden menu to stay centered.
Thanks!!!!!
http://www.tracyashaw.com/e2studio/index.html
http://www.tracyashaw.com/e2studio/press.hmtl
This on on the top of each page
<link rel="stylesheet" href="e2studio.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jMyCarousel.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
$(".jMyCarousel").jMyCarousel({
visible: '100%'
});
});
</script>
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
//Enter path of images to be preloaded inside parenthesis. Extend list as desired.
preloadimages("images/home_1.jpg","images/newport.jpg","images/newport_life.jpg","images/RI_monthly.jpg","images/unique_homes.jpg","images/ri_monthly_cover.jpg","images/so_ri_press_cover.jpg","images/grace_ormonde_cover.jpg")
</script>
The jQuery mousewheel plug-in you are using clearly states in the header comments that jQuery 1.2.2+ is required, likely due to the dependency on the special property of jQuery's event object. You have linked to jQuery 1.2.1. Also some image requests are coming back with a 404 response code. You'll have to address these two items.

JS that should listen for pinch in and pinch out not working

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(...)

Testing if an upload field will accept "click"

So, I would like to be able to have people click on a link, and the an input field with a file will open. But I only want this to happen if the browser has support for it. As pointed out in this answer, chrome supports this. Firefox 3.6 does not, but Firefox 4 should.
I know you can frequently test for support of features in javascript, but I'm unsure how to test for this feature.
If you'd like to see what I mean, the below code shows the feature when clicking on the link. You can also play with this on my page.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Field Click Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var clicker = document.getElementById('clicker');
var uploader = document.getElementById('uploader');
clicker.addEventListener("click", function(e) {
uploader.click();
e.preventDefault();
}, false);
});
</script>
</head>
<body>
<form>
<input type="file" id="uploader">
</form>
Should click the uploader
</body>
</html>
Things that do not work:
testing !uploader.click
seeing if uploader.click() throws an exception
You could use JQuery to dynamically write the HTML into the document at the appropriate place
$("#mylinkID").after('Whatever');`
and the link would be added after the element that contained the ID "mylinkID". If no support for JS, the link doesn't get displayed.

Categories

Resources