i can code! for Web.

Tuesday, November 8, 2011

OAuth 2.0 Playground announced

Google announced the OAuth 2.0 Playground, which simplifies experimentation with the OAuth 2.0 protocol and APIs that use the protocol. Trying out some requests in the OAuth 2.0 playground can help understand how the protocol functions and make life easier when the time comes to use OAuth in your own code.

Source: Google Apps Developer Blog - OAuth 2.0 Playground: Open to Developers!

Thursday, October 27, 2011

Add code assist for jQuery in Aptana

To enable the code assist for jQuery in Aptana Studio 3, Download and Add the .sdocml file here: https://github.com/aptana/javascript-jquery.ruble/tree/master/support

Friday, October 21, 2011

Implement Slider using HTML5 an JavaScript

This example show how to implement a slider using HTML5 and JavaScript. To demonstrate the effect, code from "jQuery exercise: change font-size" is borrowed, to change text size when slide is changed.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
 font-size: 20px
}

</style>
</head>
<body>
<center>
<input id="slide" type="range" min="8" max="50" value="20"? onChange="changeTextSize(this.value)" step="1"/>
<p id="mytext">Change TEXT size by Slider</p>

</center>
<script>

function changeTextSize(fontsize) {
 $("#mytext").css("font-size", fontsize+"px");
}

</script>
</body>
</html>

Thursday, October 20, 2011

Javascript Exercise: Get text and change text

example:

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Get input</title>
</head>
<body>
<h1>Get input and change text</h1>
<p id="mytextchanged">Hello!</p>
<input id="mytext" type="text">

<input type="button" value="Click Me" onClick="showMe()" />

<script type="text/javascript">
    function showMe() {
 var msg = document.getElementById("mytext").value;
        document.getElementById("mytextchanged").innerHTML = msg;
    }
</script>

</body>
</html>

Read input text using JavaScript

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>Get input</title>
</head>
<body>
<h1>Get input</h1>

<input id="mytext" type="text">

<input type="button" value="Click Me" onClick="showMe()" />

<script type="text/javascript">
    function showMe() {
 var msg = document.getElementById("mytext").value;
        alert(msg);
    }
</script>

</body>
</html>

Monday, October 17, 2011

Play mp4 using HTML5

Example to play mp4 in HTML5.

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<video src="http://video.ch9.ms/ch9/51fe/77b82ce9-bbbc-4b9c-b19a-9f6b017551fe/MVP1understandingwptools_low_ch9.mp4"
 controls autoplay loop> 
<p>Sorry! Your browser doesn't support video.</p> 
</video>

</body>
</html>

Friday, October 14, 2011

jQuery exercise: change font-size

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}

#mytext {
 font-size: 20px
}
 
</style>
</head>
<body>
<center>
<p id="mytext">Change TEXT size by UP/DOWN key</p>
</center>
<script>
$(function(){
 
 var KEY_UP = 38;
 var KEY_DOWN = 40;
 
 //Set listener for keydown
 $(document).keydown(function(e){
  $("#mytext2").html("- keydown -");
   switch(e.which){
    case KEY_UP:
     var fontsize = parseInt($("#mytext").css("font-size")) + 2;
     $("#mytext").css("font-size", fontsize+"px");
     break;
    case KEY_DOWN:
     var fontsize = parseInt($("#mytext").css("font-size")) - 2;
     $("#mytext").css("font-size", fontsize+"px");
     break;
   }
 });

});
</script>
</body>
</html>