webdeveloper's

If you need to put a border on only three sides of an element, there are a bunch of ways you can do it. You can specifically declare the border on just three sides: div { border-top: 1px solid red; border-right: 1px solid red; border-bottom: 1px solid red; } Verbose, but easy to understand. Or, you could declare just a border which will cover all four sides and remove the one you don't want. div { border: 1px solid red; border-left: 0; } Much shorter, but relies on understanding and maintaining that the border removing override is kept after the border declaration. Or, you could declare the color and styling and use shorthand only the border-width to specifically declare the three sides. div { border-color: red; border-style: solid; border-width: 1px 1px 1px 0; } Shorter than the first example, but less repetitive. Just need to be aware if left border did acquire width it would already be red and solid. And then there is the fact ...

We can change default date display date in jquery data picker as we wanted like moving months back and forward and displaying particular date. As we all know script for jquery date picker, I'm just recalling the script again. $(function() { $( "#datepicker" ).datepicker(); }); Following shows some examples for changes defaults options. $(function() { $( "#datepicker" ).datepicker({ defaultDate: '-2m' }); }); Above code changes the default month to previous two months. Example, if we are in November I'll show us the month of September.  By passing in a string like following ways, we can set the default date to another one relative to the current date. Alternatively, the option also accepts a Date object: or a string in the same format as the format currently defined: defaultDate: '1/9/2010' $(function() { $( "#datepicker" ).datepicker({ defaultDate: new Date('2013,05,01') }); ...

It's possible to add logged in user image to Liferay portal. We need to add this in themes. Add the following line of code to portal_normal.vm file or any of the velocity file(.vm) where ever the user image needs to diplay. <img src="/image/user_male_portrait?img_id=$user.portraitId&amp;" alt="User Name" width="25"> You can change the width of the image as per your requirement. You can get the user name and user email address with the following code. $theme_display.getUser().getFullName() - This will give us Logged in user full name; $theme_display.getUser().getDisplayEmailAddress() - This will give us Logged in user email address.

Description: The  toggle( speed, [callback])  method toggles displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion. Syntax: Here is the simple syntax to use this method: selector .toggle( speed, [callback]); Parameters: Here is the description of all the parameters used by this method: speed:  A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000). callback:  This is optional parameter representing a function to call once the animation is complete. Example: Following is a simple example a simple showing the usage of this method: the title Toggle

Clever technique to help you on CSS hacks. CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. Download the CSS Browser Selector javascript file from following link. http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js And here's usage of the file. Copy and paste bellow line inside head section of your document. <script src="css_browser_selector.js" type="text/javascript"></script> Set CSS attributes with the code of each Browser/OS you want to hack as given bellow example. html.gecko div#header { margin: 1em; } .opera #header { margin: 1.2em; } .ie .mylink { font-weight: bold; } .mac.ie .mylink { font-weight: bold; } .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser] Available OS Codes [os]: win - Microsoft...

The jQuery Expander Plugin is a simple little jQuery plugin to hide/collapse a portion of an element's text and add a "read more" link so that the text can be viewed by the user if he or she wishes Here’s a simple way to use this plug-in your HTML Declare div with class "readmore" or apply class "readmore" to any HTML element  <div class="readmore">      The Div Text Comes Here     </div> And add the following jquery code to head section of your HTML page <head> <title>Add Read More Link</title>       <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript">     </script>     <script src="http://plugins.learningjquery.com/expander/jquery.expander.js" type="text/javascript">     </script>     <script type="text/javascript">         $(function () {     ...

For anchor tags adding active class for selected tag and changing the styles is follows. HTML code. <div class="create_d rive">      <a href="#">Some Text</aui:a>                   <a href="#">Some Text</aui:a> </div> Here is the script   $(document).ready (function(){ $('.create_drive a').click(function(){ $('.create_drive a').removeClass('active'); $(this).addClass('active'); }); });