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
Related
Would someone be able to help me out recoding some of the aos.js script? Long story short, I'm trying to get aos to work within an iFrame. I'm using iframeResizer.js and I'm able send the height of the viewport from the parent page to the iFrame. I'm also able to send the scroll offset. The next bit I need to figure out is how to use this data within aos.js. So far I've managed to change anything within aos.js that was previously using the height and scroll position of the window to instead use the height and scroll position of the parent page, which looks promising. Where previously all aos animations were playing as soon as the page loaded, now they sit waiting for a scroll event to trigger. The thing is though, there's some code within aos.js that I just can't get my head around in order to rewrite it to trigger the scroll off a callback from iframeResizer.js. I've been trying to get these scroll based animations running within an iFrame for what seems like an eternity so any help would be greatly appreciated.
So, from what I can see, there's a line in aos.js with 3 event listeners the last of which is a scroll event. It looks like this though with some strange parameters in brackets that I've never seen before.
window.addEventListener("scroll", (0, u.default)(function() {}
I've tried writing my own function but I just don't get what what the (0, u.default) part is or how to use it. The whole aos.js script is way above my level of JavaScript unfortunately. If any one can advise me how I could trigger that same event listener I would very much appreciate it!
Another option I've been trying is to fake the scroll event...as in, every time the scroll position changes and gets sent from the parent into my iframe could I fake a scroll event...but I haven't had any luck. Is that even possible I wonder?
I think that's enough information for now as but if anyone is willing to help and would like more please just shout.
Thanks
I can't seem to find any reference to an event/method that would allow me to programaticaly mimic the scroll that occurs when you simply click below a dragger, on the scrollbar rail.
Is there a way to do that?
Edit:
Below please find illustration of the problem.
The highlighted area is the scrollbar rail where, by clicking, you scroll by a "pageful" amount calculated by the browser. I am after mimicking a click in these areas, something like .scrollByPageUp() / .scrollByPageDown().
The reference to a scroll plugin does not seem to provide a way to do that. Specifically, a method .scroll(int) would need a sensible integer to be passed in. Any ideas how to achieve that?
scrollTo should do what you are looking for
http://lions-mark.com/jquery/scrollTo/
I am working on a js player and the seek bar doesnt want to play nice. You can see two on pageload, they both work properly. Now click on either first or second div with the play img on it and a bar will appear. When you click there the bar is not precise. Its several pixels off.
this.offsetLeft is giving me 0 instead of 10 which breaks this. How do i fix it?
-edit- i still dont understand why but i decided to look again a min ago and deleted random css i pasted in. i deleted this single line and it worked. I am not sure what that block does but i know without that line it currently looks the same. player is not done yet so maybe i'll need this and revisit the question
position:relative;
The position:relative style is often used to make the element the "origin" for absolutely-positioned child elements. In other words, child elements with position:absolute calculate their positions from the relative parent's position. (instead of the window's) This way child elements follow the parent wherever it is placed.
Relative positioning also lets you use 'left', and 'top' to adjust the position of the element from its normally position.
The style can also be used to fix positioning and scrolling bugs in Internet Explorer.
It maybe too late for this issue but my experience can be useful here.
I had the same problem, i was getting 0, when i called getOffsetLeft() method.
you must add your widgets into container first and then call getOffsetLeft() method.
I've got a problem which you can look at here http://jsfiddle.net/dng2P/4/
If you click the detail button it shows you information and then if you click the "Points Statement" button it slides a layer down.
My problem is that I'm trying to make the main booking details div the same height as the points div if it's bigger and then when you click close put the main booking details height back to what it was originally.
It's half working as the main booking details div becomes the same height as the points div but just doesn't go back to what it was originally
Can anyone help?
Thanks
Jamie
How's this?
http://jsfiddle.net/dng2P/8/
All you did wrong was failing to keep the original height around properly. You only declared bookingdetailheight as a local variable which means it got re-declared for every toggle, and removed after every toggle was complete. I tied the original height to the DOM element with using .data(), it simplifies things when you might have people opening two of those toggles simultaneously.
I got on a roll though, so tidied up a bit and made the outer animate along with the inner. Oh and please look up the proper traversal methods in jQuery, parent().parent().parent().find() is asking for trouble. I think there's some left in parts I didn't look at.
I had a quick look at the jsfiddle code. I think the value that you take into the bookingdetailHeight should be declared outside the scope of the .points toggle function. that may help a little. just gonna try that :)
[edit] - didn't solve it -sorry :(
I have a real-time HTML editor, with a textarea on the left for code entry, and a 'preview' DIV on the right to contain the preview of the code entered. At the moment, when editing the code in the left pane, the preview just sits where it is, so often the part of the code you're editing is not in the visible area of the preview (especially when images are involved).
My question is how do I make the preview scroll to show the part of the code that's currently being edited?
Here is the page I have so far:
http://www.caerphoto.com/rtedit.html
You'll notice in the source I have a (currently unused) matchPreview() function that tries to match the scroll position of the preview based on the scroll position of the textarea, but obviously if images or large text are involved the two panes no longer match.
Instead of a div from the clone target try using a tag.
let me decompose your task into 2 subtasks:
get informed when the dom changes
you could listen on changes of the dom like onsubtreemodified.
see
en.wikipedia.org/wiki/DOM_events
scroll the element into view
the answer to this is the scrollintoview method:
see
www.quirksmode.org/dom/tests/scrollintoview.html
however, this might not help you too much, since you are updating the whole html document on every change of the textarea. since you cannot get the position of the cursor inside the textarea, this might be not that easy.
sorry mate, at the end I have no solution, but maybe my rumination helps in some way nevertheless.
good luck!
When I tried this in Firefox. no line-breaks were seen in the preview; is this correct? I may be able to help (done something similsr recently), but not if the line breaks are removed...