Facebook: Upcoming Breaking Changes March 2013

The following changes can be enabled/disabled using the “March 2013 Breaking Changes” migration until March 6th when they will go into effect permanently for everyone:

1-No more accessing mailbox FQL tables without a user session
It will not longer be possible to access the message, thread, or mailbox_folder FQL tables without a user session.
Continue reading …

Posted: Friday, August 31st, 2012
Author: Parvez

Twitter Bootsrap : Key Changes And New Features

The twitter bootsrap has alunch new version of bootsrtap 2.1.new version has added some great new features and fixed tones of bugs.
Below are some brief overview of new bootstrap 2.1.

•Submenu support on dropdowns. We avoided this for some time as we thought it would unnecessarily complicate things, but we’ve backtracked on that and opted to add them in. See the docs for more info.

Continue reading …

Posted: Saturday, May 19th, 2012
Author: Parvez

Add/Remove Selected Element from MultiSelect

Hi, now we are discussing how to move element between two multi select. First we will create two multi select element.

view plaincopy to clipboardprint?
  1. <form name=“Example” id=“Example” action=“ ” method=“post” onsubmit=“javascript:test();”>  
  2. <table border=“0″ cellpadding=“3″ cellspacing=“0″>  
  3.     <tr>  
  4.         <td>  
  5.             <select id =“Features” name=“Features[]“ multiple=“multiple”>  
  6.                 <option value=“2″>Row 2</option>  
  7.                 <option value=“4″>Row 4</option>  
  8.                 <option value=“5″>Row 5</option>  
  9.                 <option value=“6″>Row 6</option>  
  10.                 <option value=“7″>Row 7</option>  
  11.                 <option value=“8″>Row 8</option>  
  12.                 <option value=“9″>Row 9</option>  
  13.             </select>  
  14.         </td>  
  15.         <td align=“center” valign=“middle”>  
  16.             <input type=“Button” value=“Add >>” style=“width:100px” id=“add”/>  
  17.     
  18.      
  19.   
  20.               
  21.   
  22.             <input type=“Button” value=“<< Remove” style=“width:100px” id=“remove”/>  
  23.      
  24.         </td>  
  25.         <td>  
  26.             <select name=“FeatureCodes[]“ size=“9″ id=“FeatureCodes” multiple=“multiple”>  
  27.                 <option value=“1″>Row 1</option>  
  28.                 <option value=“3″>Row 3</option>  
  29.             </select>  
  30.      
  31.         </td>  
  32.     
  33. <td><input type=“text” name=“tt” value=“55″/></td>  
  34.     </tr>  
  35.  <input type=“submit” name=“submit” value=“submit”/>  
  36. </table>  
  37.   
  38. </form>  
  39.   
  40.   
  41. <script>  
  42.   
  43. $().ready(function() {  
  44.    $(‘#add’).click(function() {  
  45.     return !$(‘#all_artist option:selected’).remove().appendTo(‘#selected_atrist’);  
  46.    });  
  47.    $(‘#remove’).click(function() {  
  48.     return !$(‘#selected_atrist option:selected’).remove().appendTo(‘#all_artist’);  
  49.    });  
  50.     
  51.    
  52.   });  
  53.    
  54.   
  55. function selectall()  
  56. {  
  57. $(‘#selected_atrist’).find(‘option’).each(function() {  
  58.    $(this).attr(‘selected’, ‘selected’);  
  59.   });  
  60. }  
  61. </script>  

View

moving element multiselect

Posted: Wednesday, May 16th, 2012
Author: Parvez

How to use Bootstrap tooltip

Here below is simple bootstrap tool tip example. bootstrap is very attractive library of twitter.
Twitter Bootstrap is powerful library which has included Jquery,javascript and css.

