This must have been asked somewhere, but can't find where :(
I was reading up on finding out which browser someone was using in html.
My site uses a 'theme' (DevExpress' Black glass) and was wondering if there was a way of accessing Chrome's current theme, when the user is logged in.
I understand this has the potential to be a huge undertaking, but if it was possible, is there a way of getting the 'css' of chromes theme (obviously this would only apply if user was using chrome)?
I am currently writing a project in mvc, but any html/css approaches would be beneficial here.
For Example:
Is it possible to obtain access to the css of the 'Grass' theme (please note, this is just one example, there are many other themes available)?
As far as I know it's not possible, because it doesn't work like CSS. You have to get the JSON file, because I don't think it's possible from CRX.
Here is how a JSON file for a GC theme looks like:
{
"version": "1.0",
"name": "test theme",
"description": "A test theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
More info:
https://code.google.com/p/chromium/wiki/ThemeCreationGuide
BTW: Why would you want this, when there are 3-4 colors, no styles? You can get the colors with color picker.
I write text description in tinymce with spaces and html(line break and others etc etc).then i save it to mysql database.when i get it again and alert it,it shows me as same as it was.so till now it is fine.
When again i add it to tinymce to edit it,all html and spaces disappears..what can be the issue?
Here is my code
$('#description').tinymce({
// Location of TinyMCE script
script_url : 'tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
width : "825",
height: "300",
theme : "advanced",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_toolbar_location : "top",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,bullist,numlist,spellchecker",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '', // Needed for 3.x
plugins : "paste,spellchecker",
spellchecker_languages : "+English=en,Russian=ru",
// encoding : "xml",
// Example content CSS (should be your site CSS)
content_css : "tinymce/examples/css/content.css",
//
apply_source_formatting : true,
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
here is how i am getting value
alert(json.description_demo);//this is ok
$("#description").val(json.description_demo);
alert($("#description").val());//now this is not ok..here is issue
tried this also
alert(json.description_demo);//ok
tinyMCE.get('description').setContent(json.description_demo);
alert(tinyMCE.get('description').getContent());//issue not ok
images
You will have to use tinyMce features to get ans set the value.
Try using
tinyMCE.get('description').getContent() to get the value
tinyMCE.get('description').setContent(value from db) to set the value.
Chekout tinymce docs http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
Is it possible to freeze first 3 columns of Primefaces' data table?
I'm using Primefaces 3.1
Primefaces does not support fixed columns right now.
Jquery fixed column was used to achieve the same. Reference : http://datatables.net/extras/fixedcolumns/
Example:
var oTable2 = $(primfacesDataTableId).find('table').dataTable({
"sScrollX" : "100%", //Scroll
"sScrollY" : "180",
"bAutoWidth" : false,
"bScrollCollapse" : true,
"bPaginate" : false,
"bSort" : false,
"sInfo" : "",
"sInfoEmpty" : ""
});
var oFC = new FixedColumns(oTable2, {
"iLeftColumns" : 4, //Freezed first for columns
"sHeightMatch" : "auto",
"iLeftWidth" : 405
});
Thanks,
Shikha
For those who are using Primefaces 4.1 or above, this feature is now implemented (it took four years from the first request, by the way):
https://code.google.com/p/primefaces/issues/detail?id=366
You can play with the horizontal scrolling in the showcase.
I'm trying to insert a placeholder in html code that will be replaced later on dynamically. So far I managed to get the code inserted, and TinyMCE recognizes the tag, but when I try to append an id attribute to it, the attribute gets removed for an unknown reason. I tried most of the additional options, but none seem to work.
Current config:
extended_valid_elements : "module[id]",
valid_children : "module[img]",
custom_elements : "module",
The code to create the button (and subsequently insert the code):
setup : function(ed) {
// Add a custom button
ed.addButton("module", {
title : "Module",
image : "images/app-x-php-icon.png",
onclick : function() {
ed.focus();
var options = document.getElementById('rendermcemods').innerHTML+"";
var optionList = options.split('|');
var name=prompt("Please enter module name out of: "+options,optionList[0]);
for(var i=0;i<optionList.length;i++){
if(optionList[i] == name){
var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
//alert(content);
if(! patt.test(ed.getContent())){
ed.execCommand('mceInsertContent', false,content);
}
}
}
}
});
}
As you might notice, there's an alert before the insert, which I used to verify that the content is right...
When use the button to insert the code and then view the html, this is what I get:
<module><img src=images/app-x-php-icon.png" alt="" /></module>
Would anyone know how to fix this?
Update:
full config settings for tinyMCE:
// General options
mode : "none",
theme : "advanced",
plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,\n\
save,advhr,advimage,advlink,emotions,iespell,inlinepopups,\n\
insertdatetime,media,searchreplace,print,contextmenu,paste,\n\
directionality,fullscreen,noneditable,visualchars,\n\
nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1 : "fullscreen,help,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,|,module",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,code,|,insertdate,inserttime,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,ltr,rtl,|,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,blockquote,|,insertfile,insertimage",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Skin options
skin : "o2k7",
skin_variant : "silver",
document_base_url : "http://www.example.com",
content_css : "content.css",
extended_valid_elements : "module[id]",
valid_children : "module[img]",
/*custom_elements : "module", */
// Drop lists for link/image/media/template dialogs
external_link_list_url : "js/generateList.php?A=link",
external_image_list_url : "js/generateList.php?A=image",
media_external_list_url : "js/generateList.php?A=media",
setup : function(ed) {
// Add a custom button
ed.addButton("module", {
title : "Module",
image : "images/app-x-php-icon.png",
onclick : function() {
ed.focus();
var options = document.getElementById('rendermcemods').innerHTML+"";
var optionList = options.split('|');
var name=prompt("Please enter module name out of: "+options,optionList[0]);
for(var i=0;i<optionList.length;i++){
if(optionList[i] == name){
var patt=new RegExp('<module id="'+name+'">.*</module>','ig');
var content = '<module id="'+name+'"><img src="images/app-x-php-icon.png" /></module>';
//alert(content);
if(! patt.test(ed.getContent())){
ed.execCommand('mceInsertContent', false,content);
}
}
}
}
});
}
Another update: It might be interesting (and hopefully help to solve) to know that the id attribute isn't removed when tinyMCE is loaded and it already is in there, and a clean-up on existing code with the attribute doesn't remove it either.
I would put module to the valid_elements instead of the extended_valid_elements/custom_elements. The extended_valid_elements do sometimes behave strange.
My own config then looks like this (you will need to enlarge your own valid_elements and valid_children settings (if not used in your custom tinymce config you will have to use the defaults (can be found at the moxiecode website))):
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style|onmouseover]," +
"module," +
"a[name|href|target|title|alt]," +
"#p,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span[data-mce-type],hr",
valid_children: "body[p|ol|ul|hr]" +
"module[img]" +
",p[a|span|b|i|u|sup|sub|img|hr|#text|blockquote]" +
",span[a|b|i|u|sup|sub|img|#text|blockquote]" +
",a[span|b|i|u|sup|sub|img|#text|blockquote]" +
",b[span|a|i|u|sup|sub|img|#text|blockquote]" +
",i[span|a|b|u|sup|sub|img|#text|blockquote]" +
",sup[span|a|i|b|u|sub|img|#text]" +
",sub[span|a|i|b|u|sup|img|#text]" +
",li[span|a|b|i|u|sup|sub|img|ol|ul|#text]" +
",ol[li]" +
",ul[li]",
The solution I ended up using was modifying the blockElementsMap and the transitional map taht are in the source code. That seemed to be the only way to get the custom tag recognized as 'blocklevel' element, as well as being able to add it exactly like I want in the code for later processing.