Category: Javascript

Teaching Kids to Code – Processing.org

My friend Eric is a technology teacher at a school in the Richmond area and I were discussing the importance of teaching kids to code.  The website code.org goes into it.

I thought I should write up a quick tutorial on ways for kids (or grown ups) to code while:

  • Having fun
  • Creating
  • Learning
  • Sharing their work
  • Building off of each others work

My tutorial utilizes two technologies:

jsfiddle : This web platform allows you to program in javascript and see your results.  You can share and build off existing code.

Processingjs.org : This javascript library allows you to cool stuff like: this, this, or this.  It is a powerful library that has great documentation.

So, here are my basic first instructions:

START:

EDITING:
So, in this example, you can change the line of code:
processing.background(224);
to be:
processing.background(255,0,0);

VIEWING:
Hit RUN, and you will get a red background.

SHARING:
Then, you can use the SHARE button and you can see options to use Twitter or just send a link without any code:

 

So, I think you could learn a whole lot from these two things combined.

Hope this helps!

 

MailChimp – Pass Email to Form

mail chimp logo

I wanted to use a basic email field and send the information to a mailchimp form.  I could not find the solution anywhere, so I decided to see if I could hack a solution.

When you go to MailChimp > For Your Website > Signup Form Link Code
You will get something like: http://eepurl.com/XXXX, which will take you to something like:

http://toolstoday.us2.list-manage.com/subscribe?u=XXXXXXXXXXX&id=XXXXXXXXXXX

If you look at the source on this page, you will see that the form elements are called: MERGE0, MERGE1…

On my form, the email field is MERGE0, so on my website, I was able to create a javascript link that will automatically fill in email by using this link:

http://XXXXXXXXXXX.us2.list-manage.com/subscribe?u=XXXXXXXXXXX&id=XXXXXXXXXXX&[email protected]

You can fill in more than one field by adding more merge fields in the url:

http://XXXXXXXXXXX.us2.list-manage.com/subscribe?u=XXXXXXXXXXX&id=XXXXXXXXXXX&[email protected];MERGE1=Daniel Folkes

Then, you can use this jquery to auto open a new window on enter key press:

            $("#ea").keypress(function (e) {
                if (e.which == 13) {
                    e.preventDefault();
                    //dan@dans
                    var url = "//XXXXXXXXXXX.us2.list-manage.com/subscribe?u=XXXXXXXXXXX&id=XXXXXXXXXXX";
                    url += "&MERGE0=" + $("#ea").val(); // ea is my email input text box.
                    window.open(url, "mywindow", "status=1,toolbar=1,resizable=1,width=1000,height=600");
                }
             });

Moderating Comments on a Freehostia Chocolate Account (Free)

The problem: Freehostia Free Accounts block outside connections.  This means that Akismet can’t access it’s servers and you can’t have spam checking.  So, all of your comments are spam spam spam!

I tried to add a captcha, but they got around that.  I tried to add Disqus using the plugin, but that failed to install because of the account’s limitations.

But, I was able to add moderated comments to my freehostia site by manually installing Disqus.  This is very necessary because otherwise you get hit with a bunch of spammers.

Here is how you manually install Disqus on WordPress.

  1. Create New Disqus Account 
  2. Go to your dashboard
  3. Click on your site
  4. Go to Settings
  5. And then click Install
  6. Select Universal Code
  7. Copy that code
  8. In /wp-content/themes/THEMENAME/single.php Replace: 
    <?php comments_template( '', true ); ?>

    with:

    echo '	
 
YOUR COPIED CODE HERE.  
 
    But you must remember to ESCAPE the 
    single quotes with backslashes example: \'
 
	';
  9. Save, Upload, then go to one of your posts. You should see Disqus loading at the bottom.
  10. Remember to setup your Disqus the way you want it. It’s a little restrictive out of the box. You can even add Akismet to Disqus in their admin interface.

Short Domain Name Finder

This is a short url finder I created.
It checks to see if the domain is available remembers.

Short Domain Name Finder

There is a python script in the background that populates a mysql database which displays it with php.

Web Service using JSONP from External Domain – PHP – JQuery

You may want to look at this previous post where I setup a PHP Webservice that uses JSON PDO – Accessed by JQuery AJAX

OK, so this code will use php to generate the JSON code that will get delivered over the internet to the JSONP (JSON Padding) client on an external domain. This allows your webservice to be available too whoever wants to call it.

Here is the PHP Code: (Not all of it, but enough to get the idea)

//http://SERVER_domain.com/webservice.php
private function GetTriviaTag($row) {
	$t = new Tag();
	$t->id = $row['id'];
	$t->triviaid = $row['triviaid'];
	$t->tagid = $row['tagid'];
	return $t;
}
public function GetWhere($where) {
	$retArray;
 
	$sql = "SELECT * FROM trivia_tags WHERE {$where}";
	foreach ($this->pdo->query($sql) as $row)
	{
		$retArray[] = $this->GetTriviaTag($row);
	}
	return $retArray;
}
$where = " (1 = 1)";  // THIS WILL SELECT ALL
$tarray = GetWhere($where);
 
//OUTPUT JSON:
header('Content-type: application/json');
echo $_GET['callback'];  // <-- THIS IS IMPORTANT FOR EXTERNAL DOMAIN ACCESS!!!
echo "(" . json_encode($tarray) . ")";

And now, to access it from javascript in an external domain (non – SERVER_domain.com ):
http://CLIENT_domain.com/Test.html:

