Currently Browsing

How-To

The bane of online existence is that our data is invariably scattered in different places. And nothing is affected more by this than photos. In all probability, you have pictures on different services – Facebook, Flickr, Picasa, Instagram, and many more. The end result is that when you need to find that one photo you are looking for, you don’t know where to begin searching. Wouldn’t it be better if all your photos were collected in one place, ready to be accessed at any time?

PixelPipe promises to make this easier by letting you migrate images and videos from one web service to another in a dead-simple interface. So whether it’s because you’re running out of space or you simply want to change your image host, this just might be the magic wand you have been looking for.

(more…)

The Internet has made it possible for anyone to become a writer with the click of a button. Naturally, the number of quality articles have increased, which are more easily discovered by curators such as LongForm, Kottke, TheBrowser, and more. Invariably, it means that you won’t have enough time to read everything that catches your fancy. So here’s an idea: why not listen to it on your commute?

A new web app called SoundGecko makes the process super-simple by converting any article you want into an MP3 file, using text-to-speech technology. The audio files are sent to your email inbox and can be synced with your Google Drive or Dropbox. There’s also the option of listening to your files in the form of a podcast from any device. Let’s get started: (more…)

Let’s face it, cable is expensive and it is definitely not going to be getting cheaper any time soon. About two years ago, my wife and I finally made the decision that it was time that we “cut the cord” so to speak, and get rid of our cable bill. As I look back on it, it was probably one of the best decisions that we made. I thought I would miss it, and there are times when I do, but for the most part, I have definitely learned to live without it.

I didn’t get rid of watching television all together, and I don’t think I could ever do that. But, what we did do was we took a long look at some web alternatives that would help us get our TV fix. As with any other cost cutting move, it definitely did not come without some sacrifice on our part. But, if you are every interested in making the move, then continue to read on and see if it is the right move for you.

(more…)

The internet is a great resource for news and updates, and no matter what you’re looking to keep track of, you’re sure to be able to find countless sites that will be able to keep you up to date with the latest information. To help make it easier to keep track of new developments, you might make use of an RSS feed to save you having to look things up manually. You might already be used to using RSS in apps like Google Reader, but there’s so much more you can do with RSS feeds.

Pipes is a tool from Yahoo that enables you to take things a step further so you can, amongst other things, create your own custom RSS feeds that pull in content from a variety of sources and filter it so that you only see the most relevant news stories. It’s a venerable web app, starting off life in a rather Google-ish way of being in a lengthy period of beta but then living on for years, long enough that many of us have likely forgotten about it. But it’s still a great tool, even in 2012, so let’s dig in and see what you can do with it.

(more…)

Pinterest boasts an incredible number of users, but those of you who haven’t signed up yet might wonder exactly what Pinterest is good for. In fact, even those who have been using the service might wonder about some new ways in which Pinterest can be used. Luckily, Pinterest is good for a wide range of activites.

From home life to marketing to writing, Pinterest has a great variety of applications. It’s a simple app that might seem like just a passing far, but it actually can be a useful too even for real work. Read on to learn about just a few of the many ways Pinterest can be used.

(more…)

WordPress may just be the most versatile web app ever. You could use it to power your site or blog (as we do here at AppStorm), or you could turn it into an eCommerce store, discussion board, photo gallery, or almost anything else with the wide range of plugins and themes you can add to your WordPress install.

But what if you want to use WordPress to do something totally new? You could always code your own theme or plugin, but that can be rather daunting to new users. Even if you”re already familiar with web programming, you”d have to learn the ins-and-outs out WordPress before you could get started.

That”s where the Script Manager plugin comes in. It”s designed to let you write HTML, PHP, SQL, and CSS code right inside WordPress, and then let you run that code anywhere you want in WordPress. You could make a custom widget, or add extra features to your WordPress dashboard, without learning any special WordPress coding tricks. In this tutorial, we”ll take a look at how you could build a simple calculator using HTML, Javascript, and CSS, right inside WordPress. You could use the same ideas to build anything else you”d like inside WordPress – your imagination”s the limit!

Before you start…

You won’t have to do too much to get started writing new apps inside WordPress with Script Manager. You’ll simply need to install the plugin on your site, or in a demo WordPress install on your own computer with tools like Wamp Server on Windows, MAMP server on a Mac, or XAMPP on almost any computer, period. Then, you can take a look at its documentation to familiarize yourself with its features. For the most part, though, if you’ve ever used a code editor, you should quickly feel at home coding in Script Manager in WordPress.

