CODEWITHSUNDEEP
jqueryhtml
Katstevens
Katstevens

Reputation: 1571

jQuery inconsistent values

I've built a website control using jQuery that is a long bar containing four coloured divs; users can drag the join between two divs to resize it, within the scope of the whole bar (the overall bar width doesn't change). Additionally users can remove/replace any of the divs, but must leave on in there.

When debugging on my computer it was working perfectly. Now I have it hosted and am finding jQuery is reporting some of the values inconsistently - specifically element.css('left') and element.width(). When I set the values to be outputted to the console and repeatedly refresh the page, I see that sometimes reading left from an element that doesn't have it set returns NaN, sometimes 0. I have overcome this one by checking for it and explicitly making it 0.

The other one is width. I have a div wrapping the internal divs that determines the fixed width of the slider - presently set to 1000px. This is set in a css stylesheet linked after the js file. In the page load code (in $(function(){})) this width value is queried and sometimes reports 1000px, but sometimes 1887px?? There seems to be no rhyme or reason to this - my assumption is that it's a race condition where the width is read before it is set by the rendering engine?? Can someone confirm/deny this, or point me to a summary of the order in which objects/properties are made available in the DOM? I had thought by putting the code in $(function()) that the document would all be loaded...

You can see the widget here

PS: if anyone wants a copy of the widget code to use elsewhere please let me know, happy to provide :-)

EDIT: there is an additional function when if you click to drag and scroll the mouse wheel it will nudge the barrier up and down by a small amount, for fine control. I've just found that rather than reporting the correct numbers it will not move and just displays NaN. On my local network this works fine (same file as that hosted, but served via the network not the internet). For some reason the line that parses out the value just returns NaN: parseFloat($('#ICDM').children('.slider').children('.b1').attr('data-high'))

I can't fathom why it will parse it on the network but not via the internet!! Does anyone have a solution or alternative?

Upvotes: 0

Views: 145

Answers (2)

Katstevens
Katstevens

Reputation: 1571

OK I've found a partial answer to my question:

Inconsistent Width

I found that printing the div width to the console during the $(document).ready() function was reporting the incorrect width (sometimes) but a function on a timer always reported correctly - so it was a race condition after all! Putting the initial drawing function inside $(window).load() solved the problem by delaying until everything had been loaded and initially render (I think!).

I will update this with more details if/when I solve the other problems!

Upvotes: 0

Axel Amthor
Axel Amthor

Reputation: 11096

I think your mixing up css properties and DOM objects properties. Having no CSS value for "left" does not mean, that the box element doesn't have a "left" property. In other words:

given:

<div>Auto Box</div>

CSS property "left": undefined (or NaN if you parse it)

Box property "div.left": some value according to layout and position on screen.

same with width, height etc.

Setting the css property "left" to a value will force the position and in effect you will not have the NaN any more, but it does not necessarily mean that the element will actually be at "that position" since that depends on the css position property value, etc etc...

Upvotes: 1

Related Questions