I would like to show a div (modal) close to a selected (highlighted) text in the page.
I get the selected text positions (start and end positions) but now, I dont know how the modal div can be positioned in the center of the highlighted text.
Try absolute positioning.
$(modal).css('position','absolute')
in the same fashion you can set attributes top and left to whatever number you need. This will place the modal where ever you need.
Related
I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
I have a contenteditable div with a span inside it.The div is of type input. The div also contains a button in the right corner.When you click the button a popup menu shows a list of emoticons and when I click on an icon I need to add it to the cursor position in the div. I have looked at Tim Down's solutions but couldn't get it to work.
Get caret (cursor) position in contentEditable area containing HTML content
and
Insert html at caret in a contenteditable div
The problem is that the div is not the only element on the page and is not necessarily on focus when user clicks on button to insert Emoticon. Also apart from the span tag the div may or may not contain text when the user clicks the button.
Any help to get the correct cursor position and insert the icon at the position is appreciated.
I'm trying to figure out how to select only the visible text in a textarea box. So if there is a vertical scroll bar, any text outside the textarea box's dimensions would not be selected.
I basically want to retrieve the string/value of the visible portion. How to do this?
I have a text area and a div i want that when i click and move the div up or down the text area also re-size, i.e. the div below the textarea should act as the vertical resize handle for the textarea.
using Jquery UI you can make the bottom div draggable and use this to resize the textarea, I made a little jsfiddle for you which demonstrates this :)
http://jsfiddle.net/GspjK/
I am having a small box (div) inside a another div A. I want to drag it from div A to div B. the problem is my div A is overflow:scroll and because of that the box goes behind div A and scrollbar appears. There is no overflow property on div B.
I have initialized box to be draggable and div B to be droppable using jquery ui libraries.
Screenshot : http://i53.tinypic.com/9ieko7.png
I want to get rid of box hiding beneath divA and instead should be droppable on divB.
Thanks a lot !!