Now for the fun part: creating new features in WordPress with normal HTML, PHP, and Less code. We’re going to make a calculator in WordPress, which shows how much you can do with just a bit of code in WordPress, even if you really wouldn’t need a calculator in your site for real. We’ve included all the sample code in the article, so even if you aren’t a developer yet, you could still follow along with the examples. We’ll also use the following image assets in making the calculator, which you can download from the links below:

Getting ready to code in WordPress

It’s always best to lay a good foundation for your project before you start. You’ll need to plan out how each part of your app will work, and separate each part into the files you need to create. In this project, we’ll create an AppBar as a small launcher in WordPress for your apps, and then will create a calculator app that you can launch from the AppBar. Each will have it”s own HTML file, JavaScript file, and Less file. We’re using HTML for the app layout and structure, JavaScript to code the app’s functionality, and the Less script, a CSS preprocessor built into Script Manager, to style the app.

Then, we want the calculator to be movable inside your webpage, so users can position it wherever they want. We’ll use jQuery UI Draggable library to add this. It’s built into WordPress, but we will actually have to tell WordPress to load it to use it in our app. You can do this by creating an Action script in Script Manager with the following names: wp_enqueue_scripts and admin_enqueue_scripts. The wp_enqueue_scripts action tell WordPress to load the JavaScript libraries for the user side, while the admin_enqueue_scripts action loads it in the Admin screen. We’ll go ahead and define it for both, so you could use it in either location. To do this, click the ‘Action’ tab, then click the new button. You will be prompted for the name of the action script. Once you give the name and press ‘new’ under the name, you will see the new action script in the script list area. Select the script and place the code below:

<?php

wp_enqueue_script(‘jquery-ui-core’);

wp_enqueue_script(‘jquery-ui-draggable’);

?>

This simply tells WordPress to load the jQuery UI core and draggable libraries on every page. This is the only WordPress specific coding for this project. All the rest is handled by WordPress shortcodes and standard HTML, Javascript, and CSS.
The next step is creating the different scripts. Under the HTML tab, create scripts with the names AppBar and calculator by pressing the “New button” to the left of the script list. Next, go to the “JavaScript” and “Less” tabs and do the same thing. That’s the basic framework for building your app in WordPress. Now, let’s fill in the gaps.

The AppBar

The AppBar launcher HTML code is simply a wrapper for the icons of the actual programs. The code for the AppBar HTML is:

<!–

Load the styling for the AppBar.

–>

[CodeInsert lang='Less' name='AppBar' param='']

<!–

Define the div for holding the Apps.

–>

<div id=‘AppBarT’>

<!–

Let’s put a top spacer.

–>

<div class=‘spacerT’></div>

<div class=‘spacerM’>

<!–

Add the different Apps to the bar.

–>

[CodeInsert lang='HTML' name='calculator' param='']

<!–

Let’s put a bottom spacer.

–>

</div>

<div class=‘spacerB’></div>

<!–

Load the AppBar specific javascript.

–>

[CodeInsert lang='JavaScript' name='AppBar' param='']

<!–

Close out the AppBar.

–>

</div>

The comments inside the code show the basic structure. First, we load in the styling for the AppBar. The AppBar is basically four divs: AppBarT that holds the other three divs in place, spaccerT that holds the image for the top of the AppBar and spaces it out, spacerM has the middle image as a repeating background and is were all the apps are stored, and spacerB which holds the bottom image as a background and spaces it out right. Just before closing the last div, we put the JavaScript for the AppBar.

Most of the work is in the Less scripts for styling the application. You can use the following Less script for your own AppBar, replacing the image URLs with your own site’s URLs:

@AppBarColor: gray;

@AppBarradius: 10px;

@AppBarWidth: 35px;

#AppBarT {

position: fixed;

width: @AppBarWidth;

right: 0px;

top: 0px;

-moz-border-radius: @AppBarradius 0px 0px @AppBarradius;

border-radius: @AppBarradius 0px 0px @AppBarradius;

z-index: 999999;

img {

margin-left: 15px;

margin-top: 5px;

margin-bottom: 5px;

padding: 0px;

border: 0px;

&:active {

position:relative;

top:1px;

}

}

