Tag Archives: javascript

Side menu with jQuery.

This side menu is a very simple example with HTML5, CSS and jQuery.
The result is this:

You can see the source code:

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

Random lines with jQuery.

This is a complex tutorial about HTML5, jQuery and javascript.
The result of this tutorial will be a text and one canvas with random animated lines.
The result is this animated line into html5 file (also you can see my codepen example) :
Because I used jQuery , first line of code into head section was:

To see the result: the text and canvas I used into body section this tags:

The next step is to have a style into my html5 file, so I put this code into head section:

Next steps:

  • select canvas for draw ( I used c variable );
  • make a random points into canvas ( I used a function);
  • make points and lines ( I used b function);
  • make create, animate and line function object as a combination of a prototype;

JavaScript allows you to use a Function object as a combination of a prototype to use for the new object and a constructor function to invoke.
The event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.
Let’s see now the full source code:

Posted in All, HTML 5, javascript, Programming. Tagged with , , , .

JavaScript – geolocation.

This is a simple java script to take the geolocation and show it on webpage.
The example start with a default HTML 5 page and the part from tags scripts get the geolocation and using innerHTML is show on webpage.
To see the location then is need to use this: navigator.geolocation.getCurrentPosition.

Posted in All, HTML 5, javascript. Tagged with , , , , , .

JavaScript – toggle button example.

Is a simple example about toggle button.
You need to start with input button and then get the state of this

Then add the type and id and style.
You can remove the text-indent: -9999px; and Toggle button if you don’t want to see text to this toggle button.
Let’s see the full source code and how is working.
The part after hr tag with button and paragraph tag id=output is just for tested the toggle button.
You can make a html file and put this source code to test it.

Posted in All, javascript, Programming. Tagged with , , , .

Website tool for processing language.

The Studio SketchPad aims to be a open studio for individuals learning to sketch beautiful code on the web canvas with  Processing and  EtherPad.
The default licensing adopted for the sketches are the Creative Commons Attribution-ShareAlike 3.0 Unported license.
Today I will come with this tutorial about hoe to use this tool.
First you need to open all three websites from this tutorial.
The Studio SketchPad come with a good web tool to test the Processing Visualization Language with Etherpad.
About Etherpad is a highly customizable Open Source online editor providing collaborative editing in really real-time.
Open your account from Studio SketchPad. From Home menu add your first new sketch from right top of the website. If the website come with the Untitled source code the run it. This will show you how is working.
The base of the processing code is two functions: setup and draw.
The setup function will set all you need to run the draw function.
Let’s see my code:

I put comments into my source code to understand some of the processing language functions.
The variable and math are simple. Variables have a global or local “scope”. for example variables declared outside of setup() and draw() are global variables.
NOTE: If a local variable is declared with the same name as a global variable, the program will use the local variable to make its calculations within the current scope.
You can see the result here and also you can search on my website similar tutorials with processing.

Posted in All, Programming, web. Tagged with , , , , , , , .