Tooltip on div Hover using onmouseover and onmouseout events

Here i am showing you how to create your own style tooltip in jquery. Its very simple to create different type of tooltip by changing it design style. 

Screen 1

Here we are calling a jquery function on hover of div and call another function after hover out to hide that div.
We are using two event to call jquery function:

1. onmouseover
2. onmouseout

OnMouseOver - The onmouseover event fires when the mouse pointer go to the boundaries of the target object.

OnMouseOut - The onmouseout event fires when the mouse pointer leaves the boundaries of the target object. 

Screen 2

CSS:

//CSS for hover div style
<style type="text/css">
        .hoverContiner
        {
            width: 215px;
            height: auto;
            margin-top: 20px;
            position: absolute;
            display: none;
            z-index: 10000;
            font-family: Arial;
        }
        .hoverDivSyle
        {
            float: left;
            width: 11px;
            height: 50px;
            background-image: url('Images/txt-corner.png');
            background-repeat: no-repeat;
            background-position: left 12px;
            position: absolute;
            left: -10px;
        }
        .hoverTextStyle
        {
            float: left;
            width: 180px;
            height: auto;
            background-color: #FFFFFF;
            border: solid 1px #cbcbcb;
            padding: 15px 10px 15px 10px;
            font-family: Arial;
            font-size: 12px;
            color: #222222;
            overflow: hidden;
        }
    </style>

HTML:

<div align="center">
        <h1 style="font-family: Arial; margin-bottom: 80px;">
            Tooltip On div Hover using onmouseover and onmouseout events</h1>
        //Calling function onmouseover and onmouseout
       // HoverDetails is the function which we need to pass current div id and message that you want to display in tooltip
        <div class="QuestionImg" id="divRoleDetails" onmouseover="HoverDetails(this.id,'Lorem ipsum dolor sit amet, cons ectet uer adipiscing elit. Lorem ipsum dolor sit amet, co nsect tuer adipiscing elit.');"
            onmouseout="HideHoverDetails();" style="background-color: rgb(152, 0, 0); height: 30px;
            padding-top: 10px; width: 150px; text-align: center; cursor:pointer; font-family: Arial; color: White;">
            Hover Me
        </div>
        //Hover Details div
        <div id="divHoverDetails" class="hoverContiner">
            <div class="hoverDivSyle">
            </div>
            <div id="divHoverDetailsText" class="hoverTextStyle">
            </div>
        </div>

Script:

you need to add jquery.min file.
Jquery CDN: http://code.jquery.com/jquery-1.10.2.min.js

<script type="text/javascript">

            function HoverDetails(divID, text) {
                debugger;
                var dvMouseover = $('#divHoverDetails');
                var offset = $('#' + divID).offset();
                var leftValue = offset.left;
                var topValue = offset.top;
                dvMouseover.css({ "top": (topValue - 25) + "px" });
                dvMouseover.css({ "left": (leftValue - -158) + "px" });
                $('#divHoverDetailsText').text(text);
                $(dvMouseover).stop().fadeIn(400); //Show tooltip
            }

            function HideHoverDetails() {
                document.getElementById('divHoverDetails').style.display = "none";
  //Hide tooltip            }

        </script>

Download Link:

Download From Here

 If you have any query feel free to comment it will be appreciated :)

javascript - jQuery fading "Back To Top" link

Here i am explaining how to add javascript - jQuery fading "Back To Top" link

We need to style and position it. Here I’m setting its position to fixed and adding the image of "Back To Top". I also added the Fade In and Fade Out effect.

Script

//Add This Jquery CDN

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js">
 </script>

//A Simple FadeIn and FadeOut Effect Back to top

<script type="text/javascript">
        $(function() {
            $(window).scroll(function() {
                if ($(this).scrollTop() != 0) {
                    $("#toTop").fadeIn();
                }
                else {
                    $("#toTop").fadeOut();
                }
            });
            $('#toTop').click(function() {
                $('body,html').animate({ scrollTop: 0 }, 800);
            });
        });
</script>

CSS

<style type="text/css">
        #toTop
        {
            position: fixed;
            bottom: 50px;
            right: 30px;
            width: 180px;
            height:100px;
            padding: 5px;         
            cursor:pointer;
            display: none;
        }
</style>

 

HTML

//This is the Fixed div

<div id="toTop">

        <img src="images/BackToTopArrow.png" style="width: 250px;
            height:100px;" alt="back to top" title="back to top" />
</div>

If you have any query feel free to comment it will be appriciated :)

Facebook Style Cross-Browser Jscroll Pane

jScrollPane is a cross-browser jQuery plugin which converts a browser's default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

How to use

It is very simple to use JScrollPane. You will need to download the necessary files and place them on your server. Then you just need to include the relevant files in the <head> tag of your document.

You can get needed file by downloading attached file below clicking on Download Link

Screen shot :

Here is the example :

CSS

//styles needed by jScrollPane

<link href="CSS/jquery.jscrollpane.css" rel="stylesheet" type="text/css" />

Script Path

//styles needed by jScrollPane
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

//latest jQuery direct from google's CDN

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
 

Script

//Call the jScrollPane  

<script type="text/javascript">
        $(document).ready(function() {
            $('.MultipleDivScroll').jScrollPane();
        });
</script>

 

Body

//body demo content for jScrollPane

<body>

    <div align="center" style="width: 100%;">

        <h1>
            Facebook Style JScroll Pane</h1>
        <div align="left" id="divScrollPane" class="MultipleDivScroll" style="width: 180px;
            height: 300px; border: solid 0px; outline: none !important;">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam.</p>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit,Ut wisi enim ad minim veniam,
                sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam.</p>
        </div>
    </div>
</body> 

Download Link

https://drive.google.com/file/d/0B7XVDU9gdC-lNnp1Q3FYbTVjTXM/edit?usp=sharing

  
Reference Link For More Details on jScrollPane

http://jscrollpane.kelvinluck.com/

If you have any query comment will be appreciated :)

Upload Multiple Images with Preview Using FileUpload Control in ASP.NET Using Javascript

Here I will discuss with you one of control, the feature of FileUpload control in ASP.NET. Using FileUpload control in ASP.NET you can upload multiple images using javascript and store images in selected folder.

This only need Jquery.min.js and FileUpload control.

Screen shot:

1. Multiple Images Upload

2. Choose Mulitple images

2. Preview of Multiple Images

Here is the example:

Script Path

//Here is the open source jquery file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

Body

//Here is the source code of body

<body style="margin: 0px; padding: 0px;">
    <form id="form1" runat="server">
    <div align="center" style="width: 100%; height: auto; background-color: #cfcfcf;">
        <div style="width: 960px; height: auto;">
            <h1>
                Multiple image upload with preview by Manjunath Bilwar</h1>
            <div>
                <input type="file" id="choose" multiple="multiple" />
                <br>
                <div id="uploadPreview">
                </div>
            </div>
        </div>
    </div>

Script 

//Here is the javascript creating preview thumbnails of multiple images

    <script type="text/javascript">
        // var url = window.URL || window.webkitURL; // alternate use

        function readImage(file) {

            var reader = new FileReader();
            var image = new Image();

            reader.readAsDataURL(file);
            reader.onload = function(_file) {
                image.src = _file.target.result;              // url.createObjectURL(file);
                image.onload = function() {
                    var w = this.width,
                h = this.height,
                t = file.type,                           // ext only: // file.type.split('/')[1],
                n = file.name,
                s = ~ ~(file.size / 1024) + 'KB';
                    $('#uploadPreview').append('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
                };
                image.onerror = function() {
                    alert('Invalid file type: ' + file.type);
                };
            };

         }
        $("#choose").change(function(e) {
            if (this.disabled) return alert('File upload not supported!');
            var F = this.files;
            if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
        });
   
    </script>

    </form>
</body>

 

Download Link

//Here you can download the simple demo project of Multiple Images upload

https://drive.google.com/file/d/0B7XVDU9gdC-lYTdHY2duRUMyNDQ/edit?usp=sharing 

If you have any query comment will be appreciated :)

Styled Checkboxes with pure CSS that work upto IE5 and cross browser

 

Styled Checkboxes with pure CSS that work upto IE5 and cross browser

Styled checkboxes with pure CSS

The idea is that using the ':before' pseudo-class allows us to define the checkbox style in pure CSS, using the 'content' attribute to define the check symbol used and the ':checked' pseudo-selector to switch it. ':before' has to be on the subsequent element so that we can select it properly (you can't define ':before' for <input> elements).

IE 8 doesn't support ':checked' so we switch a class on it using jQuery and IE 6 & 7 don't support ':before' so we add a <span> to do its job.

IE fallbacks currently don't work! Feel free to suggest fixes :-) 

Demo

 

 

CSS

<style type="text/css">
.ckbox
{
width: 25px;
height: 25px;
}
.custom-checkbox
{
position: relative;
display: inline-block;
}

.custom-checkbox > .box
{
position: relative;
display: block;
width: 25px;
height: 25px;
background-color: #E5E5E5;
padding: 0px;
margin: 0px;
}

.custom-checkbox > .box > .tick
{
position: absolute;
left: 4px;
top: 7px;
width: 14px;
height: 6px;
border-bottom: 4px solid #000;
border-left: 4px solid #000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
display: none;
}

.custom-checkbox > input:checked + .box > .tick
{
display: block;
}

.custom-checkbox > input
{
position: absolute;
outline: none;
left: 0;
top: 0;
padding: 0;
width: 25px;
height: 25px;
border: none;
margin: 0;
opacity: 0;
z-index: 1;
}

</style> 

Script

//Add jquery file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

//Checkbox Check click call the function

<script type="text/javascript">
  GetSelectedValue();
    function GetSelectedValue() {
    var final = '';

    $('.ckbox:checked').each(function() {

                var values = $(this).val();
                final += values + ",";       
     });
     alert(final);
}
</script>

HTML

 
<body>
 <form action="" method="GET">
  <table style="background-color: #E5E5E5;">
   <tr>
    <td>
      <span class="custom-checkbox">
      <input onclick="GetSelectedValue();" id="fileItem" name="fileItem"   type="checkbox" class="ckbox" value="1" checked="checked" />
      <span class="box" ><span class="tick"></span></span>
      </span>
      <input id="fileId" name="fileId" type="hidden" value="" />
    </td>
    <td>
      <label for="fileItem" title="">Check</label>

       <div class="custom-checkbox">
          chkChecked
       </div>
   </td>
  </tr>
  <tr>
   <td>
     <span class="custom-checkbox">
     <input onclick="GetSelectedValue();" id="fileItem1" name="fileItem1" type="checkbox" class="ckbox" value="2" />
     <span class="box" ><span class="tick"></span></span>
     </span>
     <input id="fileId" name="fileId" type="hidden" value="" />
  </td>
  <td>
    <label for="fileItem1" title="">Check</label>

   <div class="custom-checkbox">
     chkChecked
    </div>
   </td>
  </tr>
 </table>
</body> 

Download Link

https://drive.google.com/file/d/0B7XVDU9gdC-lQnlUV2Fqc3BSYUU/edit?usp=sharing