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
Related
I'm working on an animating text element.
The element changes one work with animation. Much like in this example.
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html
The thing is I don't like that when I change one word, the other words around it shift abruptly. I'm trying to use an effect where the other words that move around shift in a nice way. Like in this example.
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html
Does anyone know how to do this? or link me to a relevant solution?
I'm using HTML, CSS, and JS
There may be other ways of doing it but the most consistent cross browser way of doing it that I can think of is this. This is some guidance but code samples would be helpful.
You'll need to have the animated word wrapped in an extra span. Then you'll want to define the width of the outer span to be the width of the inner span before animation. You can do this with CSS if you know what the width will be or you can do it dynamically like this:
$(outerSelector).width( $(innerSelector).width() + 'px');
Animate the text then animate the width change:
$(outerSelector).animate({width: $(innerSelector).width() +'px'}, 500);
This really only works for making it smaller. You can use this method for making the word bigger but you need to know the final width of the word first. Then you could simply have one span and do this:
$(selector).animate({width:newWidth}, 500);
If you're not worried about cross browser compatibility or if you can assume that everyone using the site will have a CSS 3 enabled browser then you can do it with CSS:
selector {
transition: width 0.5s;
}
Then you for shrinking text you would need to again set the outer span width like above, but after the animation of the text you could simply do this:
$(outerSelector).width( $(innerSelector).width() + 'px');
This has the same problem with needing to know that width in advance for transitioning to longer text. You could find out the width using another span with identical text.
.copy {
position: absolute;
left: -100%;
}
Then you could get the width of the copied version and use that as the new width for animation.
This looks like one of those things that should have a simple answer, however I could not find any solution for it...
I have a table that contains several select elements, which have some text labels in front, on the same line.
I want to maximize the width of the select until the end of the td element.
I cannot use fixed widths.
If I use width=100% then the select will push the label out on a different line. By default, the select width is equal to the width of the longest option.
Here is how the default works: http://goo.gl/KiSGcK
Ideally, this should work with select2 also, where the default width is set to the width of the first option.
I have tried wrapping the select and/or the label in divs, setting different css options (float, display inline, etc) with no success. Any ideas?
Try to set float: left; for your label and table also. Then set them with width in percent that total is 100%. Like this label(width:40%) and table(width:60% except the border).
Finally found a solution: use overflow: hidden.
Here it is: http://goo.gl/mXNRZN
Check this jsFiddle
I want the numbers to take up all the blue space in the jsFiddle. The numbers can change, so I dont think this is possible to solve in css. The "days" value can be a 3 or 4 digit number, so when the days changes from say 2 to 3 digits I need it to re-calculate margins etc to fill up the container(blue box). By fill up the parent I mean that there should not be any empty space to the left or right of the numbers.
What is the best approach for this problem?
If you don't mind counting on javascript then FitJS might help you, it's a jquery plugin that sizes text to the width of its container. Though you might need to tweak the html a bit.
You can try to use text-align:justify and display:inline-block with a helper to make he preceding items to justify: http://jsfiddle.net/kizu/SedpW/22/embedded/result/
So, with different numbers it would look like: http://jsfiddle.net/kizu/SedpW/23/embedded/result/
And if you'll need ie7- support, don't forget to fix inline-block in it adding in conditional comments
display:inline;
zoom:1;
to the blocks where you want the inline-block to be fixed.
I am trying to make a div which expands to show hidden content when hovered over. However there seems to be a random space in between images inside the div, hence a premature onmouseout method call. Is there any way to get rid of this problem?
Check out a live version here.
The onmouseout event bubbles.
Therefore, you get the event whenever the mouse moves out of one of your child elements.
You need to check event.target and make sure it's the <div> element. (Or use jQuery's hover method)
Where exactly is the problem? is it the black space between the first two car images when you hover over the first car?
The div is expanding to more than what the image width is. set the width of the image to be 300px.
Then try setting margin,border,padding to zero on all container divs
div.itemHolder {
border:0 none;
margin:0;
padding:0;
}
I think that since you are setting both the height AND width properties, that the image is coming up with a weird aspect ratio. try setting only one of them. If that is not a part of your worries, please ignore
I must not have explained this clear enough, but we managed to fix the issue.
Many thanks for the responses.
Consider:
$("#PlotPlace").append('<div style="position:absolute;left:200px;top:40px;font-size:smaller">Hello world!</div>');
I need to execute that line only if the width of the resultant text would be less than 60px. How can I check the width before placing the object?
Unfortunately, the div will only have a width value once it is rendered into the DOM.
I would append that content to an inconspicuous area of the document, perhaps even absolutely positioned so that no flow disruption occurs, and make sure that it is set to "visibility:hidden". That way it will be inserted into the DOM and be rendered, but be invisible to the viewer.
You can then check the width on it, and move it into position and set it to "visibility:visible" at that point. Otherwise, you can remove it from the document.
Maybe you can append it invisible, then check it's width, and then consider to show or hide.
$("#PlotPlace").append('<div style="position:absolute;left:9001px;top:40px;font-size:smaller">Hello world!</div>');
var div = $('#PlotPlace').children("div");
if(div.width() < 60)
div.css({left:200})
Sounds like something you'd have to hack. I don't believe the JavaScript runtime in any browser has an event you can hook into in between calculating the layout and displaying the element, so you can add it in a way that it can't be seen and doesn't affect the height (doesn't cause additional scrolling), and then show/hide it based on the width at this point. It's hacky and ugly, but because you don't have many event hooks it might be the only way to do it.
You can´t. At least not so easy. The text you insert is written in a specific font, which must be rendered by the browser, then you know the width of the element. By the Way, what exactly do you want to insert, with such a restriction? Wouldn´t it be simpler to cut the text within the output parameters?