Is there a simple way of checking, whether the caret is at the very first, or last position in a contenteditable? I know that there are ways of getting the caret position, e.g., Get a range's start and end offset's relative to its parent container, but I was wondering, whether there is a simpler method, if I only want to know if the caret is at the top/bottom of the div.
What I try to do is to automatically move the caret to the previous/next div, if it has reached the top/bottom of the currently focused div. The HTML structure is simply
<div contenteditable=true id="div1">something here</div>
<div contenteditable=true id="div2">something else</div>
http://jsfiddle.net/v923z/92FWk/
Thanks,
Related
Slowly losing my sanity... I've tried every search term I can think of, but can't find anything about what would seem to be exceedingly simple.
All I want is for the size, aka viewport, of my SVG to fit the containing elements.
I specifically don't want it to scale, crop, meet, slice, zoom or anything else. I just want it to behave like a default div.
The SVG will then be placed inside a div with a max-height and overflow:auto. When the SVG expands beyond the max-height of the containing div I will be able to scroll the div to see the whole of the SVG.
I'd like to figure out how I can get my text to move along with the browser. Right now my site looks like this: http://simplysweet.shukuya.com/test/. The divs are absolute, but I've tried relative, static, etc... and can't seem to get the text to move along with the image/layout.
To have your text scroll with the rest of the page you simply need for your divs to be relatively positioned (the default.)
Setting the width of your div to 100% will make it occupy all of the available space in the layout just outside that item, (and so-on up to the root of the document.)
If you want to maintain a "centered" block that is left aligned, use:
margin: auto
on whatever div is just beneath the root of the document.
Use min-width property along with positioning for both div
I wanted to allow the Emacs cursor to move around freely outside of actual text (similar to virtualedit=all in Vim).
"Oh," I thought, "I'll just keep track of a virtual cursor and draw it to the screen myself."
But it turns out the actual native C drawing routines (such as draw_glyphs) seem to refer back to the buffer contents to decide what to draw (I could be wrong though).
My next idea was to make a giant overlay of all spaces so I'd have complete freedom where to put stuff. But an overlay only goes over ranges of actual text, so again, this does not seem to give me what I'm looking for.
Is this a reasonable goal without hacking the C code?
I believe the writeable area of a window is intrinsically limited to the buffer with which it is associated, i.e. you have to draw in an area where buffer content exists.
(One example of this limitation is the impossibility of drawing a vertical guide line in the 80th column to help the user identify long lines; currently the best possible implementation of such a feature is to highlight the "overflow" of each too-long line.)
You can do the same as what artist-mode does without adding spaces to the buffer:
when trying to place the cursor after the end of the line, just use an overlay with an after-string property which adds the spaces in the display without modifying the buffer.
Have a look at "artist-mode" (M-xartist-modeRET) - it allows you to draw in Emacs.
From the function documentation: "Artist lets you draw lines, squares, rectangles and poly-lines, ellipses and circles with your mouse and/or keyboard."
You can look at popup.el from the auto-complete package, which can pop up tooltips and menus and such at any position, including positions outside the contents of the buffer. Maybe that will show you how you can do it.
Having some trouble with the CSS alignment of text generated with #font-face. For some reason, there is a ton of extra space visible at the bottom of each letter, stretching the text's containing box too far downward.
If you inspect the text on this sample page, you can see what I mean.
Have googled and inspected a bunch of other pages, but this one's got me stumped. Any chance someone could help?
Thanks!
For starters, the computed line-height is 65px, so you could always define it to be 60px if you wanted.
However, most of that space is actually just required by the font you chose. Though you've converted it to uppercase with your CSS, the font still needs room to render characters that draw below the text's baseline. Try adding a comma to that header's text, and you'll see it's actually pretty huge and should fill up most of the empty space.
You are using <h2> tag there.
for the h tags use the CSS style's margin and padding to remove those extra spaces.
<style>
h2 {
margin:0;
padding:0;
}
</style>
I have a site that has 2 DIV tags, one floats left the other floats right. The left DIV contains text for the page, the other DIV is used to display a video.
When I have text in the left DIV that fits the entire width of the screen the video shows up where I want it. However, a few pages have very little text and cause the video to show up in the right-center of the screen. I want to anchor this DIV to the right of the screen regardless of how much text is shown. I don't seem to get this problem in lower resolutions, it occurs more in the higher resolutions (such as 1280x1024). You can see an example on these pages:
http://www.quilnet.com/TechSupport.aspx - Positions the right DIV where I want it regardless of the resolution.
http://www.quilnet.com/ContactUs.aspx - Makes the right DIV closer to the center in higher resolutions. I want it in the position of the page TechSupport.aspx.
I am trying to refrain from using the width parameter because I want it to be resolutionally compliant. I don't want my viewers to have to move a scroll bar left and right.
Any ideas?
Thanks!
Since you have a table based layout, just put an 'align' attribute with a value of 'right' on the right hand TD tag, like this:
<td align="right" valign="top">...