Question: I have an image slider written in jQuery. I need the images to be in groups of two (like a magazine) so i have classes .pageLeft and .pageRight that apply a left- or right-margin equal to the width of the container minus the width of a page img (.page class). I want to be able to fullscreen this slider and dynamically calculate and change the width of the .page and the margin value of the .pageLeft/.pageRight classes. Is there any way to do this, or am I going about this all wrong?

The best way I could think to do this would be to write the classes to the DOM directly, but then I would have to empty and add every time.

Here is an example of what I'm trying to say

```
nPageWidth = 768;
nPageWidthPlusMargin = ($('#container').width() / 2);
nPageMargin = nPageWidthPlusMargin - nPageWidth;

```

and then use that value to change margin-left = nPageMargin for the class in the css.

Sorry if this is a confusing question. Thanks for your time.

EDIT: The main reason I'm trying to do it this way is to maintain the aspect ratio of the images by setting the width of the image to be 3:4 the height of the image which is set to 100% of the container.

Answer: 
You may try this code snippets (ed is the tinymce editor object)

A. Insert bookmark at current cursor positon using mceInsertContent

```
ed.execCommand('mceInsertContent', false,'<span class="marker">\ufeff</span>');

```

B. Create a range from start of text up to my bookmark.

```
var rng = ed.selection.getRng(1);
var rng2 = rng.cloneRange();

// set start of range to begin of forst paragraph
rng2.setStartBefore($(ed.getBody()).find('p:first').get(0));

rng2.setEndBefore($(ed.getBody()).find('span.marker').get(0));
ed.selection.setRng(rng2);

```

C. Get the content of the range.

```
// get content of selection (range)
var content = ed.selection.getContent({format: 'text'});

```

D. Delete the bookmark.

```
$(ed.getBody()).find('span.marker').remove();

```

**Update:** If you are concerned about the selection change you may reset your initial range

```
ed.selection.setRng(rng);

```
Here's my solution for this one (when Ctrl is pressed, the word is displayed in console):

```
function isLetter(chr){
    if(chr.match(/[A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff]/i)){
        return true;
    }
    else{
        return false;
    }
}

var editor = tinymce.activeEditor;
var $edBody = $(editor.getBody());
editor.on('KeyUp', function(e){
    if(e.code == "ControlLeft"){
        var sel = editor.selection.getSel();
        var caretPos = sel.anchorOffset;
        var txtData = sel.anchorNode.data;
        var i = caretPos;
        var word = "";

        while(i > 0){
            if(isLetter(txtData.charAt(i))){
                word += txtData.charAt(i);
                i -= 1;
            }
            else{
                break;
            }
        }

        word = word.split("").reverse().join("");

        i = caretPos + 1;
        while(i < txtData.length){
            if(isLetter(txtData.charAt(i))){
                word += txtData.charAt(i);
                i += 1;
            }
            else{
                break;
            }
        }
        console.log(word);
    }
});

```

Maybe there is an cleaner or more elegant way to solve this, if so, please comment and let's make this solution better.