We Keep Coding

Jquery DataTable Dynamic Pagination

How can i configure Jquery DataTable to not load all content on first load
e.g if i have 1000 records, DataTable will load all in first load this can be heavy though. how about loading each content when click on pagination part? Like This
$(document).ready( function () {
$('#example').dataTable( {
"bServerSide": true,
"sAjaxSource": "xhr.php"
} );
} );
There is ServerSide configuration for alike pagination please let me know, if my question is duplicate just shout out.

Use the "deferLoading" attribute:
https://datatables.net/examples/server_side/defer_loading.html

Check here full jquery example
jquery-datatable-ajax-tutorial-with-example
var studentTable;
jQuery(document).ready(function() {
studentTable = jQuery("#studentListTable").dataTable({
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"bRetrieve" : true,
"bFilter" : true,
"iDisplayLength": 10,
"bProcessing" : true,
"bServerSide" : false,
"aoColumns" : [ { "bSearchable" : false,"bVisible" : false,
"asSorting" : [ "asc" ] },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true },
{"sWidth" : "20%","bSortable" : true }
]
});
jQuery(".ui-corner-br").addClass("ui-widget-header_custom");
});

How to use tinymce with highlight.js?

On my website I wanna show syntax highlighted code to readers. I am using Tinymce for editing purposes. I am using Mezzanine CMS and I dunno much about TinyMCE. The problem is when I select preformat for wrapping my code snippet, TinyMCE wraps it with <pre> tags but highlight.js only highlightjs <pre><code> my-code-snippet </code></pre> tags i.e. It will only highlight code that is wrapped by pre as well as code tags.
My current tinymce_setup.js file is like this.
function CustomFileBrowser(field_name, url, type, win) {
tinyMCE.activeEditor.windowManager.open({
file: window.__filebrowser_url + '?pop=2&type=' + type,
width: 820, // Your dimensions may differ - toy around with them!
height: 500,
resizable: "yes",
scrollbars: "yes",
inline: "yes", // This parameter only has an effect if you use the inlinepopups plugin!
close_previous: "no"
}, {
window: win,
input: field_name,
editor_id: tinyMCE.selectedInstance.editorId
});
return false;
}
if (typeof tinyMCE != 'undefined') {
tinyMCE.init({
// main settings
mode : "specific_textareas",
editor_selector : "mceEditor",
theme: "advanced",
language: "en",
dialog_type: "window",
editor_deselector : "mceNoEditor",
// general settings
width: '700',
height: '350',
indentation : '10px',
fix_list_elements : true,
remove_script_host : true,
accessibility_warnings : false,
object_resizing: false,
//cleanup: false, // SETTING THIS TO FALSE WILL BREAK EMBEDDING YOUTUBE VIDEOS
forced_root_block: "p",
remove_trailing_nbsp: true,
external_link_list_url: '/displayable_links.js',
relative_urls: false,
convert_urls: false,
// callbackss
file_browser_callback: "CustomFileBrowser",
// theme_advanced
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_buttons1: "bold,italic,|,link,unlink,|,image,|,media,charmap,|,code,|,table,|,bullist,numlist,blockquote,|,undo,redo,|,formatselect,|,search,replace,|,fullscreen,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h1,h2,h3,h4,pre",
theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : true,
theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",
advlink_styles: "intern=internal;extern=external",
// plugins
plugins: "inlinepopups,contextmenu,tabfocus,searchreplace,fullscreen,advimage,advlink,paste,media,table",
advimage_update_dimensions_onchange: true,
// remove MS Word's inline styles when copying and pasting.
paste_remove_spans: true,
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true,
paste_strip_class_attributes: true,
// don't strip anything since this is handled by bleach
valid_elements: "+*[*]",
valid_children: "+button[a]"
});
}
What changes should I make in my tinymce setup so that when I click on preformat I get <pre><code> </code></pre> tags ?

Found the answer in highlight.js docs. Over here http://highlightjs.org/usage/ under custom initialization I found it. Curently I have put
<script>$(document).ready(function() {
$('pre').each(function(i, e) {hljs.highlightBlock(e)});
});</script>
just before the closing body tag. This will pickup the code found inside pre tags and highlight it.

Calling FancyBox from custom menu

