When placing a TinyMCE editor inside a bootstrap modal, the editor is visible and functioning, however when clicking a menu item the menu doesn't show up.
Add the folowing css
.tox-tinymce-aux {
z-index: 999999!important;
}
Bootstrap blocks all focusin calls from elements outside the dialog. To render TinyMCE instances inside a Bootstrap dialog, add the following code:
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
Here is an example: http://fiddle.tinymce.com/gRgaab
Related
I'd like to use TinyMCE 4.1.7 in inline mode. When the user right-clicks a DIV and selects Edit, indicating they want to edit the DIV, I execute
var id= g.currentElement$.attr('id');
tinymce.init({
selector: "div#"+id,
inline:true,
});
This adds a TinyMCE editor (I know because I catch an AddEditor event) but it doesn't seem to append the editor elements to the DOM (I can't see them in Chrome DevTools Elements tab). For the editor to appear I have to click inside the DIV.
I want to change this behavior so that when the user right-clicks the DIV and selects Edit, my handler will also trigger whatever is triggered now by clicking in the DIV. So after I've launched the editor, as above, I need to call some other method that will append the editor to the DOM and make it visible, so clicking Edit in the context menu is all I need to bring up the TinyMCE editor.
Could someone tell me what I need to do to accomplish this?
(The reason I can't just click the DIV to bring up the editor is that a click already means something else. A single click selects the DIV, where it can be deleted, duplicated, nudged, etc. A drag on the DIV moves it. And a drag on a DIV corner resizes the DIV. A right-click with an Edit option is all I have left.)
Thanks for your help.
Steve
I got this working as follows.
I first run the tinymce init:
var id= g.currentElement$.attr('id');
tinymce.init({
selector: "div#"+id,
inline:true,
});
That creates an editor for the element but doesn't render or show it. Rendering and showing the editor normally requires a mousedown on the element.
After stepping through a lot of tinymce code I realized that firing a focusin event on the editor instance is what gets the editor rendered and displayed. So I created a callback for AddEditor. The AddEditor event comes in early in the editor create process, though, and I didn't want to fire focusin until the editor was complete, so at the AddEditor event I get the editor instance and create a callback for "NodeChange," which happens at the end of the editor create.
When NodeCreate comes in I fire a "focusin" on the editor and that renders and displays the editor, as I wanted. A single click, now, runs tinymce init and leaves an inline editor displayed and ready on top of the element.
The total code is:
tinymce.on('AddEditor', function(e) {
e.editor.on('NodeChange', function(e) { // now that we know the editor set a callback at "NodeChange."
e.target.fire("focusin"); // NodeChange is at the end of editor create. Fire focusin to render and show it
});
});
If anyone sees anything wrong with this I'd be very grateful for any comments.
Thanks
tinymce.init({
selector: "div#"+id,
inline:true,
setup: function (ed) {
ed.on('init', function(e) {
e.target.fire("focusin");
});
}
});
This will do the trick for the initiating editor instance. Better then globally firing for every single NodeChange event for every single editor instance on the page. (Assuming there multiple editors but also works with single editor.)
BUT WAIT...
There is a better practice using JS Promises. tinymce.init returns a Promise Object.
let tinyMcePromise= tinymce.init({
selector: "div#"+id,
inline:true
});
tinyMcePromise.then(function(editors){
editors[0].focus();
});
Official documentation: https://www.tinymce.com/docs/api/tinymce/root_tinymce/#init
Beware: Some older versions of tinyMce have a bug about init Promise.
**Please first add jquery and tinymce library..**
<script src="latestjquery.js" type="text/javascript" charset="utf-8"></script>
<script src="tinymce.min.js"></script>
<form method="post">
<textarea>here firstly onlciki will show menu and when edit will be selcted then it will be converted into ediotr</textarea>
</form>
<ul class='custom-menu'>
<li data-action = "first">First thing</li>
<li data-action = "second">Second thing</li>
<li data-action = "third">Third thing</li>
</ul>
<script>
//Trigger action when the contexmenu is about to be shown
$("textarea").bind("contextmenu", function (event) {
// Avoid the real one
event.preventDefault();
// Show contextmenu
$(".custom-menu").finish().toggle(100).
// In the right position (the mouse)
css({
top: event.pageY + "px",
left: event.pageX + "px"
});
});
// If the document is clicked somewhere
$("textarea").bind("mousedown", function (e) {
// If the clicked element is not the menu
if (!$(e.target).parents(".custom-menu").length > 0) {
// Hide it
$(".custom-menu").hide(100);
}
});
// If the menu element is clicked
$(".custom-menu li").click(function(){
tinymce.init({
selector: "textarea"
});
// This is the triggered action name
switch($(this).attr("data-action")) {
// A case for each action. Your actions here
case "first": alert("first"); break;
case "second": alert("second"); break;
case "editor": alert("editor will appear");
break;
}
// Hide it AFTER the action was triggered
$(".custom-menu").hide(100);
});
</script>
<style>
.custom-menu {
display: none;
z-index: 1000;
position: absolute;
overflow: hidden;
border: 1px solid #CCC;
white-space: nowrap;
font-family: sans-serif;
background: #FFF;
color: #333;
border-radius: 5px;
}
.custom-menu li {
padding: 8px 12px;
cursor: pointer;
}
.custom-menu li:hover {
background-color: #DEF;
}
</style>
I'm having a similar problem as described in this question, but with JQuery Mobile 1.4, particularly with the list views. A slight tap that is not enough to be considered a click causes list elements to highlight and stay highlighted:
Can anyone tell me how I can prevent any hover highlighting in my application? I would rather not have to modify any of the JQM theming CSS to do this, but I will if that is what it takes.
It looks like maybe there is a jquery hover event or mouseover being triggered to set the interaction state to something like ".ui-state-hover" or ".state-hover"
1.
jQueryUI - removing class on hover
2.
function overPrevent(e){
e.preventDefault();
return false;
}
$(".options li").hover(overPrevent,outOption);
// alternative to above but still using JavaScript
$(".options li").click(function() {
$(this).removeClass("ui-state-focus ui-state-hover");
}
// alternative to above but still using JavaScript
$(".options li").hover(function(e){
$(this).removeClass("ui-state-hover");
});
OR maybe unbind to the mouseenter and mouseleave?
3.
$('.options li').click(function(){
$(this).unbind("mouseenter mouseleave");
})
OR try a pure css override
4.
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
also detecting mobile up front with something like this small library - http://detectmobilebrowsers.com/
then you can name space your css and override the jquery ui library with something roughly like this:
.touch{
.theme-group-header .state-default .corner-all .state-hover:hover{
background:none;
}
}
see also references:
http://trentwalton.com/2010/07/05/non-hover/
jQueryUI - removing class on hover
http://tech.vg.no/2013/04/10/hover-state-on-touch-devices/
The issue with the "ui-state-hover" effect
Jquery hover function and click through on tablet
jQuery UI button not "unclicking"
http://api.jqueryui.com/theming/css-framework/
mobile safari links retains focus after touch
http://detectmobilebrowsers.com/
https://github.com/kof/remove-hover
To prevent any hover highlighting in a jQuery Mobile 1.4 Listview you can overwrite the appropriate CSS according to the swatch you're using:
/* Button hover */
#yourList.ui-group-theme-a .ui-btn:hover {
background-color: #f6f6f6 /*{a-bhover-background-color}*/;
}
/* Button down */
#yourList.ui-group-theme-a .ui-btn:active {
background-color: #e8e8e8 /*{a-bdown-background-color}*/;
}
I have built a basic WordPress theme which has a primary and secondary navigation. Dev site here: http://website-test-lab.com/sites/weaver/
If you narrow your screen until the mobile menu's kick in, and click on either menu, they both display the primary navigation.
How can I alter this so that the menu that is clicked shows up? Here is my jQuery:
;(function($) {
// DOM ready
$(function() {
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav ul li').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
// Click to reveal the nav
$('.nav-mobile').click(function(){
$('.nav-list').toggle();
});
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
// Toggle the nested nav
$(this).siblings('.nav .sub-menu').toggle();
// Toggle the arrow using CSS3 transforms
$(this).children('.nav-arrow').toggleClass('nav-rotate');
});
});
})(jQuery);
Thanks in advance
I ended up editing this piece of JS:
// Click to reveal the nav
$('.nav-mobile').click(function(){
//$('.nav-list').toggle();
$(this).parent().children(".nav-list").toggle();
});
I am using the GBKS woodmark jquery infinite gallery plugin with JADE and EXPRESS.
I am also using bootstrap css, there is apparently a clash with bootstrap.css that makes the absolute positioning used by woomark fail onload.
The main issue is that the absolute positioning of li in a ul by bootstrap is over-writing the absolute positioning of li in a ul of the woomark gallery plugin.
There is a temporary solution of just calling the method again to re-position the site a couple of milliseconds after the site loads, but I don't think that is a good idea.
The issue isn't a clash with bootstrap, it's that wookmark doesn't know the height of the images before loading them. In order to fix it:
Add the Images Loaded JS plugin - https://github.com/desandro/imagesloaded
Modify the wookmark code so that it doesn't trigger before all the images are loaded:
<!-- Once the images are loaded, initalize the Wookmark plug-in. -->
<script type="text/javascript">
$('#tiles').imagesLoaded(function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('#tiles li');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});
I would like to style my selected button.
I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.)
I didn't have success with the css link selectors :visited, :focus, or :selected.
Does this require a javascript solution?
thanks for any pointers!
i usually just a extra class name called selected
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
you should use :active pseudo class in css to achieve what you want.
jQuery Solution with your CSS
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
If you use jQuery, you can accomplish it like this:
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.