I'm trying to create a custom overlay that basically just contains a
HTML element (a div in this case) with text in it. The overlay gets
rendered ok but the text is multiline, where I would like it to be one line. Looking into the DOM with Firebug I can see that the computed width for the div parent is 44px,
which is why it can't expand and render the text in one line. Is there any way I can correct this without knowing in advance what the required width for the div is?
you can set white-space property of your div to nowrap
div.x { white-space:nowrap; }
Related
Suppose I have a div (background set to blue), and inside it, there is a <h1> containing some text in white.
Using the javascript function elementFromPoint(), I can find which element is currently at a given coordinate(x,y), but this function only checks the bounds, and not actual visibility. e.g. if <h1> contains the text "HELLO", then from inside the "O", the background (blue) div is actually visible, but the elementFromPoint() function still detects the <h1> tag there, because it only checks the bounding-box of the <h1>.
Is there any javascript function/library using which I can detect the actually visible object at a point? (See the picture below for the problem I'm facing)
Use visible selector:
$(selector).is(':visible');
You have html like this:
<div><h1></h1></div>
So, applying visibility hidden to div it still shows the h1 tag. demo
And if you apply display none to div then h1 tag is hidden. demo
So, you might be having visibility property instead of display. Thus change it with display: none;
Here's the thing. I can get selected text with that solution: How to replace selected text with html in a contenteditable element?
But now i have a problem. I'm adding to website divs with different colors to mark some parts of page (i'm setting just position=absolute, top, left, width, height, backgroundColor and opacity) and now when i want to select marked text, selected is that div (which i guess have higher z-index or something else is placing it over other html). And now when i want to get selected text i'm getting nothing. Not even that div. Just null... Any idea how can i get text covered by that div?
And all these things i'm doing in UIWebView component in iOS but that's not relevant, i think.
I have div with draggable, resizable and editable (contenteditable=true) functionality. This div
contain some text in it, which user can edit. My problem is that when user write the text in the div, the div size
is not expand automatically. I set its height:auto but this also not works. What should i do so that while
entering the text the size of div also increases?
If you're talking about jQueryUI's resizable plugin, then that's your problem. It sets an explicit height on the element, overriding your height: auto.
I'd like to have elements on my page that expand on mouseover events. That's working great already, but when the elements are too close to the edge of their containing div, parts of the expanded section aren't visible (or show up outside the container).
How can I calculate a corrected position that would put the expanded element completely within the div? The expanding elements can have an arbitrary size, and so can the surrounding div.
If this code is static you can simply manually set the width of the containing and the contained div manually with CSS. However, if size of the containing div is variable based upon content you may want to use javascript (I like jQuery) to grab the width of the containing div and use that value as the final expand point of the contained div.
$('.contained_element').css("width", $('.container_element').width());
that jQuery will set the width of the contained element to the width of the containing element. jQuery's $(element).width(); can be used to grab the width of any element and use that value elsewhere in your code.
I want to insert an image tag into a block of text so that the image is, say, 100 pixels down in the DIV.
<div>
A lot of text in a text block and a <img tag> somewhere
that is floated left or right and positioned inside the text block
</div>
So, the tag above is put in the text block to be floated so that it is positioned at 100px DOWN in the DIV. Now, this can't be done statically, it has to be done in javascript since 100px down in the div may be represented by different text depending on font rendering issues and such.
So, is there a way to find what "word" in a text block that is 100px down in the DIV? jQuery perhaps?
The short answer is no
Basically it comes down to the DOM doesn't give a way for you to get an elements pixel position. There are sort of hacks you can do for some browsers, but good luck getting a solution working.
If you cannot get the position of the containing div, you are not going to get the position for the text within.
Leaving aside the no, if you were to find a way to get the div's pixel height, I would follow a procedure similar to the following.
Get the text from inside the div and store it in a local var.
Inside a loop for each word in the text:
Insert a div tag into just before the word.
Get the pixel position of the div tag.
Use this to determine the closest word to pixel pos 100 down.
Once you have the closest position, create a document fragment to build up your new inner for the div
Replace the div's content with the document fragment.