• About Sarwar
  • Portfolio
  • আমার বাংলা

sarwar's weblogs

~ story of web applications…..

sarwar's weblogs

Category Archives: JavaScript

I just share my experience about javascript.

Drag and Drop dashboard using jquery and save state of each change

17 Friday Feb 2012

Posted by Sarwar in JavaScript, jquery, jQuery UI, PHP

≈ 13 Comments

Tags

dashboard, drag, Drag & Drop, drop, jquery, jqueryui, sortable


I found some solution to make drag and drop on dashboard. After drag and drop we need to keep save the state for each user so when user login they can get their own dashboard what they saved last time.
First download and add jquery and jqueryui to your page

Lets assume we have 3 column, here is the code

<!-- This is first column -->
<div id="column_1" class="column">
  <div id="item_1" class="dragbox">
    <!-- this one is first item of 1st column -->
    <h2>Title for 1</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_2" class="dragbox">
    <!-- this one is second item of 1st column -->
    <h2>Title for 2</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_3" class="dragbox">
    <!-- this one is third item of 1st column -->
    <h2>Title for 3</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
</div>

<!-- 2nd Column -->
<div id="column_2" class="column">
  <div id="item_4" class="dragbox">
   <!-- this one is 4th item of 2nd column -->
   <h2>Title for 4</h2>
   <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_5" class="dragbox">
    <!-- this one is 5th item of 2nd column -->
   <h2>Title for 5</h2>
   <div class="dragbox-content">Your contents goes here...</div>
  </div>
</div>

<!-- Third column -->
<div id="column_3" class="column">
  <div id="item_6" class="dragbox">
    <!-- this one is 6th item of 2nd column -->
    <h2>Title for 6</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
  <div id="item_7" class="dragbox">
    <!-- this one is 7th item of 2nd column -->
    <h2>Title for 7</h2>
    <div class="dragbox-content">Your contents goes here...</div>
  </div>
</div>

Make sure your column id is unique and your all item id under any column should be unique. Here is use id like “item_1”, “item_2″……”item_5″…etc.
Here is the css code

.column{
	width:32%;
	margin-right:.5%;
	float:left;
        min-height: 300px;
}
.column .dragbox{
	margin:5px;
	background:#fff;
	position:relative;
	border:1px solid #ddd;
}
.column .dragbox h2{
	margin:0;
	font-size:12px;
	padding:5px;
	background:#f0f0f0;
	color:#000;
	border-bottom:1px solid #eee;
	font-family:Verdana;
	cursor:move;
}
.dragbox-content{
	background:#fff;
	min-height:100px; margin:5px;
	font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column  .placeholder{
	background: #f0f0f0;
	border:2px dashed #883533;
}

You can customized css based on your design but make sure that your .column class should have min-height or height if you remove that then you cann’t drag the item.
h2 used for your dragable item,
.placeholder is used when you drag some box and place holder will showing where it need to be place.
here is the javascript code

  $('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
        stop: function(event, ui){
            //saveState();
        }
})
.disableSelection();

h2 used as handle, you can change it, we’ll discuss about stop in next section.

your outcome something like this, here when I trying to drag item 2

Now In this way we just drag and drop but when we need to save each state and when user logout and again login the dashboard should be same when they logout, I used here php and mysql to save state,
Here is the database table

CREATE TABLE IF NOT EXISTS `dashboard_items` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `column_no` int(11) NOT NULL,
  `order` int(11) NOT NULL,
  `widget` char(100) COLLATE utf8_unicode_ci NOT NULL,
  `last_update_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `user_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

‘id’ is used for item id (e.g. item_1, item_2….. item_8 etc.)
‘column_no’ is column number here we used just 3 column
‘order’ it used for item order in a column,
‘widget’ it uses when we do for loop we might need to call some widget which we need to put here..
‘user_id’ if you have multiple user and you can keep user id and save its state.

now, how we fetch the data

