HTML 5 Canvas Samples
Here are some HTML 5 Canvas snippets that would give you an idea on graphics in canvas. Circle show code function drawcircle() { //circle var ctx = GEBI(‘canvas1’).getContext("2d"); ctx.strokeStyle = "#AA0000"; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(65, 65, 50, 0, Math.PI*2, true); ctx.closePath(); ctx.stroke(); } Rectangle show code function drawRectangle() { //rectangle var ctx = GEBI(‘canvas2’).getContext("2d"); ctx.fillStyle = "#AA0000"; ctx.fillRect(15,15,100,100); ctx.clearRect(20,20,90,90); } Lines show code function drawlines() { var ctx = GEBI(‘canvas3’).getContext("2d"); ctx.strokeStyle = "#AA0000"; for (i=1;i<=12;i+=2) { ctx.lineWidth = i; ctx.beginPath(); ctx.moveTo(i*10,10); ctx.lineTo(i*10,120); ctx.stroke(); } } Spiral using lines show code function drawspiral() { var ctx = GEBI(‘canvas4’).getContext("2d"); ctx.strokeStyle = "#AA0000"; ctx.lineWidth = 1; varRead More →
HTML 5 Canvas vs SVG
Well, when you have to render graphics on your web page you might be using Flash or some raw images. With HTML 5 all such hard stuff is not necessary instead you are allowed to use Canvas and SVG to render graphics on the webpages. The best to time to decide what to be used is the initial stage of the development and that decision would bring you up in the project. Now, to take the decision you should be aware of some basic differences between Canvas and SVG. So, let me help you out in that by giving some basic differences here. CanvasSVG CanvasRead More →
A Small and Short RegEx Reference
As We all Know that RegEx (Regular Expressions) is Leading Validation Technique Used in Many of Web,RUI.. application development, I just Like to provide a brief on it. Here it follows Regular Expression Will match… txt The string “txt” ^txt “txt” at the start of a string txt$ “txt” at the end of a string ^txt$ “txt” when it is alone on a string [abc] a, b, or c [a-z] Any lowercase letter [^A-Z] Any character that is not a uppercase letter (gif|jpg) Matches either “gif” or “jpeg” [a-z]+ One or more lowercase letters [0-9\.\-] Any number, dot, or minus sign ^[a-zA-Z0-9_]{1,}$ Any word ofRead More →
Javascript ==,!= Vs ===,!==
Today i was looking for an online javascript validator in order to validate RJSLIB. Finally i found one at http://www.jslint.com/. I found only one repeated issue with == saying expected ===. Let me clarify the difference between == and === for you. == is an equal operator which will return true when both operands are just same. But === is strict equal operator which returns true only if the operands and their types are same 1. check “2.0”==2 here will give true 2. check “2.0”===2 here will give false Similarly 1. check “2.0”!=2 here will give false 2. check “2.0”!==2 here will give trueRead More →
Joomla – default content for new article
Sometimes U might have to post many articles at the same time whose content differs but the layout is same in my sight i just has to post many articles that has content in html table however the employee names and roles differ in each article . html is like Employ Name : Rama Krishna Chunduri Employ category : software developer breif about him : Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ornare varius ipsum quis consequat. Mauris vehicula tempor dui. Aenean porttitor, dui sit amet pellentesque vestibulum, neque metus luctus mauris, et consequat erat orci quis quam. Aliquam erat volutpat. Morbi magnaRead More →
10 Firefox Addons I prefer to Use as A Developer
As a web developer i prefer following add-ons which are more productive for web development 1. FireBug Allows you to manipulate various Web Development Entities Like CSS , JavaScript , HTML , etc 2. FireFTP 1. Working in live server directly . u might be using an IDE , Browser and a FTP Client that allows u to upload content. 2. what u do ? change Code in IDE , Upload to server , Refresh page in Browser 3.imagine U can have FTP in browser itself then switching and processing of one seperate process is ultimately reduced 4.Yes FireFtp is an ftp client embeded inRead More →
JavaScript Prevent Closing of Window with a Confirmation
You might have observed in many sites that they ask user for confirmation upon closing the browser . Ex : In gmail while you are composing an email if you closed browser tab or window, it will ask for confirmation. We can implement same in our website by following the below listed steps. Create 2 variables named isNavigationAllowed and onNavigationMessage var isNavigationAllowed=false; var onNavigationMessage=”Closing the page will stop process, is it ok?”; Create a function named askForExit() with code given below function askForExit() { if(!isNavigationAllowed) return onNavigationMessage; } assign the function to window objects onbeforeload event window.onbeforeunload = askForExit; If you want this to confirmRead More →
JavaScript Expressions in CSS
Some times we might be using javascript to manage the style properties dynamically. For example we may use a div to be positioned in center of screen to display a message,for that we’ll use a javascript to set the top and left of the div to center as needed usually like <html> <head> <script> function loadme() { var div=document.getElementById("mydiv"); div.style.position=’absolute’; div.style.border=’solid 1px blue’; div.style.width=’300px’; div.style.height=’200px’; var hgt=parseInt(screen.height); var wdt=parseInt(screen.width); var centerY=hgt/2-div.clientHeight/2; var centerX=wdt/2-div.clientWidth/2; div.style.top=centerY+’px’; div.style.left=centerX+’px’; } </script> </head> <body onload=’loadme()’> <div id=’mydiv’> Text message to display </div> </body> </html> But for IE there’s a wonderful trick where we can write it in css class itselfRead More →
Setting CSS/Style float from javascript
Are U Unable to Set Float to an element from the javascript? U can’t set float to an element by javascript by assigning style.float to left/right/center U can Do it ! I would let u know that DOM will constitute the Definitions of the Functionalities and attributes for CSS this is because of the thing , DOM doesn’t constitute a definiton for float instead there are different definitions for this in different browsers so just use element.style.cssFloat=”left”; // this is for firefox element.style.styleFloat=”left”; // this is for IE Actually we just need to know some conventions while writing javascripts we have to check 1)does domRead More →