I have a custom menu with a fixed position that allows users to navigate through FancyBox. It all works fine, except the part that the animation effects (those you have when you navigate through FancyBox by clicking the images) do not apply to the menu.
What do I have to do to get it working?
http://jsfiddle.net/PwMjP/866
FancyBox settings:
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
wrapCSS : 'fancybox-custom-white',
closeClick : false,
topRatio : 0,
scrolling : 'no',
width : '100%',
padding : '0',
fitToView : false,
transitionIn : 'elastic',
transitionOut : 'elastic',
speedIn : 600,
speedOut : 200,
overlayShow : false,
nextMethod : 'changeIn',
nextSpeed : 250,
prevMethod : false,
helpers : {
title : {
type : 'inside'
}
}
});
$(".fancybox").click(function(){
$(".menu-content").css('background-color','rgba(0,0,0,0.95)');
});
P.S.: Would be great if anyone could post some working code or a fiddle. Thanks!

load tinyMCE into colorbox

i have this problem: in my site there are textareas with tinymce and i can see all textarea right, but when i open colorbox within textarea, this not inherit tinymce properties.
This is my code to open colorbox:
$("#edit_item"+val.iditem).colorbox({
href: $(this).attr('href'),
data: data,
onComplete: function(){ setup_tiny(); }
});
and this is my function 'setup_tiny':
function setup_tiny(){
tinyMCE.init({
mode : "exact",
elements : "description",
width : "40%",
height: "200",
// General options
theme: "advanced",
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons3: "hr,removeformat,separator,sub,sup,separator",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: true
});
}
I have just tried this way, after load colorbox:
tinyMCE.execCommand('mceFocus', false, 'the_textareas_id_here');
tinyMCE.execCommand('mceRemoveControl', false, 'the_textareas_id_here');
but it doesn't work as well.
I have also tried to import tinymce plugin from this site 'http://mktgdept.com/jquery-tinymce-plugin' and also this not work.
How can I load tinymce inside colorbox?
Thanks

I've solved my issue using the following code:
function setup_tiny(textarea_name){
tinyMCE.init({
mode : "exact",
elements : textarea_name,
// General options
theme: "advanced",
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2: "bullist,numlist,separator,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,image,cleanup,help,code",
theme_advanced_buttons3: "hr,removeformat,separator,sub,sup,separator",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: true
});
}
$("#edit_item"+val.iditem).colorbox({
href: $(this).attr('href'),
data: data,
onComplete: function(){
setup_tiny("new_description");
}
});
In this way i invoke my function 'setup_tiny' with id textarea passed as argument.

Problem might be that your are calling
$("#edit_item"+val.iditem) on the hidden textarea element. Tinymce is not the textarea! It is a contenteditable iframe. You may try to do the following:
$(tinymce.get('description').getBody()).colorbox({
href: $(this).attr('href'),
data: data,
onComplete: function(){ setup_tiny(); }
});

TinyMCE pop up window resizing

I am using the TinyMCE editor, with the emotions plugin. Does anyone know how to resize the pop up window for the emotions plugin, as I have more emoticons that can fit in the window and the window has no scroll bar.
I have tried editing the editor_plugin.js file but this didn't change anything.
Any help appreciated.
EDIT:
My tinyMCE config
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceEditor",
editor_deselector : "mceNoEditor",
plugins : "emotions",
theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,|,emotions,|,code",
theme_advanced_buttons2 : "fontselect,fontsizeselect",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resize_horizontal : true,
theme_advanced_resizing : false,
nonbreaking_force_tab : true,
apply_source_formatting : true,
editor_deselector : "mceNoEditor"
});
My editor_plugin.js file in /plugins/emotions/
(function() {
tinymce.create('tinymce.plugins.EmotionsPlugin', {
init : function(ed, url) {
// Register commands
ed.addCommand('mceEmotion', function() {
ed.windowManager.open({
file : url + '/emotions.php',
width : 120 + parseInt(ed.getLang('emotions.delta_width', 0)),
height : 400 + parseInt(ed.getLang('emotions.delta_height', 0)),
inline : 1
}, {
plugin_url : url
});
});
// Register buttons
ed.addButton('emotions', {title : 'emotions.emotions_desc', cmd : 'mceEmotion'});
},
getInfo : function() {
return {
longname : 'Emotions',
author : 'Moxiecode Systems AB',
authorurl : 'http://tinymce.moxiecode.com',
infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/emotions',
version : tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});
// Register plugin
tinymce.PluginManager.add('emotions', tinymce.plugins.EmotionsPlugin);
})();

Change this part from editor_plugin.js OR editor_plugin_src.js depending on if you have tinymce.js or tinymce_src.js included
ed.addCommand('mceEmotion', function() {
ed.windowManager.open({
file : url + '/emotions.htm',
width : 250 + parseInt(ed.getLang('emotions.delta_width', 0)),
height : 160 + parseInt(ed.getLang('emotions.delta_height', 0)),
inline : 1
},