codeigniter, JavaScript, jquery

Integrating Elfinder and ckeditor


1. In view file

// link the required js and css

<script src=”<?php echo assets_url( ‘admin/lib/jquery-1.7.2.min.js’ );?>” type=”text/javascript”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js”></script&gt;
<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php echo assets_url( ‘js/plugins/elfinder/css/elfinder.min.css’ );?>”>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php echo assets_url( ‘js/plugins/elfinder/css/theme.css’ );?>”>

<script src=”<?php echo assets_url( ‘js/plugins/ckeditor/ckeditor.js’ );?>”></script>
<script src=”<?php echo assets_url( ‘js/plugins/ckeditor/ckeditor.js’ );?>”></script>
<script src=”<?php echo assets_url( ‘js/plugins/ckeditor/adapters/jquery.js’ );?>”></script>
<script src=”<?php echo assets_url( “js/plugins/elfinder/js/elfinder.min.js” ) ?>”></script>

2. initialize the elfinder

<script type=”text/javascript”>
    $(document).ready(function(){
 // setting base url for javascript [ using codeigniter ]
 var base_url = ‘<?php echo base_url(); ?>’;
// new config for ckeditor dialog box
CKEDITOR.on(‘dialogDefinition’, function (event) {
    var editor = event.editor;
    var dialogDefinition = event.data.definition;
   // var dialogName = event.data.name;
    var dialogName = “image”;
    var tabCount = dialogDefinition.contents.length;
    for (var i = 0; i < tabCount; i++) { //цикл для замены клика всех кнопок “Посмотреть на сервере”
        var browseButton = dialogDefinition.contents[i].get(‘browse’);
        if (browseButton !== null) {
            browseButton.hidden = false;
            browseButton.onClick = function (dialog, i) {
                $(‘<div id=”elfinderz” \>’).dialog({
                    modal: true,
                    width: “70%”,
                    title: ‘Togally Assets’,
                    dialogClass: “elfinderz-filez”,
                    zIndex: 9999999,
                    create: function (event, ui) {
                        $(this).elfinder({
                            resizable: false,
                            lang: ‘en’,
                            url: base_url + ‘assets/js/plugins/elfinder/php/connector.php?mode=’ + dialogName,
                            getFileCallback: function (url) {
                                var dialog = CKEDITOR.dialog.getCurrent();
                                if (dialog._.name == “image”) {
                                    var urlObj = ‘txtUrl’
                                } else if (dialog._.name == “flash”) {
                                    var urlObj = ‘src’
                                } else if (dialog._.name == “link”) {
                                    var urlObj = ‘url’
                                } else {
                                    return false
                                };
                                dialog.setValueOf(dialog._.currentTabId, urlObj, url);
                                $(‘a.ui-dialog-titlebar-close[role=”button”]’).click();
                return false;
                            }
                        }).elfinder(‘instance’)
                    }
                })
            }
        }
    }
});
// initializing elfinder
$( ‘textarea.editor-ck’ ).ckeditor({height:”500px”})
});
</script>
Resource
=============
// for stand alone purpose with out ckeditor ( in elfinder/elfinder.html )

<script type=”text/javascript” charset=”utf-8″>
// Helper function to get parameters from the query string.
function getUrlParam(paramName) {
var reParam = new RegExp(‘(?:[\?&]|&amp;)’ + paramName + ‘=([^&]+)’, ‘i’) ;
var match = window.location.search.match(reParam) ;

return (match && match.length > 1) ? match[1] : ” ;
}
$().ready(function() {
var funcNum = getUrlParam(‘CKEditorFuncNum’);

var elf = $(‘#elfinder’).elfinder({
url : “http://192.168.123.10/togally-dev/assets/js/plugins/elfinder/php/connector.php&#8221;,
getFileCallback : function(file) {
window.opener.CKEDITOR.tools.callFunction(funcNum, file);
window.close();
},
resizable: false
})
});
</script>

Advertisements
ajax, JavaScript, jquery

live updating select option with chosen


If you guys have ever used chosen plugin. you might have end up trying dynamically changing selection option with javascript.
Here is code below, that you can update option dynamically with javascript for chosen plugin.

 

<select name="names" id="names" >
    <option value="1"> Niraj </option>
    <option value="2" >Buddha</option>
    <option value="3">Dino</option>
    <option value="4">AL</option>
</select>

$("#name").chosen();

// updating again with javascript
document.getElementById('names').value = 4;
$('#names').trigger('liszt:updated');
CSS 3, Design Inspiration, JavaScript, jquery

Basic jquery plugin developement / css3 round image


Note:

-----------------------------------------

1. Just a quick plugin development, to fix my work. You may extend it use it distribute it and what ever....................

Objective of the post

--------------------------------------

1. Basic Plugin development

2. implementing css3 round image style

-------------------------------------------------

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

// plugin start from here

// this hooks a new function to jquery [ $.fn.circle_me = function ]

/*

plugin name : circle_me

author : Jumper

email : neerooze@gmail.com

*/
$.fn.circle_me = function(options) {
console.log('Init circle me');

// default styles

var _style = {
             border: '1px solid #DDD',
             borderRadius: '50%',
             display: 'inline-block',
             height:"200px",
             width:"200px"
};
// over ridding the default style with users style
_style = $.extend( _style, options);

/*
Here   "  return "  is so important if you want to add changeable function.

eg:         $(".circle_now").circle_me().hide();

if you do not add return, here hide function will not work but still plugin will work  fine. If you do not want to add chain function you may ignore return function.

*/
return $(this).each(function(){
              $(this).css(_style);
              var _bg = $(this).attr('src');
              $(this).css({"backgroundImage":_bg});
        });

}

// plugin ends here
$(document).ready(function(){

     // initializing plugin basic

     $('.circle').circle_me();

    // initializing plugin with custom options

     $('.circle').circle_me( {  height: "300px", width: "400px", borderRadius:" 70%"});
});
</script>

// html part

<img class="circle"  src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/67563_10151525052674927_2120163905_n.jpg" />

DEMO
Cheers..
JavaScript

Small lib to save in localStorage


var storage= {
  setItem: function(key, val) {
   if (!val) { val  = null; return;}
 if (typeof val == "object") {
 val = JSON.stringify(val); // type casting object into string
 }
 localStorage.setItem(key, val);
 },
 getItem: function(key) {
 var val = localStorage.getItem(key);

 if (!val) {return;}

 // parsing stringified object back to object
 len = val.length;
 if (val[0] == "{" && val[len-1] == "}") {
 val = JSON.parse(val);
 }

 return val;
 }
}

// TESTING IN CONSOLE.

storage.setItem("ID",{name:"Jumper"});
var id = storage.getItem("ID");
console.log("name : "+id.name);


JavaScript, jquery

Jquery live custom search in table view


Here is some simple live searching tips tat you may implement easily.

table structure

<table id=”content_table” >

<thead>

<tr>…</tr>

<tr>…</tr>

<tr>…</tr>

</thead>

<tbody>

<tr>…</tr>

<tr>…</tr>

<tr>…</tr>

</tbody>

</table>

just create table structure with some ID, here below i have made some screen shot hope you guys will get it he he …..:D

Code :

(function($) {
$(document).ready( function() {
var _val = ”;
$(‘#q’).live(‘keyup’, function(){
_q = $(this).val();
$(‘#content_table tbody tr’).each(function(){
var _tr = this;
$(this).find(‘td’).each(function(){
_val += $(this).text()+’ ‘;
})
_val = _val.toLowerCase();
_data = _val.search(_q);
if(_data > -1){
console.log(‘found here’);
$(_tr).fadeIn();
}else{
$(_tr).fadeOut();
console.log(‘not found here’);
}
_val = ”;

})
});

});
})(jQuery)

ajax, JavaScript, php

country list arrray php/json


$options["AF"] = "Afghanistan";  
$options["AX"] = "Åland Islands";  
$options["AL"] = "Albania ";  
$options["DZ"] = "Algeria ";  
$options["AS"] = "American Samoa";  
$options["AD"] = "Andorra";  
$options["AO"] = "Angola ";
$options["AI"] = "Anguilla ";
$options["AQ"] = "Antarctica ";
$options["AG"] = "Antigua and Barbuda ";
$options["AR"] = "Argentina";
$options["AU"] = "Australia ";
$options["AT"] = "Austria ";
$options["AZ"] = "Azerbaijan";
$options["BS"] = "Bahamas ";
$options["BH"] = "Bahrain ";
$options["BD"] = "Bangladesh ";
$options["BB"] = "Barbados ";
$options["BY"] = "Belarus";
$options["BE"] = "Belgium ";
$options["BZ"] = "Belize ";
$options["BJ"] = "Benin ";
$options["BM"] = "Bermuda ";
$options["BT"] = "Bhutan";
$options["BO"] = "Bolivia ";
$options["BA"] = "Bosnia and Herzegovina ";
$options["BW"] = "Botswana ";
$options["BV"] = "Bouvet Island ";
$options["BR"] = "Brazil";
$options["IO"] = "British Indian Ocean Territory ";
$options["BN"] = "Brunei Darussalam ";
$options["BG"] = "Bulgaria ";
$options["BF"] = "Burkina Faso ";
$options["BI"] = "Burundi";
$options["KH"] = "Cambodia ";
$options["CM"] = "Cameroon ";
$options["CA"] = "Canada ";
$options["CV"] = "Cape Verde ";
$options["KY"] = "Cayman Islands ";
$options["CF"] = "Central African Republic ";
$options["TD"] = "Chad ";
$options["CL"] = "Chile ";
$options["CN"] = "China ";
$options["CX"] = "Christmas Island";
$options["CC"] = "Cocos (Keeling) Islands ";
$options["CO"] = "Colombia ";
$options["KM"] = "Comoros ";
$options["CG"] = "Congo ";
$options["CD"] = "Congo, the Democratic Republic of the";
$options["CK"] = "Cook Islands ";
$options["CR"] = "Costa Rica ";
$options["CI"] = "Côte D'Ivoire";
$options["HR"] = "Croatia ";
$options["CU"] = "Cuba ";
$options["CY"] = "Cyprus ";
$options["CZ"] = "Czech Republic ";
$options["DK"] = "Denmark";
$options["DJ"] = "Djibouti ";
$options["DM"] = "Dominica ";
$options["DO"] = "Dominican Republic ";
$options["EC"] = "Ecuador ";
$options["EG"] = "Egypt";
$options["SV"] = "El Salvador ";
$options["GQ"] = "Equatorial Guinea ";
$options["ER"] = "Eritrea ";
$options["EE"] = "Estonia ";
$options["ET"] = "Ethiopia ";
$options["FK"] = "Falkland Islands (Malvinas) ";
$options["FO"] = "Faroe Islands ";
$options["FJ"] = "Fiji ";
$options["FI"] = "Finland ";
$options["FR"] = "France";
$options["GF"] = "French Guiana ";
$options["PF"] = "French Polynesia ";
$options["TF"] = "French Southern Territories ";
$options["GA"] = "Gabon ";
$options["GM"] = "Gambia ";
$options["GE"] = "Georgia ";
$options["DE"] = "Germany ";
$options["GH"] = "Ghana ";
$options["GI"] = "Gibraltar ";
$options["GR"] = "Greece";
$options["GL"] = "Greenland ";
$options["GD"] = "Grenada ";
$options["GP"] = "Guadeloupe ";
$options["GU"] = "Guam ";
$options["GT"] = "Guatemala";
$options["GG"] = "Guernsey ";
$options["GN"] = "Guinea ";
$options["GW"] = "Guinea-Bissau ";
$options["GY"] = "Guyana ";
$options["HT"] = "Haiti";
$options["HM"] = "Heard Island and Mcdonald Islands ";
$options["VA"] = "Holy See (Vatican City State) ";
$options["HN"] = "Honduras ";
$options["HK"] = "Hong Kong ";
$options["HU"] = "Hungary";
$options["IS"] = "Iceland ";
$options["IN"] = "India ";
$options["ID"] = "Indonesia ";
$options["IR"] = "Iran, Islamic Republic of ";
$options["IQ"] = "Iraq ";
$options["IE"] = "Ireland ";
$options["IM"] = "Isle of Man ";
$options["IL"] = "Israel ";
$options["IT"] = "Italy ";
$options["JM"] = "Jamaica";
$options["JP"] = "Japan ";
$options["JE"] = "Jersey ";
$options["JO"] = "Jordan ";
$options["KZ"] = "Kazakhstan ";
$options["KE"] = "KENYA";
$options["KI"] = "Kiribati ";
$options["KP"] = "Korea, Democratic People's Republic of ";

echo json_encode($options);