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.

2-Removing apps from /me/accounts/ and page_admin FQL table
We will no longer show apps under /me/accounts/ in the Graph API or in the page_admin FQL table. You can access the list of apps a user is a developer on by hitting /me/applications/developer/ or using the app_role FQL table.

3-Removing redirect to docs when hitting graph.facebook.com
We will no longer return a redirect to the Graph API docs when hitting the URL http(s)://graph.facebook.com with no path.

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.

•Affix JavaScript plugin. Make anything stick to the top of the viewport as you scroll with our newest plugin, built to power our new docs navigation.

•Block level buttons. Add .btn-block to a button to make it full-width.

•State classes on table rows. Better convey success, warning, and error messages in tables.

•Improved disabled states on navs and dropdowns. Where by “improve” we mean actually present—just add .disabled to the li.

•The navbar component is now white by default, with an optional class to darken it. In order to have two options for the navbar, light and dark, we needed to have better defaults. Having a lighter default navbar means fewer lines of code as we don’t need to override anything for the basic navbar functionality and the override it again to restore the default styles. Missing the black? Just add.navbar-inverse to get the dark gray navbar back.

•Improved prepended and appended inputs. No need to place the input and.add-on on the same line of code (sorry about that by the way). Break them up as you like and they’ll still stick together with some crafty font-size working.

•New base font-size and line-height. 13px/18px is out, 14px/20px is in. This also has changed the size, line-height, and margin of our heading elements, buttons, and more.

•Added variable for navbar collapse trigger point. Instead of a fixed pixel width of 980px for triggering the collapsed navbar, we now use a variable so you can customize it for your projects.

•Fluid grid offsets. Thanks to our contributors, the fluid grid now has offset support to match our fixed (pixel) grid.

•Fluid grid system variables are no longer fixed percentages. Instead, they are calculated in LESS with percentage() based on the default, fixed-width grid variables.

•Removed LESS docs page. We will no longer document variables and mixins in two places—rewriting that stuff was painful and took too much time. Instead, just checkout the .less files.

Sources taken from:
github bootstrap change log

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. }