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...
Related
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
I just started working with SVG images and I was wondering if it is possible to create a text link that when on click, it focuses on a specific element.
For example, I have a text that is located on the far left of my screen and a circle element that can only be seen if I scroll to the far right. And when I click on said text, it would then scroll or jump to that element.
I'm still somewhat a beginner at this, so any help would be greatly appreciated.
If you want to snap to an element, you can always do the following.
<div id="snap-to-me"></div>
SNAP
Upon clicking the link, the page will try to find an element with that id, and snap to it.
If you want animated scrolling, I suggest you checkout a library that supports it. jQuery being an obvious, good choice.
I'm trying to make a Message Contact Form with a textarea that automatically resizes according to the content inserted. I.e. as the user types in the message, the textarea resizes to fit the message.
For this, I was searching StackOverflow and found this answer.
However, when implementing the JavaScript snippet used there I get a textarea that resizes constantly, upon every keyup action. This is happening when I set the textarea to update with CSS easing. If I just let it resize with no "jaggedly", everything goes fine... but looks less elegant.
You can see what's going on here, in this jsFiddle I've worked up.
Perhaps somebody out there can see what's going on here!
You better use a jquery plugin for resizing height of the textarea. I personally recommend this: http://www.jacklmoore.com/autosize
Thanks for taking the time to read.
I am having some problems with JScrollPane and image reinitialize with 1 page on my website.
Under the Blog Section, you can scroll down the first default article (Dog Days are Over),
but once you click on any of the Articles with images (Rabbit Heart) .. the scrollbar disappears.
It then reappears if you click on an article with no image or the first article.
The above problem seems to only occur on brand new cache. Any ideas?
I have tried disable Cufon but the same problem remains, its definitely an image problem.
Thanks!
It is possible that the Cufon text is larger than the plain-text that it replaced. If this is the case then it's also possible that the container for the "Rabbit Heart" article is not large enough for a scroll-bar, then Cufon hits the text, making the text too long for the container, but since the JScrollPane code has already run the extra text gets clipped.
It doesn't look like the container div of Rabbit Heart has the class of jScrollPaneScrollable
I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?
Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit
I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.
When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.
Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.