.spacerM {

width: 100%;

margin: 0px;

padding: 0px;

background-image: url(http://www.customct.com/wp-content/blogs.dir/3/files/2012/04/appbarM.png);

background-repeat: repeat-y;

}

.spacerT {

clear: both;

height: 21px;

width: 100%;

margin-top: 0px;

background-image: url(http://www.customct.com/wp-content/blogs.dir/3/files/2012/04/appbarT.png);

background-repeat: no-repeat;

}

.spacerB {

clear: both;

width: 100%;

height: 21px;

margin-bottom: 0px;

background-image: url(http://www.customct.com/wp-content/blogs.dir/3/files/2012/04/appbarB.png);

background-repeat: no-repeat;

}

}

As you see, the styling in the Less script does all the work. The items of interest is the z-index parameter for AppBarT. I set it rather high so it would slide over anything else that might be on your website. This value actually even lets it slide over the Admin Bar in WordPress. Also, you see the position parameter is set to fixed. That means that the div will be fixed on the screen, not to a position on the web page. Therefore, no matter how much scrolling goes on, it will always be in the middle to the right side of the browser window. One thing you will notice, I did not set a position other than right being zero. Since we do not know what size the brower window will be from the HTML, the JavaScript code will have to set the top parameter to make it sit right in the middle of the screen.

That brings us to the last part of the AppBar: its JavaScript code. Just paste the following code in for the JavaScript AppBar script:

//

// Global Variables

//

// cctAppBar The object holder for the AppBar.

//

var cctAppBar;

//

// The AppBar object for creating the functionality of the calculator.

//

function AppBar() {

this.AppBarID = jQuery(‘#AppBarT’); // The jQuery object for the whole calculator.

//

// Method: toggle

//

// Description: this method is for toggling the display of the calculator.

//

this.init = function() {

var top = ((jQuery(window).height() – this.AppBarID.height()) / 2);

this.AppBarID.css( { ‘top’: (top + “px”) });

}

}

//

// When the docment is done loading, execute this function. It will get the positioning of the

// AppBar fixed.

//

jQuery(document).ready(function(){

cctAppBar = new AppBar();

cctAppBar.init();

});

The JavaScript for just the AppBar is not really much. I declared a global variable to hold an instance of the AppBar class. In the AppBar class hold a jQuery variable for the AppBar div and the method init(). The init() method calculates the middle of the screen for the height of the AppBar and sets it to that location. The rest of the code simply waits for the page to fully load before creating an instance, assigning the global variable, and running the init() method. That is it!

As you can see, the AppBar is simply a container that looks nice for the applications to place their icons. We can always expand on this idea, but we have enough now for working with our calculator application.

The Applicaton Skeleton

Before we get into the application, let”s create the framework for all applications that will use the AppBar. The basic framework is this:

<!–

Insert the styling for the Application.

–>

<!–

Give the image for embedding the Application into

the AppBar.

–>

<!–

Give the actual HTML for the Application. By setting

the main div to be totally off the screen, the user

never sees it until clicking on the icon. Setting the

visibility to hidden does not work well with the

jQuery toggle() command.

–>

<!–

Insert the javascript for running the application.

–>

An application is broken down into four areas: the styling, an icon image to be shown in the AppBar, the HTML for the application, and finally the JavaScript code for running the application. When you really think about it, that is all there is to any application. Most of your work is in the styling and JavaScript functionality, so you can focus on what’s most important in your application.

The Calculator Application

Now, lets take that framework and start adding our app to it. The first part is the styling done in the Less script. We add it with the “CodeInsert” shortcode as follows:

[CodeInsert lang='Less' name='calculator' param='']

[CodeInsert lang='JavaScript' name='numberFormat' param='']

Just put this code the the section designated. Additionally, if you’d like, you can include a 3rd party Javascript function for formatting your numbers nicely in the calculator, which you can copy and add to your app from PHP JS.

Now, we insert the icon image for the calculator. I made it after designing the application by taking a screen shot of the actual calculator. Then I resized it for the icon size. Just copy and paste this code, again replacing the image URL with your own site’s image link once you’ve uploaded the image to your site:

<a onclick=‘cctCal.toggle();’ style=‘cursor: pointer;’>

<img src=‘http://www.customct.com/wp-content/blogs.dir/3/files/2012/04/calculator_icon.png’>

</a>

The JavaScript function added to the onClick event for the anchor does all the work for the icon. When clicked, it will toggle the visibility of the application. The function is a method on the calculator object assigned to the “cctCal” global variable.

Next, we need to design the calculator user interface. When you think about a calculator, the first thing you think of is buttons. A calculator is a display are with a lot of buttons underneath. Since I was experimenting with different ideas on making the buttons, I created a PHP script to create the buttons. I just called the PHP script with a different name for each button to make the button. So, go to the PHP tab, create a script called “calculatorbutton”, and place the following code there:

echo “<li><div class=’calbut’ id=’but-{$but}’ onClick=’cctCal.keyPressed(“ . ‘”‘ . $but . ‘”‘ . “);’><span>{$but}</span></div></li>”;

I used both methods of embedding a varaible into a string that PHP allows. I was having trouble getting the quotes around the button name for sending to the “cctCal.keyPressed()” method, so this finally worked for me. The button is nothing more than a styled div with the id for that button”s name. Once again, most of the fancy graphic work is done in the Less script.

To put everything together, place the following code into the calculator HTML after the icon:

<div id=‘cal’>

<div id=‘caldisdiv’>

<span id=‘caldis’>

0

</span>

</div>

<div id=‘calkeypad’>

<div class=‘calrow’>

<ul>

[CodeInsert lang='WPPHP' name='calculatorbutton' param="$but='7';"]

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="8";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="9";']

</ul>

</div>

<div class=‘calrow’>

<ul>

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="4";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="5";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="6";']

</ul>

</div>

<div class=‘calrow’>

<ul>

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="1";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="2";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="3";']

</ul>

</div>

<div class=‘calrow’>

<ul>

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="0";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but=".";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="=";']

</ul>

</div>

</div>

<div id=‘functions’>

<ul>

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="÷";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="X";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="-";']

[CodeInsert lang='WPPHP' name='calculatorbutton' param='$but="+";']

</ul>

</div>

</div>

As you can see, the calculator”s user interface is simply divs with unordered lists containing the buttons. The unordered lists makes spacing the buttons easier. The thing to notice here is how we pass the button”s name to the PHP code. We use the “CodeInsert” shortcode specifying the “calculatorbutton” PHP script with the “param” parameter set to defining the PHP variable “$but” to the name for that button. The “param” string is pasted at the beginning of the PHP script and evaluated all together. Since that string can be almost any size, you can really change the script with each calling of the script.

The calculator”s display is a span inside of a div for it. The div makes placement easier, while the span makes formatting easier.

Now that we have the structure for the calculator”s user interface, let”s style it with some Less code. In the calculator script under the Less tab, add the following code:

@calcolor: #63b8ee;

@gradstop: #468ccf;

@textshadow: #7cacde;

@butshadow: #bee2f9;

@topshadow: #3866a3;

@shadow: lightgray;

@radius: 10px;

@butsize: 30px;

@calsizex: 200px;

@calsizey: 300px;

@fontsize: 18px;

.butcolor() {

-moz-box-shadow:inset 0px 1px 0px 0px @butshadow;

-webkit-box-shadow:inset 0px 1px 0px 0px @butshadow;

box-shadow:inset 0px 1px 0px 0px @butshadow;

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, @calcolor), color-stop(1, @gradstop) );

background:-moz-linear-gradient( center top, @calcolor 5%, @gradstop 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘@calcolor’, endColorstr=‘@gradstop’);

background-color:@calcolor;

border:1px solid @topshadow;

font-size: @fontsize;

font-weight:bold;

text-decoration:none;

text-shadow:1px 1px 0px @textshadow;

&:hover {

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, @gradstop), color-stop(1, @calcolor) );

background:-moz-linear-gradient( center top, @gradstop 5%, @calcolor 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘@gradstop’, endColorstr=‘@calcolor’);

background-color:@gradstop;

}

