Realtime math input in browser - javascript

This is a follow up to a previous, unanswered question of mine.
Goal: an input field in a web page (the general sense, not a form specifically) where input of certain patters, such as $\int$, will render math - an integral sign in this case, within the field itself, not in a separate preview box.
In the linked question I linked to a conteneteditable div implementation with MathJax I attempted, but failed (works somewhat on IE, which doesn't count). Please no lip on how contenteditable is terrible, I know this very well now.
I came across the IXL website, which they have an interesting implementation which works nicely for superscripts and fractions (at least). After answering a few questions you get a toolbar, but you can type Shift+^ to see a superscript immediately.
I think I can expand this for other things I need, but I'm not sure what in their code does this - it looks like a canvas, but I'm not sure, and I was hoping someone smarter can recognize immediately what they're using. The source of the page has the JS.
I've posted on MathJax GitHub and some other tools to advance a solution, but currently no one has this functionality properly (only the 'preview' box).
SO is my final attempt - the diversity of people here hopefully can get me started. I just need to focus my reading - the first lines of code, how is a fraction rendered as that box over line over box in the input field.
I apologize for not posting code of my own, my previous question was my best attempt so far.

As per jiggzson's suggestion, I checkout out Guppy, forked it and it's awesome (as far as my needs). You can check my fork at https://github.com/uperetz/guppy. I'll post my latest demo there now. Current branch is textmix but I'm hoping Daniel will merge to master.

Related

Making a countdown clock that resets and changes the page content

I'm slowly learning to implement Javascript into my websites to generate automated changes, actual code is scary for my graphic designer approach but I think I'm getting there.
I followed an exercise some time ago that had me make a countdown clock that resets every time it reaches 0, nothing to crazy but it got me thinking:
Is there any way to make that reset affect the content of the entire page?
The practical case that made me think of it is the website of a restaurant that has a different coupon every day of the week, they upload the coupon code to their social media everyday but if I could develop a site that loops the codes depending on the day and make it change the text content and the stylesheet on it's own the process would be automatic.
I can't figure out how you'd link the clock reset to that change though, tried searching for it and I think this might be solved with some AJAX shenanigans, but it seems to be a bit too specific to find, any guidance would be greatly appreciated.
Hi and welcome to stackoverflow. This is a very general question. It is hard to answer without specificity that requires knowledge the community doesn't have. For example:
When you say "I followed an exercise some time ago...", what did the code look like? What was your final product? How is JavaScript used?
When asking a question in stackoverflow, it can be helpful to share a snippet of what the code looks like so that others can help by testing the code themselves and giving feedback. Or at the very least observing the functionality and maybe catching small syntax errors.
To the second point of "Is there any way to make that reset affect the content of the entire page?" Yes. There are MANY MANY MANY ways to affect content of a page, either in pieces or in its entirety. Once again it depends on what you want to do with the code that YOU have specifically. Even with the basic tools of HTML and JavaScript you can do this. You don't need "AJAX shenanigans" LOL.
If you are just starting out, dig deep into the basics of JavaScript(if that is your preferred language). You will find a whole host of versatile functionality through creating objects, methods, manipulating the DOM, building your own event handlers, etc. Also if none of what I just wrote makes any sense, then you now have some terms worth researching on your own.
I hope that this is helpful for you, and I wish you the best of luck on your coding journey.

How to write a twitter-like RichText box for mentioning entities?

After weeks of trying and testing to find a solution for my needs I admit that I still have no idea how I can solve this problem.
It sounds simple: I want that a user is able to mention things in a text area similar to twitter.
The problem is that I can't seem to manage it to make it work. Every browser has its own specialties which are coming into my way and break things. I have tried multiple different attempts but none of them worked even on a single browser completely.. mixing text and HTML appears to be incredibly hard to do.
So here I am. Asking you guys for any kind of help. Whether it's a library you can recommend me that is already doing what I need here, or if you did something similar and can tell me what exactly you did to make this work on multiply browsers.
My current solution looks something like this: Hitting # will insert a input text field into a div contenteditable everything is working nice so far unless the whole thing is the first element of a row. If the caret is also at position 0 and the user hits Enter, then something dies inside the browser which removes the whole input box without further notice or any events - at least not on Chrome. That was the most promising solution that I was able to come up with. Don't think I didn't try to save it by inserting e.g. a native Text with a zero-whitespace-character but that doesn't work either. It works better - but not completely.
I'm really frustrated by now and this is holding my whole project back which has this key feature that has to work properly - mainly because the information put there is going to be persisted as XML but that is a completely different story.
I really hope somebody can help me to get a solution for this. Bear in mind that I am actually using GWT 2.8.0 but I would not mind to use/wrap a JavaScript library at this point ..

unexpected script/css conflict, how to resolve?

I've asked this question earlier on which has been technically answered by Bardh Lohaj but unfortunately the answer itself presents a further problem. The question is about a cool way to ajax upload files in a multi field form. The solution would work perfectly except that because the form is using bootstrap.min.css in order to display form sections in JS triggered tabs - meaning the form is nicely broken up into manageable parts while remaining all as one page, means the nice solution offered by Bardh does not function correctly. What is the best way forward to resolve the css/js conflict in order to get both functions to operate fully? I've never had this sort of problem before.
As requested, here is a fiddle of the page, I cannot get the +1 feature seated in Section 3, to work on the fiddle as it does on the real page. Fiddle: http://jsfiddle.net/k3dj214k/2/
I want to get this working in the file upload section (Section 3) of the page on the above fiddle. I've tried several times but always with the same failure - the bootstrap.min.css that is required for the tab function, breaks the file upload function. Advice on how to get them both working together is appreciated.
There is too much code to paste in here, please review jsfiddle link above
The accepted and used solution is not one I'm hugely proud of but it IS functional. Separate the upload form function from the main form so they are two separate pieces of html/php. Break the primary form part way through (close the form) and enter the file upload form as an iframe. After this, re-open the original form.
Not a wonderfully technical solution, but is does work with minimal issues/problems.

How to Edit this Code HTML/CSS to Make the 'Select' JS code also Copy 2 Clipboard?

Hi Guys brand new here, my 1st Question went totally off-topic & though I learned a few things about my code the Original Question was still not Answered (YET - PHP'er please check it out + Comments will HELP You HELP Me in other area's of focus)...So thought I would give it another go with something more simple this time around
OK, so the website is NFOPic.com - as you can see from the page (if you upload a txt file and convert to png) there is the code below the PNG that shows & if you click the 'Direct Link Click here' text it 'selects' everything in the 'INPUT' area. What I need to know is-:
How to add a small link at the far right underneath or preferred inline next to the INPUT Area with 'Select & Copy' which when clicked copies the link inside to the clipboard. This of course must work in all major browsers [FireFox, Safari, Chrome, Chromium Based (Torch, EpicPrivacy, Comodo Dragon & so on] & Opera ETC ...(Older IE not important AT ALL, newer 7/8+ IE not very important, but would be great if it worked.)
ORIGINAL CODE:
<div id="direct_link">
<label for="link">Direct link to this image</label><br />
<input id="link" readonly onfocus="$(this).select()" />
Style.css
/* start add 10.07.2014 DrTech76 */
#direct_link
{
display:none;
margin: 1.5em 0;
}
#direct_link label
{
display:block;
clear:both;
}
#direct_link #link
{
width:60%;
}
/* end add 10.07.2014 DrTech76 */
MINI QUESTIONS (x2 if you have time): A) How would I make the INPUT field just long enough to hold the link? (with a bit to spare on the right as image numbers get by 2-4 chars max with a bit to spare then still, I know TextArea's but INPUT fields so full of code I need help with Please!)
B) Also, I don't see where the 'link' to the 'Direct Image Link' via a /get_image.php?=img_75886996=dl - type PHP link is displayed from this, the only text relating to the section of new HTML code where the link is displayed is the Input field & the style.css with no mention of any sort of code I can see that would make a 'link' or THAT EXACT link appear - I know how the get_image.php is getting the link as I read it, what I can't get is without any code or PHP insode the INPUT field does it know to display this? Pls Help me Explain if you have time
is so damn long atm. The outsourced coder's English wasn't great,so TEXTAREA became INPUT (as I had a CodePen.io link bookmarked for the 'Select & Copy' code, but did not work on this set-up (the bookmark is lost to my dead old XP notebook now anyhow)..So anyway, that was the original idea for this, though INPUT is OK if the same feature can be added (Please?)
The original coder was a Student from India who needed to do some coding for his School Project, and as a Community-Sourced Creativity Project Collective (Non-Profit ORG) we were happy to help him out with project & to add his 1st 'Work' to his New Portfolio (with a Reference for CV/Resume)...Anyhow he turned out to be good, but did not understand ENGLISH very well. Another thing he misunderstood is in the code of my original (1st) Question here. where he adds [dl] to hide the 'source' of the images, but IMG-Host's do it all the time & doesn't seem to bother them any! an Index.html file can be added & maybe something in .htcaccess - but again the plan was for me to (as I can basically read & understand most PHP, mySQL I'm still working on (& isset, mysql_fetch_assoc, implode, explode, mysql_query & alot of the strings I can make out what they are asking for, but all the '.' etc puzzle me).. sorry, was for me to add Forum Links, Direct Links, Link to page ie. the =dl link) in TEXTAREA(s) so when ready on a VPS Server these could be un-commented to allow hotlinking, and just use the 'Direct Link to Image' (on page) option... Anyhow, all can be fixed, hopefully alot of it by the fine folks here.
THANK YOU ALL for taking the time in reading this rather long (as I look back), but details I think help define between the original goal and what I have to work with now was important, for this, past and future questions regarding this small PHP Script. Though I appreciate I am still a NEWBIE & need 2 find some questions I can answer & have a further read through re: Question Posting etiquette.
I apologies to those who'd rather skip to the details, and am sure I'll get better with practice.
A MUCH APPRECIATED THANKS to ALL THOSE WHO HAVE READ & CAN & WILL HELP ME ON THIS (rather these - mini-Q's within) QUESTION & HOPE I CAN BE OF SERVICE IN ANOTHER AREA FURTHER DOWN THE TRACK IN RETURN TO ALL!
Kindly,
~jayism
Two quick searches on Google and here you can find the solutions you need:
Mini-question 1 (copy to clipboard) is a duplicate of How do I copy to the clipboard in JavaScript?.
Mini-question 2 (adjust width of text input) is a duplicate of Adjust width of input field to its input.
Sorry, I don't understand the B part of the second mini-question, nor the two following paragraphs (are they even questions?)
About the concerns that we raised in the previous question (and that personally should be considered a top priority over these mini-questions) is that you have serious security problems in the code as it is subject to XSS and SQL injection.

wysiwyg javascript editor replace images with text

I am currently working on a MVC4 asp.net project(my first, before I worked with WPF and winforms, no real website expierience). And I want to make a editor/wysiwyg for comments that people can make on items on the site. Everything is already setup but the comments are just written in a <textarea/>. Now I googled a bit and found a bunch of WYSIWYG editors for javascript, however I can t find a good one, or a good way to solve this issue:
Lets say the site is about poker (it is not but it is for easy example) and when a person makes a comment like "h9 is better then s10" once he posts (or at the time he types, that would even be better). The h9 is replaced by a hearts 9 jpg (or we can create a div of it and it has a backgroundimage css property)(all the jpgs are on the server ofc). (Same for the S10 it should be replaced by the spade 10 card image)
I got no clue how I can fix this, so any help with what wysiwyg editor I should use for this problem and how I could get closer to fixing it, would really be appreciated.
Maxim

Categories