WEB and Technology

simple jQuery slideshow: simple jquery code

2010-10-25T21:24:00.000-07:00

Thanks to http://azoomer.com/how-to-make-a-simple-jquery-slideshow/

$(window).load(function() {
setInterval(function() {
$('#slides :nth-child(1)').next().show().end().fadeOut(1200).appendTo('#slides');
} , 5400);
});

#slides { position: relative; width: 600px; height: 400px;}
#slides img { position: absolute; left: 0; top: 0; display: none;}
#slides img.firstslide { display: block;}

Here is a link to a DEMO of the slideshow

DLink DIR-457 MyPocket 3.5G HSDPA Router

2010-10-12T00:57:00.000-07:00

DLink MyPocket 3G router

The new DLink myPocket 3.5G HSDPA Router allows users to access worldwide mobile broadband networks. Once connected, users can enjoy data transmission and media streaming on-the-go. Simply insert your UMTS/HSDPA SIM card, and share your 3.5G Internet connection through a secure 802.11g wireless network.

Multifunctionality
The D-Link myPocket 3.5G HSDPA Router can be configured to work as a Wi-Fi Router or 3.5G Modem with the flip of a switch. Share 3.5G connectivity with your colleagues or family while travelling or at work. Connect the D-Link myPocket 3.5G HSDPA Router to a PC to enjoy personal access to the Internet.

Advanced Network Security
Keep your wireless network safe with WPA/WPA2 wireless encryption. The DIR-457 utilizes a built-in firewall to prevent potential attacks across the Internet.

Simple to Install and Use
The 3.5G HSDPA Router can be installed quickly and easily almost anywhere. This router is great for situations where an impromptu wireless network must be set up, or wherever conventional network access is unavailable.

The DLink myPocket 3.5G HSDPA Router allows you to connect to a 3.5G mobile network and share a 3.5G mobile connection with PCs and wireless devices within
the area. Firewall and wireless security features are also included for safe remote connections.
BENEFITS

* ƒƒProvides high-speed connectivity in areas without conventional 802.11 wireless access
* ƒƒCompatible with a wide-range of mobile service networks
* ƒƒRechargeable battery allows for increased mobility
* ƒƒBuilt-in microSD slot supports sharing of files between Wi-Fi enabled devices

SHARE YOUR CONNECTION
The router can share its 3.5G connection with up to 6 Wi-Fi clients like smart phones, notebooks or gaming devices.
COMPACT DESIGN
The battery-powered router is slim and small enough to carry in your pocket.
BUILT-IN FIREWALL AND ENCRYPTION
The built-in firewall and WPA/WPA2 wireless encryption ensure that your information remains secure when working from remote locations.

DLink myPocket 3.5G HSDPA Router technical specifications :

* GSM BAND (GSM/GPRS/EDGE)
o ƒƒ 850 / 900 / 1800 / 1900 MHz
o ƒƒ Power Class 4 (+33dBm, 850 / 900 MHz)
o ƒƒ Power Class 1 (+30dBm, 1800 / 1900 MHz)
* UMTS/HSDPA BAND *
o ƒƒ 850 / 1900 / 2100 MHz
o ƒƒ Power Class 3 (+24dBm)
* DATA THROUGHPUT **
o ƒƒ Downlink up to 3.6Mbps in 3.5G mode
o ƒƒ Uplink up to 384Kbps in 3.5G mode
o ƒƒ Max. 54Mbps in 802.11g mode
* Standards
o ƒƒ 802.11b
o ƒƒ 802.11g
o ƒƒ 802.3
o ƒƒ 802.3u
* Wireless Security
o ƒƒ 64/128-bit WEP
o ƒƒ WPA-PSK & WPA2-PSK
o ƒƒ WPS-PIN
o ƒƒ Built-in firewall
* VPN
o ƒƒ L2TP/PPTP/IPSec VPN Pass-through
* ADVAnced functions
o ƒƒ Storage file sharing
o ƒƒ UPnP
o ƒƒ Port Forwarding
* ANTENNA
o ƒƒ 3 Internal antennas
* CARD SLOTS
o ƒƒ Standard 6-pin SIM card interface
o ƒƒ Micro-SD card interface
* LED Status Indicators
o ƒƒ Power Status
o ƒƒ Signal Status
* DIMENSIONS (L x W x H)
o ƒƒ 110 x 65 x 13.6 mm
* WEIGHT
o ƒƒ 103 grams

