jQuery substring

jQuery('#textArea').keypress(function() {
 var text = jQuery('#textArea').val();
 if(text.length > 400) {
  text = text.substring(0, 400);
  jQuery('#textArea').val(text);
 }
});

jQuery refresh page

jQuery('#refresh-link').click(function() {
        location.reload();
});

jQuery message box

Many times there is a need for showing message to a user. If you would like to show your user modal window message, try following – jQuery message box.
Before we start – you can take a look at the demo message – made just for you! Click here…
In order to show jQuery message box – we first need to setup a CSS for both message and background. Copy following CSS into your CSS file in order to set style.

#darkbg { display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #000; 
 opacity: .5;
 filter: alpha(opacity=50);
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
#message_box { width: 300px;
 height: 150px;
 background: #fff; 
 border: 4px solid #f0f0f0; border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 
 position: absolute;
 top: 100px;
 left: 50%;
 margin-left: -150px;
 
 text-align: center;
 z-index: 1000;
 display: none;
}
#message_box input[type=button] { float: right;
 margin-right: 10px;
}

Now that we have CSS setup, it is time to write some JavaScript code. This JavaScript code is heart and soul of this jQuery message box. So, copy next lines into your .js file.

var message_box = function() {
 var button = '<input type="button" onclick="message_box.close_message();" value="Okay!" />';
 return {
  show_message: function(title, body) {
   if(jQuery('#message_box').html() === null) {
    var message = '<div id="message_box"><h1>' + title + '</h1>' + body + '<br/>' + button + '</div>';
    jQuery(document.body).append( message );
    jQuery(document.body).append( '<div id="darkbg"></div>' );
    jQuery('#darkbg').show();
    jQuery('#darkbg').css('height', jQuery('html, body').height());
 
    jQuery('#message_box').css('top', jQuery('html, body').scrollTop() + 150);
    jQuery('#message_box').show('slow');
   } else {
    var message = '<h1>' + title + '</h1>' + body + '<br/>' + button;
    jQuery('#darkbg').show();
    jQuery('#darkbg').css('height', jQuery('html, body').height());
 
    jQuery('#message_box').css('top', jQuery('html, body').scrollTop() + 150);
    jQuery('#message_box').show('slow');
    jQuery('#message_box').html( message );
   }
  },
  close_message: function() {
   jQuery('#message_box').hide('fast');
   jQuery('#darkbg').hide();
  }
 }
}();

 Now, we are almost done, we just need to be able to init message showing
 from our jQuery message box. This can be done in simple JavaScript 
function call:
message_box.show_message('Hi!', 'Whatup?!');

You can bind it to onclick event as well:

jQuery('#some_link').onclick(function() {
    message_box.show_message('Hi!', 'Whatup?!');
});

jQuery visible

Use jQuery visible selector to check if element is visible, and make a menu. To use jQuery visible selector and check if element is visible, just use following snippet.

if(jQuery('#your-jquery-visible-id').is(':visible')) {
 alert('jQuery says: "It is visible!"');
} else {
 alert('jQuery says: "It is not visible."');
}

Now that we know how to use jQuery to check if element is visible – we can build simple menu. The first part would be HTML.

<ul id="nav-jquery-visible">
 <li>
  <a href="javascript:void(0);" onclick="toggleSubmenu(this)">Music</a>
  <ul>
   <li><a href="http://shufflable.com/en/play/music/rock">Rock</a></li>
   <li><a href="http://shufflable.com/en/play/music/pop">Pop</a></li>
   <li><a href="http://shufflable.com/en/play/music/hard+rock">Hard rock</a></li>
   <li><a href="http://shufflable.com/en/play/music/blues">Blues</a></li>
   <li><a href="http://shufflable.com/en/play/music/metal">Heavy metal</a></li>
  </ul>
 </li>
 <li>
  <a href="javascript:void(0);" onclick="toggleSubmenu(this)">Programming</a>
  <ul>
   <li>PHP</li>
   <li>JavaScript</li>
   <li>Ruby</li>
   <li>C</li>
   <li>Java</li>
  </ul>
 </li>
</ul>

Than we make sure in CSS that submenu is not visible.

#nav-jquery-visible ul {
 display: none;
}

Finaly, we make JavaScript to put jQuery visible in use.

function toggleSubmenu(element) {
 var child = jQuery(element).parent().filter(':first').children('ul');
 
 if(jQuery(child[0]).is(':visible')) {
  jQuery(child[0]).slideUp();
 } else {
  jQuery(child[0]).slideDown();
 }
}

Get current page URL and title with jQuery

<p>Current page URL: <span id="this_url">www.example.com</span>.</p>
<p>Current page title: <span id="this_title">mytitle</span>.</p>
 
<script type="text/javascript">
jQuery(document).ready(function () {
 var href = jQuery(location).attr('href');
 var url = jQuery(this).attr('title');
 jQuery('#this_title').html('<strong>' + href + '</strong>');
 jQuery('#this_url').html('<strong>' + url + '</strong>');
});

</script>

Toggle div using jQuery

<p>Click on the link to see how to use <a href="javascript:void(0);" id="how-to">toggle in jQuery</a>?</p>
 
<div style="display: none;" id="toggle-div">
You should not write inline style, but I used it to make example of using slide toggle with jQuery shorter.
</div>
 
<script>
jQuery("#how-to").click(function () {
 jQuery("#toggle-div").slideToggle("slow");
});
</script>

JavaScript translate

var javaScriptTranslate = function() {
    var translations = {};
 
    return {
        translate: function(text) {
            if(typeof translations[text] === 'undefined') {
                return text;
            } else {
                return translations[text];
            }
        },
        init: function(translationArray) {
            translations = translationArray;
        }
    };
}();

javaScriptTranslate.init(<?php echo json_encode($translation); ?>);

alert(javaScriptTranslate.translate('Hello dear friend - I am JavaScript translate class'));

Mujibur Rahman

Monday, 18 April 2011

Some Jquery Tips