How do get a parent node without having a starting reference point?

Question

I want to provide a method for my web app that allows a user to call my function anywhere within his code (inside script tags) that will display a fade-in/fade-out message. What I don't know how to do is determine where I am at in the DOM without having a starting reference point.

Function:

function displayMessage(message) {
    // Display a notification if the submission is successful.
    $('<div class="save-alert">' + message + '</div>')
        .insertAfter($('')) // Do not know how to know where to put the message.
        .fadeIn('slow')
        .animate({ opacity: 1.0 }, 2000)
        .fadeOut('slow', function () {
        $(this).remove();
    });
}

The HTML:

<!-- Some HTML -->
<div>
    <script type="text/javascript">
        displayMessage("My message.");
    </script>
</div>
<!-- Some more HTML. -->

you mean you want to determine the context acoording the position where the actual script code is written? — Caspar Kleijne, Jan 31 '11 at 22:00
Something like this?: http://stackoverflow.com/questions/210717/what-is-the-best-way-to-center-a-div-on-the-screen-using-jquery — jhartz, Jan 31 '11 at 22:07
@Caspar - Yes. I didn't think it was possible, but I figured if anybody would know, it would be the fine folks at SO. So, I decided to ask. — JasCav, Jan 31 '11 at 22:07
@jake33 - No. I'm not looking for positioning relative to screen. See @Caspar's question. That clarifies. — JasCav, Jan 31 '11 at 22:08

score 3 · Accepted Answer · answered Jan 31 '11 at 21:57

3

There isn't any reliable way to get this information. You should do what most other libraries do -- have the user pass in the ID or reference of an element to your displayMessage function so that you can use it.

answered Jan 31 '11 at 21:57

casablanca

69,683
7
133
150

Johan Sjöberg · Answer 2 · 2011-01-31T22:12:13.790

Unless you want to take in a css selector or an id as argument there is also an alternative to create a jQuery widget. This way you can use it like:

$("#msgArea").messageWidget("displayMessage");

or even reuse it many times

$("#msgArea").messageWidget("displayMessage", "message to display");

Sample boilerplate widget:

(function( $ ) {
    $.widget("ui.messageWidget", {
        // default options
        options: { message: undefined},
        // constructor
        _create: function() {
            if (this.options.message !== undefined) {
                this.displayMessage(this.options.message);
            }
        },
        // Displays the message
        displayMessage: function() {
            this.element.append("your div's and messages");
        },
        // Allows constructor/setter arguments
        _setOption: function( key ) {
            $.Widget.prototype._setOption.apply( this, arguments );
        }
    });
}(jQuery));

score 1 · Answer 3 · answered Jan 31 '11 at 22:00

Generally there are two ways, one, as Casablanca noted you provide a div in the DOM to append the message. Second, and this is the one I think you want, is to create a div node on the DOM itself. That way you have total control. After all it is going to fade out when you're done. Might as well kill it from the dom as well. This is what fancylightbox (and I am sure many others) does with the DOM. You'd want to place it right at the beginning of the body, so there are no other containing elements, and style it as you wish - likely so it floats somewhere near the middle of the page like a lightbox/dialog box.

score 0 · Answer 4 · answered Jan 31 '11 at 21:58

0

You probably want to use fixed positioning to put your box at a place relative to the browser's viewport, regardless of where a user has scrolled to in the document.

answered Jan 31 '11 at 21:58

Marcel Korpel

21,536
6
60
80

How do get a parent node without having a starting reference point?

4 Answers4