Is there a way to set the height of CKEditor 3.0 to a percentage, such as 100%, such that it takes up the whole window?
I am currently using absolute values, but they do not blend well with my UI :(
CKEDITOR.replace('editor1',{
height: '600px'
});
First add a function for resizing your edtior:
function resizeEditor() {
var defaultHeight = 300;
var newHeight = window.innerHeight-150;
var height = defaultHeight > newHeight ? defaultHeight: newHeight;
CKEDITOR.instances.editor1.resize('100%',height);
}
Note: 150 works for me, maybe change the value from 150 to more or less.
Call this from the window onresize Event:
window.onresize = function() {
resizeEditor();
}
and add the first call to the constructor of your editor:
CKEDITOR.replace('editor1',
{
on:
{
instanceReady: function(ev)
{
setTimeout(resizeEditor, 500);
}
}
});
After a lot of fiddling with this resizing stuff on ckeditor 4 I made up this which works perfectly perfectly for me:
in config.js:
// prevent flashing of resizing by setting the content panel to zero height before it is resized
config.height = '0px';
config.width = '100%';
jQuery:
$(document).ready(function(){
// resize the editor(s) while the instance is ready
CKEDITOR.on('instanceReady', function() {
var textEditHeight = $(".textPanel").height();
var ckTopHeight = $("#cke_1_top").height();
var ckContentsHeight = $("#cke_1_contents").height();
for (var i = 1; i < 10; i++) {
$("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");
}
});
// resize the editor(s) while resizing the browser
$(window).resize(function(){
var textEditHeight = $(".textPanel").height();
var ckTopHeight = $("#cke_1_top").height();
var ckContentsHeight = $("#cke_1_contents").height();
for (var i = 1; i < 10; i++) {
$("#cke_"+i+"_contents").height( (textEditHeight - ckTopHeight - 10) + "px");
}
});
});
I have multiple instances of the editor of the exact same size in tabs, for every language one, hence the for loop. If you have one editor you can leave that line away and use the standard id cke_1_contents.
In this example the heights are taken from the first editors toolbar (cke_1_top) and contentpanel (cke_1_contents). The .textPanel height is the surrounding div were the editor should fit in. I added 10px because I needed that for my layout.
I think it can be a littlebit more efficiënt (it initiates the resizing as many times as there are editors) but for now it is finally working flawlessly in all my recent browsers (ff, ie, chrome and safari).
I managed to configure a 100% height via CSS:
Configure the editor with config.height = '100%', even when the docs say this isn't supported.
Put this in your CSS:
span.cke_wrapper cke_ltr,table.cke_editor, td.cke_contents, span.cke_skin_kama, span.cke_wrapper, span.cke_browser_webkit{
height: 100%!important;
}
I tested this with Chrome, Firefox and Safari and it worked fine. Since this is pure CSS, the height will get adjusted automatically when the window or the corresponding container is resized.
The documentation on ckeditor for CKEDITOR.config.height say that they do not support percentage units e.g.: 30%;
however, there is a td with a class of cke_contents. if you set the height on that (with an absolute value it will work).
It seems that ckeditor does not have a good solution for this problem.
The only other way I can think of is to use javascript to change the style on the above td.
None of the above solutions worked fine for me in order to set the height either with percentage or without it. Percentages are still not supported at all unless you hack it with one of the above solutions.
As stated in the documentation, you may set the height and css style with:
<head>
<script type="text/javascript">
CKEDITOR.config.height = 1000;
CKEDITOR.config.contentsCss = '/css/yourstyle.css';
</script>
</head>
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.height
Put this property in your css config file:
.cke_reset{
min-height: 200px;
}
here is the dojo version of the code above... in case anyone is interested...
var adjustEditor = function() {
var editorNode = dom.byId('cke_messageEditor');
console.log("editor node %s ", editorNode);
var editorStyle = domStyle.getComputedStyle(editorNode);
console.log("editor node %s and style %s", editorNode, editorStyle);
var textEditHeight = domGeom.getMarginBox(editorNode, editorStyle).h;
var toolbarNode = dom.byId('cke_1_top');
var toolbarStyle = domStyle.getComputedStyle(toolbarNode)
var ckTopHeight = domGeom.getMarginBox(toolbarNode, toolbarStyle).h;
var contentNode = dom.byId('cke_1_contents');
var contentStyle = domStyle.getComputedStyle(contentNode)
var ckContentsBox = domGeom.getMarginBox(contentNode, contentStyle);
console.log("text editor: %s, button bar: %s", textEditHeight, ckTopHeight);
console.log("setting margin box to: %s ", JSON.stringify(ckContentsBox));
ckContentsBox.h = textEditHeight - ckTopHeight;
console.log("setting margin box to: %s ", JSON.stringify(ckContentsBox));
domGeom.setMarginBox(contentNode, ckContentsBox, contentStyle);
}
// adjust editor immediately
CKEDITOR.on('instanceReady', adjustEditor);
// and again everytime the window is resized
on(window, "resize", adjustEditor);
I have been looking for a clean way to get the CKEditor window to be the same height as the textarea it is replacing. I'm using Drupal, and this is how I did it ...
In my theme I load up a javascript file, (using "scripts[] = default.js" in my .info file).
In this file I have:
$(document).ready(function(){
// Set CKEditor height
if (typeof CKEDITOR!='undefined') {
CKEDITOR.on( 'instanceReady', function( e ) {
e.editor.element.show();
var elHeight = $(e.editor.element.$).height();
e.editor.element.hide();
e.editor.resize('100%', elHeight, true);
});
}
}
The beauty of this is you can then change the height using css.
I had been changing the settings.height via the wysiwyg module in wysiwyg/editors/js/ckeditor-3.0.js
Drupal.wysiwyg.editor.attach.ckeditor = function(context, params, settings) {
// Apply editor instance settings.
CKEDITOR.config.customConfig = '';
// Match the height of the replaced field
settings.height = $('#' + params.field).height();
}
but this would get overwritten during updates, so went with the top solution.
I just got around doing this in CKEditor4, not sure if it is any use to you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="ckeditor/ckeditor.js"></script>
<!-- tested with CKEditor 4.5.3 (revision 6c70c82) -->
<style type="text/css">
.cke_1 {
height: 100% !important;
width: 100% !important;
position: static;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.cke_inner {
height: 100% !important;
width: 100% !important;
display: table !important;
}
.cke_top { display: table-cell !important; }
.cke_contents { height: 100% !important; display: table-row !important; }
.cke_bottom { display: table-cell !important; }
textarea.cktextarea {
width: 100% !important;
height: 100% !important;
}
</style>
<script>
CKEDITOR.config.width = '100%';
CKEDITOR.config.height = '100%';
CKEDITOR.plugins.registered['maximize'] = {
init: function(editor) {
var command = editor.addCommand('maximize', {
modes: { wysiwyg:1, source:1 },
exec: function(editor) {
if (editor.container.getStyle('position') != 'fixed') {
this.setState(CKEDITOR.TRISTATE_ON);
editor.container.setStyle('position', 'fixed');;
} else {
this.setState(CKEDITOR.TRISTATE_OFF);
editor.container.setStyle('position', 'static');
}
}
});
editor.ui.addButton('Maximize', { label: 'Maximize', command: 'maximize', toolbar: 'tools' });
}
}
</script>
</head>
<body>
<div style="background: darkgray; padding: 0.5em; display: inline-block; position: fixed; left: 20px; top: 20px; left: 20px; right: 20px; bottom: 20px;">
<textarea name="editor1" id="editor1" class="cktextarea"></textarea>
<script>CKEDITOR.replace('editor1');</script>
</div>
</body>
</html>
If you are not using the maximize plugin a lot of the javascript is unnecessary, I replaced the functionality of this plugin because it was breaking the new CSS (and breaking by itself after I set all the CSS !important).
This is solution for me, without jQuery, working in C# WebBrowser control, also no vertical scroll when horizontal shown.
<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge">
<title>CKEditor Sample</title>
<script src="../ckeditor.js"></script>
<script src="js/sample.js"></script>
<link rel="stylesheet" href="css/samples.css">
<link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
</head>
<body id="main">
<div id="editor">
</div>
<script>
initSample();
CKEDITOR.on("instanceReady", function () { initFullSize(); });
function initFullSize() {
window.addEventListener("resize", onWindowResize);
document.getElementById("main").style.minWidth = "970px";
document.getElementById("cke_1_resizer").style.display = "none";
document.getElementsByClassName("cke_inner cke_reset")[0].style.height = "100%";
onWindowResize();
}
function onWindowResize() {
document.getElementById("main").style.height = document.documentElement.clientHeight + "px";
document.getElementById("cke_editor").style.height = document.documentElement.clientHeight - 3 + "px";
document.getElementById("cke_1_contents").style.height = (document.documentElement.clientHeight - document.getElementById("cke_1_top").clientHeight - document.getElementById("cke_1_bottom").clientHeight - 3) + "px";
}
</script>
</body>
</html>
Related
I have a webpage that offers clients to perform filter operations.
See image of my interface here. The user can filter results based on the countries in the squares.
Everything is working fine, my view updates perfectly when user filters.
However, I cannot find a solution to update the map on filter, like I am updating the content.
I am wondering how to ask Mapbox to listen for click event outside of the map, or to stay updated with what is filered on the interface.
It's the same example than this, except that instead of having to click on the menu inside the map to filter the results on the map, I want the results on the map to be automatically filtered based on my other filter (the one with square regions of the world, shown on my interface
here
Thanks!
You can use the map variable to trigger map changes from outside the map:
mapboxgl.accessToken = 'pk.eyJ1Ijoiam93ZXQiLCJhIjoiY2wzcTlhOTc0MTJ5aDNwbDJlNG5ncDAzZiJ9.PiDzh6BzO92pueGLxv1w5g';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-87.661557, 41.893748],
zoom: 10.7
});
var flyToButton = document.getElementById('flyToButton');
flyToButton.addEventListener('click', handleZoomButtonClick);
function handleZoomButtonClick() {
map.flyTo({
center: [-74.5, 40],
essential: true
});
}
var addLayerButton = document.getElementById('addLayerButton');
addLayerButton.addEventListener('click', handleAddLayerButton);
function handleAddLayerButton() {
map.addSource('urban-areas', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
});
map.addLayer({
'id': 'urban-areas-fill',
'type': 'fill',
'source': 'urban-areas',
'layout': {},
'paint': {
'fill-color': '#f08',
'fill-opacity': 0.4
}
});
}
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#flyToButton {
position: absolute;
}
#addLayerButton {
position: absolute;
top: 30px
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Points on a map</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<button id="flyToButton">Fly to</button>
<button id="addLayerButton">Add layer</button>
</body>
</html>
How you can implement the filter functionality depends on the type of your data. But probably the following mapbox example will help you: Filter features within map view
Apparently this doesn't work, and since I'm new to HTML5 I'm unsure as to why. I should get some vertical lines on the canvas. The idea is to build a grid on the canvas screen to work from, but this doesn't seem to be creating the lines for some reason.
<!DOCTYPE html>
<html>
<head>
<title>Test App</title>
<style>
body {
padding:0px;
margin:0px;
}
canvas {
border:1px solid #000000;
}
</style>
</head>
<body>
<canvas id="gc" width="800" height="600"></canvas>
<script>
function buildGrid() {
alert("Start!");
var gameCanvas = document.getElementById("gc");
var ctx = gameCanvas.getContext("2d");
for (x=5; x<gameCanvas.width; x+=5) {
console.log(x);
ctx.moveTo(x, 10);
ctx.lineTo(x, gameCanvas.length);
}
ctx.strokeStyle = "black";
ctx.stroke();
}
window.onload = buildGrid();
</script>
</body>
</html>
Instead of
ctx.lineTo(x, gameCanvas.length);
Try
ctx.lineTo(x, gameCanvas.height);
https://jsfiddle.net/9as7mwb6/6/
There’s no gameCanvas.length. It should be gameCanvas.height.
However, I think you should add 0.5 to each x value in order to make the edges sharp instead of blurry:
for (var x = 5; x < gameCanvas.width; x += 5) {
console.log(x);
ctx.moveTo(x + 0.5, 10);
ctx.lineTo(x + 0.5, gameCanvas.height);
}
I am trying to place the HOT element with (height:100%) inside position:fixed container.
But the vertical scrolling does not work - only blank rows in FF39, GC44, and IE11.
I have also tried to set dynamically the height of HOT element to the values of parent container, e.g.
var ex = $('#example').parent();
$('#example').height(ex.height());
It works fine in GC and FF, but there are issues with scrolling in IE11. If you move the vertical scrollbar to the bottom, it shows the last row at ~66700. But the last row number should be 100000.
<!DOCTYPE html>
<html>
<head>
<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
</head>
<body>
<div style="position:fixed;top:20px;bottom:0;left:0;right:0; overflow:hidden; border: 1px solid green">
<div style="position:fixed; top:40px;left:5px;right:5px;bottom:5px;border: 1px solid red">
<div id="example" style="overflow:auto; height:100%"></div>
</div>
</div>
<script type="text/javascript">
var data = Handsontable.helper.createSpreadsheetData(100000, 10);
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
stretchH: 'all',
contextMenu: true
});
</script>
</body>
</html>
Does anyone know any CSS/layout tricks how to get Handsontable work correctly when using 100% of space of the parent container?
Thanks
I wasn't aware of that bug but to be honest I never use height:100%. Instead, why don't you manually calculate the height using the offset:
let height = $(window).height() - $("#hot-container").offset().top;
And if you want it to always keep the 100% height, even on resize, then add:
$(window).resize(function(){
hotInstance.updateSettings({
height: $(window).height() - $("#hot-container").offset().top;
})
});
I have a jsfiddle here to illustrate my question
http://jsfiddle.net/ttmt/DgnLd/1/
It's just a simple button with a hidden div. The button slide toggles the hidden div.
I would like to have div filled with a random color each time it opens.
At the moment it's picking two random colors - when the div is opening and when the finished opening.
How can I stop the second color and just have one.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<style type="text/css">
•{
margin:0;
padding:0;
}
#wrap{
margin:20px;
}
#btn{
width:100px;
height:50px;
background:red;
color:white;
padding:10px;
margin:0 0 50px 0;
}
#infoDiv{
width:500px;
height:300px;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
CLICK
<div id="infoDiv">
</div>
</div>
<script>
$(document).ready(function(){
alert('here');
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
$('#infoDiv').slideToggle('slow', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv').css({'background': col});
});
});
});
</script>
</body>
</html>
$(document).ready(function(){
var color_arr = ['#6faab6','#80c3d1','#888888','#d8e420','#21b4e4','#e4b115','#33ace4'];
$('#infoDiv').hide();
$('#btn').bind('click', function(){
var ranNum = Math.floor(Math.random()*color_arr.length);
var col = color_arr[ranNum];
$('#infoDiv:hidden').css({'background': col});
$('#infoDiv').slideToggle('slow');
});
});
Try that -- I've moved your Random color picker out of the SlideToggle callback as that will only run once the slide was finished which from your question I assumed you didn't want.
It also only changes the color of the info div if it's hidden by checking the visible selector, you can read more about that here
Let me know if that works for you
I have done an easy onmousehover effect and it works in all browsers, but firefox. I have stripped down the code to a bare minimum, but can't figure out whats wrong! Why doesn't the mouseover below work in firefox?
<!DOCTYPE html>
<html>
<head>
<style>
#box {
background:#222;
width:400px;
height:300px;
border-radius:5px;
}
#box_hover {
background:#555;
width:400px;
height:300px;
border-radius:5px;
}
</style>
<script type="text/jscript">
function mouseover() {
document.getElementById('box').id = 'box_hover';
}
function mouseout() {
document.getElementById("box_hover").id = 'box';
}
</script>
</head>
<body>
<div id="box" onmouseover="mouseover();" onmouseout="mouseout();"></div>
</body>
</html>
Firefox doesn't like "text/jscript". Try "text/javascript" instead.
see this link now this is work
<div id="box" onmouseover="mouseover();"></div>
and
#box {
background:#222;
width:400px;
height:300px;
border-radius:5px;
}
#box:hover {
background:#555;
width:400px;
height:300px;
border-radius:5px;
}
Besides the text/jscript issue, you can change your code like this: http://jsfiddle.net/RKKvt/
Please note that addEventListener does not work in older versions of Internet Explorer, and you need to resort to an hack (or drop it completely and go for the old element.onclick = function() { /* Do something here... */ }; way).
HTML
<div id='test'></div>
CSS
#test {
background-color: red;
height: 100pt;
width: 100pt;
}
JavaScript
document.getElementById('test').addEventListener('mouseover', function () {
this.setAttribute('style', 'background-color: green;');
}, false);
document.getElementById('test').addEventListener('mouseout', function () {
this.setAttribute('style', '');
}, false);