$column = array();
for($i = 1, $i <= 3; $i++){
$sql = "SELECT `DashboardItem`.`id`, `DashboardItem`.`column_no`, `DashboardItem`.`order`, `DashboardItem`.`widget`, `DashboardItem`.`last_update_date`, `DashboardItem`.`user_id` FROM `dashboard_items` AS `DashboardItem` WHERE `DashboardItem`.`column_no` = $i and  `DashboardItem`.`user_id` = 1 ORDER BY `DashboardItem`.`order` ASC";
$column[$i] = $this->DashboardItem->query($sql); // here is used cakephp syntex which will output like the following section 
}

the output for one column

Array
(
    [0] => Array
        (
            [DashboardItem] => Array
                (
                    [id] => 3
                    [column_no] => 1
                    [order] => 2
                    [widget] => 0
                    [last_update_date] => 2012-02-17 11:41:49
                    [user_id] => 1
                )
        )
    [1] => Array
        (
            [DashboardItem] => Array
                (
                    [id] => 2
                    [column_no] => 1
                    [order] => 1
                    [widget] => 0
                    [last_update_date] => 2012-02-17 11:41:49
                    [user_id] => 1
                )
        )
    [2] => Array
        (
            [DashboardItem] => Array
                (
                    [id] => 1
                    [column_no] => 1
                    [order] => 0
                    [widget] => 0
                    [last_update_date] => 2012-02-17 11:00:42
                    [user_id] => 1
                )
        )
)

Now here is the html code

	<div class="column" id="column_1">
		<?php foreach($column[1] as $col){ ?>
                <div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
			<h2> Call your header based on the widget</h2>
			<div class="dragbox-content" >
                            put your contents based on your widget
			</div>
		</div>
                <?php } ?>
	</div>
	<div class="column" id="column_2" >
		<?php foreach($column[2] as $col){ ?>
                <div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
			<h2>put your contents based on your widget</h2>
			<div class="dragbox-content" >
                             put your contents based on your widget
			</div>
		</div>
                <?php } ?>
	</div>
	<div class="column" id="column_3" >
		<?php foreach($column[3] as $col){ ?>
                <div class="dragbox" id="item_<?php echo $col['DashboardItem']['id']?>" >
			<h2>put your contents based on your widget</h2>
			<div class="dragbox-content" >
                            put your contents based on your widget
			</div>
		</div>
                <?php } ?>
	</div>
<div id='result'></div>

Now we have to pass ajax requset based on the change of dahboard which will keep your dashboard same

   $('.column').sortable({
	connectWith: '.column',
	handle: 'h2',
	cursor: 'move',
	placeholder: 'placeholder',
	forcePlaceholderSize: true,
	opacity: 0.4,
        stop: function(event, ui){  
            saveState();
        }
})
.disableSelection();

function saveState(){
    var items = [];
    // traverse all column div and fetch its id and its item detail. 
    $(".column").each(function(){
        var columnId = $(this).attr("id");
        $(".dragbox", this).each(function(i){ // here i is the order, it start from 0 to...
           var item = {
               id: $(this).attr("id"),
               column_no: columnId,
               order: i
           }
           items.push(item);
        });
        
    });
    $("#results").html("loading..");
    var shortorder = {items : items};
        $.ajax({
          url: "<?php echo "/dashboard_item.php"; ?>",
          async: false, 
          data: shortorder,
          dataType: "html",
          type: "POST",
          success: function(html){
            $("#results").html(html);
          }
        });    
}

saveState() is calling when you do any drag and drop of any item.
under saveState() it fetch the data based on column and make an array which we passing to ajax request then we save

$data = $_POST;
foreach($data as $d){
   $item_no = split("_",$d['id']); //split item_3 to get 3 and that is our item table id 
   $d['id'] = $item_no[1];
            
   $col_no = split("_", $d['column_no']); //split 
   $d['column_no'] = $col_no[1];
   
    $this->Dashboard->save($d); // I used cakephp syntax here, it will update database  You have to update each row based on the column no and user id
}

In this way we can keep save the drag and drop state. 🙂

Advertisement

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Remove Skype Plugin from browser using jQuery

23 Monday Jan 2012

Posted by Sarwar in jquery

≈ Leave a comment

Tags

jquery, Markup, skype, skype number


I got some problem after installing the skype plugins on my browser. This plugin always convert to a call now button to numbers, sometime some number is not a phone number, which cause problem for our web design. I found a solution which we can used for stop converting the call now button for numbers on the webpage.

<script src="YOUR_JQUERY_PAT/jquery.min.js" language="javascript"></script>
<script language="javascript">
	$(document).ready(function() {
		window.setTimeout(function() {
			$('.skype_pnh_container').html('');
			$('.skype_pnh_print_container').removeClass('skype_pnh_print_container');
		}, 700);
	});
</script>

Its work for me. I found it form here

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

Multiple line html code assign to a javascript variable/ assign cakephp element to a javascript variable

05 Friday Aug 2011

Posted by Sarwar in CakePHP, JavaScript, PHP

≈ 36 Comments

Tags

cakephp element, js variable multiple line, json_encode


I was working with google map api, I have task to make a infowindow for a marker. I faced some problem when I assigned multiple line code to a javascript variable. I tried to put a html code to a javascrpt variable which will use for info window.

I need to put block of html code (cakephp element) to a variable. if we do like the following

<script>
var infowindow = '<div class="map_info_content">
    <table cellpadding="3" cellspacing="3">
        <tr>
            <td colspan="2">
                <h1 class="map_title"><?=$map_title?></h1>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top">
                <img src="<?=$imgurl?>" style="<?=$style_img?>" /> 
            </td>
            <td align="left" valign="top">
                <p>
                    <?=$msg?>
                </p>
            </td>
        </tr>
    </table>';
</script>

Its not not working, we need to put a slash / each end of line or need to write infowindow += “” for each line.
Now If we keep that html code to a cakephp element and just call the element and make it json_encode it work or keep this in to a php variable and make it json encode it working lets see

<?php
    $html = '<div class="map_info_content">
    <table cellpadding="3" cellspacing="3">
        <tr>
            <td colspan="2">
                <h1 class="map_title">Title</h1>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top">
                <img src="info.jpg" style="" /> 
            </td>
            <td align="left" valign="top">
                <p>
                    HERE IS YOUR MSG
                </p>
            </td>
        </tr>
    </table>';
// Now make it json encode
$html = json_encode($html);
?>
// Now Assign it to a javascript variable
<script>
 var infowindow = <?=$html?> 
// OR if cakephp element
 var infowindow = <?=json_encode($this->element("infowindow"))?>

</script>

json_encode is very useful method to working like this.
🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

jquery UI tab – ajax loading CKEDITOR in a tab and some issues

28 Thursday Jul 2011

Posted by Sarwar in Ajax, CakePHP, ckeditor, jQuery UI, PHP

≈ 42 Comments

Tags

ajax, ckeditor, Jquery UI, PHP


I tried to load CKEDITOR in a jquery tab via ajax. I got problem that only first time the ckeditor is working but when I click on other tab and again got o ckeditor tab its not working. in Load section for tab I put the following code.

load: function(event, ui) {
  if(ui.index == 3){ // Checked tab no 4
    var instance = CKEDITOR.instances['reditor']; // reditor is text area id, check if instances exists for readitor or not 
    if(instance){ 
       CKEDITOR.remove(instance); //if existed then remove it
    }
    CKEDITOR.replace( 'reditor' ); // Create instance for 'reditor'
 }
}

in this way we can get rid the problem of “CKEditor instance already exists”

Here is whole configuration

$(document).ready(function () {
           var $tabs = $("#tabs").tabs({ 
                                
                                alignment: "top",
                                spinner : false,
                                ajaxOptions: {
                                    error: function( xhr, status, index, anchor ) {
                                                    $( anchor.hash ).html( "Couldn't load this tab. Please try again.");
                                                },
                                    complete: function(){
                                        
                                        
                                    }
                                    
                                },
                                load: function(event, ui) {
                                    if(ui.index == 3){
                                        var instance = CKEDITOR.instances['reditor'];
                                        if(instance){
                                            CKEDITOR.remove(instance);
                                        }
                                    }
                                },
                                select: function(e, ui){
                                            $(ui.panel).html('<img src="img/ajax_loader.gif" />'); // Loader after click on each tab
                                        }
                                
                                });
           $tabs.tabs('select', <?=$tab_no?>); // used for selected default tab
           
        });
        

Here is HTML/PHP (I used cakephp syntax for url ) used “TEXT” in a link to show the loading text on tab otherwise it will not show the loading tabl

<div id="tabs">
    <ul>
        <li>
            <?=$html->link("<span>Information</span>", array("controller" => "listings", "action" => "information", $id), array("escape" => false, "title" => "Information"))?>
            
        </li>
        <li>
            <?=$html->link("<span>Detail</span>", array("controller" => "listings", "action" => "detail", $id), array("escape" => false))?>
        </li>
        <li>
            <?=$html->link("<span>Peoples</span>", array("controller" => "listing", "action" => "peoples", $id), array("escape" => false))?>
        </li>
        <li>
            <?=$html->link("<span>Enhance</span>", array("controller" => "listings", "action" => "enhance", $id), array("escape" => false))?>
       </li>
    </ul>
 </div>

In this way I did and it work for me 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

cakephp ajax pagination using jquery

26 Tuesday Apr 2011

Posted by Sarwar in CakePHP, Framework, JavaScript, jquery, PHP

≈ 9 Comments

Tags

ajax, ajax pagination cakephp, jquery, paginator


I tried to use cakephp default ajax pagination, it seems not working with me. I tried with different way.

The following code using for pagination.

<div class="paginator">
        <?php echo $paginator->first(' First ', null, null, array('class' => 'disabled')); ?>
        <?php echo $paginator->prev('Previous ', null, null, array('class' => 'disabled')); ?>
        <?php echo $paginator->numbers(); ?>
       <?php echo $paginator->next(' Next ', null, null, array('class' => 'disabled')); ?>
        <?php echo $paginator->last(' Last ', null, null, array('class' => 'disabled')); ?>
</div>   

Now below that code I used the following java script code

<script>
    $(document).ready(function(){
        $(".paginator a").click(function(){
            $("#updated_div_id").load(this.href);
            return false;
        })
    });
</script>

Here, I just fire an event on click under paginator div, once you click on a link under that div, it fetch the url (this.herf) and calling page using ajax, You must prepared the controller for ajax based.

for example your controller calling ‘ajax_pages’ action.

function ajax_pages(){
        $this->layout = 'ajax';
        $this->paginate = array(
                                'order' => array('Module.created_date' => 'desc'), 
                                'recursive' => -1,
                                "limit" => PAGINATION_LIMIT
                                );
        
        $conditions['Module.module_type'] = $module_type;
        $data = $this->paginate("Module", $conditions);
        $this->set(compact("data"));  
}

Its work for me 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

set & reset form text value onfocus, onblur, onclick using javascript

25 Monday Oct 2010

Posted by Sarwar in CSS, JavaScript

≈ 22 Comments


This is simple but sometime its kill our valuable time.
for text field sometime we need to use label as text value, so when mouse click on it the text value should hide, if user doesn’t give any value and point the mouse another field its display value.

<input type="text" 
          onfocus="javascript:this.value==this.defaultValue ? this.value = '' : ''"  
          onblur="javascript:this.value == '' ? this.value = this.defaultValue : '' " 
          value="First Name"  
/>

or
HTML:

<input type='text' value='First Name' onfocus='javascript:check_text_onfous(this)' onblur='javascript:check_text_onblur(this)' />

Javascript:

function check_text_onfocus(obj)
{
    if(obj.value == obj.defaultValue) 
        obj.value = '';
}
function check_text_onblur(obj)
{
    if(obj.value=='')
        obj.value = obj.defaultValue;
}

its works with me on IE,FF,Chrome 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

print a div – open new window, print and close using javascript

05 Tuesday Oct 2010

Posted by Sarwar in JavaScript

≈ 22 Comments


I’m following the way to print a specific div inside html page.

JS Function


function printContent(div_id)
{
var DocumentContainer = document.getElementById(div_id);
var html = '<html><head>'+
               '<link href="css/template.css" rel="stylesheet" type="text/css" />'+
               '</head><body style="background:#ffffff;">'+
               DocumentContainer.innerHTML+
               '</body></html>';

    var WindowObject = window.open("", "PrintWindow",
    "width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
    WindowObject.document.writeln(html);
    WindowObject.document.close();
    WindowObject.focus();
    WindowObject.print();
    WindowObject.close();
    document.getElementById('print_link').style.display='block';
}
HTML CODE
 <div id='ad_div'> <!-- we want to print only this div and here is the link --> <a href='javascript:printContent("ad_div")' id='print_link'><?php __('Print');?></a> </div>
<pre>

this work for me 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

check username availability on keypress using jquery

26 Wednesday May 2010

Posted by Sarwar in Ajax, JavaScript, jquery, PHP

≈ 3 Comments

Tags

ajax, availability, jquery, keypress, keyup, validation


Username or email availability or any other types of availability check we can do in this way. When user type on a text box an ajax request has made and check what if its available or not.  we only required jquery.js

HTML CODE:

<input name="username" type="text" id="username" />
<label id="user_msg" style="color:#CC0000;"></label>

Javascirpt:

$(document).ready(function() {

		var timeOut = null;	// this used for hold few seconds to made ajax request

		var loading_html = '<img src="ajax-loader.gif" />'; // just an loading image or we can put any texts here

		//when button is clicked
		$('#username').keyup(function(e){

			// when press the following key we need not to make any ajax request, you can customize it with your own way
			switch(e.keyCode)
			{
				//case 8:   //backspace
				case 9:		//tab
				case 13:	//enter
				case 16:	//shift
				case 17:	//ctrl
				case 18:	//alt
				case 19:	//pause/break
				case 20:	//caps lock
				case 27:	//escape
				case 33:	//page up
				case 34:	//page down
				case 35:	//end
				case 36:	//home
				case 37:	//left arrow
				case 38:	//up arrow
				case 39:	//right arrow
				case 40:	//down arrow
				case 45:	//insert
				//case 46: 	//delete
					return;
			}
			if (timeOut != null)
			    clearTimeout(ajaxCallTimeoutID);
			timeOut = setTimeout(is_available, 1000);  // delay delay ajax request for 1000 milliseconds
			$('#user_msg').html(loading_html); // adding the loading text or image
		});
  });
function is_available(){
	//get the username
	var username = $('#username').val();

	//make the ajax request to check is username available or not
	$.post("availability.php", { username: username },
	function(result)
	{
		if(result != 0)
		{
			$('#user_msg').html('Not Available');
		}
		else
		{
			$('#user_msg').html('<span style="color:#006600;">Available</span>');
		}
	});

}

PHP: Put your way to searching, you can make any array search or you can check it from database or flat file. I check it from database here is the code

<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('db_name');
$username = mysql_real_escape_string($_POST['username']);
$result = mysql_query('select username from user_table where username = "'. $username .'"');
$cnt = mysql_num_rows($result);
print($cnt);
?>

Its work with me very well 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

jQuery Mega Menu Customization and Fixed Conflict with jQuery UI

14 Wednesday Apr 2010

Posted by Sarwar in CSS, JavaScript, jquery, jQuery UI

≈ 6 Comments

Tags

conflict, customization, jkmegamenu, jquery, menu


Recently I’ve used jQuery Mega Menu on a site. The default style for this menu it appear from left corner to below the link/button when mouse is over. But I wanted it appear above the link/button when mouse is over, here is the code we need to change  on line 76 of jkmegamenu.js file


//existing line
// megamenu.offsety= megamenu.$anchorobj.offset().top
//Change to
megamenu.offsety= megamenu.$anchorobj.offset().top - (megamenu.$menuobj.outerHeight() + megamenu.$anchorobj.outerHeight())

Just subtract top position with total of menu object height and anchor so the bottom line of new box will appear just above the link/button.

But I got some problem when I was adding this code to a page where already have jQuery UI  items, both jquery ui tabs/accordion/dialog…etc. and mega menu wasn’t work. After check the mega menu js file I got the solution, we just need to comemnted out or remove the following line at the begianing of file


//jQuery.noConflict();

Done, everything working with me properly hope it will work with you as well 🙂

Share this:

  • Tweet
  • Email

Like this:

Like Loading...

how to get/configure file/image browser for tinymce editor

08 Wednesday Jul 2009

Posted by Sarwar in JavaScript, PHP, tinymce

≈ 34 Comments

Tags

image browser, session, tinymce, upload, WYSIWYG Editor


tinybrowser is great plugins for tinymce and we can easily upload images/files and file browser.  It’s work with tinyMCE v3.2. I’ve describe the detail configuration here.

  • Download tinymce and extract.
  • Download tinybrowser, its distributed under the GNU General Public License.
  • Extract and copy to \tiny_mce\plugins\
  • Open config_tinybrowser.php file and set the upload directory

$tinybrowser['path']['image'] = '/upload/images/'; // Image files location - also creates a '_thumbs' subdirectory within this path to hold the image thumbnails
$tinybrowser['path']['media'] = '</span><span style="color: #800000;">/upload/images/</span><span style="color: #800000;">'; // Media files location
$tinybrowser['path']['file']  = '</span><span style="color: #800000;">/upload/images/</span><span style="color: #800000;">'; // Other files location

You can change the upload path dynamically, we’ll discuss it end of this session.

  • Ensure that the upload directories are writable (0777 permission)
  • You have to call “tb_tinymce.js.php” before calling “tiny_mce.js”

<script language="javascript" type="text/javascript" src="<?php echo url::js_dir()?>tiny_mce/plugins/tinybrowser/tb_tinymce.js.php>"></script>
<script type="text/javascript" src="<?php echo url::js_dir()?>tiny_mce/tiny_mce.js"></script>
  • In you initialization of tiny_mce you have to add file_browser_callback : “tinyBrowser”,
  • The following is the full code, the bold is for tinybrowser plugins

<script language="javascript" type="text/javascript" src="js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php>"></script>
<script type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script></span>

<span style="color: #993300;"><textarea id="adesc" name="adesc"></textarea></span>

<span style="color: #993300;"><script>
tinyMCE.init({
// General options
mode : "textareas",
mode : "exact",
elements : "adesc",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,advhr,advimage,advlink",
<strong> file_browser_callback : "tinyBrowser",</strong></span>

<span style="color: #993300;">theme_advanced_buttons1 : "forecolor,backcolor,|,bold, italic,underline,strikethrough,| ,justifyleft,justifycenter,justifyright,justifyfull, styleselect,formatselect,fontselect, fontsizeselect",
theme_advanced_buttons2 : "pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent, blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup, help,code,|,insertdate, inserttime, preview",
<strong> theme_advanced_buttons3 : "",</strong></span>

<span style="color: #993300;">theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false,
<strong>convert_urls : false</strong>,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",</span>

<span style="color: #993300;">// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",</span>

<span style="color: #993300;">// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
  • Click on the image button, a popup window open and you can see an icon appear beside image url click on and a another new window open which is our image browser, we can browse images and upload image from there.
  • Now If you run it can work 🙂

Path Change While Add imge to editor:
When we upload an image and put it to editor its path has been changed. If we save the output to database, and we need to show in different location then we have faced some problem, Just add convert_urls : false  to tinyMCE.init(). So the path will not be changed.

Session Control:
We can use session in tinybrowser. See …/tiny_mce/plugins/tinybrowser/config_tinybrowser.php

//session_start();
//$tinybrowser['sessioncheck'] = 'authenticated_user'; //name of session variable to check

Just comment out the above line and the additional line.

$_SESSION[$tinybrowser['sessioncheck']] = "YES";

New you can uses session here.

Dynamic Upload Directroy:
We may need dynamic upload directory, like each user has their own upload folder. It can possible by using session variable.

Step 1:
Just add a get parametter while we diclearning the tb_tinymce.js.php the say in php, $upload_path = “/user1/dir/upload/”

<script language="javascript" type="text/javascript" src="js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php?upload_path=<?=urlencode($upload_path);?>"></scrip>

Step: 2
Open file “/js/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php” and add the following two line at the top to page.

session_start();
$_SESSION['upath'] = $_GET['upload_path'];

Step: 3
Open “js/tiny_mce/plugins/tinybrowser/config_tinybrowser.php” and change the assignment op upload directory like the following [Note you must comment out the session strat on this page as i’ve describe it above]

$tinybrowser['path']['image'] = $_SESSION['upath'].'images/'; // Image files location - also creates a '_thumbs' subdirectory within this path to hold the image thumbnails
$tinybrowser['path']['media'] = $_SESSION['upath'].'media/'; // Media files location
$tinybrowser['path']['file']  =$_SESSION['upath'].'files/'; // Other files location

I’ve successfully run it and use for different directory for different modules. Just assign value to $upload_path, it depend on you how you change the path but make sure all upload directory always writable (permission 0777)

Share this:

  • Tweet
  • Email

Like this:

Like Loading...
← Older posts

Author

  • Sarwar

Categories

  • .htaccess
  • Apache
  • API
  • CSS
  • Debug
  • Framework
    • CakePHP
  • HTML
  • JavaScript
    • Ajax
    • ckeditor
    • jquery
    • jQuery UI
    • tinymce
  • Joomla
    • Virtumart
  • Linux
  • MySQL
  • PHP
  • SVN
  • Twitter
  • WHM/cPanel
View Sarwar Hossain's profile on LinkedIn
Follow bdsarwar on Twitter

Tweets

  • RT @ESPNUK: If Erling Haaland wanted to match Cristiano Ronaldo's 700 league goals, he'd have to score 40 goals a season until the year 203…    1 month ago
  • RT @Cristiano: Great team effort and a good victory. We stand together. Let’s go, United! 💪🏽 https://t.co/GnjAR3oM3s    3 months ago
  • RT @Cristiano: Hard work always pays off 🙏🏽💪🏽 https://t.co/kMqIpB2nfV    5 months ago
  • RT @realDonaldTrump: Just finished a very good conversation with President Xi of China. Discussed in great detail the CoronaVirus that is r…    2 years ago
  • “Running a small business without a plan is a lot like driving without directions.” — @GoldmanSachs via @appexchange    6 years ago
  • RT @TechCrunch: 5K people turn up to catch Pokémon in Chicago tcrn.ch/2aaLRys https://t.co/VVQSd7nmN4    6 years ago

Flickr Photos

From Helipad ViewAbove the CloudHillNear to SkySunset Moment#sunset #beach #ocean #coxsbazar#jamroll #food #deliciousfood #homemade  #homemadefood#seaside #ocean #oceanview #travelphotography #coxsbazar #bayofbengal #travel #longestbeach#beach #lifeguard #seaside #holiday #tour #longestbeach #travel #travelphotography #coxsbazar #bayofbengal#resort #mountains
More Photos

Archives

  • February 2012 (1)
  • January 2012 (2)
  • August 2011 (1)
  • July 2011 (1)
  • June 2011 (2)
  • May 2011 (2)
  • April 2011 (1)
  • March 2011 (3)
  • December 2010 (3)
  • November 2010 (1)
  • October 2010 (4)
  • September 2010 (1)
  • June 2010 (1)
  • May 2010 (2)
  • April 2010 (1)
  • March 2010 (1)
  • January 2010 (2)
  • July 2009 (1)
  • January 2009 (1)
  • August 2008 (1)

Recent Comments

  • Kush on how to cakephp in a sub-directory, access it from root using .htaccess
  • Mr Griever on Access session data in a model -cakephp
  • apnarahimyarkhan on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • Toko Kunci Pintu Murah on set & reset form text value onfocus, onblur, onclick using javascript
  • nevitaputri1.doodlekit on cakephp- CONCAT in query, Virtual Fields and make a drop down
  • RSS - Posts
  • RSS - Comments

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.com

Create a free website or blog at WordPress.com.

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Follow Following
    • sarwar's weblogs
    • Join 328 other followers
    • Already have a WordPress.com account? Log in now.
    • sarwar's weblogs
    • Customize
    • Follow Following
    • Sign up
    • Log in
    • Report this content
    • View site in Reader
    • Manage subscriptions
    • Collapse this bar
 

Loading Comments...
 

    %d bloggers like this: