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);

```
I just stumbled upon a similar usecase. I want to remove everything after the cursor position.

Here's my solution

```js
// Insert a unique marker so I can easily find the current position in the editor
const UNIQUE_MARKER = "MARKER";
editor.insertContent(UNIQUE_MARKER);

const markerIndex = editor.getContent().indexOf(UNIQUE_MARKER);
const beforeCursorContent = editor.getContent().slice(0, markerIndex);

editor.setContent(beforeCursorContent);

```