Cross domain AJAX using php

Ajax is not allowed to get data from other domains due to some security reason. Well but sometimes we need to fetch data from other website. this can be done through a proxy. A simple proxy server side scripting can enable to fetch the data from other domains and well that’s your cross domain ajax. here is how the php script look like.

<?php
header('Content-type: text/html');
$url = 'http://www.defaultdomain.com';
if(isset($_GET['proxyUrl'])) {
 $url = $_GET['proxyUrl'];
}
$handle = fopen($url, "r");
if ($handle) {
 while (!feof($handle)) {
 $buffer = fgets($handle, 4096);
 echo $buffer;
 }
 fclose($handle);
}
?>

Read the rest of this entry »

The Big gap

Ahhh.. Got so busy in making browser extensions for Facebook and shaping myself for my career. Well couldn’t able to get time for blogging. Well i would post at least one article per week. I’ve redesigned my home page and would change the blog theme as well in few days.  So that’s it guys, in working on facebook extension i’ve learned something called cross domain ajax so will post an article about it today.

CSS3 Reflection

Well, for the past few days i got busy learning python and google app engine, and was working in a small project too. Sorry for delay, lets go directly into css3 reflection. A reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.

-webkit-box-reflect: <direction> <offset> <mask-box-image> 

<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.

Reflections will update automatically as the source changes. If you hover over links, you’ll see the hover effect happen in the reflection. If you reflect the <video> element, you will see the video playing in the reflection. Giving an element a reflection has the effect of creating a stacking context (so it joins opacity, masks and transforms). The reflection is non-interactive, so from the point of view of hit testing, it’s like it isn’t there. The reflection will have no effect on layout (other than being part of a container’s overflow), and can be thought of as similar to box-shadow in this respect. The example above uses a gradient mask. Here is the sample code:

border:5px solid white;
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));

And this works on webkit browsers only which are chrome and safari only…

Gradient in CSS3

Gradients can be formed in css3 without using an image file. Gradients are two types which are radial and linear. The gradients are supported in webkit and Mozilla browser engine. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

Syntax:


-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

 

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
background-image: -moz-linear-gradient(#ccc, #000);

A stop is a function, color-stop, that takes two arguments, the stop value (either a percentage or a number between 0 and 1.0), and a color (any valid CSS color). In addition the shorthand functions from and to are supported. These functions only require a color argument and are equivalent to color-stop(0, ...) and color-stop(1.0, …) respectively.

For radial use radial keyword for type.

For more info about webkit css gradient visit this link

Color Modules in CSS3

In CSS3 there is an additional color module HSL along with RGB. If alpha channel is needed then it has to be delcared as RGBA and HSLA. HSL stands for Hue, Saturation and Lightness. RGB is the combination of Red, Green and Blue colors which are used in monitors. HSL is easy to define color rather than traditional RGB. Hue is the actual color which is defined in degrees from 0 to 360. 0 degree is Red, 120 is Green and 240 is Blue and mathematically 0 and 360 are same so 360 is Red.Hue scale. Read the rest of this entry »