First we Include js and css file of twitter library.
view plaincopy to clipboardprint?
  1. <!– Le styles –>  
  2.     <link href=“assets/css/bootstrap.css” rel=“stylesheet”>  
  3.     <link href=“assets/css/bootstrap-responsive.css” rel=“stylesheet”>  
  4.     <link href=“assets/css/docs.css” rel=“stylesheet”>  
  5.    <script src=“assets/js/jquery.js”></script>  
  6.    <script src=“assets/js/bootstrap-tooltip.js”></script>  
  7.    <script src=“assets/js/bootstrap-popover.js”></script>  
  8.    <script src=“assets/js/bootstrap-transition.js”></script>  
Now we will create html element in file for access tool tip:
view plaincopy to clipboardprint?
  1. <a href=“#” rel=“tooltip” data-original-title=“hello”>hover on me</a>  

and call javascript method for tooltip in page:

view plaincopy to clipboardprint?
  1. <script type=“text/javascript”>  
  2.   $(document).ready(function () {  
  3.     $(“[rel=tooltip]“).tooltip();  
  4.   });  
  5. </script>  

We also passed parameter for tool tip position and delay:

Example:

view plaincopy to clipboardprint?
  1. $(document).ready(function(){  
  2.                 $(‘#example’).tooltip({‘placement’:‘top’, ‘trigger’ : ‘hover’});  
  3.             });  

More Option Is:

Name type default description
animation boolean true apply a css fade transition to the tooltip
placement string|function ‘top’ how to position the tooltip – top | bottom | left | right
selector string false If a selector is provided, tooltip objects will be delegated to the specified targets.
title string | function ” default title value if `title` tag isn’t present
trigger string ‘hover’ how tooltip is triggered – hover | focus | manual
delay number | object 0 delay showing and hiding the tooltip (ms) – does not apply to manual trigger typeIf a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

Result

Posted: Tuesday, May 1st, 2012
Author: Parvez

Simple example with help Twitter Bootstrap

Hi,
Below is simple example of bootstrap library.Its very rich UI library.

view plaincopy to clipboardprint?
  1. <html lang=“en”>  
  2.   <head>  
  3.     <meta charset=“utf-8″>  
  4.     <title>Upgrading · Twitter Bootstrap</title>  
  5.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0″>  
  6.   
  7.     <!– Le styles –>  
  8.     <link href=“assets/css/bootstrap.css” rel=“stylesheet”>  
  9.     <link href=“assets/css/bootstrap-responsive.css” rel=“stylesheet”>  
  10.     <link href=“assets/css/docs.css” rel=“stylesheet”>  
  11.   
  12.   </head>  
  13.   
  14.   <body>  
  15.     <div class=“navbar navbar-fixed-top”>   
  16. <div class=“tab-content”>  
  17.           <div id=“lA” class=“tab-pane active”>  
  18.             <p>I’m in Section A.</p>  
  19.           </div>  
  20.           <div id=“lB” class=“tab-pane”>  
  21.             <p>Howdy, I’m in Section B.</p>  
  22.           </div>  
  23.           <div id=“lC” class=“tab-pane”>  
  24.             <p>What up girl, this is Section C.</p>  
  25.           </div>  
  26.         </div>  
  27.       </div>  
  28. <script type=“text/javascript” src=“http://platform.twitter.com/widgets.js”></script>  
  29.     <script src=“assets/js/jquery.js”></script>  
  30.     <script src=“assets/js/google-code-prettify/prettify.js”></script>  
  31.     <script src=“assets/js/bootstrap-transition.js”></script>  
  32.     <script src=“assets/js/bootstrap-alert.js”></script>  
  33.     <script src=“assets/js/bootstrap-modal.js”></script>  
  34.     <script src=“assets/js/bootstrap-dropdown.js”></script>  
  35.     <script src=“assets/js/bootstrap-scrollspy.js”></script>  
  36.     <script src=“assets/js/bootstrap-tab.js”></script>  
  37.     <script src=“assets/js/bootstrap-tooltip.js”></script>  
  38.     <script src=“assets/js/bootstrap-popover.js”></script>  
  39.     <script src=“assets/js/bootstrap-button.js”></script>  
  40.     <script src=“assets/js/bootstrap-collapse.js”></script>  
  41.     <script src=“assets/js/bootstrap-carousel.js”></script>  
  42.     <script src=“assets/js/bootstrap-typeahead.js”></script>  
  43.   </body>  
  44. </html>  

Posted: Tuesday, May 1st, 2012
Author: Parvez

Twitter Bootstrap

Hi every one,
Now we are discussing very good css and javascript library.which is developed by twitter.
You can download http://twitter.github.com/bootstrap/

Here’s a look at some of the most prominent changes:

Completely overhauled documentation for nearly every component
A brand new Customize page to tailor your Bootstrap experience
New 12-column, responsive grid system
New table styles with a common base class for improved compatibility with other tools
New form styles with smarter defaults, requiring less HTML
Icons, graciously provided by Glyphicons
New, smarter navigation components
New buttons, button groups, and button dropdowns
New, simpler alert messages
New javascript plug-ins like carousel, collapse, and typeahead

Posted: Sunday, April 29th, 2012
Author: Parvez

CSS coding standard

CSS Standards

File Formatting

CSS filenames must be named using underscores (_) to demarcate new words

Naming Conventions

Separate words in CSS selectors should be demarcated with hyphens (e.g. .main-container).

Coding Style

* The unit of indentation is four spaces
* Selectors should be followed by one space, with the opening brace on the same line
* Properties should have one space after the colon
* Closing braces should be on a new line
* A metric value of 0 should be represented as 0 rather than 0px, 0em, etc.
* Textual representations of colors should be avoided. Use #fff over white
* Short representations of colors should be used if possible. Use #fff over #ffffff
* Lowercase letters should be used for almost every character in a CSS document. The only exception might be selector names and filenames. Otherwise, use lowercase letters for selectors, properties, values, and colors.

view plaincopy to clipboardprint?
  1. .selector {  
  2.     color: #000;      
  3. }  

Multiple selectors should be entered on separate lines:
view plaincopy to clipboardprint?
  1. .selector-1,  
  2. .selector-2,  
  3. .selector-3 {  
  4.     display: block;  
  5. }  

Posted: Sunday, October 2nd, 2011
Author: Parvez

Stylish and pure CSS based tooltip

Now I am describing how you will design fancy Toot tip with help of CSS.This is pure css tool tip which will customized by you based on your requirement.

Below are CSS class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

a.info {
font-family:verdana,arial,helvetica,sans-serif;
position:relative;
border-bottom:1px dashed #ccc;
text-decoration:none;
color:#333333;
}
/* Added to solve the z-order problem of IE */
a.info:hover {
    z-index:2;
}
/* End */
a.info span{
    display: none;
}
a.info:hover span{
 display:block;
 position:absolute;
 z-index:1;
 bottom:2em;
 left:-3em;
 width:23em;
 border:1px solid #F2AF1D;
 background-color:#FDF1D5;
 color:#000;
 text-align:justify;
 font-size:10px;
 font-weight:normal;
 padding:3px;
 line-height:15px;
}
How to call above css tool tip class on HTML element
1

<a href="javascript:void(null)" class="info">Testtooltip<span>Click to dial</span></a>
Posted: Sunday, October 2nd, 2011
Author: Parvez

Rounded corner div with CSS

Hi now we are discussing how you will design your div rounded corner with help of CSS,For rounded corner CSS gives “moz-border-radius” (for mozilla) properties which takes radius of corner. The properties may differ according the browser.

view plaincopy to clipboardprint?
  1. .user_listBox{  
  2.     -moz-border-radius: 9px 9px 9px 9px;  
  3.     background-color: #FFFFF;  
  4.   float:left;  
  5.     border: 1 solid black;  
  6.     color: black;  
  7.     font-size: 10px;  
  8.     height: 60px;  
  9.     line-height: 135%;  
  10.     margin: 1px;  
  11.     padding: 0 0 0 1px;  
  12.     position: relative;  
  13.     width: 280px;  
  14.   
  15. }