WebSewak's Techjunk http://techjunk.websewak.com Technology, Code, Tips & Tricks and lots of weird stuff... Mon, 18 Feb 2008 16:36:30 +0000 http://wordpress.org/?v=2.5.1 en How to install WAMP5 http://feeds.feedburner.com/~r/techjunk/~3/237048637/ http://techjunk.websewak.com/how-to-install-wamp5/#comments Mon, 18 Feb 2008 16:28:57 +0000 Srikanta http://techjunk.websewak.com/how-to-install-wamp5/ How to intall WAMP5 for PHP,Apache,Mysql,Phpmyadmin & SQLitemanager Step 1 : To install PHP + PECL,Apache,SQLitemanager,MySQL,Phpmyadmin all at once, instead of downlaoding all these individually, you can just download one file from WAMPSERVER.com named, WAMP5(size: 21 MB). The link to download is http://www.wampserver.com/en/download.php
This server works on windows Xp and later versions operating system. Step2:Now goto the link provided above and download wamp5 from it. Step3:After downloading it,double click on it(Icon shown below) 0.jpg You’ll see a window with welcome message and next and cancel buttons 1.jpgClick on next. Step4:21.jpgRead the agreement and if its right for you then click on the radio button next to "I accept the agreement." Click on next. step5:31.jpgSelect your destination location.click on next. Step6:41.jpgSelect the destination for the program’s shotcuts.By default it saves it in start menu folder.click on next. Step7:51.jpgOn checking this check box your wamp server will start with your PC if not checked then everytime when you start your PC you have to double click on the shortcuts.Click on next. Step8:61.jpgNow click on install. this will start installing all your files on their specified locations. Step9:71.jpgIt will ask for the folder where you wish to keep all your PHP files.By default WWW is selected Step10:81.jpgNow it will ask you to provide the SMTP server to be used by PHP.By default its localhost.click on next. Step11:91.jpgNow it will ask for your default Email ID.Whenever you’ll send any mail from this server this Email ID will be in ‘From:’ column. Step12:101.jpgNow it will ask for your prefered browser.Setup will show your systems default browser,if you want to keep it then click on ‘Yes’ else ‘No’ and select the .exe of your prefered browser. Step13:111.jpgNow the last window will show ‘Finish’ button and a check box next to ‘Launch WAMP5 now’.If you want to run the WAMP5 now then check it else uncheck it. Step14:After finishing the setup you can see in your system tray(Near Clock) a semicircle with filled center121.jpg.If the colour of the semicircle is white then its working correct.If the color is yellow then either Apache or Mysql is not running on your system.If the color is red then none of them are running on your PC.If any of the services are not working then first close all similar applications and then restart WAMP5.For example,if you are running IIS on your PC then it will not run Apache on your PC,so stop the IIS server and then restart WAMP5. Step15:On clicking the semicircle you’ll see a pop up menu.In this menu the last option is ‘Put Online’.14.jpgThis will make your server public.And the filled semicircle will now turn into a white filled semicircle.131.jpg Now your WAMP5 is ready to use. When using WAMP5, store all your PHP files in a folder in ‘:\wamp\WWW’ and when you want to browse your files as webpages then open your browser and type in address bar ‘localhost‘.This will open an index page.index.jpg In that, under ‘Your Projects‘, you’ll see your folder,on clicking it will shaw the list of your PHP files. Now click on your file. It will be shown as a webpage. ]]> http://techjunk.websewak.com/how-to-install-wamp5/feed/ http://techjunk.websewak.com/how-to-install-wamp5/ Handling SERVER, LOCAL and GMT Times in PHP http://feeds.feedburner.com/~r/techjunk/~3/130984456/ http://techjunk.websewak.com/handling-server-local-and-gmt-times-in-php/#comments Fri, 06 Jul 2007 04:33:19 +0000 Anoop http://techjunk.websewak.com/handling-server-local-and-gmt-times-in-php/
Code (php)

<?
function getLocaltime($GMT,$dst){
        if(preg_match('/-/i',$GMT))
        {
                $sign = "-";
        }
        else
        {
                $sign = "+";
        }

        $h = round((float)$GMT,2);

        $dst = "true";

        if ($dst)
                {
                $daylight_saving = date('I');
                if ($daylight_saving)
                                {
                   if ($sign == "-"){ $h=$h-1;  }
                   else { $h=$h+1; }
                }
        }

        // FIND DIFFERENCE FROM GMT
        $hm = $h * 60;
        $ms = $hm * 60;

        // SET CURRENT TIME
        if ($sign == "-"){ $timestamp = time()-($ms); }
        else { $timestamp = time()+($ms); }

        // SAMPLE OUTPUT
        $gmdate = gmdate("F d, Y - g:i A", $timestamp);
        return $gmdate;
}

echo ' Server Time: '.date("F d, Y - g:i A",time());;

echo " || GMT Time: " . gmdate("F d Y - g:i A", time());

echo ' ||  Localtime: '.getLocaltime('+5.5',0);

?>
  ]]> http://techjunk.websewak.com/handling-server-local-and-gmt-times-in-php/feed/ http://techjunk.websewak.com/handling-server-local-and-gmt-times-in-php/ Make text or image blink using CSS and Javascript http://feeds.feedburner.com/~r/techjunk/~3/126700307/ http://techjunk.websewak.com/make-text-or-image-blink-using-css-and-javascript/#comments Thu, 21 Jun 2007 12:44:25 +0000 Srikanta http://techjunk.websewak.com/make-text-or-image-blink-using-css-and-javascript/ This code will make your desired HTML tag blink within your given time interval.

Just put your content between <p> tags. Also, call blinky() function on body onload event. Put blink delay variable in the function. 1000 is equal to 1 sec, 5000 = 5 secs. Click here for a demo of blink function.

Code (javascript)

<html>
<head>
<script language="javascript">
function blinky(delay){

var el = document.body.getElementsByTagName('p');

for (var i = 0; i < el.length; i++){

if (el[i].className == 'blink'){

el[i].style.visibility = el[i].style.visibility ==

'hidden' ? 'visible' : 'hidden';

}

}

setTimeout('blinky(' + delay + ')', delay);

}

</script>
<style>

#container
{
position:absolute;
top:0%;
left:0%;
background:#3366FF;
border:1px solid #FF0000;
height:100%;
width:100%;
}
#container h1
{
text-align:center;
background:#00FF00;
}
</style>

</head>
<body onload="blinky(1000)">
<div id="container">
<h1>
<p class="blink">Blinking Headline
</h1>

<center>
<p class="blink"><img class="blink" src="smiley.jpg">

</center>
</div>

</body>
</html>
 

Hopefully this function may be of some use to you ever.

]]> http://techjunk.websewak.com/make-text-or-image-blink-using-css-and-javascript/feed/ http://techjunk.websewak.com/make-text-or-image-blink-using-css-and-javascript/ PHP Function to validate username http://feeds.feedburner.com/~r/techjunk/~3/125487965/ http://techjunk.websewak.com/php-function-to-validate-username/#comments Sun, 17 Jun 2007 06:33:06 +0000 Anoop http://techjunk.websewak.com/php-function-to-validate-username/
Code (php)

<?php

//This function can be used to validate usernames
//The maximum and minimum length of the username can be set. Also you are allowed to set the allowed characters.

function is_valid_username($username, $valid_chars, $min_length, $max_length)
{
    if(!eregi("^[a-z0-9$valid_chars]{".$min_length.",".$max_length."}$",$username)){
        return false;
    }
    return true;
}

// Usage Example

$username = "DFKGJDF04FL";
$valid_chars = "._+?";
$min_length = 5;
$max_length = 15;
if(is_valid_username($username, $valid_chars, $min_length, $max_length))
{
    echo "$username is valid";
}
else
{
    echo "$username is invalid";
}
?>
  ]]> http://techjunk.websewak.com/php-function-to-validate-username/feed/ http://techjunk.websewak.com/php-function-to-validate-username/ PHP Function to apply text (Watermark) on an Image http://feeds.feedburner.com/~r/techjunk/~3/124842861/ http://techjunk.websewak.com/php-function-to-apply-text-watermark-on-an-image/#comments Thu, 14 Jun 2007 16:48:57 +0000 Anoop http://techjunk.websewak.com/php-function-to-apply-text-watermark-on-an-image/
Code (php)

<?
function applytext($file,$text,$Position,$fontsize,$font,$newfile,$Margin = 5)
{
        if($newfile == '')
                $newfile = $file;

        $fontangle = 0;

        $Type  = strtolower(strrchr($file,'.'));
        if($Type == '.jpg' || $Type == '.jpeg')
                $simg = @imagecreatefromjpeg( $file );
        if($Type == '.gif')
                $simg = @imagecreatefromgif( $file );
        if($Type == '.png')
                $simg = @imagecreatefrompng( $file );

        if(!$simg)
                        return 0;

        $currwidth = imagesx($simg);
        $currheight = imagesy($simg);

        $im = imagecreatetruecolor($currwidth, $currheight);
        $Imah = imagecopyresampled($im, $simg, 0, 0, 0, 0, $currwidth, $currheight, $currwidth, $currheight);

        // Get exact dimensions of text string
        $box = @imageTTFBbox($fontsize,$fontangle,$font,$text);

        // Get width and height of text from dimensions
        $textwidth = abs($box[4] - $box[0]);
        $textheight = abs($box[5] - $box[1]);

        $FW = $textwidth;
        $FH = $textheight;

        switch($Position)
        {
                case "center" :
                {
                        $xcord = ($currwidth/2)- ($FW/2);
                        $ycord = ($currheight/2)- ($FH/2);
                        break;
                }
                case "top-left" :
                {
                        $xcord = $Margin;
                        $ycord = $FH+$Margin;
                        break;
                }
                case "top-right" :
                {
                        $xcord = ($currwidth- ($FW+$Margin));
                        $ycord = $FH+$Margin;
                        break;
                }
                case "bottom-left" :
                {
                        $xcord = $Margin;
                        $ycord = $currheight - ($FH+$Margin);
                        break;
                }
                case "bottom-right" :
                {
                        $xcord = ($currwidth- ($FW+$Margin));
                        $ycord = ($currheight - ($FH+$Margin));
                        break;
                }
        }

        $color = imagecolorallocate($im, 0, 0, 0);
        imagettftext ( $im, $fontsize, $fontangle, $xcord+2 , $ycord+1  , $fontcolor, $font, $text );
        $color = imagecolorallocate($im, 255, 255, 255);
        imagettftext ( $im, $fontsize, $fontangle, $xcord, $ycord, $color, $font, $text );

        if($Type == '.jpg' || $Type == '.jpeg')
        {
                imagejpeg( $im, "$newfile" );
        }
        if($Type == '.gif')
        {
                imagegif( $im, "$newfile" );
        }
        if($Type == '.png')
        {
                imagepng( $im, "$newfile" );
        }
        imagedestroy($im);
        return 1;
}

$iscreated = applytext("clippart.jpg",'www.teckjunk.websewak.com','center','15','arial.ttf','new.jpg');

//applytext('[targetimagefile]','[text to apply]','[position]','[font size]','[font]','[saveas]','[margin]');
?>
  ]]> http://techjunk.websewak.com/php-function-to-apply-text-watermark-on-an-image/feed/ http://techjunk.websewak.com/php-function-to-apply-text-watermark-on-an-image/ How to create a pre-loading effect using Javascript http://feeds.feedburner.com/~r/techjunk/~3/124274316/ http://techjunk.websewak.com/how-to-create-a-pre-loading-effect-using-javascript/#comments Tue, 12 Jun 2007 18:12:11 +0000 Srikanta http://techjunk.websewak.com/how-to-create-a-pre-loading-effect-using-javascript/ This code is to show your images or objects only after they are fully loaded in the background. Whenever a page is downloaded on user’s browser and if the user is having slow internet speed or if the image size is too large then we see that the image is shown in parts. To avoid this, you may find this code useful. With this code, if the image is not fully loaded then it will show a waiting/loading message and when the image is loaded, it shows the whole image. For a live working example, click here for demo.

Code (javascript)

<html>
<head>
<title>
Object OnLoad
</title>
<script>
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
if(document.layers)        //NN4+
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById)          //gecko(NN6) + IE 5+
{
var obj = document.getElementById(szDivID);
obj.style.display = iState ? "block" : "none";
}
else if(document.all)   // IE 4
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
</script>
</head>
<body>
<table width="100%" align="center">
<tr>
<td align="center">
<div id="wait" style='display:block; color:red; font-size:30px;'>

<img src="loaded.gif">Loading  . . .
</div>
</td>
</tr>
<tr>
<td align="center">
<div id='check' style='display:none;'>
<img src="smiley.jpg" onload='toggleBox("wait",0);toggleBox("check",1);'>
</div>
</td>
</tr>
</table>

</body>
</html>
 

Please make sure you put the images in the same folder from where you are running the above code.

]]> http://techjunk.websewak.com/how-to-create-a-pre-loading-effect-using-javascript/feed/ http://techjunk.websewak.com/how-to-create-a-pre-loading-effect-using-javascript/ CSS properties with description and example http://feeds.feedburner.com/~r/techjunk/~3/123722596/ http://techjunk.websewak.com/css-properties-with-description-and-example/#comments Sun, 10 Jun 2007 18:37:21 +0000 Srikanta http://techjunk.websewak.com/css-properties-with-description-and-example/ Here are some CSS properties with their descriptions and examples.

Property Description Value Example
color Used to describe the text
(foreground) color of an element.		 Name: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy,
olive, purple, red, silver, teal,
white, yellow RGB: color: #0000FF;
color: #00F; color: rgb(0,0,255);
color: rgb(0%, 0%, 100%)		 h1 {color: #666633;}
font-weight Specifies the weight, or boldness,
of the type.		 Descriptive: normal, bold, bolder,
lighter Numeric: 100, 200. .
.900		 strong {font-weight: 700;}
font-size Specifies the size of the text element.
There are four methods for
specifying font size.		 Absolute: xx-small, x-small, small,
medium, large, x-large, xx-large
Relative: larger, smaller Length:
number + em, ex, px, pt, pc, mm,
cm, in Percentage: n%		 h1 {font-size: large;}
h1 {font-size: larger;}
h1 {font-size: 24pt;}
h1 {font-size: 125%;}
font-sizeadjust Allows authors to specify the
“aspect value” that they
wish to
maintain. It becomes helpful when
a specified font is unavailable and
the system needs hints to
determine the most suitable
substitute.		 inherit, none, number h5.med {font-sizeadjust:
0.58;}
font-variant Determines if the font is to display
in normal font or SMALL-CAPS		 normal, small-caps p {font-variant: small-caps;}
font-style Specifies that the font be displayed
in one of three ways: normal,
italic,oroblique (slanted).		 normal, italic, oblique h1 {font-style: italic;}
font-stretch This is the CSS indication of the
condensed or expanded nature of
the face relative to others in the
same font family.		 condensed, normal, expanded h2 {
font-stretch: expanded; }
text-decoration Allows text to be decorated
through one of five properties.		 none (default), underline, overline,
line-through, blink		 a: link {text-decoration:
underline;}
text-transform Affects the capitalization of the
element.		 none, capitalize, lowercase,
uppercase		 h1.title {text-transform:
capitalize;}
text-shadow Specifies one or more commaseparated
shadow effects to be
applied to the text content of the
current element.		 inherit, none, [shadow effects] blockquote {text-shadow:
black 3px 3px, yellow
-3px -3px;}
letter-spacing Specifies an amount of space to be
added between characters.		 normal, length h5.close {letter-spacing:
0.1cm;}
word-spacing Specifies an additional amount of
space to be placed between words
of the text element.		 normal, length h3 {word-spacing: .5em;}
line-height Will accept a value to control the
spacing between baselines of text.		 normal, number, length, percentage p {line-height: 200%}
p {line-height: 1.2em;}
vertical-align Affects the vertical alignment of an
element.		 baseline (default), bottom, middle,
sub, super, text-bottom, text-top,
top, percentage		 p.opener {vertical-align:
text-top;}
text-indent Specifies an amount of indentation
(from the left margin) to appear in
the first line of text in an element.		 length, percentage p.first {text-indent: 3em;}
text-align Affects the horizontal alignment of
the contained text elements.		 center, justify, left, right div.center {text-align:
center;}
direction Specifies the direction of text. ltr, rtl, inherit div {unicode-bidi: embed;
direction: rtl;}
unicode-bidi Defines levels of embedding with
regard to Unicode bidirectional
algorithm.		 inherit, normal, embed,
bidi-override		 div {unicode-bidi: embed;
direction: rtl}
background-color Sets the background color of an
element.		 color name or
transparent		 p.warning {backgroundcolor:
red;}
background-image Sets a background image for the
element.		 URL, none body {background-image:
url(stripes.gif);}
background-attachment Determines whether the
background image scrolls along
with the document or remains
in a fixed position.		 scroll (default), fixed body {background-image:
url(stripes.gif); backgroundattachment:
scroll;}
background-repeat When a background image is
specified, this property specifies
whether and how the image is
repeated.		 repeat, repeat-x,
repeat-y, no-repeat		 body {background-image:
url(stripes.gif); backgroundrepeat:
no-repeat;}
background-position When a background image has been
specified, this property specifies its
initial position relative to the box that
surrounds the content of the element
(not including its padding, border, or
margin).		 percentage, length,
top/center/bottom,
left/center/right		 body {background-image:
url(stripes.gif); background-position:
bottom left;}
background Shorthand property for specifying
all the individual background
properties in a single declaration.		 background-color,
background-image,
background-repeat,
background-attachment,
background-position		 body {background: aqua
url(stars.gif) no-repeat fixed;}
border-width Shorthand property for specifying
the width of the border for all four
sides of the element box.		 thin, medium, thick,
length		 p.header {border-width: thin}
border-top-width,
border-left-
width,
border-bottom-
width,
border-right-width		 Specifies the border widths of the
respective sides of an element’s box.		 thin, medium, thick,
length		 p.sidebar {border-right-width:
medium; border-bottom-width:
thick}
border-color Sets the border color for each of the
four sides of an element box.		 color name,
RGB value		 blockquote {border-color: red
blue green yellow}
border-top-color,
border-right-
color,
border-bottom
-color, border-left-
color		 Specifies the border colors of the
respective sides of an element’s box		 inherit, transparent, color,
-moz-use-text-color		 div {border-top-color: green}
border-style Sets the style of border for an
element’s box.		 inherit, none, dotted,
dashed, solid, double,
groove, ridge, inset,
outset, -moz-bg-inset,
-moz-bg-outset,		 p.example {border-style: solid
dashed}
border-top-style,
border-right-
style,
border-bottom-style,
border-left-
style		 Specifies the border style of the
respective sides of an element’s box.		 inherit, none, dotted,
dashed, hidden, solid,
groove, ridge, inset,
outset, double,
-moz-bg-inset,
-moz-bg-outset,		 strong {border-top-style: groove}
border-top,
border-left,
border-bottom,
border-right		 Each of these is a shorthand
property for setting the width, style,
and color of a specific side of a box.		 border-top-width,
border-style, border-color		 h1 {border-left: .5em solidblue}
border Shorthand property for setting the
border width, style, and color for all
four sides of an element box.		 border-width, border-style,
border-color		 p.example {border: 2 px dotted
#663333}
margin Shorthand property for specifying
all the margins of an element.		 length, percentage, auto img {margin: 0px 12px 0px 12px}
margin-top,
margin-left,
margin-bottom,
margin-right		 These properties specify the
amount of margin on specific
sides of the element.		 length, percentage, auto img {margin-top: 0px}
padding Shorthand property for specifying the
padding for all sides of an element.		 length, percentage p.sidebar {padding: 1em}
padding-top,
padding-left,
paddingbottom,
padding-right		 These properties specify an amount
of padding to be added around the
respective sides of an element’s
contents.		 length, percentage p.sidebar {padding-top: 1em}
position Determines whether normal, relative, or absolute
positioning methods are used to render the current
element box.		 inherit, static,
relative,
absolute, fixed		 h2 {position: absolute; top:
20px; right: 50px; bottom:
20px; left: 50px;}
direction Specifies the base direction (reading order) for text
content in an element. It is also meant to control the
directionality of table columns, text overflow, and
positioning of justified text.		 inherit, ltr, rtl div {direction: ltr;}
top Describes the vertical offset for the top edge of the
absolutely positioned element box from the top edge
of the element’s containing block.		 inherit, auto,
length,
percentage		 h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;}
left Describes the horizontal offset for the left edge of the
absolutely positioned element box from the left edge
of the element’s containing block.		 inherit, auto,
length,
percentage		 h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;}
bottom Describes the vertical offset for the bottom edge of the
absolutely positioned element box from the bottom
edge of the element’s containing block.		 inherit, auto,
length,
percentage		 h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;}
right Describes the horizontal offset for the right edge of the
absolutely positioned element box from the right edge
of the element’s containing block.		 inherit, auto,
length,
percentage		 h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;}
width Sets the width of the element. It can be applied to text
elements or as a way to resize images.		 length,
percentage, auto		 img.photo
{width: 75%;}
min-width Allows a minimum width to be set for an element box. inherit, length,
percentage		 h5 {min-width: 100px;}
max-width Allows a maximum width to be set for an element box inherit, none,
length,
percentage		 h5 {max-width: 150px;}
height Sets the height of the element. length,
percentage, auto		 img.photo {height: 75%;}
min-height Allows a
minimum height to be set for an element box.		 inherit, length,
percentage		 h5 {min-height: 100px;}
max-height Allows a maximum height to be set for an element box. inherit, none,
length,
percentage		 h5 {max-height: 150px;}
z-index Controls the placement of elements along the z-axis. inherit, auto,
integer		 h2 {position: absolute; top:
20px; right: 50px; bottom:
20px; left: 50px; z-index: 3;}
visibility Controls whether the content of an element box is
rendered (including the borders and backgrounds).		 inherit, visible,
hidden, collapse,
hide, show		 p {visibility: hidden;}
overflow In cases where content in an element falls outside the
element’s rendering box (due to negative margins,
absolute positioning, content exceeding the width/
height set for an element, etc.), the overflow property
describes what to do.		 inherit, visible,
hidden, scroll,
auto, -mozscrollbars-
none,
-moz-scrollbarshorizontal,
-moz-scrollbarsvertical		 blockquote {width: 50px;
height: 50px; overflow:
scroll;}
float Positions an element against the left or right border
and allows text to flow around it.		 left, right, none p.sidebar {float: right}
clear Specifies whether to allow floating elements on an
image’s sides.		 none, left,
right, both		 h1, h2, h3 {clear: left;}
clip A clipping area describes the portions of an element’s
rendering box that are visible (when an element’s
“overflow”
property is not set to “visible”).		 inherit, auto,
shape		 p {overflow: scroll;
position: absolute; width:
50px; height: 50px; clip:
rect(5px 40px 40px 5px);}
display Defines how and specifies if an element
is displayed.		 block, inline, list-item,
none		 p {display: block;}
white-space Defines how white space in the source for
the element is handled.		 normal, pre, nowrap p.haiku {whitespace:
pre;}
list-style-type Specifies the appearance of the automatic
numbering or bulleting of lists.		 disc, circle, square,
decimal, lower-roman,
upper-roman, lower-alpha,
upper-alpha, none		 ol {list-style-type:
upper-roman;}
(A., B., C., D., etc)
list-style-image Specifies a graphic to be used as a
list-item marker (bullet).		 url, none ul {list-style-image:
url(3dball.gif);}
list-style-position Specifies whether list items should be
set with a hanging indent.		 inside, outside ol {list-style-position:
outside;}
list-style Shorthand property for setting the
list-style type, image, and position
(inside, outside) in one declaration.		 list-style-type,
list-style-image,
list-style-position		 ul {list-style: list-item
url(3dball.gif) disc
inside;}
table-layout Controls the layout algorithm used to
render table structures.		 inherit, auto, fixed table {table-layout:
fixed;}
border-collapse The rendering of table borders is divided
into two categories in CSS2—collapsed
and separated. This property specifies
which border rendering mode to use.		 inherit, collapse, separate table {border-collapse:
separate;}
border-spacing Specifies the distance between the borders
of adjacent table cells in the “separated
borders” model.		 inherit, length table {border-spacing:
10pt 5pt;}
cursor Controls the type of cursor
that is used when a pointing
device is over an element		 inherit, default, auto, url, n-resize,
ne-resize, e-resize, se-resize, s-resize,
sw-resize, w-resize, nw-resize, crosshair,
pointer, move, text, wait, help, hand,
all-scroll, col-resize, row-resize, no-drop,
not-allowed, progress, vertical-text, alias,
cell, copy, count-down, count-up,
count-up-down, grab, grabbing, spinning		 blockquote
{cursor: help;}
outline Shorthand method for specifying
the outline-color, outline-style,
and outline-width properties
using a
single property notation		 inherit, outline-color, outline-style,
outline-width		 button {outline: red
solid thick;}
outline-width Specifies the width
for the outline of an element		 inherit, thin, medium, thick, length input {outlinewidth:
thin;}
outline-color Specifies a color for the outline
for an element		 inherit, invert, color img {outline-color:
black;}
outline-style Specifies an outline line style for
the current element		 inherit, none, dotted, dashed, solid,
groove, ridge, inset, outset, double		 button {outline-style:
groove;}
content Automatically generates content to
attach before/after a CSS selector
(using the :before and :after
pseudo-elements.)		 inherit, string, url, counter(),
open-quote, close-quote,
no-open-quote, no-closequote,
attr(x)		 em:before {content:
url("head.gif");}
quotes This property determines the type
of quotation marks that will be
used in a document.		 inherit, none, ([string][string]) blockquote: before {content:
open-quote} blockquote:after
{content: close-quote}
counter-reset The counter-reset property acts
like a variable assignment in a
programming language—it sets a
new value for the specified counter
whenever the current CSS selector
is encountered.		 inherit, none, [
identifier integer]		 h1:before {counter-increment:
main-heading; counter-reset:
sub-heading;}
counter-increment The counter-increment property
acts like an incremented variable in
a programming language—it
specifies the amount to increment
the specified counter by when the
current CSS selector is encountered.		 inherit, none, [
identifier integer]		 h1:before {counter-increment:
main-heading; counter-reset:
sub-heading}
@page Sets page rules.   @page doublepage {size:
8.5in 11in;
page-break-after: left;}
page Used to specify a specific page type to use
when displaying an element box.		 auto, identifier body {page: doublepage;
page-break-after: right;}
size Describes the orientation or dimensions of the
page box.		 inherit, auto, portrait,
landscape, length		 body {size 8.5in 11in;}
marks Printed documents in the printing industry
often carry marks on the page outside the
content area. These marks are used to align
and trim groups of papers. This property
specifies what sort of marks should be
rendered just outside the rendered page box.		 inherit, none, crop,
cross		 body {marks:
crop cross;}
margin Shorthand property which allows an
author to specify margin-top, margin-right,
margin-bottom, and margin-left, properties
using a single property and value notation.		 inherit, auto, length,
percentage		 body {margin: 5px 0px
2px 25px;}
margin-top,
margin-left,
margin-bottom,
margin-right		 Specifies the margin properties of the
respective sides of an element’s box.		 inherit, auto, length,
percentage		 address {margin-top:
33%;}
page-break-before Specifies the page-breaking behavior that
should occur before an element box and on
what side of the page the content that follows
should resume on.		 inherit, auto, avoid,
left, right, always,
empty string		 p {page-break-before:
always;}
page-breakafter Specifies the page-breaking behavior that
should occur after an element box and on
what side of the page the content that follows
should resume on.		 inherit, auto, avoid,
left, right, always,
empty string		 p {page-break-after:
always;}
page-break-inside Specifies the page-breaking behavior
that should occur inside an element’s
rendering box.		 inherit, auto, avoid p {page-break-inside:
avoid;}
orphans Specifies the minimum number of lines of
content for the current element that must be
left at the bottom of a page in a paged display
environment.		 inherit, integer p {orphans: 4;}
windows Specifies the minimum number of lines of
content for the current element that must be
left at the top of a page in a paged display
environment.		 inherit, integer p{windows: 1;}
]]> http://techjunk.websewak.com/css-properties-with-description-and-example/feed/ http://techjunk.websewak.com/css-properties-with-description-and-example/ Handling Screen Resolution Issues in Javascript http://feeds.feedburner.com/~r/techjunk/~3/123721857/ http://techjunk.websewak.com/handling-screen-resolution-issues-in-javascript/#comments Sun, 10 Jun 2007 18:32:48 +0000 Srikanta http://techjunk.websewak.com/handling-screen-resolution-issues-in-javascript/ Handling Screen Resolution Issues
Browser differences are only half the problem you’ll encounter when attempting to create a universally viewable Webpage. The conditions in which the browser is running, operating system and screen resolution to name a couple, also create problems. Luckily, there is a built-in JavaScript object, Screen, which will help you with this. The Screen object contains information on the display screen’s size and color depth.

Screen Properties
There are several properties that are built into the Screen object in order for you to more effectively use it. Here is a complete list of their names and descriptions of each:

availHeight : This property returns the height of the screen in pixels. The height of any components of the operating system’s interface—such as those of the Windows Taskbar—are subtracted automatically.

availWidth : This property returns the width of the screen in pixels. The width of any components of the operating system’s interface—such as those of the Windows Taskbar—are subtracted automatically.

colorDepth : This property represents the color depth of a color table, if one is in use. If no color table is being used, this property is the Screen.pixelDepth property.

height : This property returns the height of the screen in pixels.

pixelDepth : This property returns the color resolution of the display screen in bits per pixel.

width : This property returns the width of the screen in pixels.

Even though the Screen object is available to return information about the client’s screen, it is not a good idea to give the user a message informing him that he’s not viewing your Web page under ideal conditions. It’s your responsibility as the programmer to make your Web pages work with as many screen variations as possible.

Working with Different Screen Settings

How to get all of your content on the page and how your images will look when they are displayed are two of the most important issues you’ll encounter when dealing with different screen settings.

Getting all of your content onto a page is relatively easy because HTML has built-in features that can be used to create content that fits on any resolution. The best way to make sure that all of a page’s content fits in any screen resolution is to enclose the entire content in a table (which may or not have a border) and set its width property to 600 pixels.

Code (javascript)

<html>

  <head>
    <title>
      Containing Content
    </title>
  </head>

  <body>
<table width="600">
<tr>
<td>
      <center>
        <font size=6>JavaScript</font>
      </center>

      <code>
        If you place all your pages content into a table that has a
        defined width of 600 pixels, it will all fit into a browser
        that is being used under any screen resolution <b>and</b> it
        will look exactly the same under any of the many screen
        resolutions.
      </code>
</td>
</tr>
</table>

  </body>

</html>
 

Because the smallest standard screen resolution is 640×480 pixels, your Web page will fit into any browser running under any of the many screen resolutions. Not only will all your content fit on the page, but it will also look exactly the same under any condition. The only adverse side effect of using this technique occurs when the user is viewing your Web page in a browser window that is not maximized. If this is the case, some of the content of your page will be hidden, and the user will have to use the scroll bar to view it. Fortunately, with your knowledge of the window and screen objects, this side effect can easily be avoided.

Here’s how:

Code (javascript)

<html>

  <head>
    <title>
      Resizing Small Windows
    </title>

    <script language="JavaScript">
    <!--
      function onLoad()
      {
        self.moveTo( 0, 0 );
        self.resizeTo( screen.availWidth, screen.availHeight );
      }
    // -->
    </script>

  </head>

  <body onLoad="JavaScript: onLoad();">
<table width="600">
<tr>
<td>
      <center>
        <font size=6>JavaScript</font>
      </center>

      <code>
        If you place all your pages content into a table that has a
        defined width of 600 pixels, it will all fit into a browser
        that is being used under any screen resolution <b>and</b> it
        will look exactly the same under any of the many screen
        resolutions.
      </code>
</td>
</tr>
</table>

  </body>

</html>
 

This example resizes the window as soon as it loads to make sure it is big enough to hold all of the horizontal content without scroll bars. As most users will become annoyed by having their windows resized unnecessarily, it’s a good idea to put a check in the onLoad() function above, so that the window will only resize if it is necessary in order to show all of the content:

Code (javascript)

function onLoad()
{
  if( self.innerWidth < 600 )
  {
     self.moveTo( 0, 0 );
     self.resizeTo( screen.availWidth, screen.availHeight );
  }
}
 

As a last resort, you can always display a message for the user if he is using a screen resolution that you feel your content or images just cannot accommodate. Here is a modified onLoad() function again that does just that:

Code (javascript)

function onLoad()
{
  if( self.innerWidth < 600 )
  {
    self.moveTo( 0, 0 );
    self.resizeTo( screen.availWidth, screen.availHeight );
  }

  if( self.innerWidth < 600 )
  {
    alert( "This Web page was designed to be viewed using a" +
            " screen resolution of 640x480 or larger." );
  }
}
 

This function attempts to resize the window, but if it’s still not large enough, a message is displayed explaining the problem.

Another important thing to remember when writing a Web page for different screen resolutions is that images will appear larger on smaller resolutions. Fortunately, the width and height properties of the HTML tag allow you to dynamically set the size of the image. Here is a typical image tag that dynamically sizes the image to the screen:
(UPDATED: Thanks to Laurie Erickson)

Code (javascript)

<img src="image.jpg"
      onload="this.width=getWidth( 150 );this.height=getHeight( 200 );">
 

That statement, in combination with the following two functions:

Code (javascript)

function getWidth( width )
{
  return( width * screen.width / 1024 );
}
function getHeight( height )
{
 return( height * screen.height / 768 );
}
 

will dynamically resize the image so that it will look the same on any screen resolution. These two functions—getWidth() and getHeight()—assume that the image was designed for screen resolution 1024 × 768, but you can change that by changing the resolution width and height in the return statements.

]]> http://techjunk.websewak.com/handling-screen-resolution-issues-in-javascript/feed/ http://techjunk.websewak.com/handling-screen-resolution-issues-in-javascript/ Google acquires FeedBurner RSS feeder for $100 million http://feeds.feedburner.com/~r/techjunk/~3/122079911/ http://techjunk.websewak.com/google-acquires-feedburner-rss-feeder-for-100-million/#comments Mon, 04 Jun 2007 15:34:15 +0000 Virender http://techjunk.websewak.com/google-acquires-feedburner-rss-feeder-for-100-million/ FeedBurner, a company that distributes syndicated content for blogs and other media Web sites has been purchased in about $100 million. Terms has not yet been disclosed.

Google, the king of paid search advertising and has very vast network of websites that host ads. According to Google, they are very much sure that this area is full of opportunities. With FeedBurner it can expand its AdSense reach.

Now Google’s advertiser can advertise even on feeds. Also Google will integrate FeedBurner technology with its Google Reader.

RSS feeds enable media Websites, bloggers and podcasters to shoot their content directly to readers through RSS readers. FeedBurner helps publishers deliver the RSS feeds, as well as manage the feeds, track the subscribers and also serve ads.

Although the technology is not mainstream, but Google showing interest shows that it’s future is bright.

Google has acquired many technologies. In April, Google said it planned to spend $3.1 billion to buy Online ads firm DoubleClick.

Let’s wait for the Google’s Next Deal……

]]> http://techjunk.websewak.com/google-acquires-feedburner-rss-feeder-for-100-million/feed/ http://techjunk.websewak.com/google-acquires-feedburner-rss-feeder-for-100-million/ Setup S3 sleep state in Windows Vista for significant power savings http://feeds.feedburner.com/~r/techjunk/~3/121458815/ http://techjunk.websewak.com/setup-s3-sleep-state-in-windows-vista-for-significant-power-savings/#comments Fri, 01 Jun 2007 19:21:32 +0000 Anoop http://techjunk.websewak.com/setup-s3-sleep-state-in-windows-vista-for-significant-power-savings/ With the newer technologies, power consumption of computers are increasing day by day. Manufacturers are continuously working on reducing the power consumption. Popular OS like Windows XP, provides us many features to save power such as Stand By, Hard Disk Turn Off, Monitor Off and Hibernate etc. With the release of Vista, Microsoft has introduced, S3 Sleep state.

In the older power-saving modes (S1 sleep state), the computer could only shut down some components, such as the hard drives and monitors, after a period of time to reduce power usage. However, the CPU, fans, and other internal components continues to run at their full speed. With the new S3 power management, your computer is nearly sleeping. It maintains a minimum amount of alertness, just enough to wait for you to wake it up at any moment.

66757.png

For more information about S3 Sleep state and to know how to enable S3 state in Window XP, Visit http://content.zdnet.com/2346-9595_22-66750.html?tag=gald

]]> http://techjunk.websewak.com/setup-s3-sleep-state-in-windows-vista-for-significant-power-savings/feed/ http://techjunk.websewak.com/setup-s3-sleep-state-in-windows-vista-for-significant-power-savings/