Develop Reference

How to set innerHTML without losing current scroll point?

Edit: Using Coll's innerText method along with Icekid's scroll behavior solved this. Thanks!
I'm using set innerHTML to apply the <mark> tag in a series of divs. For example, user presses a key and the <mark> goes from:
<mark>This is a demonstration.</mark> To show what I mean.
to
<mark>This is a demonstration. To show what I mean.</mark>
This works great except when it comes to scrolling. The text being marked is variable and sometimes requires the div to scroll. I use the following JavaScript to scroll the view:
function prompt_scroll() {
document.getElementById("next").scrollIntoView({ behavior: 'smooth'})}
The issue is each time this happens, the newly set innerHTML begins scrolled to top, then scrolls to the end of the <mark> tag. That sort of jumping up then scrolling is enough to make someone seasick!
The solution I think I need is to set the innerHTML already scrolled to the same point as the JS code I shared above. I just don't know how to accomplish this or if there is a better solution to prevent that scrolling to the top. I'll add that I'm still learning the ropes with JS so I may need a little extra info on the how and why. All guidance is appreciated.

You can add
yourElememt.scrollIntoView({behavior:"smooth", inline:"center",block:"center"})
In place of the "center" you can use
//start, "end" ,or "nearest"
To fix it to the position you want
I think you should use nearest for your case

Position toggle list according to the page Boundaries

here i don't know the technically what will call but will try to explain the scenario what i want to achieve. following is the image what i am facing issue
when page right boundary is not touching the list it is showing like this.
when i minimize the browser window from any side i want list should come in the visible area of the page it should change the position now it is clipping the list like this
Please help me how i will change the position of the list as its touching to the any boundary of page like top, left, right, bottom. using jquery or css

Put your table inside a div and for div add css rule overflow:auto

Yes, You can achieve that things,
For that you have to use Shuffle.js
Please refer this Link

Jquery drag and drop into empty div and back

I was having difficulty trying to figure out how to drag and drop between two different div's and I found a reference to http://docs.jquery.com/UI/Sortable#option-connectWith in another post and it works magnificently... Almost anyway.
I am now able to drag items between divs but if I drag the last item from a div it becomes closed to me. I can't drag anything back into it... Is there something basic I am missing?
Thanks for any help!

You could just add a display:none; element in each div

When you drag the last element from the div it's likely collapsing, which is almost like removing the div. As state in the comment you should set a min-height for the div, and possibly a min-width as well to prevent the div for collapsing when it's empty.

How to check when a div resizes, using Javascript or Jquery

So I've got a web applcation in the midst of wireframing, but I've run into an issue that requires a technical solution before I can solidify this model; that being:
Fig. #1 User creates new 'text-field'
element (a div with a max-width.)
User then begins typing into said
element until...
Fig. #2 The element reaches it's
max-width, the text drops to a new line and a 'new' background image (in
the form of another div) is created (with it's opacity and position animated for effect) to accommodate the larger element sze.
This is a rough outline of the intended functionality (given at this moment, I'm not sure how to have a text-field that behaves like a div with max-width yet) but I'm curious about how to create the event handler for the 2nd step; I thought about checking on every 'keydown' event, but that seems inefficient...
Does anyone have any advice or ideas for tackling something like this? Thanks!

The 'keydown' or 'keyup' event is the first thing that comes to mind. If you decide to do it this way you will have to
check for the html elements size each time and compare it to the old (save in a variable) one.
Easiest way seems to be to bind a handler to the html element and let it fire when the size changes.
I do not know if such an event exists, but if then thats the way to go.
(+1 for your very descriptive Question)

You could try using the CSS3 transition functionality:
http://slides.html5rocks.com/#slide42
That way the elements you want can be animated by the browser itself.
Disclaimer: Obviously, this doesn't work with more complicated effects.

In MSIE an onresize should fire.

Not sure how to attack the width issue where an input field auto sizes untill max width then wraps. You could use a monospace font inside the text field so that you could use javascript to monitor and control the growth of the box horizontally uptill the max width.
To approach the height auto grow you would be better using a textarea with it set to one row to begin with so it looks like an input box and then when the text auto wraps to the next row, which it will do, you can check the scollHeight of the textarea and check the actual height of the textarea, subtract them and you get the height you need to grow the textarea to stop the vertical scroll bars appearing.
The above will make the scroll bars flick on and off briefly while your javascript does it magic. You can use overflow:auto; to hide the scroll bars but then I don't know if scrollHeight will still read correctly. You will need to experiment.
Also take note on my comment above about setting an interval on keydown and checking the input length to stop the repeating key down text issue.

Javascript draggable div does not trigger scroll

I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you

First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.

Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.