Category Archives: jQuery

How to write a superscript Registered ® in product name and page titles in CMS

Peoples are complaining that the products names or page titles which are registered trademarks. They are not shown superscript as the customer wishes them to be. They aren’t able to add <sup> tags in the titles.

You can simply add the following JavaScript snippet that replaces all occurrences of ® with ®.


<script type="text/javascript">
$('body :not(script)').contents().filter(function() {
   return this.nodeType === 3;
}).replaceWith(function() {
   return this.nodeValue.replace(/[®]/g, '<sup>$&</sup>');
});
</script>

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

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');
        $('

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