web development

How to show sortable containers ?

Posted on by admin
Question: How to show sortable containers with JQuery?
Answer:
you can use following steps for this:

<br /> Step 1: Create a UL LI based listing<br /> Step 2: Assign ui-sortable class to UL<br /> Step 3: Assign Unique id to each LI<br /> Step 4: Write CSS for UL, LI and divs<br /> Step 5: Write JQuery code for manipulation

Example:

HTML
</p> <h1>Sorable</h1> <p></p> <div class="ui-widget"> <ul id="options" class="ui-sortable"> <li id="item_1" class="block ui-state-default"> Item 1 </li> <li id="item_2" class="block ui-state-default"> Item 2 </li> <li id="item_3" class="block ui-state-default"> Item 3 </li> <li id="item_4" class="block ui-state-default"> Item 4 </li> <li id="item_5" class="block ui-state-default"> Item 5 </li> </ul></div> <p>
CSS
<link rel="stylesheet" type="text/css" media="all" href="assets/css/ui.all.css">
JQuery
<br /> <script type="text/javascript" src="assets/js/jquery-1.6.4.min.js"></script><br /> <script type="text/javascript" src="assets/js/jquery-ui-1.8.16.custom.min.js"></script><br /> <script> $(function() { $(".ui-sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize"); alert(order); //Use AJAX POST Request to save sort order in your Database /*var url = "/sort_items"; $.ajax({ url: url, type: 'post', data: order, success: function(result) { } })*/ } }); }); </script><br />

Demo:

How to show twitter timelines on website with latest version 1.1

Posted on by admin
Question: How to show twitter timelines on website with latest version 1.1
Answer:
you can use following steps for this:

Step 1: Login with your twitter login/password @ https://dev.twitter.com/<br /> Step 2: Click on &#8220;Embedded Timelines&#8221;.<br /> Step 3: Click on &#8221; Create your own embedded timeline&#8221; Link.<br /> Step 4: Click on &#8220;Widgets&#8221; in left menu.<br /> Step 5: Click on &#8220;Create New&#8221;.<br /> Step 6: Select/Insert your required options and click &#8220;Create Widget&#8221;.<br /> Step 7: It will show a preview and embedded code on the right side.<br /> Step 8: Copy paste the code to your website and it will start working.

You can also change the look by following attributes:

  • 1: class=”twitter-timeline” //Required
  • 2: width=”300″
  • 3: height=”60″
  • 4: data-tweet-limit=”5″ //Optional, you cn skip this to show all tweets
  • 5: data-chrome=”noheader nofooter noborders noscrollbar transparent” //Optional, you can use each one according to your display requirements.
  • 6: href=”https://twitter.com/atifaquarious” //Required
  • 7: data-widget-id=”355273358344073216″ //Required

Example:

<br /> <a class="twitter-timeline" href="https://twitter.com/atifaquarious" data-chrome="noheader nofooter noborders transparent" data-widget-id="354916137634508801">Tweets by @atifaquarious</a></p> <p><script type="text/javascript">// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src=p+"://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js,fjs);}} (document,"script","twitter-wjs"); // ]]&gt;</script><br />

Demo: