How is this superb site constructed? - javascript

I found a website last night that is simply awesome. Here's the URL:
http://yourworldoftext.com/
WARNING: Site may be NSFW.
And it got me thinking straight away how this site is constructed. Taking a look at the page source doesn't reveal much, but if I look at it in Firebug I see a lot of tables like this:
<div class="tilecont" style="top: 994px; left: 1320px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>A</td>
<td>L</td>
<td>L</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>Y</td>
<td>O</td>
<td>U</td>
<td>R</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
<tr>
<td>B</td>
<td>A</td>
<td>S</td>
<td>E</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<tr>
</table>
</div>
the tilecont DIV is repeated and tiled along the entire page, and the table inside occupies the entire width and height of that DIV. Then, each <tr> inside the table is one row with 16 <td>'s inside that row to make up each character.
It's hard to explain, if you have Firebug installed you can simply drag it to the page and see for yourself.
I thought this was pretty damn clever, but I can't work my head around how it would be stored in a database or something? I have tried looking through the JS files but to be honest there's a lot of stuff in there I either don't know or not related to how it's stored etc. I assume it's making an AJAX request to a database on every keyUp event storing the new data for that particular "cell"?
Anyone have any input on how they think this is done?

You're probably roughly correct. The site knows where your viewport is and only loads the part that is visible, in 16 char "chunks". The DB just saves 16 char strings with an x and y coord. You can see it updating in 1x16 blocks if you drag quickly.
As for sending, if it were me I would cache the text and only send one 16 char "chunk" at a time. Each time an edit occurs check if its in the same chunk as the last one. If not send the last chunk and start caching the new one.
To keep the view up to date you could have it check for changes in your view area by sending an ajax request every couple seconds with window.setInterval(). It could send back some JSON or something with just the chunks that have changes, maybe encoded with their location in the grid in the first few chars.
I'm just hand waving here, I haven't looked at the code, but you're right. Its a fascinating site.
EDIT: More detail...
Check out the init() function (line 906 in yourworld.js). That's the best point of entry if you want to study the code. You can see how editing works at line 953. On keydown the script focuses a hidden input element which catches the text. Then he uses a callback on setInterval to get the first character from the input field every 10ms and then blank the field. If there's a char then it gets cached in an array and put in the active cell on the grid. He says in a comment this is to prevent pasting.
The array of edits is sent every two seconds (line 1017). Each character of input is sent with a position and timestamp.
fetchUpdates() handles getting newly updated cells from the server (line line 383). It contains a jQuery.ajax request with a callback on success to a function that makes the necessary changes and calls fetchUpdates() again after a 1 second setTimeout().

Related

how to force the user to write correctly in HTML input

I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.

Dynamically adding table rows in js, sum up an input values

Hey guys I have a question and I'm looking for help to change this code a lil bit cause I'm struggling to do this for the last hour and I can't seem to figure it out how to change it.
This script works exactly how I want it to be. I can add an input field, I can delete input field and what's the most important it sum up all values.
https://jsfiddle.net/btxjkgr4/3/
What I need is to change this script that It can instead of creating div's, create next table rows with 3 columns to fit this table and sum up all values from 3rd column in each row
<table class="table" id="tab_klasa1">
<tr>
<th class="tg-031ec" colspan="3">Class</th>
</tr>
<tr>
<td class="tg-031ec">Name</td>
<td class="tg-031ec">Profile</td>
<td class="tg-031ec">No. Users</td>
</tr>
<tr>
<td class="tg-031e">A</td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
<td class="tg-031e"><input class="input_t4" type="text" name="fname"></td>
</tr>
<tr>
<td class="tg-yw4lcr" colspan="2">Total:</td>
<td class="tg-yw4l"><input class="input_t4" type="text" name="fname"></td>
</tr>
</table>
I applied table in this jsfiddle. I'd really appreciate for help.

Fastest method of building HTML table one data source at a time

