Jquery .Css() Function Not Returning Expected Values

jQuery .css() function not returning expected values

This is not a complete answer to your question but it may be a working solution to caclulate the em values. I adapted this function from here. And here is the updated fiddle.

$.fn.emWidth = function(){
    var wpx = this.width();
    var temp = $('<div />').css({
        width:'1em', 
        position: 'absolute'
    });
    this.append(temp);
    var oneEm = temp.width();
    temp.remove();
    var value = wpx/oneEm;
    return Math.round(value*100)/100;
};

Position() not returning expected position

I found the solution by playing with the code a little more.

What I didn't understand was the position of my elements were changing with each click. I had made the assumption the initial position remained the same since there was no page reload happening.

However, with each click, the position of the elements was changing in relation to the parent element with positioning.

Therefore, I either needed to capture the original positions and look those up on each click, or capture the new position and animate scrolltop based on the current position and the location of the new position. I'm not sure that I'm explaining that all too well, so...

Here is the code that makes the table scroll to the correct position:

currentPosition = 0;

$('a[href^="#"]').on('click', function(event) {

  var target = $($(this).attr('href'));
  event.preventDefault();

  var currentScrollTop = $('#schedule-table tbody').scrollTop();

  currentPosition = target.position().top;
  $('#schedule-table tbody').animate({
    scrollTop: (currentPosition + currentScrollTop)
  }, 1000);

});

Here is the new jsfiddle with the working code.

Why jQuery.css does not apply a property if it is not supported and how is this being checked?

jQuery is indeed filtering out some values, but it isn't doing it intentionally in this case. It has to do with how it retrieves the styles using getComputedStyle() which apparently knows that "hurr" isn't a valid style so it isn't returned as part of that and then when jQuery looks for "hurr" in the computed style, it isn't there so it returns undefined.

In Chrome, the style value does appear to actually be there on the style object, even when set via jQuery, but it isn't retrieved properly by .css() because it's not a real style.

If you want to set an unsupported style value, you can just use the style object directly but according to some comments in the jQuery code, some versions of IE might throw an exception if you try to set something it doesn't know about:

var elem = document.getElementById("element");
elem.style.hurr = "durr";
console.log(elem.style.hurr);   // in Chrome, gives you "durr"

jQuery .css(left) returns auto instead of actual value in Chrome

As discussed in the comments, setting left to auto for a position: static sounds somehow right, seeing as left has no meaning in the context.

As to why Chrome and IE return different values: .css() provides a unified gateway to the browsers' computed style functions, but it doesn't unify the way the browsers actually compute the style. It's not uncommon for browsers to decide such edge cases differently.

As to why jQuery 1.4.2 and 1.4.3 do this differently, I do not know for sure, but there's this in 1.4.3's release notes:

Nearly the entire CSS module has been rewritten focusing entirely on extensibility. You can now write custom CSS plugins that extend the functionality provided by .css() and .animate().

Javascript function fails to return element

You are using .each() with a function

.each(function(){
    ...
    return this;
});
return false;

This will return from the callback (and maybe stop the each-loop if this was false), but never break out and return from the outer getCurrentCell function! So, that one will always return false.

Quick fix:

var result = false;
<...>.each(function(){
    if (<condition>) {
        result = <found element>;
        return false; // break each-loop
    }
});
return result; // still false if nothing found

Why would jQuery return undefined for the css function of an element?

You're using jQuery incorrectly. When you say $container[0] you are getting the first javascript DOM element of the jQuery object (which doesn't have any jquery functions attached to it). If you want to get the css background color of the element using jQuery you need to do $container.css("background-color"), and to set it $container.css("background-color", "blue"); or $container.css({ "background-color": "blue" });

jQuery CSS not updating / creating elements

1. Add Break after each case.
2. Your ele should be ele = $("#"+ data.css);
3. You may try using ele.attr("style","background-color:"+val+" !important;");
   or ele.prop("style","background-color:"+val+" !important;");
4. ele.css() method does not support !important in the code.
5. All the best :)

Get wrong value of css property in Firefox using jquery css()

According to this other post Retrieving percentage CSS values (in firefox) this is a know bug. Based on the fiddle in that post's answer I've made a jQuery plugin which should get rid of your problem:

(function($) {
    $.fn.cssFix = function(property) {
        var el = this[0], value;

        if (el.currentStyle)
            value = el.currentStyle[property];
        else if (window.getComputedStyle)
            value = document.defaultView.getComputedStyle(el,null).getPropertyValue(property);

        return value;
    }
})(jQuery);

Usage:

$('.jslider-pointer').first().cssFix('left');

Here's a fiddle that uses this plugin and works on both Chrome and Firefox, and returns the value as it was defined in the css rule: either % or px.

EDIT: Tested in Internet Explorer and it works there as well

---

Related Topics