Jodit tool bar - how can I make it "left-aligned"? - javascript

I have a s-d issue with Jodit (which I much like!). The two leftmost standard toolbar buttons "grow" with a large screen, and thus cause the toolbar to occupy the whole space above the text area (align=even, kind of). .
The text area is in div which is again wrapped within another div with "d-flex". Perhaps someone has come across this?

Related

Hover over image sections, display annotation and a box around section

I have an image, and I would like to divide it into different sections. When the mouse is hovered over each section, I would like that section to be highlighted with a red box and a text box of some annotations appear. Is such a thing possible?
For example, if the picture is some buildings side by side, when I hover over the middle building, I would like a rectangle to appear over that building, and a panel to appear with some text information.
If this was a graph, I know could do it using plotly. But it is not a graph, just an image. Can something similar still be done in python or will I have to switch to HTML/CSS/Javascript (which I am not familiar with)?
As a starting point, I have used Pillow/PIL to create the red box at specific sections, but this does not address the interactive component I want.
Any advice for a relative beginner is welcomed.

How to make element responsive in relation to screen position?

How to make element change behavior depending on screen position? For example, imagine an input/select that opens an option box or a button that shows a dialog box, as in the image below, but notice that when the same element is at the bottom of the page, it opens the boxes to the side that has space , as a native input/select does.
I noticed this bug in even famous libraries with millions of weekly downloads, that if the element is at the bottom of the page, two unwanted situations happen: Either the element doesn't appear (it stays off the screen), or it expands the area, increasing the screen and distorting the layout.
Anyway, boxes should always open in reaction to the main element, like a "position: relative + position: absolute".
The preferred solution should be just HTML + CSS (as "pure" as possible), but if that's not possible then you can use javascript, too. How can I do this?
How can I do this?

CKEditor: display indicator for page break

We do use CKEditor in a SaaS system that is meant to produce Presentation material (think Powerpoint but on the Web, basically). We actually produce "slides" with a CKEditor.
A slide has a definite height in our specific case. The height will not be dynamic, we know beforehand how high (in pixel) an article typed into CKEditor will need to be before being cut off in the Presentation.
Problem: we want a sort of live display, like a red line or something alike, that shows when the page is going to break; so that the user typing into CKEditor gets a feeling of when the breaks are going to come (I an not talking about putting the breaks in there manually, just having a display of when breaks naturally occur).
How should we tackle the problem with CKEditor ?
Let's say that your slide height must be 500px.
Create an empty transparent PNG image with width 1px and height 500px. Make the last 2-3 pixels red. This will indicate the page break.
Then, find contents.css inside your CKEditor folder and modify the .cke_editable section to include background-image: url('page_break_indicator.png'); which will add the image as a background that will be repeated both horizontally and vertically.
But beware that when a user creates 3 or more slides and then modifies a slide that's not the last, all other slides that come after it must be checked according to their page breaks.

(iphone) safari textarea font?, and measuring it?

Context:
The idea is to add a graphical annotation, beside (or above) specific lines of text within a html text area. This is done, by overlapping a "auto generated" div item, above the textarea.
However while the alignment is perfect on most browsers, the custom font used, does not translate over to safari. And hence, it becomes misaligned, after falling back on it.
So the question is:
Whats the font use in the mobile safari text area (to calculate the spacing from the left) and how to derive its position, at any point of the text in a line? (even if it is not an even letter spacing font).

Making overlay <div> that stays in position after zoom-resize using HTML-CSS only

I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.
Like this
Example http://img57.imageshack.us/img57/1253/showq.png
Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.
you mean like here ? (dutch website, see photo browser in the center column at the top)
browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…
Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.
If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.
The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.
A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.
Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).
Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500
Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.

Categories

Resources