Develop Reference

Responsive wrapper for list

I am trying to make a responsive wrapper. However, I am having issues determining the right height of it. It's basically a list and when the list gets thinner, its children get fatter.
Here is the jsfiddle. Notice doesn't reproduce the problem when you resize the output window, since it just let's the list go out of view. In my actual application, the list stays entirely inside the screen.
This is my attempt, with jQuery:
if ($(window).width() < 500) {
$(".wrap").css("height", 100 * $(".list li").length);
$(".wrap-list").css("height", 87 * $(".list li").length);
} else {
$(".wrap").css("height", 70 * $(".list li").length); // every item has 70px height, I guess!!!
}
However these hardcoded values are error-prune, since I just figured them out with my eyes in my machine. Any ideas please?

If I understand correctly, you'd like for the list items to get taller as the screen width gets smaller. Best practice is to use CSS media queries, no JS needed:
label {
padding: 10px;
}
#media only screen and (max-width:500px) {
label{
padding: 25px 10px;
}
}
http://jsfiddle.net/daCrosby/cmfL2643/2/

Making line numbers uncopyable

I'm working on adding line number support to Rainbow, a syntax highlighter, but I can't figure out how to make the line numbers uncopyable.
Disabling selection via user-select: none; makes an element unhighlightable, but you can still copy its text by highlighting around it and then copying, which ends up copying the line numbers along with code.
Here is a working example of the problem: http://jsfiddle.net/CjJLv/8/
Any help would be appreciated. Thanks!

Okay, the easiest way in compliant browsers, and, sadly, not reliable cross-browser, is to use generated content (I've removed the various parts where index was being added to textual content in the plug-in, and used the following (at the end of the CSS) to implement un-copyable text:
table.rainbow {
counter-reset: line;
}
table.rainbow tbody tr td:first-child {
counter-increment: line;
}
table.rainbow tr td:first-child::before {
content: counter(line);
}
JS Fiddle demo.
This does, though, have some rather large flaws (the cross-browser unfriendly approach being the biggest), so I'll try for something better...

I would just add a regular list.
if (window.Rainbow) window.Rainbow.linecount = (function(Rainbow) {
Rainbow.onHighlight(function(block) {
var lines = $(block).text().split('\n');
var $lines = $('<ul class="lines"/>');
for (var i = 0, len = lines.length; i < len; i++) {
$lines.append('<li class="line"'+ i +'>'+ i +'</li>');
}
$(block).before($lines);
});
})(window.Rainbow);​
And CSS:
.lines {
float: left;
padding-right: 1.5em;
padding-left: .5em;
}
So now you can select just the code if you highlight carefully.
Demo: http://jsfiddle.net/elclanrs/CjJLv/18/

David Thomas's answer is perfect for line numbers. More generally, if you have other text you don't want to be copied, you can have it as generated content:
<style>#uniqueid::before { content: 'TEXT GOES HERE'; }</style>
<span id="uniqueid"></span>
But it's ugly to have to embed text in your CSS, so you can refine this using CSS attr() to read the text from an attribute in the HTML (as suggested by pimvdb):
<style>[data-nocopy]::before { content: attr(data-nocopy); }</style>
<span data-nocopy="TEXT GOES HERE"></span>
<span data-nocopy="AND HERE"></span>
Demo: http://jsbin.com/fob/1/edit
This works in Firefox, Safari, and Chrome due to 21-year-old(!) bugs in selecting generated content:
https://bugzilla.mozilla.org/show_bug.cgi?id=12460
https://bugs.webkit.org/show_bug.cgi?id=7562
https://bugs.chromium.org/p/chromium/issues/detail?id=80466
But in old IE (< 8) the text will be completely invisible; in newer IE it should be visible but may well be copyable. In general don't use this technique for anything critical, as these bugs might get fixed one day...
And use sparingly, as this can be very user-hostile.

You could display each line number as a sequence of <img>s.

How to horizontally justified list-items using jQuery

I've been all over stackoverflow looking for a solid solution for this; however, I'm coming up a short. I believe my problem is just in my semantics.
http://jsfiddle.net/hzRAN/10/
here's some sample code.
For best results: I would love for this script to re-adjust if there is a page width change.
the real code is linked from this website
http://designobvio.us/DoUs/Blog.html
its a fluid layout which is why I need the horizontal list item to justify itself correctly.
Thanks for the help !

The only way you can accomplish this is by setting the width of each list item or by using padding:
ul {
list-style: none;
margin-left: 0;
padding-left: 0; /* remove the indention */
overflow: hidden; /* to enclose the float children */
}
li {
width: 20%; /* actually, use some slightly undersized value to supply a bit of slop */
float: left;
}

If you are looking to use jQuery to achieve this, use the window.resize function, and then call that function on load.
$(document).ready(function(){
$(window).resize(function() {
// your code here:
});
$(window).resize();
});​
I have managed to get a quick example running on jsfiddle (I forked yours) http://jsfiddle.net/rSeaE/1/ but its having trouble due to the width of the #daymenu I think.

Auto fit width of li to text?

Is there anyway possible to auto fit the width of an <li> tag to the width of the text it contains using CSS?
I'm designing a website that uses a custom CMS (and I don't have access to the code), so I'm limited in options as far as design goes.
Javascript solutions that would work on an <li> tag without having to edit any of the list properties directly would work as well.

