We Keep Coding

Remove Bootstrap Collapse' inline height property set by JS

When using the Bootstrap collapse plugin, I notice in the Elements panel that there is an inline height property of the element animated. I would like to remove this (from the actual core Collapse.js / Transition.js plugin) as I'm using pure CSS3 animations/transitions.
the reason is two fold : a/ I don't need it, b/ it's conflicting with my own animation, the element firstly expands to the height calculated by the script, and then after a 15ms pause folds down to height: 100% (as I wish)
I emphasize: I don't want to override it, I want to remove it completely (please no answers with overriding)

Height is being set by anything that looks like:
this.$element[dimension](0)...
You'll need to hunt those down in both .hide and .show plugin methods.

How to apply function to all elements having border-radius property

The idea is making some border-radius effect in IE 7/8, so I've decided to use jquery.corner.js library. To make it more generic I want to write some script which applies corner() function to all elements within a page having border-radius property.
For example, for this element
.someElement
{
border-radius:10px;
}
function must do the following
$(".someElement").corner("10px");
The problem is that I want to apply rounded corners to all elements, including dynamically added elements and elements which are inheriting border-radius property among some action(hover, click, etc.). Is this possible?

You need to declare a function that applies you css on every change.
To detect css style changes, see here:
Event detect when css property changed using Jquery
Then you need call that function on style change and on dom tree change (every time you append something into the page)....
I would advise you use a specific class to apply border radius css. This way you can select the rounded elements via jQuery class selectors.

You should have a generic css class that is used on all elements that have rounded borders and then use that class in your selector.
You will have to do this in a document ready handler. This will of course only apply rounded borders to elements that currently exists. If you want to cover elements loaded with ajax you can do the following:
$(document).ajaxSuccess(function(e, xhr, settings)
{
$(xhr.responseText).find(".class-that-applies-rounded-borders").corner("10px");
});

Using JavaScript/jQuery to display multiple CSS values on any given element

I have a situation where a div has two CSS display properties. One is set to none and the other is set to block. However, display: none overrides display: block because of CSS specificity.
I can use JavaScript/jQuery to find out the display value of this element. In this given scenario, the result would be none because it is the overriding style. However, I would like to be able to retrieve all of the display values on this element. I want my JavaScript to return none as well as block.
Is this even possible?

You need to look at the class names for the element and look them up in the stylesheet.
See: Read CSS property of an element using JavaScript

Using jqTransform on hidden contact form, select box value not showing

Sorry if this is a pain the ass, but I could really use some help here:
http://dev.rjlacount.com/treinaAronson-form/
The contact form can be seen by clicking the "Contact" button on the top left. I'm using the jqTransform jQuery plugin to style it. It's hidden initially with display:none; applied to the div with the ID "panel", and slid in with the following:
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle("3000");
});
With this setup, the contact form isn't displaying the current value of the select box inside its field. If I instead remove the display:none; rule for the panel div from my CSS, and hide the form after the page has loaded with:
$("#panel").hide();
The form display correctly. Does anybody know how I can make this work and avoid the flash of an open panel I get if I hide it with jQuery after the page loads?
Thanks so much for any advice. Please let me know if I can provide any more information.

The problem is, jqtransform is setting width for a label (currently visible value in a transformed select) to match the width of original select.
If the original select (or its parent) has display:none set, and it doesn't have any css width specified, the result of .width() on that element is zero.
You can in fact check (using firebug or google chrome dev tools), that it's not that contact form isn't displaying the current value of the select element, but rather displaying it with a width equal to zero.
The easiest solution in your case, is to set (in your css file) fixed width for the selects that are part of a contact form. That way, even though they will be hidden at first, the jqtransform will set correct width for label. For example:
/* css declaration */
#change-form select {
width: 390px;
}
Side note: there are of course other ways to make it work, including tweaking the jqtransform script to fit your specific use case. Part of the script related to setting mentioned width of a label starts on line 289.

Is there something like data-* attributes for css?

I want to pass a value that's set in a stylesheet so it can be read by javascript/jQuery? I thought of creating an invisible element and giving it a value, but then I would have to include that element in all the pages, which is pretty hacky. Just want to know if there's an alternative to that.
I have a js resize script for images that resizes based on area instead of height or width, so I can't feed it a maxwidth or maxheight, per se. if you give it 100, it makes the area of an image = 100^2. I suppose I could set the maxWidth of the element to twice the number I want, but I'm just wondering if there's a classier way to pull it off.

As far as I know, browsers throw away attributes they don't understand, so unfortunately you can't just inject your own data-*. I think you might have to do it via a hidden element, something like below, which uses the content attribute:
# styles.css
.data {
display: none;
content: "my data variable"
}
# index.html
<span class="data"></span>
# javascript
myData = $(".data").css('content')
Update
Playing around in Chrome, it looks like you can set the 'content' of an image and it won't show up. So you could do
# styles.css
img {
content: "100"
}
Not sure how well that works cross browser though, also looking at the w3c spec, it says that 'content' has to be used with :before or :after, so not sure if you'll run into validation issues there.

Why not just use javascript to query the actual element, and read its properties that way? Then you don't rely on the CSS at all.
$('someDiv').getWidth()