I've stepped through in the IE9 debugger (my code has to run in IE), and this.$boxis an object (jquery object) wrapping the element I am trying to show the DIV at. The $offset has the right numbers (they are positive and look to be the right location).
The problem is, after I call this.$dialog.css("left", $offset.left), the value ofthis.$dialog.css("left")is "undefined". It's "undefined" both before and after the call. The same for "top". Then the call to this.$dialog.show() doesn't seem to do anything, that is, I don't see the dialog (the style property for that dialog is initially set to include "display: none;").
Also, the content variable does hold some HTML, and it looks right, so I don't think that's the issue. Any ideas? I've seen the css properties return "undefined" before and I couldn't figure out why.
I am using Jquery 1.4.4, and the code is running inside a webbrowser control in .NET which is IE7.
Ran across this same thing with .css('top') being undefined on a div I had put into a jQuery object using its ID. .position() was also undefined. .offset() gave the right numbers, but without being able to figure out the "top" property, much less assign a number to it, there was no way to tell the div how far down the page to go using relative or absolute positioning (I was trying to make it move according to the scroll position).
This thread is over a year old, if you have a similar problem you should create a new thread and reference this one - but, since we're here now ...
It sounds like you're running into an issue with the way .Net is rendering the controls onto the page, especially if it works in a simple html page. I would run the aspx page and then view the source as it is rendered, that should give you some idea as to how the elements are being added to the markup and what sort of id, type, and other information they are given.
Recently it seems there have been quite a few people with similar issues, so yo may want to try to looking into a .net forum for an answer since the problem most likely lies with it then jQuery.
Finally, it always helps if you can post your jQuery code that isn't working along with the markup (the actual generated markup not the server side .net controls) so we can see what is going on.
Thanks for being willing to help. Below is a full HTML page, and is an example of what I'm trying to do. It works fine, if you make the browser window small enough to have a scrollbar, to see it in action when you scroll. The problem comes when I put it into our app, a user control added to a SharePoint page, which is also doing some postback in order to bind some SharePoint list data to a GridView. Even after the postback, though, it can still retrieve the object fine - "s" is not null.
If you want to know how the code below relates to how it is in my app, pretend that the 2nd column has the GridView in an UpdatePanel, with an ImageButton as the trigger which is getting "clicked" programmatically onload by jQuery to fill the GridView. The 1st column has some custom filter controls that I want to scroll beside it (I want the user to be able to see and manipulate those controls as they scroll through their results and pick out parameters to filter on). That code is something I'm using on another network, but this is my mock-up I built to prove it should be able to work, first.
In that other code, I get "s" as the "sticker" object just fine, but "pos" is undefined. s.css("top") is also undefined. Doesn't make sense to me - I'm using $(document).ready, like I've seen happen in other forum posts where the programmer wasn't. The object itself comes back. It's like it just doesn't have a .position() or a "top" property after a postback (which the code below doesn't include):
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthMonth must be a number." data-val-required="The BirthMonth field is required." id="BirthMonth" name="BirthMonth" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthMonth" data-valmsg-replace="true"></span></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthDay must be a number." data-val-required="The BirthDay field is required." id="BirthDay" name="BirthDay" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthDay" data-valmsg-replace="true"></span></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-number="The field BirthYear must be a number." data-val-required="The BirthYear field is required." id="BirthYear" name="BirthYear" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthYear" data-valmsg-replace="true"></span></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-date="The field BirthDate must be a date." data-val-required="The BirthDate field is required." id="BirthDate" name="BirthDate" type="datetime" value="" /> <span class="field-validation-valid" data-valmsg-for="BirthDate" data-valmsg-replace="true"></span></div>
I don't do much with visual stuff so I'm not sure how much I can help but a couple of things I noticed. First, in your css you have a selector defined as div#sticker, but the element in your markup is a table. You actually don't even need the element name since you're using the ID, it will be faster without it.
Second, you are only assigning a value to pos once, right after the dom is ready so, in your scroll handler, pos will always be the same value.
Appreciate the help. Yeah, that div#sticker was a remnant of some other playing around I was doing. It can either be there or not, it doesn't effect anything, really, either way, but I'll be sure to exclude it in the final version.
"pos" just got the "position()" method of the object, and later "pos.top" would indicate in the scrolling function essentially where the "0,0" position is, so this was always supposed to be a constant and just would get set once - at the beginning - when our object is at its starting location. The idea was that the scrolling function would use pos.top so it can compare the original location to the scroll position (windowpos) to figure out if we're back at the original location or not and change the class from a static position (default) to an "absolute" one, and back and forth. All of that would work fine if "pos" (which is just the object.position()) is not undefined to where it can't determine ".top".
Update: There's a function that I use for running right after the async postback, so I put my code in there. I didn't do any testing to see if it made a difference putting it there, though, since I later found out in my "playing" that I had done something stupid. I had:
var s = $('[id*="#sticker"]');
var s = $('[id*="sticker"]');
(had a pound sign in there when I shouldn't've)
Once I did that, .position() was no longer undefined.
Additionally, I found:
1) After the postback, the class parameters were not being added back onto the object, so my css was basically for naught, anyway. This was the *REAL* issue.
2) I could add the parameters directly to the div as style parameters, and they would stay enforced, so I removed the stylesheet classes/properties.
3) I really didn't need to do the "if (windowpos = pos.top)" check to add/remove the class, anyway. If I just did
it would track the scrollbar just fine. And doing it this way, I didn't even need to get "s" or position() or position().top.
So #2 and #3 were the *REAL* solutions - to just use the class identifer instead of ID. I assigned the static style properties directly in the HTML, and assigned the dynamic ones via the $(window).scroll function using the class identifier.