I need to dynamically build an HTML table given a certain query method. It doesn't seem too complex and I figure there must be a quick way of doing this.
The query method: Given x amount of data sources, I can query each one, one after the other, for a given time period and get timestamps:values for matching records in that time period. The queries happen one after the other so I have to build an HTML table out of them one by one.
My idea: build it out one by one to look something like this:
<table>
<th>
timestamp
</th>
<th>
source 1
</th>
<th>
source 2
</th>
<th>
source 3
</th>
<tr>
<td>
timestamp 1
</td>
<td>
source 1 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
source 1 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
source 1 value 3
</td>
</tr>
<tr>
<td>
timestamp 1
</td>
<td>
</td>
<td>
source 2 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
</td>
<td>
source 2 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
</td>
<td>
source 2 value 3
</td>
</tr>
<tr>
<td>
timestamp 1
</td>
<td>
</td>
<td></td>
<td>
source 3 value 1
</td>
</tr>
<tr>
<td>
timestamp 2
</td>
<td>
</td>
<td></td>
<td>
source 3 value 2
</td>
</tr>
<tr>
<td>
timestamp 3
</td>
<td>
</td>
<td></td>
<td>
source 3 value 3
</td>
</tr>
</table>
Check this fiddle for a good visual: http://jsfiddle.net/ac0o2715/2/
Then sort that table by timestamp using something like this: http://jsfiddle.net/qNwDe/417/ (from this StackExchange thread: Sort a table fast by its first column with Javascript or jQuery )
Then combine by identical timestamp columns using some efficient method that I cannot think of unfortunately, however I feel should not be very difficult since there should be no conflicting columns when combining.
OR, maybe this entire strategy is inefficient, I just couldn't think of a quick way of inserting new rows into the current table sorted by timestamp (and also combining them on identical timestamp) while iterating through the queried data. It seems like it would be faster to dump them all in first and then do one sorting function and merge.
This project is using jQuery, so Javascript and/or jQuery solutions are just fine.

Knockout table row access

First off, forgive the hard coded table data. I am doing a simple add row type of thing. I'm wondering how to get at the data in the sibling TDs. Should I be using a form? Or something else? basically I just need access to the data that is already in there and move it to another table.
<tbody data-bind="foreach: Resources">
<tr>
<td data-bind="text: name">
</td>
<td data-bind="text: type">
</td>
<td data-bind="text: contact">
</td>
<td data-bind="text: status">
</td>
<td>
<input type="button" data-bind="click: addResourceToList" value="Add Resource" />
</td>
</tr>
</tbody>
Here is the start of the code in the model.
addResourceToList = function () {
self.ResourcesInPlan.push(new ResourceListModel({ name: this.title }));
};
Thanks for any advice.
Update: The data was there, but I missed it. I changed to this line.
self.ResourcesInPlan.push(new ResourceListModel(this.name));
Because I was referencing the model wrong as you can see.
See this example:
http://knockoutjs.com/documentation/click-binding.html#note_1_passing_a_current_item_as_a_parameter_to_your_handler_function
KO will send the item as the first parameter to the function too.

jQuery load() replacing whole page instead of loading content into div

I am trying to load in thumbnail of an inputted webpage when the user clicks a button. The thumbnail is generated properly on the page by itself, but when I attempt to load it into the div element, it replaces the whole page. Currently, this is just a proof of concept. I will switch to user inputted url if I can get this working.
Here is my click event code:
$('#check_url').click(function() {
$('#thumb_loader').load('load_thumb.html');
});
thumb_loader is just a div. I have also tried it like this:
$('#check_url').click(function() {
$('#thumb_loader').html($('<div>').load('load_thumb.html'));
});
Here is load_thumb.html:
<div>
<script type="text/javascript">
wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
</script>
</div>
wsr_snashot is WebSnapr. The image is generated on their server and appears where this code is.
First off, can I even load javascript like this? I have used load to drop in content that contains javascript before, so I doubt that is the case.
Anyone see any problems here?
EDIT:
Here is the table where the div I wish to load into is and the button that the user would click to trigger the AJAX.
<table>
<tr>
<td colspan="2">
<div id="thumb_loader"></div>
</td>
</tr>
<tr>
<td>
<label>Link Title:</label>
</td>
<td>
<label>Link Description:</label>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_title" />
</td>
<td rowspan="3">
<textarea name="link_description"></textarea>
</td>
</tr>
<tr>
<td>
<label>Link URL:</label>
</td>
<td>
</td>
</tr>
<tr>
<td>
<input type="text" name="link_url" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input id="check_url" type="button" value="Check URL" />
</td>
<td align="right">
<input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
</td>
</tr>
</table>
I don't see anything else that could be relevant in the code. Hope this is enough.
Put JS code out of load_thumb file and keep in a new js file like image.js and use $.getScript to dynamically add it in your principal page:
$.getScript('path/image.js', function(){
// file loaded
});
You should put above code in your main file where you want to run your thumb image.
More:
http://api.jquery.com/jQuery.getScript/
jQuery#load(): When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
if wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small'); contains any document.write calls, you're entire document is overwritten. Make sure you know what that function does.
Update:
according to the question's comments, this really is the issue. You need to figure out how wsr_snapshot() can be used in an asynchronous fashion. What API is that from anyways?

Categories