<html>
	<head>
		<title>Test</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
		<div id="triviaQuestions"> loading... </div>
		<script>
			$(function() {
				// THE 'callback=?' in this request is IMPORTANT FOR EXTERNAL DOMAIN ACCESS!!!
				$.getJSON('http://SERVER_domain.com/webservice.php&callback=?', function(data) {
					var items = [];
					var htmlResult = "";
					$.each(data, function(key, val) {
						htmlResult += "<br />Q: "+ val.id +", '"+ val.question +"";
					});
					$('#triviaQuestions').html(htmlResult);
				});
			});
		</script>
	</body>
</html>

PHP Webservice that uses JSON PDO – Accessed by JQuery AJAX

You may want to look at this previous post where I setup a Web Service using JSONP from External Domain – PHP – JQuery

The HTML that calls the Javascript:

<div id="taglist"></div>
<input name="searchTags" id="searchTags" type="text" />
<input type="button" name="searchtags" onclick="getTags()" value="search"/>
<div id="tagresult">
</div>

The JavaScript (JQuery) AJAX Request and Response Processing:

function getTags()
	{
		var q = $('#searchTags').val();
		$.getJSON('ws.php?type=tag&wN=name&wO=like&wV=' + q, function(data) {
			var items = [];
			var htmlResult = "";
			$.each(data, function(key, val) {
				//As you can see, you can access the JSON (at the bottom of the page) by doing val.PROPERTYNAME:
				htmlResult += "<br />Add : <a href=\"#\" onclick=\"addTag("+ val.id +", '"+ val.getfullname +"'); return false;\">"+ val.getfullname +"</a>";
			});
			$('#tagresult').html(htmlResult);
		});
	}

PHP Code that returns JSON in the PHP file called by the AJAX: (ws.php)

	$ta = new TagAccess();
	$tarray = $ta->GetTagsWhere(" {$whereName} LIKE '%{$whereVariable}%'");
	header('Content-type: application/json');
	echo "",  json_encode($tarray), "";

The GetTagsWhere Helper Function:

    public function GetTagsWhere($where) {
    	$retArray;
 
    	$sql = "SELECT * FROM tags WHERE {$where}";
    	// THE PDO Object was created previously
	foreach ($this->pdo->query($sql) as $row)
	{
		$retArray[] = $this->GetTag($row);
	}
	return $retArray;
    }

JSON Returned:

[{"id":"4","name":"FICTION","parentid":"3","getfullname":"BOOKS > FICTION"},{"id":"5","name":"NON-FICTION","parentid":"3","getfullname":"BOOKS > NON-FICTION"}]

ASP.Net Update Panel – Javascript Event – jQuery Click

I needed to add a onclick event to a textbox in asp.net to change it to remove text from a textbox onClick when it is clicked.
The normal code would look something like this:

1

<asp:TextBox  ID="txtStoreLocatorZip" ValidationGroup="CustomerServiceEmail" runat="server" Text="Enter Zip" CssClass="txtStoreLocatorZip_CssClass" />
1
2
3
4
5
6
7
8
9

<script>
        if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
            $('.txtStoreLocatorZip_CssClass').click(function () {
                if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
                    $('.txtStoreLocatorZip_CssClass').val('');
                }
            });
        }
</script>

But, this won’t quite work because my textbox is in a UpdatePanel’s ContentTemplate and the javascript is not read on postback.

So, This is what I ended up doing (a simplified version):

1
2
3
4
5

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<asp:TextBox  ID="txtStoreLocatorZip" ValidationGroup="CustomerServiceEmail" runat="server" Text="Enter Zip" CssClass="txtStoreLocatorZip_CssClass" />
	</ContentTemplate>
</asp:UpdatePanel>
1
2
3
4
5
6
7
8
9
10
11
12

<script>
	Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
	function endRequestHandler(sender, args) {
		if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
			$('.txtStoreLocatorZip_CssClass').click(function () {
				if ($('.txtStoreLocatorZip_CssClass').val() == 'Enter Zip') {
					$('.txtStoreLocatorZip_CssClass').val('');
				}
			});
		}
	}
</script>

This will add an endRequest handler to the end of the partial page postback so that you can call a nice little function at the end of it.

Hope this helps some people!

Facebook Website Integration – HTML


To integrate Facebook on to a website without the use of a facebook app you need these things:

Once you have both of those things you can do this in feedburner:

  • Add a new feed (your facebook url)
  • Go to the publicize tab
  • Go to BuzzBoost
  • Sroll down and fill out the form, you will be given html code.
  • <script src="http://feeds.feedburner.com/DanielFolkessFacebookStatusUpdates?format=sigpro" type="text/javascript" ></script>
<noscript><p>Subscribe to RSS headline updates from: 
<a href="http://feeds.feedburner.com/DanielFolkessFacebookStatusUpdates"></a>
<br/>Powered by FeedBurner</p> 
</noscript>
  • Preview:

And that’s it!
You can now style it up a little bit with some CSS and stuff.

jQuery – Ajax – Extra Parameters – GET, success

Here is the standard jQuery Ajax call with success handler as well as the ability to pass another parameter to an external function:

	$.ajax({
			type: "GET",
			url: Humancurl,
			dataType: "xml",
			success: function(data){
				NameOfFunctionToParseReturnedData(data,ExtraParameter);
			}
		});

Here is the standard jquery ajax call with success handler:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.'+data);
  }
});