how to display text in 2 columns - javascript

I'm using TinyMCE in ModX CMS.
Do you have any idea how can I display text written in wysiwyg in 2 columns, and if possible coulms should be similar height, width must be the same.
There is no option (button) to insert table using TinyMCE.
1 option is to click on html icon and create table with 2 columns, but person who will manage the content won't be able to do it.
I thought it could be JavaScript, jQuery maybe. But how will I count text and split it in the right place. Any ideas?

You can place an external button with the following:
<button onclick="tinyMCE.activeEditor.execCommand('mceInsertContent',false,'<table><tr><td>TEXT</td><td>TEXT</td></tr></table>');return false;">Insert table</button>
This will insert the code on the cursor position. You can take a look here too for more info:
TinyMCE Command Identifiers

Related

Bootstrap row with endless columns (dynamic data) - NEED to create new row after 3

I have a container that contains data populated from my database as well as data created by the user on another page.
My issue is styling. Currently my page jumbles and the columns are all over the place. They appear to be following the end of the longest column.
Jumbly
I would like for after 3 columns a new row to be created, but I'm not sure how to go about this.
Note/Tricky part:- My users have the option to sort where each Column (Sales, BingBong, Game of Thrones) goes. If they want Game of Thrones first, they can make it the first column. Obviously this messes things up because each column will have a different height at different times
Most everything I've seen squishes all the columns together to create a pinterest-like look. That is not what I want and I know that my design will create white space. That is what I'm being told to create.
UPDATE: Here is my code to show you how I iterate through each of these departments (sales, rainbows n'sprinkles, Game of Thrones, etc).
Hopefully this makes it clear why adding a clearfix div doesn't work in my case
code
http://www.codeply.com/go/jXuoGHHker
This worked brilliantly!!! Works with dynamic data...all I grabbed were the few lines of CSS

How to insert text dynamically in CKEDITOR

I use plugin CKEDITOR for word editor in my web. Inside the editor I have a table which have two columns . I want to achieve that in the first column if the user input number it will add to (50) and the result automatically appear in the second column. That is very easy using Jquery but it does not work. Tried codes:
function insertIntoCkeditor(str){
CKEDITOR.instances['editor1'].insertText(str);
}
but this code insert automatically above the text area of the editor.
Use
setData()
It will remove the existing data in the ckeditor and and it will replace it with 'str' variable content.
function insertIntoCkeditor(str){
CKEDITOR.instances['editor1'].setData(str);
}
I am using insertHtml : It will put the text at cursor position and no removal of existing text. Its like updating the content of ckeditor. this separates it from setdata()
function InsertHTML(HTML)
{
CKEDITOR.instances['editor1'].insertHtml(HTML);
}
and it works fine. ;)
CKEDITOR.instance['editor1'].insertElement(str);
It will be insert text in cursor position

suggestions to show/hide columns / row sorting / fixed headers in a large data table with jquery

I have a very big table filled with data
1st - i want to use show/hide columns:
the problem is when my columns pass 10-12 to more it got really slow
for this i gave each a class for the column it is in and call it
for toggle with assocciated anchor().
2nd & 3rd - i want to use fixed headers as my row go way more than 1000's,
as i do this i can not effectively use my search which i wrote it with js
and really is a lightweight code.
PS. plz remember i have a very large json generated table with more than 20 columns and way more than 1000's of rows and i ** CANT USE ANY FRAME WORKS EXCEPT JQUERY AND JQUERYUI **
EDIT: ADDS SOME CODE FOR SHOW/HIDE
$('#columnSelect').on('click', 'li', function(){
var columnTmp = $(this).children('a').text()
$('#dataTable').find('.'+columnTmp).toggle()
})
i have a list of my tags which is also created dynamically with my first ajax call
i got the text of anchor and match it with
then toggle that column tds
I use a combination of two plugins for some of my "large tables"
This is used to format the table, provides sorting and other functionality:
http://www.tablefixedheader.com/fullpagedemo/
And, this provides filtering, this is fast and very effective, it may well help if you have a lot of columns/data. Have a search box or drop down discretely at the top of each column which will allow for filtering on that column and a "quick find" type search box which will search/filter across all columns
http://www.picnet.com.au/picnet-table-filter.html
If you are really jQuery lover then I suggest to go with some free jQuery Grid APIs such as Slick Grid or Flexi Grid

Ext JS 4.0 GridPanel CellEditing plugin breaks when multiple columns inserted

I am trying to find the proper way to dynamically add/remove columns in a GridPanel that uses CellEditing plugin in Ext JS 4.0
I tried to add/remove columns dynamically in a GridPanel, using the HeaderContainer add(), insert(), remove() methods
The problem is that CellEditing plugin stops working correctly when I try to add or remove more than one column:
when existing cell in edit mode the text and cursor is not visible
first newly added column is not editable at all
second added column is editable
Steps to reproduce:
start the page
select cell in the column to insert column position before which to add new column
click add column button and type Name1 in dialog press ok
repeat steps 2-3 Using Name2 as column name
try to edit text in existing Company column and in column Name1 and Name2
You can find the full source code and example here:
http://jsbin.com/otorix/edit#source / http://jsbin.com/otorix/edit#preview
Can you reproduce this behavior?
Can you confirm this as bug?
Or what am I doing wrong?
I will be grateful for any help you can provide
you were right, there was a bug, but apparently it was induced by the way you reconfigured your grid, I added some modifications to your code ( just for the add column) i guess the remove should be fairly easy, so my corrections:
the memory data for the store rangeData was an array , while the reader was expecting an Object with an array inside an items attribute (this didn't seem to cause any errors but it's much clearer this way)
The column reconfigure was the main issue, i removed the part where you create a new column and just write the config for the new column, after that added the new column at the end of your column array, or somewhere in the middle using splice. The reconfigure function on the grid offers the posibility to reconfigure the store and the columns so is safer then adding the newly created column in the header container.
you have the modified code here http://jsbin.com/otorix/17/edit

Create editable new rows to a table

I'm trying to add details to a database by using ajax and table dynamic rows.
e.g.
----
{Customer: dropdown menu} | {Description: textarea} | delete
Add New Customer
---
When the user clicks it shows the drop down menu of all available customers. when you click away it just shows the select customer name (not the dropdown menu)
Similarly with the description i want on click to allow them to edit the description of the text area but when you click away it only shows the text you just entered. (not the text area outline)
Add new customer button creates a new empty row.
What libraries or examples can help me get started with this?
I saw this recently in an application recently. In this application it was possible to add new items/rows via ajax and dynamic HTML.
You should be able to do that easily enough using jQuery (look at the selectors, events & manipulation in their docs). For example, for the dropdown
<span id="customer-name"></span>
<select name="customer-list" id="customer-list">
<option class="name" value="cust-1">Frank Frankson</option>
<option class="name" value="cust-2">John Johnson</option>
</select>
And the jQuery :
$('.name').click(function(){
$('#customer-name').text($(this).text());
$('#customer-list').hide();
});
In that function you could do something with the option element value if needed (an ajax post or whatever).
The principal for changing the Text Area description would be the same (you could grab the text out of the textarea, add it to a div & hide the textarea; if they need to edit again, just show the textarea & hide the div)
Use jQuery.
Use the tokenizing autocomplete plugin for jQuery
For the inplace edit use Jeditable.
I'd stay away from drop downs, they are almost always bad design, whether in a menu or selecting from a long list of options. For something like a list of customers which is hopefully likely to be long it is an awful choice of a UI component.
The only time that it really makes sense to use a drop down is when the list of options is short and well known. So for it to be acceptable it probably has to be a list of options which rarely if ever changes, is less than 10 or so items long, and is used frequently (so it is well known). Drop downs are painful.
Most sites where you see such functionality accomplish it with styling - you can style a text input box to look like plain text (by removing the border and setting the background color to transparent). When the input is clicked on (focused), the style changes:
<style>
.blurredText { border: none; background-color: transparent; }
</style>
. . .
<input type="text" class="blurredText" value="Click me to edit"
onfocus="this.className=''"
onblur="this.className='blurredText'"/>
Styling a select the same way may prove difficult however, since select controls are notoriously resistant to CSS. You can still use the method Dave proposed.

Categories