&:active {

position:relative;

top:1px;

}

}

.calbutton(@width,@height) {

font-size: @fontsize;

text-align: center;

display: inline;

cursor: pointer;

span {

display: table-cell;

vertical-align: middle;

width: @width;

height: @height;

-moz-border-radius: @radius;

border-radius: @radius;

margin-left: 5px;

margin-right: 5px;

.butcolor();

}

}

#cal {

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, @calcolor), color-stop(1, @gradstop) );

background:-moz-linear-gradient( center top, @calcolor 5%, @gradstop 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘@calcolor’, endColorstr=‘@gradstop’);

background-color:@calcolor;

border:1px solid @topshadow;

font-family: “Arial”, Arial, sans-serif;

-moz-border-radius: @radius;

border-radius: @radius;

box-shadow: 10px 10px 5px @shadow;

height: @calsizey;

width: @calsizex;

z-index: 100;

position: fixed;

}

#caldis {

display: table-cell;

vertical-align: middle;

height: 60px;

width: 160px;

font-size: @fontsize;

text-align: right;

}

#caldisdiv {

background: @shadow;

-moz-border-radius: @radius;

border-radius: @radius;

margin-top: 25px;

margin-bottom: 20px;

margin-left: 10px;

margin-right: 10px;

box-shadow: inset 0px 1px 0px 0px lighten(@shadow,20);

}

#calkeypad {

display: block;

float: left;

margin-left: 10px;

}

.calrow{

display: block;

margin-top: 5px;

ul {

list-style-type: none;

height: @butsize;

margin: 0px 0px 15px 0px !important;

padding: 0px 0px 0px 0px;

li {

display: inline-block;

margin-right: 10px;

span {

}

}

}

}

.calbut{

.calbutton(@butsize,@butsize);

}

#functions {

display: block;

float: right;

margin: 5px 10px 0px 0px !important;

ul {

list-style-type: none;

margin: 0px 0px 15px 0px !important;

padding: 0px 0px 0px 0px;

li {

display: block;

height: @butsize;

margin: 0px 0px 15px 0px !important;

span {

}

}

}

}

You will notice that I like to define several variables for colorization. Whenever possible, it is best to design in a way that can easily be changed. If you do not like the blue calculator, change the color values to something that is more suitable to your tastes. You do not have to hunt down all locations and figure out what needs changed. This helps down the road for specializing the same code for a different project as well. With plain CSS, you can not do it. But, Less to the rescue!

You will also notice that I defined two mixins (A term used in Less to define a CSS macro) for the buttons. The first defines the shading while the second describes the mechanics of the button. I used the website CSSButtonGenerator.com to help me define the shading for the button. Once I had the colorization I was looking for, I translated it to Less code and made all duplicate colors to a single define for that color. You will notice the “&:” used. This is Less” way to refer to the current element type. This allows the mixin to be used with any element in the HTML.

My favourite tweak is the “:active” CSS selector. For that selector, we make the element position relative and one pixel downward. This gives the button a look of being pushed down. It is a cute effect that gives the user more feedback, which hopefully makes them feel at home using the application.

The rest of the Less code defines the location and spacing for all the different elements. I used some “!important” tags to override some of the theme’s CSS. Depending on your theme, this may be necessary. It would be nice to define a div element in which all theme related CSS is ignored! An iframe tag would do just that, but it has too many other limitations to be useful.

Finally, we need to code the guts of the calculator in JavaScript. Place the following code into the JavaScript calculator script:

//

// Globals used for the calculator.

//

// cctCal The global object for the calculator.

//

var cctCal;

//

// The Cal object for creating the functionality of the calculator.

//

