Category Archives: jQuery

How to remove placeholder on focus

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('input,textarea').focus(function(){
   jQuery(this).data('placeholder',jQuery(this).attr('placeholder'))
          .attr('placeholder','');
}).blur(function(){
   jQuery(this).attr('placeholder',jQuery(this).data('placeholder'));
});
});  
</script>

Add placeholder using jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function(e) {
    jQuery(".emailinput").attr("placeholder", "Email address");
});
</script>

<input class="emailinput" name="" required="" type="email">


Example:

Tooltip on mouse over

tooltip

Hey, Check this cool tooltip with lots of features. It’s fully customizable & easy to use.

.tooltip {
 display:none;
 position:absolute;
 border:1px solid #333;
 background-color:#161616;
 border-radius:5px;
 padding:10px;
 color:#fff;
 font-size:12px;
}


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});
</script>


Example:

Tooltip on the link

Tooltip on the title

Hide and show toggle – jQuery

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#my_toggle button").click(function(){
        $("#my_toggle div").slideToggle();
    });
});
</script>
</head>
<body>
<div id="my_toggle">
  <button>Toggle slideUp() and slideDown()</button>
  <div>This is a paragraph.</div>
</div>
</body>
</html>


Example:

This is a paragraph.