Contact Us

|

FriendFeed FriendFeed

|

follow us on twitter Twitter

|

 Rss Feed

|

Favorites Add to Favorites

Friday, July 13, 2012

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

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.

Labels: , , , , , ,

Read more...

Thursday, March 10, 2011

Removing exta space in input button

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....

Labels: , , , , ,

Read more...

Toggle select and unselect checkbox with text

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;
}
}
}

}

Labels: , , ,

Read more...

Jquery client side validation

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.

Labels: , , , , ,

Read more...

Monday, January 10, 2011

Png background fix for ie6 using css

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.

Labels: , , ,

Read more...

Sunday, January 9, 2011

Simple animated drop down menu using jquery

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...

Labels: , , , , ,

Read more...