(rpg?) dialogue system in HTML5 & Javascript - is it possible? - javascript

I want to make a text based dialogue system giving the user multiple choices to choose from.
In terms of UI, i'd like it to be almost identical to something like this, but this is done in flash and isn't multiple choice:
http://code.tutsplus.com/tutorials/make-an-rpg-style-text-system-for-your-next-game--active-3678
Since I have no experience in flash, i'd like to see if it could be done in JS/jQuery.
I don't think i'd have a hard time replicating the UI at face value, but as far as the scrolling text goes, I'm not sure. Possibly CSS3?
My only ideas that might make it work would be, using a constructor for the people in the conversations, and then of course another for the conversation itself then display the "conversation" and user choices in a JQ dialog window? Other then that, I'm lost.
I know that there's dialog systems out there, but I haven't seen any in JS and i'm wondering if anyone has done something like this or at least attempted it.
As always, thanks for the help!
EDIT: I think I was a bit vague - if this can be done, how can it be done.
Is there any tuts or books/pdfs for something similar?

I got something working pretty quickly using Yarn (editor) and bondage.js (client). bondage 0.5.5 doesn't support all the features of Yarn but it's more than enough to get started.

Related

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

AJAX and Javascript: suggestions about an interface

I am looking for a correct method to create something very similar to this (just click Next on that page). I would love to receive any suggestions on how this has been made.
I believe that it's all about a DIV wrapping many ul's. When next is clicked, probably a jQuery code is showing an hidden DIV on the right, but wouldn't know how to position it. Everything clearly must be taken from a database.
Can anyone out there give me an advice? I hope this is not the kind of a thumbs-down question, as I tought this community would have been the best place to share this. Thanks a lot.
Take a look at some existing JavaScript MVC frameworks like Backbone.js, AngularJS, or Knockout, to understand some of the design patterns and philosophies behind these kinds of dynamic UIs.
They can be powerful for tools for a modern web app, especially when you have a lot of moving parts in your UI. They'll play well with your backend and datastore via AJAX, and you get nice features like "routing" which can help you do cool things with page flow, all the while keeping your JavaScript clean and concise.

JavaScript on Google's homepage?

Does anyone know what the JavaScript on Google's homepage does?
For such a simple homepage, there's a lot of code there! It's obfuscated and really quite onerous. I don't want to spend ages looking at it just to find it's doing something mundane.
Just thought that someone else may have looked at it already. Interested to know...
Cheers,
Steve
It's mostly your AJAX requests for autocomplete. Also, to make the search div box look like a text field. (It isn't a text field. Try pausing JS from the console, you'll see the cursor stop blinking.) Moreover, a lot of styling of it's UI elements.

Simple lightbox feedback form? Included screenshot

There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.

A site for random useful javascript snippets for web development?

I'm going through a pretty amazing ruby on rails course. Just a second ago I learned about flash hashes that show a message after some action has been performed.
Obviously, you can apply styling to it and what have you, but I wonder if there are ready-to-go javascript snippets out there that, in the case of flash hashes, would slide in for a second, and then disappear? (much like the stackoverflow message bar that appears up top)
I don't know if learning rudimentary javascript is something I'd want to do right now (maybe later, I need to stick with one thing) so I was wondering if there was some resource that is known for ready to go scripts like that?
Merci :)
This is not exactly what you asked for but the jQuery and jQuery UI libraries provide a fair number of animation effects that you might find useful.
jQuery UI effect() demos - you can also view the source to see how it's being done.
jQuery effects - in particular, you might be interested in fadeIn() and fadeOut(). Again, you can also view the source to see how to use these functions.

Categories