Copying CSS from website: cannot find the right classes

I want to copy a CSS trick, but the classes do not show in any style sheet.

[dotancohen]

On the KDE developer's blog, the comment textboxes have grippies on the bottom that allow the user to resize them vertically. I won't post the URL here (rules), but the classes defined for the textarea are not found in the stylesheets linked in the head of the document. To start narrowing down code, I copied the document to a local file, with a base href back to the KDE developer's blog, and although the page displayed it did not have the grippies!

Is there some magic sauce that I am missing, which would enable a CSS effect for a page on the server but not locally? I know my way around HTML and CSS, and though I am not an expert I can usually figure out how something works. But not in this case.

Thanks in advance.

[csuguy]

Are you sure that there isn't javascript on the site? Sounds more like a javascript feature to me.

Can you post the HTML in question - and any relevant CSS involved?

Ryan

[dotancohen]

There is a _lot_ of HTML and CSS, and I have been unable to narrow it down as even in it's original form it does not work locally. As this is obviously not an advertisement for me, here is the URL of a recent post on the site, with the textarea in question on the bottom:
[kdedevelopers.org...]

Edit: you need to log in to see the textarea. Here is the narrowed-down form:

<form action="/comment/reply/3618" accept-charset="UTF-8" method="post" id="comment-form">
<div>
<div class="form-item" id="edit-comment-wrapper">
 <label for="edit-comment">Comment: <span class="form-required" title="This field is required.">*</span></label>
 <textarea cols="60" rows="15" name="comment" id="edit-comment" class="form-textarea resizable required"></textarea>
</div>
</div></form>

I can see in the CSS where the 'grippie' is added, so that much isn't JS. But they are using jquery, which would indicate advanced JS usage and in fact there is quite a bit of JS on the page.

[vincevincevince]

Often, JS will know which fields to target based upon the class. It is a more semantic way to describe behaviours because it unifies CSS styles with the additional styles or user-experience enhancements supplied by JS.

[csuguy]

I tried to make an account - but it doesn't seem to want to let me in right away :/. Anways - it looks like it more than not JS.

[dotancohen]

I found a simpler page that uses the same feature from the drupal.org website:
[perifer.se...]

I think that kdedevelopers.org is drupal, and this looks to be a drupal feature.

This code seems to be the guilt party, but I cannot get it working locally on a single page:
[/code]
Drupal.textareaAttach = function() {
$('textarea.resizable:not(.processed)').each(function() {
var textarea = $(this).addClass('processed'), staticOffset = null;

$(this).wrap('<div class="resizable-textarea"></div>')
.parent().append($('<div class="grippie"></div>').mousedown(startDrag));

var grippie = $('div.grippie', $(this).parent())[0];
grippie.style.marginRight = (grippie.offsetWidth - $(this)[0].offsetWidth) +'px';

function startDrag(e) {
staticOffset = textarea.height() - Drupal.mousePosition(e).y;
textarea.css('opacity', 0.25);
$(document).mousemove(performDrag).mouseup(endDrag);
return false;
}

function performDrag(e) {
textarea.height(Math.max(32, staticOffset + Drupal.mousePosition(e).y) + 'px');
return false;
}

function endDrag(e) {
$(document).unmousemove(performDrag).unmouseup(endDrag);
textarea.css('opacity', 1);
}
});
}

if (Drupal.jsEnabled) {
$(document).ready(Drupal.textareaAttach);
}
[/code]

[dotancohen]

> I tried to make an account - but it doesn't seem to want
> to let me in right away :/. Anways - it looks like it
> more than not JS.

I also had a hard time signing up, until I went and read the original confirmation mail a second time :) You need to email a confirmation mail to the address listed in the email (not the reply address, mind you). Also, it assumes that your favorite desktop is kde :) (you will see what I mean when you read that mail carefully)

[csuguy]

I also had a hard time signing up, until I went and read the original confirmation mail a second time :) You need to email a confirmation mail to the address listed in the email (not the reply address, mind you). Also, it assumes that your favorite desktop is kde :) (you will see what I mean when you read that mail carefully)

No - I noticed that. Although - perhaps I should put kde.org rather than the whole 'kdedevelopers.org'... But w/e.

[csuguy]

I don't see where on that page it uses that feature... Maybe you have to be logged in to see it.

Anywho, while I can understand what's going on in the code - I rarely use Javascript itself. I don't like it because you tend to have to write everything 2x :/. You should take what you know now and open up a thread in the Javascript Section of the website. There are more knowledgeable people there who can better assist you in making your own version of this feature.

Ryan

[dotancohen]

Yes, it should be kde.org and not kdedevelopers.org. I will write to the webmaster and tell him that it is confusing.

I will take this thread over to javascript, now that we know it is not CSS. Thanks!