I am using layout.jquery plugin.
I am trying to create a custom toggler for Wast Pane.
How can I create rotated text div as toggler.
See attached image below.
JSFIDDLE: https://jsfiddle.net/kap0e06s/3/
HTML:
<div class="myDiv" style="height:400px">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>
JS:
$('.myDiv').layout({
resizeWhileDragging: true,
sizable: false,
animatePaneSizing: true,
fxSpeed: 'slow',
west__spacing_closed: 0,
west__spacing_open: 0,
north__spacing_closed: 0,
north__spacing_open: 0,
});
Sorry... Could not create the jsfiddle properly. Here is modified code:
JS:
// OUTER-LAYOUT
$('.myDiv').layout({
resizeWhileDragging: true,
sizable: false,
livePaneResizing: true,
animatePaneSizing: true,
fxSpeed: 'slow',
west__spacing_closed: 0,
west__spacing_open: 0,
north__spacing_closed: 0,
north__spacing_open: 0,
east__spacing_open: 50,
});
CSS:
body {
background-color: white;
}
.ui-layout-center,
.ui-layout-north,
.ui-layout-south,
.ui-layout-east,
.ui-layout-west {
border: 0px;
}
.ui-layout-toggler{
background-image: url("http://placehold.it/50/ff9933/ffffff?text=Panel");
}
There are a number of options you can use for a custom toggler.
First you need to choose between using real rotated text (using CSS transform) and a background color, or an image of the text/tab. Depending on which you choose, the method is different...
IMAGE TOGGLER METHOD
If using an image, then assign this with CSS. If desired, you can use different images for the open and closed states of the pane.
To target a specific pane in a layout, append the 'side' to the generic class for togglers, or resizers/splitters, like...
.ui-layout-resizer-west
.ui-layout-toggler-west
To further refine selectors to target specific 'states', append the state, like...
.ui-layout-toggler-west-open
.ui-layout-toggler-west-closed
The toggler element extends beyond the boundary of the resizer-bar that contains it (your options set that to 0px width), so ensure that the overflow CSS is set to allow this. This applies whether using the image method or rotated text method.
Here is sample CSS to put this together. Note that some properties require 'important' to override styles hard-coded on the elements by Layout...
.ui-layout-resizer-west {
overflow: visible !important;
}
.ui-layout-toggler-west {
backgound: url(close-panel-image.png) center;
width: 16px;
}
.ui-layout-toggler-west-closed {
backgound-image: url(open-panel-image.png);
}
Here are the relevant layout options, in addition to those your question already show. Note that the height/length of the toggler element should be set here rather than in the CSS so that layout can properly center it inside the resizer-bar...
togglerLength_open: 50,
togglerLength_closed: 50
That should do it if using an image background.
ROTATED TEXT METHOD
You can also insert text or HTML inside the toggler element. Since the toggler is autogenerated, you specify this content in the options.
The CSS is almost the same for this method, but instead of a background image, specify the colors and font formatting you want...
.ui-layout-resizer-west {
overflow: visible !important;
}
.ui-layout-toggler-west {
backgound-color: orange;
color: white;
font-size: 12px !important;
font-weight: bold;
transform: rotate(-90deg);
width: 16px;
}
To support older browsers, add browser prefixes for transform; see https://css-tricks.com/snippets/css/text-rotation/
Specify the text you want in the layout options...
togglerLength_open: 50,
togglerLength_closed: 50,
togglerContent_open: 'CLOSE',
togglerContent_closed: 'PANEL'
If you want the same text for both the open and closed states, I believe you can just use a togglerContent option. You can test that to confirm if desired.
Lastly, you can add additional logic when opening or closing the panel in one of two ways...
Use the standard callbacks. These include options like
onclose_start, which allows you to abort the close action if desired.
After the layout is created, use standard jQuery to unbind the standard click event, and then add you own event. This is necessary if using a more complex custom toggler that contains more than one button/action. You can find samples of such togglers on the Layout website.
Can the width of the inline toolbar changed to a fixed width?
config.width=400; doesn't work for an inline toolbar.
The geometry of the inline toolbar can be adjusted using CSS.
The toolbar is built on top of Floating Space plugin, which can be accessed via .cke_float class or #cke_{editor.name} id attribute.
Inside the the Floating Space panel resides the top space of the editor (it holds the toolbar), which has .cke_top class and can be accessed with JS CKEDITOR.instances.{name}.ui.space( 'top' ).
Long story short, there are 3 different CSS approaches, and each one of them should do the trick:
body .cke_top,
body .cke_float,
#cke_{editor.name} {
width: 300px;
}
Note: Used body to increase the specificity of the selector.
Yet another note: You can do the same with JS and CKEditor API:
CKEDITOR.instances.{name}.ui.space( 'top' ).setStyle( 'width', '100px' )
How about using CSS for it?
.cke_toolbar {
width: 400px;
}
I know Extjs 2.3 is pretty old but i'm taking over someone's work here.so my hands are tied for now.
well i'm supposed to change few things in the interface and add new functionality.
this is my first real ExtJS work (jquery boy here).
i wanted to add new icons on a button and it appears i can't even get the image shown correcty as i can't affect the height of the button, either on the button object property, or in css.
all that i managed to do is affect the width of the button.
here is my attempt
btntelButton = new Ext.Button({
name: 'telbtn',
id: 'btntel',
cls : 'x-btn-icon',
iconCls: 'telButton',
minWidth : 95,
});
<style type="text/css">
.telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}
</style>
with the use of telButton class, the backgound images comes but resized to its minimum size, showing only a small portion of the image
when i use the style on the button itself like
//...
id: 'btntel',
cls : 'x-btn-icon',
style: {height: '90px'}
//...
it's shows
i've been pulling my hair for the passed few hours. How would you Extjs folks do this?
please shed a light on this. Thanks for reading
you can add a style directly to a button
For Example:
style:{height:'60px'}
Second thought would be declaring your css class as:
.telButton
{
height: 60px;
background-image: url(images/tel.png) !important;
}
rather than --> button.telButton (not sure if it'll make any difference)
I'm currently styling the scrollbar using Webkit's ::-webkit-scrollbar CSS properties and would like to change these properties on a mousemove event. The problem is that I can't seem to find a way to get to the scrollbar's CSS dynamically.
Is it possible to style the webkit scrollbar dynamically, through javascript (possibly using jQuery)?
There is a nice workaround for this problem, you can add multiple css classes with diffident styles for the scrollbar, and then change the classes dynamically with Javascript.
Example:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
A button that toggles between the classes red and blue:
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
Here is a working fiddle: http://jsfiddle.net/promatik/wZwJz/18/
Yes, you can do it.
You need to include dynamically css style rule into stylesheet.
And then to change it.
You can do it by this plugin
If you don't need to use jQuery - you can do it by pure Javascript:
link 1
link 2.
But there is cross-browser problems.
Also see Setting CSS pseudo-class rules from JavaScript
If you want to change a scrollbar properties when mouse is over it. You can do it with CSS, here an example http://jsfiddle.net/olgis/7Lg2R/ (sorry for ugly colorset).
If you want to change scrollbar colour if the mouse is over a container then look at this post Style webkit scrollbar on certain state . There are described several ways of doing it, with and without JavaScript.
REMARK: I do not know for which reason none of those example (with CSS neither JavaScript) do NOT work in my Firefox 11 for Mint, but all of them works perfectly in Chrome 18.0.1025.151.
i created page with four tabs each different color set as well as scroll bar
however this only worked by giving class to body tag
body.greenbody::-webkit-scrollbar {
width: 10px;
}
body.greenbody::-webkit-scrollbar-track {
background-color:rgb(0,50,0);
}
body.greenbody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollGreen.png");
}
/
body.bluebody::-webkit-scrollbar {
width: 10px;
}
body.bluebody::-webkit-scrollbar-track {
background-color:rgb(0,0,50);
}
body.bluebody::-webkit-scrollbar-thumb {
background-image:url("../assets/ScrollBlue.png");
}
html
<body id="body" class="greenbody" bgcolor="#202020">
javascript for each tab button(only scroll bar section shown here)
document.getElementById("body").className="greenody";
.........other function()....
document.getElementById("body").className="bluebody";
ScreenShot1 GreenScrollBar Image
ScreenShot2 BlueScrollBar Image
For this you should replace the scrollbar altogether.
It's just a matter of picking whichever one gives you the easiest API.
You can style scrollbars with CSS3, these generally only work for internal scrollbars and not the actual browser main scrollbar. You can also add the MOZ attribute to the following.
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #3b3b3b;
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: #666 url(scrollbar_thumb_bg.png) no-repeat center;
}
Demo: http://geryit.com/lib/custom-css3-scrollbars
Download Source: http://geryit.com/lib/custom-css3-scrollbars/custom-css3-scrollbars.zip
you can make a <style> tag with id="scrollbar_style" and then add css inside it dynamicly like this :
document.getElementById('scrollbar_style').innerHTML = '::-webkit-scrollbar{width:15px;}';
just remember that using innerHTML on an element WILL NOT JUST ADD your new code, it WILL ALSO DELETE whatever was inside that element.
problem solved.
you can define a function in JavaScript with your own css.
function overFlow(el) {
el.style.cssText = "overflow: auto;";
}
using in html:
<style>
::-webkit-scrollbar{display = none;}
</style>
<div id="overFlow" onclick="overFlow(this);">Something</div>
More Info: https://css-tricks.com/almanac/properties/s/scrollbar/
I have a TinyMCE that is set over a TextArea, and I want this editor area to ocuppy all the space of its parent div, all times.
I have a JS function that get the current space and set the textarea.style.height to it, but when I enables TinyMCE it seems to stop working.
Also, the textarea has width: 100%; it doesn't resize by HTML rendering when it's using TinyMCE too.
Any ideas?
Nowadays, you should use the autoresize plugin that comes with tinyMCE. You will have to call tinyMCE like this (jQuery version):
$('.tinymce').tinymce({
theme : 'advanced',
plugins : 'autoresize',
width: '100%',
height: 400,
autoresize_min_height: 400,
autoresize_max_height: 800,
});
I made the experience, that it may be helpful to manually call the resizing in the init_instance_callback to provide the correct height on init. Add this parameter to the passed options, if you need this:
init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }
The point is that TinyMCE generates an iframe in the place of the textarea, with this ID: originalID+"_ifr", and a table originalID+"_tbl" for holding the controls and the editor area.
To make fluid width:
document.getElementById(id+'_tbl').style.width='100%'
To make fluid height:
Change dinamically document.getElementById(id+'_ifr').style.height to the height you want, through JS.
This is the script I'm using for this:
function toScreenHeight(id, minus) {
var height;
if (typeof(window.innerHeight) == "number") //non-IE
height = window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
height = document.documentElement.clientHeight;
else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
height = document.body.clientHeight;
document.getElementById(id).style.height = (height - minus) + "px";
}
You can use the code and function calls inside onload and onresize body events.
in tinymce 3.4.6,
set
width:'100%'
in init option will solve the problem.
If you're doing tiny MCE dynamically via JS, you can run into timing issues where the MCE editor is not yet available for style adjustments. To combat this, you can use an old school timeout.
In this example, I'm using a "j" namespace for JQuery. If your editor is in a fluid div that changes size, you may want include this in a $(window).resize(function() { }); listener.
setTimeout(function(){
$j('.mceEditor').css('width','100%').css('minHeight','240px');
$j('.mceLayout').css('width','100%').css('minHeight','240px');
$j('.mceIframeContainer').css('width','100%').css('minHeight','240px');
$j('#'+[INSERT TEXTAREA ID HERE]+'_ifr').css('width','100%').css('minHeight','240px');
},500)
None of the above were working for me in TinyMCE v4, so my solution was to calculate the height based on the toolbars/menu bar/status bar, and then set the height of the editor, taking those heights into consideration.
function resizeEditor(myHeight) {
window.console.log('resizeEditor');
myEditor = getEditor();
if (myEditor) {
try {
if (!myHeight) {
var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
var mce_bars_height = 0;
$('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function(){
mce_bars_height += $(this).height();
});
window.console.log('mce bars height total: '+mce_bars_height);
myHeight = targetHeight - mce_bars_height - 8; // the extra 8 is for margin added between the toolbars
}
window.console.log('resizeEditor: ', myHeight);
myEditor.theme.resizeTo('100%', myHeight); // sets the dimensions of the editable area
}
catch (err) {
}
}
}
In my case, I wanted the editor window to match the width and height of the actual window, since the editor would come up in a popup. To detect changes and resize, I set this to a callback:
window.onresize = function() {
resizeEditor();
}
With version 4 and the option to use flexbox layout in the browser I did the following to get a full width,height editing experience of the parent div.
It should be easy to put the css into a file if you prefer adding it to your existing styles.
var css = '.tinycme-full .mce-edit-area {display:flex;flex-flow:column;} .tinycme-full .mce-edit-area iframe {flex:1 1 auto;} .tinycme-full {height:100%;} .tinycme-full .mce-tinymce.mce-container { width:100%;height:100%;border:0; } .tinycme-full .mce-panel{border:0} .tinycme-full .mce-container-body.mce-stack-layout {display: flex; flex-flow: column;height: 100%;} .tinycme-full .mce-stack-layout-item{ flex: 0 0 auto;} .tinycme-full .mce-edit-area{flex:1 1 auto;} ',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
style.styleSheet["cssText"] = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
The idea is that it make all the needed divs take up as much column space as needed to fill the parent 100% and its done by putting a div around your textarea: <div class="tinycme-full"> <textarea ... /></div>
No jquery or other dependencies are needed andd it now fills the parent 100%.
I had the same problem, after reading this thread I ended up with this code
init_instance_callback: function (inst) {
setTimeout(function () {
document.getElementById(inst.id + '_ifr').style.height= (document.getElementById("theContainerDiv").offsetHeight-85) + 'px';
},1000);
},
I resize the "_ifm" element instead of the "_tbl", since resizing the "_tbl" didn't resize the edit area for me. Then I leave some space for the toolbar and statusbar by making the "_ifr" 85 pixels shorter then the container div.
I had to use setTimeout to make it work, maybe because I have an animation that displays the container element.
I'm using pure css solution to achieve this (tinyMCE 4.0.20).
Set iframe height to 100%:
tinymce.init({
height: '100%'
})
Add styles to auto-resize iframe container:
.mce-tinymce { height: auto; width: 100%; position: absolute; left: 0; top: 0; bottom: 0; }
.bq-editor .mce-container-body { height: 100%; }
.bq-editor .mce-edit-area { position: absolute; top: 57px; bottom: 0; width: 100%; height: auto; }
Note: I have one toolbar line, and top: 57px; in .bq-editor .mce-edit-area is toolbar padding.
SyCoDeR is right but I followed a slightly different path though probably with the same results.
/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
position: absolute;
top: 69px;
bottom: 37px;
left: 0;
right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Revised because TinyMCE changes the id's with menu/toolbar additions or deletions. This works no matter what you do with it.
This is an old question, but apparently it still drags a lot of attention nowadays (Second half of 2020).
Sadly, with the release of the TinyMCE v5, most of the workarounds I found simply do not work anymore. I am sure they worked once, but every TinyMCE release seems to bring new "constrainings" that cripple those workarounds...
Without making it a discussion, I believe it is the cost of evolution. For an old product like the TinyMCE, it is incredible to see it is still around and kicking, staying way above the competition. It is by far one of the most efficient and flexible solutions for all environments, including mobile and for those new languages and frameworks that born since (which seems to be a trend lately, with new ones coming out of the blue every day).
So, with that in my mind, and after so many (failed) attempts to make most of the proposed solutions work, I decided to dig into the source code (TinyMCE v5.4) to better understand it. What I found was a much superior product overall, and that the solution everyone has been looking for is much simpler to implement than I was anticipating.
With no further delay, here my solution that simply works. It implements an editor that takes the entire document area (or whatever area you want), which WILL resize with the browser, requiring NO script, NO hack, and NO trick that could cause cross-browsing issues. Here's how:
Give to your <html> and <body> DOM objects the missing properties of size and adjust the spacing accordingly to your needs:
html, body {
width : 100%;
height : 100%;
margin : 0 !important;
padding : 0 !important;
overflow : hidden; /* Required if you want to have the editor taking the entire page. */
/* Otherwise, set as you need it. */
}
TinyMCE suggests the <textarea> to be embedded inside a <form> object. Regardless if you use it as suggested or not, simply give to it and ID and the following CCS properties (in my case, it is set as <form method="post" id="editorBase">):
#editorBase {
display : block !important;
width : 100% !important;
height : 100% !important;
}
In the TinyMCE Init method, add or modify the following settings:
tinymce.init({
// Required Settings:
width : '100%', // Note value is set as "string".
height : '100%', // Note value is set as "string".
resize : false, // Suggestion: disable the statusbar resizing. :)
// Suggested Settings:
toolbar_sticky : true, // Keep the menu and tollbar in a fixed position .
toolbar_location : 'top', // You can try 'top', 'bottom' or 'auto'.
toolbar_mode : 'floating', // It is simply a button behavior settings.
// Options are: 'floating', 'sliding', 'scrolling', or 'wrap'.
});
Yet in the TinyMCE Init settings, find the plugins item and remove the autoresize option from it (it is the most important step of all!).
Done! Try and test it! (YES! It is all done!)
With those simple adjustments you can set the editor to fit any design. Feel free to adjust it as needed. Just don't forget to set the width and the height properties in the TinyMCE Init settings as strings, and keep it consistent with the CSS settings for the <form>.
The reason to use strings in the width and height properties of the TinyMCE Init settings instead of numeric values is to allow you to use "%", "em", "pt", etc... Otherwise, the presented solution would never work.
Another trick to make it even more neat is to set the editor as borderless skin (a feature only present in the "professional" version of TinyMCE). No, it is not a hack, it is a siple adjustment to the CSS and totaly allowed by TinyMCE's EULA and Licensing. Simply add the following CSS to your page Stylesheet and it enjoy a borderless editor for free:
.tox-tinymce { border:none !important; }
Could not be easier than that.
Happy coding!
The wrapper of iframe (its ID finish by _ifr) is the first parent of span that it has application as role .
Thus, To get the wrapper :
$('span[role=application]').parents(':eq(0)')
So to Resize height:
$('[id$=_ifr]').css('height',$('span[role=application]').parents(':eq(0)').css('height'))
To resize width
$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))
None of these solutions worked 100% for me. I needed the height to adjust on initialization and during edits. What I did is grab the height of the HTML element in the iFrame, and then applied the height to the iFrame with an extra 100px.
Here's my solution: (added img max-width for responsive images)
on initialization
setup: function(editor) {
editor.on('init', function (e) {
$("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();
$("#editor_textarea_ifr").css("height",iframeHeight + 100);
});
},
on node change (edits)
init_instance_callback: function (editor) {
editor.on('NodeChange', function (e) {
$("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();
$("#editor_textarea_ifr").css("height",iframeHeight + 100);
});
}