I'm trying to run TinyMCE in Material Design Lite modal, but drop-downs for selecting Font family and font size not working:
JSFiddle example:
https://jsfiddle.net/m11q7dzj/
CSS:
.mdl-dialog{
width: 500px;
height: 500px;
}
.editable{
width: 500px;
height: 450px;
outline: 1px dotted #333;
}
HTML:
<dialog class="mdl-dialog">
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<div class="editable-parent"></div>
<div class="editable">Click to edit...</div>
</div>
</form>
</dialog>
<input id="show-dialog" type="submit" value="Open Editor" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" />
JavaScript:
var dialog = document.querySelector('dialog');
var showDialogButton = document.querySelector('#show-dialog');
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function () {
dialog.showModal();
tinymce.init({
selector: 'div.editable',
inline: true,
height: '480px',
max_height: 500,
fixed_toolbar_container: ".editable-parent",
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
toolbar: 'fontselect | fontsizeselect',
menubar: false
});
});
I have added the following code and it is working:
setup: function (ed) {
ed.on('focus', function (args) {
$(dialog).on("click", ".mce-listbox", function() {
$("body > div[id^=mceu_]").appendTo(dialog);
});
});
}
https://jsfiddle.net/m11q7dzj/1/
Related
I'm working on a scheduling widget concept. The basic idea is to have a row of DIVs for each day of the week. Each row has a fixed number of time periods represented by DIVs. I want to be able to resize each DIV by dragging a handle on the left hand side. The leftmost DIV cannot be dragged, but it resizes depending on the resizing of the DIV to its right. This continues down the row, i.e., the DIV to the left is resized automatically when the DIV to the right is resized. I'm using the Resizable widget in jQuery UI for the basic resize function.
I have prepared an example fiddle at: https://jsfiddle.net/profnimrod/rpzyv0nd/4/
For some reason the draggable handle on the left hand side of each DIV (other than the first one) is not moving as I would expect.
The Fontawesome icon inside each DIV (other than the first one), which I'd like to use as the resize handle is also not displaying.
Any ideas on how to fix these two issues.
Note that the there is a canvas element behind the DIV containing the row. The intent here is that I will be adding graphical elements behind the rows at somepoint (the row DIVs will be transparent).
The code I'm starting with (available at the Fiddle) is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schedule test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev" crossorigin="anonymous">
<style>
#container { width: 600px; height: 300px; }
#resizable1 { width: 150px; height: 50px; display:inline; float:left;}
#resizable2 { width: 150px; height: 50px; display:inline; float:left;}
#resizable3 { width: 150px; height: 50px; display:inline; float:left;}
#resizable4 { width: 142px; height: 50px; display:inline; float:left;}
#resizable1, #resizable2, #resizable3, #resizable4, #container { padding: 0em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable2" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable1").width($("#resizable1").width() + 50);
}
else {
$("#resizable1").width($("#resizable1").width() - 50);
}
}
});
$( "#resizable3" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable2").width($("#resizable2").width() + 50);
}
else {
$("#resizable2").width($("#resizable2").width() - 50);
}
}
});
$( "#resizable4" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable3").width($("#resizable3").width() + 50);
}
else {
$("#resizable3").width($("#resizable3").width() - 50);
}
}
});
});
</script>
</head>
<body>
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active">
</div>
<div id="resizable2" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
</body>
</html>
Consider the following Fiddle: https://jsfiddle.net/Twisty/0r8v47yL/29/
JavaScript
$(function() {
$(".re-size").resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
}
});
});
I added classes to your DIV elements to make it easier to assign. First thing to know about resizing on w is that both left and width of the element will be adjusted. For example if you have:
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
This being set in CSS to 150px width and 50px height, when we drag the handle over, the left will be updated to say 45px and width will be changed to 105px. From a UI perspective this is what the user is expecting the action to do, the left hand side is moved. For your project, this does not work well.
Another issue that this does not address is that widening the element becomes more difficult. You can look at the event and review mouse movement to see if the user is trying to move the mouse closer to the left edge.
More complete example: https://jsfiddle.net/Twisty/0r8v47yL/61/
HTML
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active no-re-size item">
</div>
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
JavaScript
$(function() {
$(".re-size").resizable({
handles: "w",
containment: "#container",
resize: function(e, ui) {
//console.log(e);
var x = e.originalEvent.originalEvent.movementX;
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
if (x < 0) {
console.log(ui.size.width + Math.abs(x));
ui.element.width(ui.size.width + 50);
} else {
ui.size.width = ui.size.width - 50;
}
}
});
});
Hope this helps.
I need to create a function that generates a new instance of a specific div (.container in the template) when a button (#addDiv) is clicked. The button should be the only thing visible on the webpage before that. How do I do?
I know that it may be possible to do this with document.appendChild. Is there a better way?
I am using toggle-function that works great, I have included it in the code to give you the whole picture.
Vue
Vue.component('dynamicdDvs', {
template: `
<div>
<div class="headerDiv">
<button class="addDiv" type="button" v-on:click="createDiv">Create</button>
</div>
<div class="container">
<div class="createdDiv">
<h2>I am dynamic!</h2>
<button class="minimize" v-on:click="expand">Make me smal</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv">
<p>I am a smal version of the created div!</p>
<button class="maximize" v-on:click="expand">Expand me</button>
</div>
</div>
</div>
`,
data:function () {
return {
displayDiv: false
}
},
methods: {
expand: function () {
this.displayDiv = !this.displayDiv;
},
createDiv: function() {
//The function that creates a new div, with the same code as
//.createdDiv and .createDivMinimized may be placed here
}
}
});
CSS
.headerDiv {
height: 100px;
width: 400px;
background-color: blue;
color: white
}
.createdDiv {
height: 300px;
width: 400px;
background-color: black;
color: white
}
.createdDivMinimized {
height: 300px;
width: 400px;
background-color: red;
color: white
}
HTML
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="parent">
<dynamicDivs></dynamicDivs>
</div>
So what you can do is set a number in data for the number of <div> elements and use v-for with a range. For example
data () {
return {
displayDiv: [false],
divs: 1
}
}
And in your template
<template v-for="n in divs">
<div class="createdDiv">
<!-- snip -->
<button class="minimize" v-on:click="displayDiv[n-1] = !displayDiv[n-1]">Make me small</button>
</div>
<div class="createdDivMinimized" v-if="!displayDiv[n-1]">
<!-- snip -->
</div>
</template>
and in your methods...
createDiv () {
this.divs++
this.displayDiv.push(false)
}
I have two bootstrap popovers and they should be able to open the side panel.
Also please find the related code in JSFiddle https://jsfiddle.net/bob_js/eLLaacju/
I wanted to achieve the below issue: the popover should open on data-trigger="hover" and stay as it has content in which if we can click the Text (Click Me) it should open a side panel. data-trigger="focus" doesn't help either.
Could you please help me, below is the related code to it.
HTML:
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
</div>
CSS:
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden{
display: none;
}
jQuery:
$(function () {
$("#popover-a").popover({
html: true,
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
content: function(){
return $('#popover-content-b').html();
}
});
})
Just adding the below to my jQuery helps the issue for now.
trigger: 'click hover', delay: {show: 50, hide: 4000},
$(function () {
$("#popover-a").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-b').html();
}
});
})
on click run button open new window with data of html, css and javascript code editor. css is pass in new window but html data not, in html using code mirror that can pass in javascipt
run botton code is here
<div style="float:left; width:100%; height:93px;">
<span class="containerTitle" style="top:65px;">
Result
</span>
</div>
on this button call function "nwin"
$("a#result").click(nWin);
nwin function is,
<script>
function nWin() {
var w = window.open();
$(w.document.body).html("<style>" + $('#css').val() + "</style>"+ $('#html').val() );
}
</script>
html data codemirror is,
<div class="codecontainer" id="htmlContainer" style="max-width:40%;">
<span class="containerTitle">HTML</span>
<textarea class="code" id="html" style="display: none;"></textarea>
</div>
that pass value in editor variable,
<script>
var editor = CodeMirror.fromTextArea(document.getElementById("html"), {
lineNumbers: true,
mode: "text/html",
matchBrackets: true
});
</script>
how to set the value editor in function nwin in html window
I think you need to save from the code editor to the text area before getting the value. It is working in my example
http://jsfiddle.net/em1uz745/2/
Put the same code in a snippet for reference, but it appears that the window.open is blocked:
$("a#result").click(nWin);
var cssEditor = CodeMirror.fromTextArea(document.getElementById("css"), {
lineNumbers: true,
mode: "text/css",
matchBrackets: true
});
var htmlEditor = CodeMirror.fromTextArea(document.getElementById("html"), {
lineNumbers: true,
mode: "text/html",
matchBrackets: true
});
function nWin() {
// Commit the code to the textarea so that it can be extracted using value
cssEditor.save();
htmlEditor.save();
var w = window.open();
$(w.document.head).append("<style>" + $('#css').val() + "</style>");
$(w.document.body).html($('#html').val() );
}
body {
font-family: sans-serif;
font-size: 14px;
}
.button_example {
display: inline-block;
background: #ccc;
border-radius: 3px;
border: 1px solid #333;
color: #333;
padding: 10px 20px;
text-decoration: none;
}
.button_example:hover {
background: #aaa;
}
.codecontainer {
width: 50%;
float: left;
}
.clearfix {
clear: both;
}
}
<link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet"/>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button_wrap">
<span class="containerTitle">
Result
</span>
</div>
<div class="codecontainer" id="cssContainer">
<span class="containerTitle">CSS</span>
<textarea class="code" id="css"></textarea>
</div>
<div class="codecontainer" id="htmlContainer">
<span class="containerTitle">HTML</span>
<textarea class="code" id="html"></textarea>
</div>
<div class="clearfix"></div>
function showwLess() {
button.style.display="block";
idTab5.style="height:250px;overflow:hidden;font-size:14px;line-height:20px;";
button2.style.display="none";
}
That is the code for my button, idTab5 is the div to be styled, I was wondering if there was a better way to apply the style to the div than
idTab5.style="
EDIT:
got this..
<script>
var button2 = document.getElementById("button2");
var button = document.getElementById("button");
var idTab5 = document.getElementById("idTab5");
function showwMore() {
$("#button").hide();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").show();
}
function showwLess() {
$("#button").show();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").hide();
}
</script>
and
{if $product->description|count_characters:true > 350 }
{* full description *}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;">{$product->description}</div>
<input id="button" type="button" style="margin-top:5px;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar +" onclick="showwMore()">
<input id="button2" type="button" style="margin-top:5px;display:none;font-size:12px;line-height:16px;color:white; width:120px;background:#4e3248;border:none;height:30px;border-radius:5px;" value="Mostrar -" onclick="showwLess()">
{else}
<div id="idTab5" style="overflow:hidden;height:250px;font-size:14px;line-height:20px;line-height:16px;">{$product->description}</div>
{/if}
There is, use jquery like this:
$("#idTab").css({
height: 250,
overflow: "hidden",
//and so on...
});
Use jquery. If your elements have id's:
function showwLess() {
$("#button").show();
$("#idTab5").css({height: "250px",
overflow: "hidden",
font-size: "14px",
line-height: "20px;"});
$("#button2").hide();
}
It's really very easy to get used to it, if you want a starting point I highly recommend CodeSchool.
EDIT
Add this to your html to include the jquery library. I still recommend you check my links:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>