The <li> is a block-level element, so defaults to be as wide as it can be.
To get it to "shrinkwrap" to the size of the contents, try floating it:
li {
float:left;
clear:left;
}
That may do what you are looking for.
If you want the <li>s to sit alongside each other you can try:
ul {
clear: left; /* I like to put the clear on the <ul> */
}
li {
float: left;
}
OR
li {
display: inline
}
Making it inline takes away its block-level status, so it acts like a <span> or any other inline element.

As #willoller already said, the li element is a block level element, but apart from floating it, you can also use:
li {
display: inline;
}

EDIT: Unfortunatly the following solution is displayed differently in different browsers.
In order to not let any other element float aside the list I used this:
ul {
white-space: pre-line;
margin: -25px 0 0; /* to compensate the pre-line down-shift */
}
ul li {
display: inline-block;
}
The only CSS solution that worked well for me.

ul { display: inline }
will solve all of your problems at once.

On standard compliant browsers, use min-width instead of width. On IE 6, width does what you describe.

None of the previous answers work correctly for me, so I used the following approach:
Add the style "float: left" to my <ul>
Surround the <ul> in another <div>

Adding display: inline; CSS to the <ul> block has worked great for me, with no undesired effects.

If have the id of the <li> tag you could use JavaScript to get how many characters there were and then multiply that by the font size, then set the li width to that number.

You can use em's rather than pixels to specify the width of your element. An em is roughly equivalent to the width of the letter "m" in the default font. Play with multiples of the number of characters in your li until you have an em width that is visualy appealing.

In my case it was float:right that fixed it for me:

Getting actual height of an auto-heighted element in IE

I'm pretty confused! with this:
...
<div id="main">
<div id="content">
<div class="col1">
...COLUMN1 CONTENT GOES HERE...
</div>
<div class="col2">
...COLUMN2 CONTENT GOES HERE...
</div>
</div><!-- #content -->
</div><!-- #main -->
...
there are columns as you see, and I want to set their container element's height to the maximum size of both columns(plus 130px). so by using Prototype framework:
//fixing column height problem
Event.observe(window,"load",function(){
if(parseInt($('col1').getStyle('height')) > parseInt($('col2').getStyle('height')))
$('main').setStyle({'height' : parseInt($('col1').getStyle('height'))+130+'px'});
else
$('main').setStyle({'height' : parseInt($('col2').getStyle('height'))+130+'px'});
});//observe
It working nice in Firefox, Opera, Safari & Chrome but it fails to return the actual height of columns. in IE7+ (not tested in IE6) it returns NaN as columns height.
I've managed to find out that's because of this:
.col1,.col2{"height:auto;"}
I've also used "$('col1').offsetHeight" and it's returning 0 as the height value of each column.
the HTML is styled in this way:
#main{
height: 455px;
background: #484848 url(../images/mainbg.png) repeat-x;
}
#content{
/*height:80%;*/
width: 960px;
direction: rtl;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.col1,.col2{
width: 33%;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
.col1{padding-top:20px;}
.col1 ul{
margin:0;
padding:0;
list-style: url(../images/listBullet.gif);
}
.col1 ul li{
margin-bottom:20px;
}
.col2{
top: 0;
right: 70%;
position: absolute;
}
any idea on the issue please?!
update/ It tooks three days to solve, and I was at the very risk of making a bounty!
for the solution please take a look at this question/answer.

As a completion for Marc's answer; There's an equal for jQuery's height() in Prototype:
$('col1').getDimensions().height //or .width ofcourse
And here's the docs: http://prototypejs.org/api/element/getDimensions
Update: I agree with crescentfresh below. Since I had the absolute same problem in the past, I've searched all possible methods to find the dimension properties but I failed as you will. please take a look at this:
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
As you see, the function has been written to get the computed rendered current style of an element, but in our case even this method will fail, I guess. (worth a try)
So, as crescentfresh said, you have to find the problem in your CSS positioning method while not wasting your time seeking for a proper javascript function which could be able to do the magic. let's begin by removing that #content DIV and letting the #main to be the only wrapper of said columns, and then styling the remain to achieve the desired goal.

Since IE wants to give you a hard time, you can give it some special attention and use a property that I believe it will recognize...
var height;
if(document.all) { //This means it is IE
height = document.getElementById('col1').offsetHeight;
}
else {
height = //Use what is working in other browsers now
}

From:
Why would jquery return 0 for an offsetHeight when firebug says it's 34?
An element that is not actually taking
part in the document render process
has no dimensions, and will give an
offsetWidth/Height of 0.
Both Prototype's getDimensions() and jQuery's height() read the offsetHeight or clientHeight properties, which you've tried and got 0. So somewhere in your code there must be something taking #col out of the rendering flow. That's all I can think of.

Artarad,
The above style i.e. css shows that you have not assigned height.
Please try adding _height:auto in class which will look like
.col1,.col2{
width: 33%;
_height:auto;
height:auto;
text-align: right;
margin-left:3px;
padding-right:3px;
line-height:17px;
}
Basically, many browsers fail to recognize the height when assigned to a particular div or any element . In this case we use the above work arounds.
I hope the above helps you.
Thanks,
Samiksha

I don't know if it will work (without testing), but you could try jQuery and height(); this (in theory) gives the computed height. Worth a try...

I know this is an old question but I found a better answer than "Fix the css and forget the javascript".
I had the exast same problem and used .innerHeight() and it forced jQuery to calculate the height. For some reason .outerHeight() did not work whilst .innerHeight() solved the problem. Not sure if there is a similar method for prototype. You could look into the jQuery library and figure out how .innerHeight() works, and write your own.