DLink 3G router price
DLink myPocket 3.5G HSDPA Router Price

DLink myPocket 3G Router Price in India – The new DLink myPocket 3.5G HSDPA Router price in India is Rs.10,000.Hope DLink will soon reduce the price to make it popular.

more click to http://www.newtechnology.co.in/dlink-dir457-mypocket-3g-router-price/

My Graphic Work simple with in 5min sample work-- by feroz

2010-10-11T00:33:00.000-07:00

Nokia E-Cu - Charge Your Phone Using the Heat of Your Pocket

2010-10-10T21:33:00.000-07:00

Patrick Hyland, a British designer, came up with a new concept cell phone that could revolutionize the phone market.

Dubbed "Nokia E-Cu", the handset incorporates a technology that was previously not used in cell phones.

The device does not need to the plugged into a socket to fill its battery up. The energy used to charge the phone is produced by the heat of the user's pocket.

It would be interesting to note that the Nokia E-Cu includes a copper case that has engraved heat-sinks in the shape of dried earth.

Inside, the designer decided to include a thermogenerator that transforms heat from any source into electrical energy.

The device will be able to eliminate the 51,000 tons of waste and greenhouse gases produced by phone chargers each year.

Contribution from : http://gadgets.infoniac.com/

jQuery sticky footer

2010-10-07T21:06:00.000-07:00

This will make an element with id footer stick to the bottom of the window, but only if the document body height is less than the window height. If it isn't it 'll just follow the normal document flow.

$(function(){
positionFooter();
function positionFooter(){
if($(document.body).height() < $(window).height()){
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter").height())+"px"})
}
}

$(window)
.scroll(positionFooter)
.resize(positionFooter)
});

Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height:

$(function(){
positionFooter();
function positionFooter(){
$("#pageFooterOuter").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#pageFooterOuter")
.height())+"px"})
}

$(window)
.scroll(positionFooter)
.resize(positionFooter)
});

Drop Shawod IE6 and MODREN Windows

2010-08-21T05:03:00.000-07:00

-webkit-box-shadow: 0 0 1em black;
box-shadow: 0 0 1em black;
-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";
filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);

Simple Method to FIX , Position:FIXED in IE6

2010-08-19T21:49:00.000-07:00

* { margin:0; padding:0; }
html, body {
    height: 100%;
    overflow:auto;
}
body #fixedElement {
    position:fixed !important;
    position: absolute; /*ie6 and above*/
    bottom: 0;
}



cccc

mobile meta tags

2010-08-18T22:28:00.000-07:00

Mobile META tags can be used in XHTML-MP and HTML markup to tag the document as optimized for mobile devices. Mobile search engines, mobile browsers and even desktop web browsers look for mobile META tags to identify and render mobile-optimized markup.

Mainstream mobile web content is identified using the markup document’s DOCTYPE or document type declaration. If the DOCTYPE declares the document as XHTML-MP or WML, then by definition, the content is mobile-optimized.

Today’s advanced mobile devices and smartphones are capable of rendering HTML 4 and 5 markup (some with JavaScript and AJAX, too). Still, many mobile web developers prefer to deliver a mobile-optimized web experience to these devices. A lightweight and responsive full-HTML mobile web experience provides the best user experience across a mobile network and on the smartphone browser. Since a smartphone-optimized mobile web document uses the full tag set of HTML, its DOCTYPE is no longer the right criteria to use to decide whether the document is indeed optimized for mobile devices.

Mobile META tags can be incorporated into mobile-optimized HTML documents to identify the document as “made for mobile”. Here are several common mobile META tags and their interpretations by mobile browsers, mobile search engine spiders and robots.

The MobileOptimized META Tag

icrosoft invented the MobileOptimized META tag to control the layout width for mobile markup rendered in Internet Explorer Mobile (i.e. Pocket IE). The content of the meta tag is an integer width in pixels. In IE Mobile, the presence of this META tag forces a single-column layout at the specified width, preventing the browser from modifying the layout to “fit” the mobile screen. See this META tag reference at Microsoft for the tag’s interpretation in Windows Mobile 5.

Some non-MS mobile browsers may also use the tag to force single-column layouts. Mobile browsers and mobile search engine spiders also use this META tag to identify mobile-optimized HTML.

The Viewport META Tag

Many smartphone browsers scale Web pages to a wide viewport width, one appropriate for displaying desktop-optimized markup. These browsers allow the user to zoom in and out of scaled Web pages. For example, Opera Mobile uses a default viewport width of 850 pixels, and the iPhone uses a default width of 980 pixels.

The Viewport META tag controls the logical dimensions and scaling of the browser viewport window in many smartphone browsers, including Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers. The presence of the Viewport META tag indicates that the markup document is optimized for mobile devices.

Here is a simplified version of the Viewport tag that sets the browser viewport width at 240 pixels and disables user scaling of the content:

<meta name="viewport" content="width=240,user-scalable=no" />

The content value of the Viewport META tag is a comma-delimited list of directives and

their values.

This example <meta> tag lists all Viewport directives and example values:

<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

This table lists the meanings and values of all supported directives of the Viewport META tag.

Viewport META directive	Example Value	Description
width	`width=320` `width=device-width`	Logical width of the viewport, in pixels. The special device-width value indicates that the viewport height should be the screen width of the device.
height	`height=480` `height=device-height`	Logical height of the viewport, in pixels. The special device-height value indicates that the viewport height should be the screen height of the device.
user-scalable	`user-scalable=no`	Specifies whether the user can zoom in and out of the viewport, scaling the view of a Web page. Possible values are `yes` or `no`.
initial-scale	`initial-scale=2.0`	Sets the initial scaling or zoom factor (or multiplier) used for viewing a Web page. A value of 1.0 displays an unscaled Web document.
maximum-scale	`maximum-scale=2.5`	Sets the user’s maximum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.
minimum-scale	`minimum-scale=0.5`	Sets the user’s minimum limit for scaling or zooming a Web page. Values are numeric and can range from 0.25 to 10.0. The value of this directives is a scaling factor or multiplier applied to the viewport contents.

Web 2.0 Defination

2010-08-02T21:05:00.000-07:00

Web 2.0

Web 2.0 Defination

information sharing, interoperability, user-centered design, and collaboration on the World Wide Web.

Examples of Web 2.0 include social-networking sites,, web applications, mashups and folksonomies, blogs, wikis, video-sharing sites, hosted services.

Browser-Specific CSS Hacks

2010-06-08T21:39:00.000-07:00

Internet Explorer

The easiest and best way to target CSS rules to Internet Explorer only is to use conditional comments to load an extra IE-specific stylesheet. That way all your IE-specific rules are in one file and separate from your standards-compliant CSS rules.

To target IE using conditional comments, just add this line to the head< tags of your HTML file:

1
2 
3

These conditional comments will be ignored by every other browser so only IE 6 and IE 7 respectively will load these stylesheets. Now all you need to do is create the files on your server and override whatever CSS rules are messing with IE’s headers.

In fact this method works so well we aren’t even going to mention the * html hack or other older methods because there’s just no reason to use them any more.

Firefox

Firefox does a pretty good job of rendering web pages the way they are supposed to look, but every once in a while you’ll find some of the older versions doing something a bit wonky.

To target a rule at Firefox 1.5 and 2, use this hack:

1body:empty #my-id {
2 
3    /*  Firefox-specific rules go here */
4 
5}

The trick to this hack is the proposed CSS 3 :empty pseudo-class. The purpose of the :empty pseudo class is to allow you to target any element that has no child elements. However, Firefox 1.5 and 2.0 (and others based on those versions of Gecko) select the body even when the body has content. In other words this hack exploits a bug that was fixed in Firefox 3.

