jquery

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:

Uploadify with IE (Internet Explorer) destroy the session or reset the session in Codeigniter.

Posted on by admin

Problem:
On IE I see the following behavior:

– Uploadify upload the photo correctly.
– but when I click on any link or button the server redirects me to the loin page.

The investigation has shown me that after the call to Uploadify it seems that IE destroys the cookies with the session in it, therefore the user is logged out.

Solution:

If you are having logout issues during upload, then make your controller (Which you are using for uploading) a PUBLIC CONTROLLER.

For Session related issue, Please do the following:
CODE IGNITOR:
————–
Open app/config/config.php

In your config.php you can set your
$config[‘sess_match_useragent’]= FALSE;
When doing this CI 2.0 atleast, won’t create a new session for the flash object, and thus not kill your current session in IE.

How to show tabs with JQuery

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

<br /> Step 1: Create a UL LI based tabs listing<br /> Step 2: Create Div based HTML for each tab.<br /> Step 3: Assign 1 class to all divs and unique Ids to each div.<br /> Step 4: Write CSS for tabs and divs<br /> Step 5: Write JQuery code for manipulation

Example:

HTML
</p> <div id="mak_content_nav"> <ul> <li class="active"><a href="" divID="mak_div_1">Tab 1</a></li> <li><a href="" divID="mak_div_2">Tab 2</a></li> <li><a href="" divID="mak_div_3">Tab 3</a></li> </ul></div> <p> <br clear="all"></p> <div id="mak_div_1" class="tab-contents"> Contents for tab 1. </div> <div id="mak_div_2" class="tab-contents"> Contents for tab 2. </div> <div id="mak_div_3" class="tab-contents"> Contents for tab 3. </div> <p>
CSS
</p> <style> #mak_content_nav ul li{ width: 100px; float:left; border:1px solid #666; text-align:center; color:#000; } #mak_content_nav ul li a{ text-decoration:none; color:#000; } .tab-contents{ display: none; border:1px solid #666; border-top:none; width:304px; margin-left:40px; } .active{ border-bottom:none !important; } </style> <p>
JQuery
<br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script><br /> <script> function makTabs() { $('.tab-contents').hide(); $('#mak_div_1').show(); $('#mak_content_nav li a').click(function() { $('.tab-contents').hide(); var link = $(this).attr('divID'); $("#"+link).show(); $('#mak_content_nav li').removeClass('active'); $(this).parent().addClass('active'); return false; }); } $(document).ready(function() { makTabs(); }); </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: