Tinymce – Is it possible to get caret position of textarea corresponding to WYSIWYG Editor?

Question 1

Question by user1643156

I’m wondering if we can get the real caret position of textarea when the fake cursor is in certain position under WYSIWYG Editor?

To better understand the question, please see the image below

enter image description here
Under WYSIWYG mode, when the cursor is after s, we get position 53. and when the cursor is after t, we get position 79.

The code would be something like…

function getRealCaretPosition() {
    // all the dirty work goes here
}

// Ctrl + Q
if(e.ctrlKey && e.which == 81) {
    var pos = getRealCaretPosition();
    alert(pos);
}

Is this possible to be achieved, in theory?

Answer

Answer by Starx

Starx

Yes, there is a topic covered on tinyMCE illustrating this:

var inst = getInstanceById('editor/elementid');
var myBookmark = inst.getBookmark();

// do something, move the cursor position
inst.moveToBookmark(myBookmark);

Source: Check other solution from here, if these dont work.

Question 2

Question by Bror Bojlén

Bror Bojlén

I have a website with two columns, within a wrapper div.

The wrapper has the same height as the tallest div by giving floating everything and giving the wrapper height:100%.

Here’s my problem: one of the columns is a div with overflow:scroll and several images in it. I tried to set its height to 100%, thinking that it would take up the full height of the wrapper. Instead, it became the height of all the images on top of each other.

If I set the height of the column with images (#rightbox) to a specific height in pixels, this happens.

I want it to have the same height as the other div with text, so I set its height to 100%. Then this happens.

How can I make the two columns have the same height?

EDIT: I forgot to mention that the amount of text varies, so I can’t define a specific height for the wrapper.

Answer

Answer by Starx

Starx

You cannot define height as 100% unless your parents provides an actual heights.

#wrapper {
   height: 800px;
}

/* Now you can make the columns inside take the full height of its parent *?
#wrapper .columns {
   height: 100%;
   overflow: auto;
}

Note: if the wrapper sits inside the body element then you will need to set html,body { height: 100%; } before the wrapper can be set to 100%

Question 3

Question by user1118019

user1118019

Say you have the following css applied to a div tag

.divtagABS {
    position: absolute;
    margin-left: auto;  
    margin-right:auto;
 }

the margin-left and margin-right does not take effect

but if you have relative, it works fine
i.e.

,divtagREL {
position: relative;
margin-left: auto;  
 margin-right:auto;
}

why is that? i just want to center an element

can someone explain why setting margins to auto in absolute position does not work?

Answer

Answer by kmb385

kmb385

An element with position absolute has been removed from its normal place within the DOM. It cannot be centered because it does not have an actual parent to calculate the margins and be centered within.

Position relative works because the element has a parent which can be used to calculate the margins.

This article gives a good overview of assigning margins to absolutely positioned elements: http://www.vision.to/articles/margins-and-absolute-positioning.php

This forum provides a good description of why it does not work:
http://www.justskins.com/forums/css-margins-and-absolute-82168.html

Answer

Answer by Starx

Starx

When you are defining styles for division which is positioned absolutely, they specifying margins are useless. Because they are no longer inside the regular DOM tree.

You can use float to do the trick.

.divtagABS {
    float: left;
    margin-left: auto;  
    margin-right:auto;
 }

Question 4

Question by AMC

AMC

I’m new to web design, so please forgive if this is super simple- I’ve tried everything I know and can’t quite seem to get this right.

I’ve put together a contact form using html & css. Ideally, I’d like to have a 1px line extending from each label to use as an input guide. This line should be level with the bottom of the label. I’d also like a series of lines extending vertically in the text area to allow for extra writing space.

Currently, the input lines for Name and Email aren’t showing, and there is only one line at the very bottom of the textarea for Message.

Here’s the code I’m working with:

    <div id="contact-form">
        <div id="invite">
            <h1>Let's Talk.</h1>
            <div class="postinfo">
                <h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2>
            </div><!-- end postinfo -->
        </div><!-- end invite -->
        <form>

            <label for="user">Name:</label>
            <input type="text" name="user" value="" /><br />

            <label for="emailaddress">Email:</label>
            <input type="text" name="emailaddress" value="" /><br />

            <label for="comments">Message:</label>
            <textarea name="comments"></textarea><br />

            <input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
        </form>
    </div><!-- end contact -->

#contact-form {
    float: left;
    margin-left: 300px;
    margin-top: 310px;
}

#invite .postinfo {
    list-style-type: none;
    width: 150px;
}

label {
    float: left;
    font-family: dalle;
    font-size: 160%;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 200px;
    margin-top: -105px;
    width: 120px;
}

input, textarea {
    border-style: none;
    border-bottom: 1px solid #202020;
    margin-bottom: 5px;
    margin-left: 300px;
    margin-top: -105px;
    width: 245px;
}

textarea {
    width: 250px;
    height: 150px;
}

#submitbutton {
    background: none;
    border-style: none;
    font-family: Georgia, 
                 Constantia,
                 "Lucida Bright",
                 "Bitstream Vera Serif",
                 "Liberation Serif",
                 serif;
    margin-left: 173px;
    margin-top: 5px;
    width: 90px;
}

br {
    clear: left;
}

Ideal outcome:

ideal outcome

Answer

Answer by Starx

Starx

There were some unneeded CSS rules on your codes. Try this demo to see it fixed to some extent but lines on text area cannot be achieved using CSS.

You need to use image for that. See a demo

Question 5

Question by Hawkee

Hawkee

I’d like to position my jQuery UI dialogs a bit better. The default “center” position puts them directly in the middle of the page, but it certainly looks better to have them offset about 70% up the page as they are in Facebook. I’m looking at the .position function but am a bit unclear what the simplest solution is.

Answer

Answer by Starx

Starx

The easiest way would be to use the position()

$("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
});

Or, if you already have calculated the dimensions

var x = 50; //calculate the 70%, with your own logic
var y = 100;
$("#dialog").dialog('option', 'position', [x,y]);

Or you can specify the height during initialisation of the widget

$("#dialgo").dialog({
     autoOpen: false, 
     width: 400 , 
     position: [300,200] 
});

Question 6

Question by dragonfly

dragonfly

The background color of <ol> list is not displayed properly. This problem started after I floated label left and input right. How to fix this. The expected result is:

enter image description here

Here is my result: http://fiddle.jshell.net/WZ3nM/1/

Similarly I’ve problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath <div class=.col-2>.

Answer

Answer by Elliott

Elliott

I modified your code and added a third <li> with the following style:

clear:both;

Your float was taking elements out of the document flow and this the background color didn’t know where to end.

Hope that helps.

Answer

Answer by Starx

Starx

You need to clear the float, before you close your <ol>

Check it out here.

Tag: position

Tinymce – Is it possible to get caret position of textarea corresponding to WYSIWYG Editor?

Question by user1643156

Answer by Starx

How do I make a overflow:scroll div have the same height of its container? Details inside

Question by Bror Bojlén

Answer by Starx

css absolute position won't work with margin-left:auto margin-right: auto

Question by user1118019

Answer by kmb385

Answer by Starx

css form- input/textarea styling & positioning.. code & image included

Question by AMC

Answer by Starx

Positioning a jQuery UI dialog offset from the Center

Question by Hawkee

Answer by Starx

Background not visible due to positioning

Question by dragonfly

Answer by Elliott

Answer by Starx

Please fill the form - I will response as fast as I can!