The big downside to using this hack is that it’s invalid CSS 2 and may not even make it into the CSS 3 specification, so your stylesheets won’t validate. However, Firefox is pretty good at backwards compatibility, so this may not be an issue for a while. Your mileage may vary.

What if you need to target all versions of Firefox? To do that you can use a trick borrowed from Firefox extensions:

1@-moz-document url-prefix() {
2 
3    #my-id {  font-size: 100%; }
4 
5}

The -moz prefix (which is also used for some of the cutting-edge CSS support in Firefox 3) is combined with the -document url-prefix() selector, which is how Firefox add-ons define their styles.

Since other browsers don’t use this add-on contention, the result is a rule only Firefox will apply.

If you’re looking to target only Firefox 3, you’re out of luck. At the time of this writing, Firefox 3 seems immune to any browser-specific hack.

We may have missed something, though. If you know of a way to target Firefox 3, be sure to add it.

FIREFOX 3 SPECIFIC CSS (from sethviebrock)

For example, to set Firefox3-specific CSS properties for an image with an id of “header_right_gif”, i.e.

`1`	`"header_right_gif" src="header_right.gif" align="right">`

you’d use the following code:

01/* Firefox3-specific CSS property for  header_right.gif */

03@-moz-document url-prefix() {

  #header_right_gif,  x:-moz-any-link, x:default {

      position:  relative;

      top: -1px;

  }

13}

FIREFOX 3 SPECIFIC CSS with ASP.Net (from Focus 44)

I ran into a need to target Firefox 3 specifically. My developer at Focus44.com wrote me the following code to be placed in the . You can see I have added a Firefox 3 specific Style Sheet and individual styles in the example. It will only work for ASP.Net pages but I have seen similar tricks for php:

01<%if  (Request.UserAgent.ToLower().Contains("firefox/3"))  { %>

  "./themes/firefox3.css"  rel="stylesheet"  media="all"  type="text/css"  />

  

13<% } %>

Safari

As with Firefox 3, there’s no clear way to target specific versions of Safari, but there is a very ugly trick you can use to apply rules to only Safari 1 and 2:

1#my-id { color:red; }
2 
3#my-id { color:black;# }

The first rule will set the font to red in all browsers. The second rule will set the font to black in every browser except Safari 1 & 2. This hack works because the first two releases of Safari had a bug where a hash mark after the semicolon caused Safari to choke.

This is probably the ugliest hack in this tutorial, so use it sparingly if at all. Also note that Safari 1 and 2 will choke on every rule after the “#” so put these at the bottom of your stylesheet.

If you need to target Safari in general (regardless of which version) use the same prefix trick we used with Firefox.

In Safari’s case (or any other webkit browser), the rule looks like this:

1@media screen and  (-webkit-min-device-pixel-ratio:0) {
2 
3    #my-id {  height: 100%; }
4 
5}

The downside to this hack is that it also applies to Opera 9+. However you can retain the Safari-only aspect by combining it with the Opera-only rule below.

Opera

Generally speaking Opera doesn’t require many CSS hack since it’s perhaps the most standards compliant of all the browsers. In fact, if you find something is rendering poorly in Opera, there’s a good chance the error is on your end, not the browser’s.

But, should you ever need to target Opera, we have a way. This one comes courtesy of Neal Grosskopf. Grasskopf also has a comprehensive list of other browser hacks, including some conditional comment hacks we try to avoid.

To target Opera, use this rule:

1@media all and  (-webkit-min-device-pixel-ratio:10000), not all and  (-webkit-min-device-pixel-ratio:0) {
2 
3    #my-id {  clear:right; }
4 
5}

As Gosskopf notes in his write up, this is one of the weakest hacks since it isn’t really targeting Opera, it’s targeting all browsers that support -min-device-pixel-ratio that aren’t using the webkit rendering engine. At the moment that means Opera, but eventually Firefox will add support for -min-device-pixel-ratio which means, eventually, it too will be affected by this hack.