function Cal() {

this.acc = ’0′; // Currently displayed number. This should always be a string.

this.func = ; // Function to perform on the numbers.

this.state = 0; // current state of the calculator.

this.x = 0; // The first number with the second number in the acc. Make sure to keep it a number.

this.y = 0; // This is the second number for the operation. Remember to keep it a number too.

this.period = 0; // Flag to make sure only on period is given.

this.disID = jQuery(‘#caldis’); // The jQuery object for the display of the calculator.

this.calID = jQuery(‘#cal’); // The jQuery object for the whole calculator.

this.SetPos = false; // Have we placed the app yet?

//

// Method: display

//

// Description: This method is used to display the calculation.

//

this.display = function() {

if((new Number(this.acc)) > 100000000000) { // Check for the number being too big for the display area.

this.disID.html(“Number too big.”);

this.reset();

} else

this.disID.html(number_format(this.acc, 2, “.”, “,”)); // Set the new number into the display with two decimal places.

};

//

// Method: toggle

//

// Description: this method is for toggling the display of the calculator.

//

this.toggle = function() {

if(!this.SetPos) {

var winHeight = jQuery(window).height();

var winWidth = jQuery(window).width();

var top = ((winHeightthis.calID.height()) / 2);

var left = ((winWidththis.calID.width()) / 2);

this.calID.css( { ‘top’: (top + “px”),

‘left’: (left + “px”)

});

this.SetPos = true;

}

this.calID.toggle();

}

//

// Method: reset

//

// Description: This method is used to reset the calculator to the

// beginning state.

//

this.reset = function() {

this.state = 0;

this.acc = ’0′;

this.func = ;

this.period = 0;

this.x = 0;

this.y = 0;

}

//

// Method: keyPressed

//

// Description: This method is called with each key pressed on the calculator.

//

// Input: key The name of the key pressed.

//

this.keyPressed = function(key) {

switch(key) {

case ’0′:

case ’1′:

case ’2′:

case ’3′:

case ’4′:

case ’5′:

case ’6′:

case ’7′:

case ’8′:

case ’9′:

if(this.state == 2) // If we are doing a series of equals, then reset for the new number.

this.reset();

if(this.acc == ’0′) // If the acc is zero, then…

this.acc = key; // Just put the new digit.

else // otherwise …

this.acc = this.acc + key; // Add the number to the right of the acc contents.

this.display(); // Display the new number.

break;

case ‘.’: // Make sure we only put one decimal into the number.

if(this.period == 0) {

this.acc = this.acc + key;

this.display();

this.period = 1;

}

break;

case ‘-’: // Save the oporator and setup for geting the next number.

case ‘+’: // If we are doing a series of accums, then do the same thing.

case ‘÷’:

case ‘X’:

if((this.state == 0)||(this.state == 2)) {

this.state = 1;

this.func = key;

this.x = new Number(this.acc);

this.acc = ’0′;

}

break;

case ‘=’:

if(this.state == 1) // We are ready to do an opperation. Set y to the number in the acc.

this.y = new Number(this.acc);

if(this.state > 0) {

switch(this.func) {

case ‘-’: // Do a subtraction

this.acc = this.xthis.y;

break;

case ‘+’: // Do an addition

this.acc = this.x + this.y;

break;

case ‘÷’: // Do a divide

this.acc = this.x / this.y;

break;

case ‘X’: // Do a multiply

this.acc = this.x * this.y;

break;

}

this.state = 2; // Set the next state for continuing the current operation.

this.x = new Number(this.acc); // Set the current x to the acc for doing reoccuring operation.

}

this.display(); // Display the resulting number.

break;

}

};

}

//

// When the docment is done loading, execute this function. It will enable the draggability of the

// calculator.

//

jQuery(document).ready(function(){

//

// Create the class for calculator to use and display the default number on the display. Then hide it.

//

cctCal = new Cal();

cctCal.display();

cctCal.toggle();

//

// Make the calculator draggable.

//

cctCal.calID.draggable();

});

This is the most coding yet for this project. As I said, the JavaScript contains the functionality for the program. It is mostly an object called “Cal” that controls the calculator. “Cal” uses four methods and a state variable control scheme to control the logic. The comments in the code will help you to understand what it is doing. The four methods for the class are: display(), toggle(), reset(), and keyPressed().

display(): This method displays the current value in the “accum” class variable in a nice format for the screen. It also checks for the number being too large for the screen.

toggle(): This method simply toggles the visibility of the calculator. This is called each time the icon is clicked. The first time this is called, it will set the center of the browser window position as well.

reset(): This method resets the calculator to a beginning state.

keyPressed(): This is the main method for the calculator. In the beginning state, it keeps appending new numbers keyed in. When a function is pressed, the current number in the display is saved and the next state is started. Now, another number is created through the appending digits as before. When the equals key is pressed, the new number is stored also and the function pressed is performed on the two numbers. That new number is display and stored as the first number and the last state in set. Now, if the equal key is pressed again, the function last hit is performed with second stored number and the results of the last operation. When a number key is pressed, the reset method is called and the new number is stored up. All of this is handled by a few switch statements.

The final part of the JavaScript simply waits for the page to be loaded. When loaded, an instance of the calculator will be created and stored in the global variable “cctCal”, runs the toggle() method it to hide it and set the center of the browser position. The last part is interesting: it then attaches the jQuery draggable library to the cal div element. That is all you do to make the calculator draggable!

Final Results

After all the code above is in place, you can now embed the code into the page you what to see it or you can make it standard for all pages.

To put it into a specific page or post, simply go to that page or post to edit it, click the “Insert Code” button in the editor. It will show you a requester for the code. When you set the language, the name selector will have the name of all the scripts for that language. Therefore, select “HTML” and “AppBar”. It will insert the following code into your post or page:

[CodeInsert lang='HTML' name='AppBar' param='']

Now, when you visit that page, the AppBar will appear to the right of the browser window:

This picture was taken from the demo page for this application.

Now, when you click the calculator icon, the full calculator will appear in the middle of the screen. If you move it, hide it, and then re-show it, it will appear where you last moved it to. Coding that much in a normal programming language for a desktop application would take so much more code! This is easy!

If you want the AppBar on all the pages in your website, simply create a “wp_footer” WordPress Action and put the embed code in it. Now, every page in your website will contain the webapp. Or, if you only want the app to appear on certain pages, you could write some simple PHP script to control it.

To make more webapps to be launched, just follow the skeleton code for applications to be launched and create you new application. Add the embed code for your new application after the calculator’s embed code in the HTML for the “AppBar”. Now, every time you embed the AppBar, you will see the new application”s icon as well.

Conclusion

That’s it: you’ve just create a basic new app inside of WordPress with Script Manager! Perhaps you’ve never thought your blog needed a calculator, but this can give you an idea of what you can do. Feel free to check out the other Script Manager Tutorials for more ideas, or check out the Script Manager Forum to ask questions, share ideas, and more. Remember, your only limitation is what you can dream up!

I’ve started noticing an odd trend: DRM used to bug me to death, but it hasn’t seemed nearly as frustrating lately. I’ve never purchased music with DRM, choosing instead to rip CDs (that I’d legally bought) until iTunes quit DRM-locking their songs. But then it has increasingly become apparant that the biggest frustration with music, or any other media, is keeping up with your purchased files so you don’t lose them. iTunes iCloud now lets you re-download songs and movies, just like the Kindle store has done all along, and I currently feel much safer buying media in each of them since I know I can redownload them anytime.

Several weeks ago, I set out to find a way to manage my DRM-free eBooks in the cloud. Kindle has spoiled me with high-quality native and web apps, and being able to always redownload books from anywhere with an internet connection is very liberating. So much so, I’ve purchased Kindle eBooks over DRM-free books just because Kindle makes them easier to manage. There had to be a better way.

This morning, I finally found what I was looking for, thanks to a post on Minimal Mac about Booki.sh. It was exactly what I’d been looking for. Booki.sh is a new online eBook library that makes it as easy to keep up with your ePub eBooks as using the Kindle Web App. Let’s take a look and see if Booki.sh is nice enough to keep you from downloading an eBook app the next time you want to read a DRM-free eBook.

(more…)

Sometimes email and Facebook and Twitter and everything else isn’t enough. Sometimes, you need to send an SMS. For many of us, that sometimes is more often than we might think; no wonder unlimited SMS plans are still in vogue most places. When you send SMS messages that turn into a conversation, you can quickly send more messages than you even realize. And even though smartphones keep threatening to make SMS obsolete, the frank truth is that SMS is here to stay until everyone you ever txt has an internet connection on their phone and is using the same messaging app.

So you need to send an SMS, but pulling out your phone to txt while you’re sitting at your computer seems rather odd. Why not put the larger keyboard to use, and just send an SMS from your desktop? There’s a number of apps and sites that let you send free online SMS messages, but there’s one you likely already have open: Gmail. If you didn’t know you could send SMS messages right from Gmail, keep reading to see how you can sta in touch with everyone through Gmail, even if they don’t have email on their phones.

(more…)

Collusion is a new add-on for Firefox which is designed to show you how sites are recording information about you whilst you browse the web. It also reveals who is forwarding information about you to other websites. Though this information is not specifically identified, it does show a spider-graph of all the websites who are aware of your browsing. Including the ones you never even visited!
(more…)

Even with a small, tightly knit group, it might often be overwhelming to catch up will all the tweets and updates across popular social networks lke Twitter, Facebook, Google+ etc. A lot of information go missing through the cracks and even if you are paying attention, it is hard to retain everything of use.

Three things that could benefit immensely from a tinge of social magic are search, discovery and ecommerce. A wave of startups have started working on this problem and a solution to this chaotic mess is on the way.With Wajam you can find what your friends share, when you need it. After the break let us learn how exactly to do that.

(more…)

Page 3 of 2012345...1020...Last »
theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow