TD as CKEditor inline instance - javascript

Is it possible to make content of TD tag editable with CKEditor inline?
I wrote code:
<div contenteditable="true">
this content IS editable
</div>
<table>
<tr>
<td contenteditable="true"> not IS NOT editable </td>
<td contenteditable="true"> not IS NOT editable </td>
</tr>
</table>
Test: http://jsfiddle.net/martinba/JBFmd/1/
I cant find if it is a bug or a feature.

Check my answer for Enable CKEditor4 inline on span and other inline tags. This is the same case - CKEditor does not support initializing it on td. You can try to hack editor just like BenO did in this answer Enable CKEditor4 inline on span and other inline tags but the result is unpredictable.

Related

JQuery link entire table row to anchor to trigger fancybox

I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE

JQuery Returning Null .next()

I'm trying to find a way to alert the contents of a p tag without a class, name or an id. It is a child of a tag named 'question' so I thought I could just next into it. There are 2 p tags under the parent tag, the one Im looking for is 2nd. When I run this it returns null. I can't figure out why because I'm new to JQuery, thanks for the help.
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
Your javascript is fine. The problem is with your HTML. You probably forgot to wrap it inside a table and a tr:
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
Your code from the question doesn't work since when <td> is without <table> and <tr> then it gets rendered like there was not <td>:
<p>First</p>
<p>This is the one I want</p>
see here
The problem is that markup is invalid. You can't have td element by itself without table and tr elements. So what happens, is that browser fixes broken markup by removing orphan td tag.
It will work if you make HTML valid:
alert($('#question').find('p').first().next().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>
When you check the code in the inspector you can see that as table and tr tags are not present then your td tag is not present either and the $('#question') returns null. Just add them.
alert($('#question').find('p').first().next().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="question">
<p>First</p>
<p>This is the one I want</p>
</td>
</tr>
</table>

Change background color of body element inside an iframe

I have the following code:
<table id="first">
<tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<input type="text" class="wp-color-picker">
</td>
</tr>
<tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
<td class="my-input">
<iframe>
<html>
<body id="tinymce" class="mce-content-body">
some text
</body>
</html>
</iframe>
</td>
</tr>
</table>
<table id="second">
<tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
<td class="my-input">
<input type="text" class="wp-color-picker">
</td>
</tr>
<tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
<td class="my-input">
<iframe>
<html>
<body id="tinymce" class="mce-content-body">
some text
</body>
</html>
</iframe>
</td>
</tr>
</table>
On load, I would like to change the background-color to all body elements (which is inside an iframe) to be the value of whatever is in the text input that is in the same tr level as the parent tr of the body.
So I need to get all body elements inside tr['data-type="wysiwyg"] iframe and then set that body elements css background to the value of the closest tr['data-name"background_colour"] siblings input.wp-color-picker.
Hope this makes sense. iframe is in the same domain.
UPDATE: I am able to target the correct body but now I need to figure out how to get the text input value that's in another tr but the same level as the parent tr of body and use that as the body's background-color.
Demo: https://jsfiddle.net/pgr8wzqb/9/
This will only work if the iframes are on the same domain but you can try:
// change the selector to match your iframes
$("iframe").each(function() {
// you seem to need to load the iframe first otherwise the change will revert to any style sheet
$(this).load(function () {
// get the body tag inside the iframe and set the css
$(this).contents().find('body').css('background-color', 'red');
});
});
You will also need to fix your html, tr can only be a child of a table, thead or tbody tag, not a div
Having seen your fiddle, it is the invalid html that is spoiling your selector:
$('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', 'red');
will work if you change your wrapper div tags to table tags - with the invalid html, jQuery won't pick up on any $('tr[data-type="wysiwyg"]') and as you don't have a source for the iframe, you don't need to wait until it is loaded
Fixed fiddle
As stated, the document.domains need to be the same and I'm not sure why you have <tr>s in a div, nor what the point of using an iframe is in your case, but:
$('.wp-color-picker').on('change', function () {
var color = GetValueFromColorPicker();
var iframe = $(this).parent().parent().find('iframe');
$(iframe).contents().find('body').css('background-color', color);
});

How to make whole table row clickable?

I have searched this site for a better solution on this but it seems that I can't find the right one.
I want to make my whole table row clickable in case of PC and also same thing should happen when user touches anywhere inside the row in case of tablet.
So far I have the following code and I would prefer a Html or JavaScript solution or anything along those lines.
<tr onclick="window.document.location='';">
<td><img src="/chemsolver/images/help.jpeg" alt="" width="36" height="36" id="Synthesis2" style="background-color: #996633" align="right" /></td>
<td> Help With Table </td>
</tr>
Set display: block on the anchor tag. And then set your height on the anchor.
http://jsfiddle.net/u2qLC/
Alternatively use an onclick event on the tr and have cursor: pointer set on the tr. Instead of using anchor tag.

How to avoid using JavaScript with CSS attribute selector

I am trying to hide subsequent tr's with role="metadata" and the same data-group-id as the first occurring tr.
I cannot use JavaScript here and I am trying to achieve this using pure CSS.
<table>
<tbody>
<!-- BEGIN this tr should be visible -->
<tr data-group-id="1" role="metadata">
<td>
First rows group title
</td>
</tr>
<!-- END this tr should be visible -->
<tr data-group-id="1" role="data">
<td>
Row belonging to group 1
</td>
</tr>
<!-- BEGIN this tr should be hidden -->
<tr data-group-id="1" role="metadata">
<td>
Rows group title
</td>
</tr>
<!-- END this tr should be hidden -->
<tr data-group-id="1" role="data">
<td>
Another row belonging to group 1
</td>
</tr>
<!-- BEGIN this tr should be visible -->
<tr data-group-id="2" role="metadata">
<td>
Second rows group title
</td>
</tr>
<!-- END this tr should be visible -->
<tr data-group-id="2" role="data">
<td>
Row belonging to group 2
</td>
</tr>
</tbody>
</table>
Selectors like this...
[data-group-id="1"][role~="metadata"] ~ [data-group-id="1"][role~="metadata"]
display: none
... work very well, except that data-group-id may change dynamically.
Something like this would be perfect (I know that this is invalid CSS code, its just my fantasy with regular expressions to help illustrating the problem):
[data-group-id="(.*?)"][role~="metadata"] ~ [data-group-id="\\1"][role~="metadata"]
Is there any way I can achieve this using only CSS?
Thanks in advance.
Seems to me that using the data-group-id in CSS is impractical, especially since it's dynamically mutable and conditions of wether an element is hidden or not change. You end up with a huge chunk of CSS thats impossible to maintain.
In the initial rendering, it might be better to add a className so you determine serverside wether the initial state should be shown or not.
<tr data-group-id="1" role="data" class="hidden">
<td>Another row belonging to group 1</td>
</tr>
I am assuming JavaScript is used to dynamically change data-group-id, so why not use JavaScript to add/remove the className "hidden" when/where it makes sense. At least in JavaScript you CAN use regular expressions ;)
When you get to the point where you have to write impossible, long winded, error prone and unmaintainable CSS expressions, you're doing something wrong.
You're going to have to write some code to achieve this anyways, might as well do it the clean way instead of trying to shoehorn it into a styling language that isn't fit for the job.

Categories

Resources