Online Web development Tutorials | Latest Tech News | Trends & Updates

minecraft

noreply@blogger.com (Harish) — Tue, 04 Aug 2015 09:48:00 +0000

Posted by Charan & Shravan

Minecraft is a block game-play originally created by Swedish programmer Markus "Notch" Persson and later developed and published by the Swedish company Mojang. The creative and building aspects of Minecraft enable players to build constructions out of textured cubes in a 3D procedurally generated world. Other activities in the game include exploration, resource gathering, crafting, and combat. Multiple game-play modes are available, including survival modes where the player must acquire resources to build the world and maintain health, a creative mode where players have unlimited resources to build with and the ability to fly, and an adventure mode where players play custom maps created by other players. The PC version of the game is renowned for its third-party mods, which add various new items, characters and quests to the game.

You can play Minecraft in the Xbox..., PS..., iPod, iPad and MAC/PC devices; this was the original plan although now the game has been launched in several other devices such as Wii U and 3DS

How to disable or enable window's scroll or key events?

noreply@blogger.com (Harish) — Fri, 13 Jul 2012 13:15:00 +0000

When you try to write a simple java script for overlay or popup message, you might find it odd when the background content scrolls when user try to scroll it using mouse or keyboard. So here is a simple java script to disable it....

   // left: 37, up: 38, right: 39, down: 40,
   // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36

   var keys = [37, 38, 39, 40];

   function preventDefault(e) {
     e = e || window.event;
     if (e.preventDefault)
     e.preventDefault();
     e.returnValue = false;  
   }

   function keydown(e) {
       for (var i = keys.length; i--;) {
           if (e.keyCode === keys[i]) {
               preventDefault(e);
               return;
           }
       }
   }

   function wheel(e) {
     preventDefault(e);
   }

   function disable_scroll() {
     if (window.addEventListener) {
         window.addEventListener('DOMMouseScroll', wheel, false);
     }
     window.onmousewheel = document.onmousewheel = wheel;
     document.onkeydown = keydown;
   }

   function enable_scroll() {
       if (window.removeEventListener) {
           window.removeEventListener('DOMMouseScroll', wheel, false);
       }
       window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
   }

Call disable_scroll() from the code above before animation and enable_scroll() after the animation ended.

Removing exta space in input button

noreply@blogger.com (Harish) — Thu, 10 Mar 2011 13:42:00 +0000

When to try to expand the value text in the input button, in ie7 or lower version, it will take spaces automatically to the left and right of the text. How can you overcome this?

Here is a simple solution for that.

Just add overflow:visible to it.

This will do the magic....

Toggle select and unselect checkbox with text

noreply@blogger.com (Harish) — Thu, 10 Mar 2011 12:00:00 +0000

Here is a simple javascript to toggle between selected and unselected of a checkbox. And also it will toggle the text, for example when you click on the select link the text will change to unselect and the vise-verse...

function ToggleCheckBox()
{
var ischecked=document.getElementsByTagName("input");
var divid=document.getElementById('id name');
for(i=0;i<ischecked.length;i++)
{
if(ischecked[i].type == "checkbox")
{
if(ischecked[i].checked == true)
{
divid.innerHTML="Select All";
ischecked[i].checked=false;
}
else
{
divid.innerHTML="Deselect All";
ischecked[i].checked=true;
}
}
}

}

Jquery client side validation

noreply@blogger.com (Harish) — Thu, 10 Mar 2011 11:29:00 +0000

When i was browsing the net for using the client side validation using jquery to my site, i found a useful plugin which will validate the form. I have gone through the reviews of this plugin and most of them said that they are using this plugin and it is really nice.

I thought that i would share this to all, so that it would be useful. Bassistance.de is the site which gives the plugin.

Follow the link will help you how and where to use Client side validation

If anybody have used it before, please share your experience.

Png background fix for ie6 using css

noreply@blogger.com (Harish) — Tue, 11 Jan 2011 05:45:00 +0000

Previous we have seen about how to give hack for png image for ie6. In this post we will be knowing how to fix a png background using css for ie6.

HTML
<div class="img_txt">dhsfds</div>

CSS


.img_txt{background:url(mobile.png) repeat;_background-image:none;_background-repeat:repeat-x;float:left;width:300px;height:130px;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='mobile.png', sizingMethod='crop'}

Hope this will fix for the background png.

Simple animated drop down menu using jquery

noreply@blogger.com (Harish) — Mon, 10 Jan 2011 06:37:00 +0000

This tut will help you to have a simple animated drop down using jquery. Before using this please add the js file from jquery website. Refer the site http://jquery.com/ for more details. You can download the minified version or the developer version.

Once you download and include in the page then using the below steps.
HTML


<ul class="drospdown">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a>
<ul>
             <li><a href="#">Indoor</a></li>
             <li><a href="#">Outdoor</a></li>
            </ul>

</li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>

<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

Javascript


 function mainmenu(){
$(" .drospdown ul ").css({display: "none"}); // Opera Fix
$(" .drospdown li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
  },function(){
  $(this).find('ul:first').slideUp(400);
  });
}
$(document).ready(function(){     
 mainmenu();
});

this will give you an animated drop down menu...

Making usability a practice

noreply@blogger.com (Harish) — Tue, 01 Dec 2009 16:55:00 +0000

As we all use form in the design to fill user information or such. Similarly we also use radio option to select and will give label to it. But the common usability mistake is when we click on the label, the radio option will not be selected. We need to do that. So here is a simply way

Using the ‘for’ attribute allows the user to click the label to select the appropriate input fields within a form. This is especially important for checkboxes and radio fields to give a larger clickable area, but it’s good practice all round.

Website to capture screenshot

noreply@blogger.com (Harish) — Mon, 28 Sep 2009 16:49:00 +0000

Most of our website have contact forms where visitors can fill in their email address and send a message directly to the site owners with some limitations. But some issues might be clear or some might not.

The visitor cannot attach image files with the message.

Here is a easy solution. To solve this very problem and make things a bit more convenient for your visitors, SnapABug has released a simple JavaScript based Help widget that can be added to any website with a simple copy and paste.

The Snapabug widget will add a "help" button to your website and when visitors click this help button, they can not only send a message to your email address but they can also chose to include a screen capture of the web page with the message.

SnapABug will automatically attach a screenshot with the browser’s user-agent string and OS details of the visitor. And the Help widget is absolutely free

So what for you waiting for, have a TRY!

Adobe Web 2.0 Productivity Workshop

noreply@blogger.com (Harish) — Thu, 10 Sep 2009 16:14:00 +0000

Great News for web developer and web designers, here is an opportunity to have a full session of knowing the web2.0 cutting edge latest technology of Adobe Productivity Workshop.

Adobe is conducting a one day program in Chennai. So if you are interested, here is an opportunity to know the latest adobe Productivity Workshop.

Venue: Hotel Park Sheraton

Date: 16th Sep 09

Time: 9am - 5pm

Detailed Agenda
09:45am - 10:15am Registration

10:15am - 11:00am Professional website design with Adobe Dreamweaver CS4

11:00am - 11:15am Tea Break

11:15am - 12:45pm Rich interactive content development with Adobe Flash CS4 Professional

12:45pm - 01:15pm Web prototyping and image editing with Adobe Fireworks CS4

01:15pm - 02:00pm Lunch Break

02:00pm - 02:30pm Audio creation and editing with Adobe Sound booth CS4

02:30pm - 03:15pm New dimensions in digital imaging with Adobe Photoshop CS4 Extended

03:15pm - 03:45pm Inspired vector graphics creation with Adobe Illustrator CS4

03:45pm - 04:00pm Tea Break

04:00pm - 04:30pm Flexible web publishing with Adobe Contribute CS4

04:30pm - 05:00pm Sneak peek of Adobe Flash catalyst

Hurry! only limited seats. Here is the link to Register.

For more details
Call: 09311 469593
Email: abode@channel-technologies.com

So see you there!

Test your Website in different Screen Resolutions in one place

noreply@blogger.com (Harish) — Wed, 26 Aug 2009 16:15:00 +0000

Experts says that when you are publishing a website for viewers, you should optimize the web pages for 1024×768 resolution as it is still the most common size. So you must always keep in mind when you are designing a website, make sure that the layout should be good and readable in all the resolutions.

Have you ever wondered how your website appears to a visitor who might be using a different screen resolution?

Tried of changing your resolution each and every time when you are making changes?

Here is a simple way to check your web page in all the resolution in one place. Viewlike.us is the site you are looking far.

Just type the address of your web page and the tool will show you how that page will look like in different screen resolutions. You can test the layout using most common resolutions like 800×600, 1024×768 or even the iPhone and Wii browser.

Create gradient buttons using css

noreply@blogger.com (Harish) — Wed, 12 Aug 2009 16:05:00 +0000

Creating a glossy gradient button effect is easy to make in photoshop. But for example, in your site you want ten buttons to be created. So what you will do, as of all we will be creating 10 different button in photoshop.

But all of these button will make your page weight of having 10 request to the site. So here is a simple trick how to create different buttons with single transparent image.

Follow this simple steps... Download the png file to have the gradient button. And copy the HTML and CSS code. So you will not be creating different image, just this png image will do the magic.

HTML:
<a href="#" class="btn ovrlay ">Super Awesome Button</a>

CSS:
.btn{font:13px arial;color:#fff;text-decoration:none;}
.btn:hover{background:#630030;}
.ovrlay{background:#A9014B url(btn-overlay.png) repeat-x;padding:5px 10px 6px;position:relative;}
.btn{background-color:#E33100;border:1px solid #7c1f06}

Just change the color of the .btn class, similarly you can have different n number of buttons by just class....

Before Gradient effect

After Gradient Effect

PNG Transparent Image

Just copy the above png image...

Note:
Do not forget to put png hack for ie6.

Convert images to vector formate

noreply@blogger.com (Harish) — Thu, 06 Aug 2009 16:11:00 +0000

Designers used to take images from a famous image selling website for their site to be used. But at some point they also need vector based images to be used such as for logos, header images etc to give a clarity picture.

These vector images can be resized to any size so that the quality of the image will not get damaged. But converting an image to vector formate might be costlier. So what to do? where to go?

Here is a simple solution to convert your image to vector images. Vector Magic.com is a free online image to vector Convert site. Easily convert bitmap images to clean vector art.

Convert bitmap images like JPEGs, GIFs and PNGs to the crisp, clean, scalable vector art of EPS, SVG, and PDF with the world's best auto-tracing software.

Upload the image to be traced and within seconds you will get the image converted to vector format. You can also edit the configuration such as details, colors etc. But the only worry is they leave a water mark of their website at the bottom of the image. I think the designer know what to do with it!

They also provide a desktop version for trail, where you can download and install it in your pc. Then you can work on it. The desktop version also contains the background remover which is not available in online version.

If you want to convert many images to vector, you can go for the trail version and if you are interested you can buy the software. Because i think it gives a better quality and clarity vector images.

And also they provide hand tracing, where you can order for images to be converted and they will do it for you.

Center align a div horizontally and bottom of the page

noreply@blogger.com (Harish) — Mon, 03 Aug 2009 16:19:00 +0000

There is an easy way to have the div position to the left or right to the screen with the use of fixed property. But how do you make a div horizontally center aligned and always be at the bottom of the page?

This will be of great useful if you want to make any popup div for display important messages or take any surveys etc. So here is a simple trick to show the content of a div horizontally aligned and always be at the bottom of the page...

HTML:
<div class="parent">
<div class="child">
Content here
</div>
</div>

CSS:
.parent{
position:fixed;
bottom:0px;
width:100%; //width should be 100%
}
.child{
width:300px; //min width should give to center the div.
margin:0px auto; //here it will make center
}

Position fixed will support modern browser including ie7, but for ie6 you have to use microsoft expressions to render the page as position fixed, as it will render wrongly. If you find any solutions without using expression in ie6, please explain use which will be helpful to others.

Yahoo’s Text-Sprite Generator

noreply@blogger.com (Harish) — Mon, 27 Jul 2009 16:37:00 +0000

Some of them called it as Yahoo's secret text sprite generator, because i think yahoo has not publish it officially. This is a pretty cool stuff by yahoo, which will generate a sprite to the text given.

Basically it’s a URL you can hit which will create a perfect sprite-ready PNG graphic of the text you include in the URL. Check it out for yourself:

Here is the url...
http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=webdevelopertut

Just copy the link and paste it in the address bar. You can have your own text just like i have used webdevelopertut. The image generated is always 468×68px and the color is white on top and yellow-orange on the bottom. Where you can use it for hover also.

For SEO, you can use CSS font replacement technique to have both text and image versions.

Float bug fix in div to expand

noreply@blogger.com (Harish) — Wed, 22 Jul 2009 16:42:00 +0000

Many of would find a problem when using a block(div) called a container with the background color, where you don't want to use float or height to the div. And in the inner div of the container you want to give float to it.

You can find this issue in most of the browser like ie, firefox, the container will not expland as the inner div.

For Example:
HTML:
<div class="container">
<div class="inner_div">
blablabla <br> blablabla <br> blablabla<br>
</div>
</div>

CSS:
.container{width:300px;background:red;}
.inner_div{float:left;width:200px;font:12px arial;}

The red background in the container div will not expand when you add content to the inner div. So here is a simple trick to get the container div to expand.

Just add
.container{overflow:hidden;}

Will make the job easy.

Principles for keeping your code clean

noreply@blogger.com (Harish) — Mon, 20 Jul 2009 16:18:00 +0000

The art of writing HTML and CSS is the foundation of a beautiful website. The advantages of clean, semantic HTML are many, but so many websites suffer from poorly written markup.

Most of the attractive website have beautiful designs but fails to pass in the w3c validations. This is because of bad coding. These are the basic and most follow principles for keeping your code clean and have a semantic structure. They are as follows...

1. Strict DOCTYPE
2. Proper indentation
3. Nest your tags properly
4. Character set & encoding characters
5. Eliminate unnecessary divs
6. Use better naming conventions
7. Leave typography to the CSS
8. Use Class/id the body tag
9. Keep your CSS and JavaScript external
10. Validation

This will be a great start to write clean HTML, but there is still lots more. When starting from scratch, this seems to be much easier. When trying to fix existing code, it feels a lot more difficult. SO from the next project, just think what you can make it right.

Colour Picker for web designers

noreply@blogger.com (Harish) — Fri, 17 Jul 2009 15:49:00 +0000

Designers used to develop the website with the combination of colors using photo shop to make the website more attractive. Now a days developers used to select the color with the help of addon called color picker using firefox.

Imagine when you move to a place where you see some beautiful colors, pictures, spots etc.. where you want to take a combination of those colors, when you don't have a laptop or camera with you. What you will do?

Designer Jinsun Park from Korea has come out with a simple tool called 'Color Picker', which is just look like a pen. This color picker pen consists of

1. RGB Color sensor.
2. Color scan button.
3. RGB ink cartridge.
4. Color display.
5. Ball type.

Place the pen against an object and press the scan button, the color will be detected by the color sensor and the RGB cartridges in the pen will mixed the required inks to create the target color. And you can also draw the colors in a paper with this pen.

Now it has become very easy with this pen, where ever you go just carry the color picker with you.

CSS font replacement technique

noreply@blogger.com (Harish) — Wed, 15 Jul 2009 16:30:00 +0000

Many of us would like to have headers with nice custom fonts on our website. For instance, logo which we like to have in an attractive graphics. But this stuff can be done only with the help of <img> tag, not with the regular text.

The proper HTML tag to use for headers is the header tag (e.g. <h1>, <h2>, etc). This is best for accessibility as well as SEO. Instead of using an image, we will think that having a text based logo will be much preferable for more SEO point of view even though we have an alt tag to the image. But text might not give you an attractive look. So how to use css font replacement technique to use both text as well as image in logo.

You may also be aware that CSS allows us to place background images on elements. Also text indent to align the text. We can use a proper header tag, but also use an image.
We need to somehow hide the text so that only the image is visible. Here it goes...

HTML:
<h1 class="logo">
Webdevelopertut
</h1>

CSS:
h1.logo {
width: 200px; height: 175px;
background: url("images/logo.jpg");
text-indent: -9999px;
}

Basically this technique creates the text goes way off the screen to the left. The text is being left-justified and cannot be seen. instead image is placed in the top left of this box.

When both css and image is on or off this method will get pass and fails when css is on and image is off. Most of them are now following this technique.

Title and Alt attributes on Images for ie8

noreply@blogger.com (Harish) — Mon, 13 Jul 2009 16:16:00 +0000

The alt attribute is no longer displayed as the image tool tip when the browser is running in IE8 mode.I have decided to add title attributes to most of my images so the subject is described on a mouse over.

The alt attribute plays most important role, when the images could not be showed to the user for some reasons. It also helps, when people are searching for images in Google Images, this alt attribute used to display the images while searching in it.

Now its similar to Firefox and others in that alt attributes are not described on a mouse over. Most of the traffic is from users using IE (although Firefox is coming up nowadays..) I decided to start on this.

For example:
<img src="images/logo.gif" width="100" height="100" alt="webdevelopertut logo" title="logo">.

Facebook launches contest for Indian developers

noreply@blogger.com (Harish) — Fri, 10 Jul 2009 15:52:00 +0000

Facebook a Social networking site has launched Facebook Developer Contest India, a contest for Indian developers to show their web development skills by creating Facebook applications and Facebook Connect Integrations.

According to Facebook, entries will be judged on originality, business potential, social utility, usefulness, expressive features, intuitiveness and potential of the application. To enter the contest, participants are required to create a Facebook platform application for use on the Facebook site or Facebook Connect integrations in English or Hindi and register their application in the contest’s homepage.

Duration of the Contest
The Contest begins at 12:30:01 pm Indian Standard Time on July 2, 2009 and ends at 12:29:59 pm Indian Standard Time on September 11, 2009 (the latter being the “Closing Date”). Any entry submitted after the Closing Date will not be eligible for consideration in the Contest.

The three winners will get $4000, $2000 and $1000, in each of the two categories. The contest ends on 11th September and the winners would be announced in the last week of September 2009.The Contest is open to all individuals who are over the age of 16 at the time of entry and are resident in India (the “Participants”). Participants must have a Facebook.com account to participate in the Contest.

For more information and conditions about the contest, please logon to facebook.com.

Vertical align text in floating div using css

noreply@blogger.com (Harish) — Thu, 09 Jul 2009 16:33:00 +0000

Do you know how to vertically align a text in a floating div? When a content is dynamically generated and you want to align it automatically according to it?

Today i was experimenting about this for a long time and finally i have got a solution which will work in all the browsers including ie6. There are many ways of doing it, but i would like to work the code in all the majore browsers inculding ie6.

So here is the code...

HTML:
<div class="contentdiv">
<p>It works! Vertically Center Align!</p>
</div>

CSS:
.contentdiv{ width: 135px; height: 84px; display: table; border:2px solid red;}
.contentdiv p{ display: table-cell; vertical-align: middle; text-align: center;}

Hack for ie:
.contentdiv p{*margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");}

According to the height you increase, the content will get vertically aligned center. My only worry is iam using expression. We must try to avoid using more expression. But it looks very simple. Fine, any other method of handle this will be a great help! Please feel free to post.

Browser Extensions For CSS Coding

noreply@blogger.com (Harish) — Tue, 07 Jul 2009 16:42:00 +0000

In my previous post Tools for web developers, i have written about the common tools like firebug, ie developer tool etc, which will be much useful for developers. Here are some more additional extensions which will be much useful. These extensions helps the developers to edit live html and css, to check css rule and much more in other browser like ie, opera and safari. They are

1) Firebug Lite
2) ReCSS
3) Dust-Me Selectors
4) CSS Usage
5) PixelPerfect Firefox Plugin
6) Code Burner

1) Firebug Lite
Most of us have used firebug in firefox, but how many of them are using firefox browser? Firebug Lite brings the goodness of Firebug to Internet Explorer, Opera and Safari. Its a Javascript file that can be included in web pages to enable Firebug features in browsers other than Firefox.

2) ReCSS
Recss is other wise known as reload your css. Recss1.1 is a bookmark let, where you can drag it to your bookmark let tool bar. This bookmark let will make refreshing your css which also have got safari support.

3) Dust-Me Selectors
Dust-Me Selectors2.11 is a FireFox plugin that finds unused CSS selectors to help you keep your code clean.

4) CSS Usage
CSS Usage is a Firebug extension that allows you so scan multiple pages of a site to see which CSS rules are actually used.

5) PixelPerfect Firefox Plugin
PixelPerfect Firefox Plugin, generates an overlay over a web composition over top of the developed HTML.

6) CodeBurner
CodeBurner is a Firefox add-on, it with reference material for HTML and CSS. It contains contains a search tool for looking up HTML elements, attributes, and CSS properties.

Hope this article will be useful for you....

CSS class inherit one or more other classes?

noreply@blogger.com (Harish) — Sat, 04 Jul 2009 15:56:00 +0000

Question:
Is it possible to make a CSS class that "inherits" from another CSS class (or more than one).

For example:

.test { width:200px;display:block }
.logo { background:#cc;border:1px solid #4d4d4d }

I'd like to do is something like this:

.combine
{
.test;
.logo
}

where the ".combine" class would use all the attributes like width 200px, display block, background color #ccc and border color.

Answer:
Good Question my friend. But i think you can't do something like that. It would be much helpful for a developer if this is possible! Instead you can use multiple classes to a single block element.

For Example:
<div class="test logo ">text text text</div>

I heard that there is a tool called lesscss which iam not sure whether it will work in all the browsers. That tool might solve your problem, but do check for browser compatibility.

Take full screenshots of your webpage? its easy!

noreply@blogger.com (Harish) — Thu, 02 Jul 2009 16:05:00 +0000

Tired of taking screen shots from browser plug-ins or planning to buy a screen shot capture software which required more money to invest?

Here is a simply way to take screen shot of your full web page without installing any software or browser extensions.

Aviary.com is a suite of powerful creative applications that you can use right in your web browser. It is an online tool where you can take the screen shot from the live site. Just goto aviary, and paste your url to capture. You have the option to set your Resolutions, Quality, Region(entire page or above fold) to take the screen shot.

You can save the image to the desktop and add annotation using the Type Tool, freehand brushes, arrows, image editor, color palette and other tools available in the Aviary editor. What else you want?

There are many other online services like aviary, but they won’t do full pages.

Aviary is also providing other services like

1) Image Editor (Just like basic photo shop)
2) Color Editor
3) Effects Editor
4) Vector Editor
5) Image Markup
6) Screen Capture

TO use this tool, they will ask you to register in order to save your work. But don't worry it is absolutely FREE! It can’t get easier than this.