Code is here http://jsfiddle.net/Ea7hd/1/
Basically my output needs to match the indentation of the html elements as they appear in the textarea.
The problem is that when I am looping through all the elements in the textarea I have no way of adding proper indentation because the I have no way of setting where one element is in relation to its parent.
You can use <div> with padding-left: http://jsfiddle.net/Ea7hd/5/.
Identation, padding and margin are styles, so you should achieve them trough CSS, so you shouldn't do it adding .
Related
I am currently using (e.g.) this in the console
> $("input[type='text']").css("background", "purple")
to highlight matched elements. However, this doesn't work well when those elements are hidden. Is there a good way of doing it?
EDIT: TO CLARIFY, I am only using the input tag as an example, and when I mean hidden I am talking about an element where it could be outside of the window, inside a hidden container, height 0, or whatever hard to find. Generally not visible basically, not just display: none;.
My concern is to locate all the matched elements for development purposes. This question is not about how to make something purple!
Maybe like that:
$("input[type='text'], input[type='hidden']").css("background", "purple")
You could show the hidden elements before trying to change the background.
$("input[type='text']").show();
$("input[type='text']").css("background", "purple")
If the parent is hidden, show the parent first, then change the background color.
$("input[type='text']").parent().show();
$("input[type='text']").css("background", "purple")
This should work:
$("input[type='text'], input[type='text']:hidden").
show().
css("background", "purple");
Here's a simple jsFiddle:
http://jsfiddle.net/cEDj6/
I have one span element that I bound mouseover to. When I move the mouse horizontally across different lines of text, mouseover happens only once. However, when I move between lines of text within the same span element, mouseover happens multiple times.
Is this expected?
Is there a standard way of preventing this (short of adding logic to consider the last visited element)?
Using Chromium, version 28.0.1500.71 Ubuntu 13.04 (28.0.1500.71-0ubuntu1.13.04.1).
This seems to stem from an inline elemnt <span> with multiple lines of text. In reality space between each line is not contained in element as far as mouse is concerned.
This can be seen by putting background color on element. Changing it to block elemnt in css with display:block alleviates the problem, or by using other native block elements other than span
Background demo
If you make it a div instead of a span it works as expected
This is odd usage of a span. Since the semantic element is a <p> tag, use that. This also will correct your issue.
Funny enough, it's because the span is an inline element and it's wrapping. Because a span is an inline item, and it's wrapping, you get individual lines, and there is space between the lines. I never picked up on this before, but, because you have a mouseout event, it makes it more obvious. To demonstrate this, check out this update on your fiddle.
Fiddle: http://jsfiddle.net/LSRvn/
The reason a DIV doesn't do this is because the DIV is a block element containing the items.
I am using HTML tables to show my data in tabular form. I know that the
Default behavior of td elements in a table is that they change their width and height in order to accommodate the text inside it i.e. like that shown in figure (A)
Is it possible that I some how achieve the effect as shown in figure (b) , i.e. I would like to modify the td elements using CSS in such a way that it gets the shape as that in Figure (b) i.e. maintain it's width and height but makes the text inside itself overlay the sibling td elements?
PS: Have tried fixing the width and height plus using the overflow property of CSS but that didn't work.
NOTE
I don't want to use the colspan property, i.e. I still want the sibling td to be there (of course, they won't have any content inside them).
The reason Why I want to achieve this is I'm using jQuery plugin Datatable and this doesn't work with the table having tds that are using colspan property
Finally, using #teemu suggestion, i.e.
Using an absolutely positioned extra element into td
I am adding a span elements dynamically from input field into a div. When they reached the right end of the div. It overflows in the same line.
However, when the number of span elements are pre-defined into a div element then they are not overflowed and they comes down and starts from a new line. I want this way.
I analysed both the element structure in firebug and both look same.
Here the fiddle for demonstration - FIDDLE
Please let me know for any mistake I am doing and if there is any workaround.
Since span is an inline element, it's affected by whitespace in the HTML.
In your predefined example, you have a line break between each span.
To make your JavaScript version work, you need to add some whitespace.
Add either a line break:
$("#box1").append("<span>"+val+"</span>\r\n");
or just a space:
$("#box1").append("<span>"+val+"</span> ");
The choices are equivalent, but your intention may be clearer with a line break.
How about adding CSS
.span{
display: inline-block
}
I have a UL where the LIs are boxes. I want the boxes to all be the same size, but sometimes the boxes are one line, and other times they're two. how do i add an extra empty line in the LI if the content is only one line? I'm assuming this will be some sort of javascript?
Without seeing any of your HTML markup, you could use CSS height or min-height properties. The latter will only work in the latest browsers, e.g. not IE6.
You should just give them all a certain 'height' or 'min-height' attribute instead of trying to fix a height that is automatically rendered to them.
Try posting some of your html so we can help you more though...
Maybe this could suffice?
line-height: 2em