I would like to remove a div from the TinyMCE editor content that has a specific class.
In the ideal world I'd like to be able to do this via the valid_elements option but I don't know if it's achievable.
Here is a sample of editor content:
<div class="content">
Some html content here
<div class="anotherclass"></div>
</div>
I would like the
<div class="content">
stripping out so the editor will only show this:
Some html content here
<div class="anotherclass"></div>
Cheers guys.
First get the innerHTML of the div, and then append that content to the div, after which you can remove it.
In jQuery:
var contentHtml = $(".content").html();
$(".content").after(contentHtml);
$(".content").remove();
Of course, if you have multiple divs with these classes its more complicated because then you would have to work with parents etc.
Problem here will that by default your editor will have a root_block element (in your case div) and all content gets wrapped inside that kind of root_block element. This is done for styling purposes, but can be deactivated using this initialization params
force_p_newlines : false,
force_br_newlines : false,
convert_newlines_to_brs : false,
remove_linebreaks : true,
Once that is done you can use this code to easily get rid tof your divs.
var $elements_to_be_removed = $(".content");
$elements_to_be_removed.each(function(index) {
$(this).replaceWith(this.innerHTML);
});
Related
I have a div containing all my content, and then I have a div containing pop-up windows. So basically something like this:
<div class="content">
Some content
</div>
<div class="popup-wrapper">
Popup content
</div>
Then at some point a class is added to the popup-wrapper due to some button click, that in Angular would look something like:
<button (click)="popup = !popup">Click me</button>
<div class="popup-wrapper" [ngClass]="popup ? 'is-active' : ''">
Popup content
</div>
My question is: Are there some way (CSS wise. JS would probably also do if no other alternative is available) that when popup-wrapper has the class is-active I can also target content as well ?
The issue for me not just putting the same JS into the content div, i.e. [ngClass]="popup ? 'is-active' : ''" is because there are several instances that can activate a popup, and other popup wrappers as well. So if I were to do this I would have to go through every page that has this kind of popup-wrapper, and paste similar code into every content div, but with different state names.
So I just thought it would be much easier, if I could target the content div whenever the popup-wrapper div had the is-active class.
For my understanding, you'll need something like that:
function anyName () {
let x = document.getElementByClassName('is-active');
if (x === true) {
// do something
}
}
Depending on what ever you want to do next, you can either go for an identifier like your div's className ('content') or you try to target it by its position, like 'previousElementSibling'
I am trying to add custom Javascript into my Wordpress site. I have javascript being properly enqueued into the site. In order to stay compliant with html guidelines, I am trying to use classes for my header's on the accordion, which is why I'm using .accordion . and also using the substring to remove the hashmark from the url. If I change all of my classes to id's, take out the period in the selector, and also remove the substring for the trimming, it will work.
However, that will force me to use id's instead of classes. Is there any workaround for this or am I forced to use id's?
Non working code in override.js:
var hash = window.location.hash;
var begining= ".accordion .";
var trimmed = begining + window.location.hash.substring(1);
jQuery(document).ready(function() {
jQuery('.accordion').accordion({
active: false,
collapsible: true,
autoHeight: false,
heightStyle: "content"
});
jQuery(trimmed).click();
});
"Duct taped" working code in override.js
var hash = window.location.hash;
var begining= ".accordion ";
var trimmed = begining + window.location.hash;
jQuery(document).ready(function() {
jQuery('.accordion').accordion({
active: false,
collapsible: true,
autoHeight: false,
heightStyle: "content"
});
jQuery(trimmed).click();
});
Html that we want for page:
<div class="accordion">
<h3 class="zen-shi-apps">zen shi appetizers</h3>
<div>[simple-retail-menu id="1" header="none"]</div>
<h3 class="sushi-bar-apps">sushi bar appetizers</h3>
<div>[simple-retail-menu id="2" header="none"]</div>
</div>
Html that works:
<div class="accordion">
<h3 id="zen-shi-apps">zen shi appetizers</h3>
<div>[simple-retail-menu id="1" header="none"]</div>
<h3 id="sushi-bar-apps">sushi bar appetizers</h3>
<div>[simple-retail-menu id="2" header="none"]</div>
</div>
Actually I have also faced that issue long back. Then I tried to dig out the responsible code for the accordion. It was actually of jQuery UI.
The interesting thing is that, in the code they sometimes use the raw id(s) to get that targeted elements. So in this case, they might be collecting the element using id, not by class and that's why it is not working!
So, please check with your accordion-library code and just check whether they are using that way or not.
Cheers!
Is there a way to put actual html code inside a title attribute on a table row element? My goal is to pop-up not only text but some info-graphics along with it, so a mouseover event thats not a modal would be great. Am I going in the wrong direction?
This table is already using jquery datatables but I don't believe it can do that sort of event.
<tr title='This activity will be open to registration on April 31st' >
.....
</tr>
Nope. You'd need to create your own title substitute with JavaScript.
No.
HTML can't be placed in an attribute.
If the goal is to have a pop-up with rich content, then you need to handle this via javascript. In addition, from an accessibility standpoint, you likely don't want to put that amount of content into the title attribute anyways, so going the JS route is going to solve a few problems for you. Google 'JS Tooltip' for dozens of options.
Native tooltips do not use HTML. jQuery UI tooltips would be very useful here.
Demo: http://jqueryui.com/tooltip/
EDIT: You would need to use the content option to use markup instead of the title attribute.
$(".text")
.tooltip({ content: '<b style="color: red">Tooltip</b> <i>text</i>' });
Here's a Fiddle demonstrating this: http://jsfiddle.net/acbabis/64Q2m/
You can use jquery ui tooltip plugin for showing custom title
There is no direct way to render HTML code written inside a tooltip. However, if you are using jQueryUI (or, if you can) then the code below will show the HTML effect (render) and not the HTML code in the tooltip.
Requirements: jQuery, jQueryUI.js, jQueryUI.css
HTML Code:
<tr data-title='This activity will be open to registration on <b>April 31st</b>'>.....</tr>
JavaScript:
$(function() {
$( document ).tooltip({
items: '[title], [data-title]',
track:true,
content: function(){
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "[data-title]" ) ) {
return element.attr( "data-title" );
}
}
});
});
Instead of focusing on the title attribute, enclose a popup message with tags inside the target <td></td> (table data element). Then put a class in that td to control the div with CSS, hiding it first, then making its contents visible when the mouse hovers over the specific table data element. Something like this:
<tr><td class="info-tooltip">This activity will be open to registration on April 31st <div>[ *the contents you would want to popup here* ]</div></td></tr>
Your CSS then might be something like:
td.info-tooltip div {
display:none;
}
td.info-tooltip:hover {
position:relative;
cursor:pointer;
}
td.info-tooltip:hover div {
position:absolute; /* this will let you align the popup with flexibility */
top: 0px; /* change this depending on how far from the top you want it to align */
left: 0px; /* change this depending on how far from the left you want it align */
display:block;
width: 500px; /* give this your own width */
}
Using Bootstrap Tooltips one can do the following
<span title="Some <b>bold words</b>" data-toggle='tooltip' data-html='true'>this has an html supported tooltip</span>
for me it happens automatically but you might need to trigger it with javascript.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
docs
I think a good option is to put that content inside a data attribute, something like this:
<div data-tooltip="Some information I want to show">
Actual content
</div>
And then, write a simple jQuery plugin that shows that content inside an element upon hover over.
I'm wondering if it's possible to exclude some elements from TinyMCE's editable DIV. Here's an example code:
<div class="editable-area">
<h2>heading</h2>
<p>paragraph</p>
<div class="exclude-this-element"></div>
</div>
.exclude-this-element:empty:before { content: "Editable Area"; }
tinymce.init({
inline: true,
fixed_toolbar_container: '.toolbar'
});
tinyMCE.execCommand('mceAddEditor', false, '.editable-area');
The problem is that, when TinyMCE is initialized on .editable-area, it adds <br> tag to .exclude-this-element and Editable Area text stops appearing. Actually, I think that entire .exclude-this-element is erased after a while. Can this element be excluded completely from being altered by TinyMCE?
I would also like to attach some actions (like click or jQuery UI functions) to .exclude-this-element and make it not interfere with TinyMCE.
I tried valid_children, valid_elements and invalid_elements but I think that none of these can be used to exclude any elements from being editable (it only excludes them when saving the content of the editor): http://www.tinymce.com/wiki.php/Configuration
You can use content editable method
http://www.tinymce.com/wiki.php/api4:property.tinymce.Env.contentEditable and also
noneditable plugin. This plugin makes elements with noneditable class to be - non editable
http://www.tinymce.com/wiki.php/Plugin:noneditable
EDIT:
Try to block the BR elements by adding this in tinyMCE INIT configuration:
force_br_newlines : false,
forced_root_block : "",
convert_newlines_to_brs: false,
If the BR tags appear inside content when you paste it from somewhere you also can add this:
paste_preprocess: function(pl, o) {
o.content = o.content.replace(/<br><\/br>/gi, " ");
}
This is probably a fairly easy question, but I'm new to JavaScript and jquery....
I have a website with a basic show/hide toggle. The show/hide function I'm using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?
Here's a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg
There are many different implementation possibilities:
You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).
Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/.
You'd need to either:
Put in a span/etc. after the first n words, and only hide that part, or
Change the viewable region, or
Replace or toggle the span/etc. with the "collapsed" view.
The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.
I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.
You can do some plugin authoring,I did a sample demo here ,based on your screenshot
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
here is javascript/jquery code
jQuery.fn.myToggle = function(selector, count) {
var methods = {
toggle: function(selector, count) {
if ($(selector).is(':visible')) {
var span = $('<span>');
span.text($(selector).text().substr(0, count) + "...");
span.insertAfter($(selector));
$(selector).hide();
}
else {
$(selector).show();
$(selector).next('span').hide();
}
}
};
$(this).each(function() {
methods.toggle($(this).next(selector), count);
$(this).click(function(evt) {
methods.toggle($(this).next(selector), count);
});
});
};
$(function() {
$('.toggle').myToggle('.content', 3);
});
Here is a solution using css properties only instead of mangling the dom.
http://jsfiddle.net/AYre3/4/
Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.