ansaurus

Question

Answer 1

+1 A:

The call to "wrapInner" returns the jQuery object that you created with $('#container'), not the div that wraps the container. Try this:

 $('#container').wrapInner('<div />').children()
    .css(/* ... */)
    .css(/* ... */)
    .attr('id', 'overlay');

[edit] actually I have no idea what you expect to happen so I'm not sure whether my example makes any sense.

[edit again] OK if you want to wrap the container then you don't want to use "wrapInner()". Just use "wrap", and then call .parent() and add your CSS and "id" value.

Pointy 2010-02-06 20:56:08

Thanks.. this wrapped the child text node ("Container"). It did, however, leave the container div inact. What I need is to wrap the container div (<div id='container'>) with this new ovelay div.

Nick 2010-02-06 21:04:25

Your right. However the overlay width is larger than that of the container. How do I get these to match up? Setting the overlay width (offset().width) equal to the container's doesn't work and it seems to left justify the container.

Nick 2010-02-06 21:52:42

Answer 2

A:

The Wrap() method is what I needed

 $('#container').wrap("<div id='overlay'> </div>")
        .css('opacity', '0.5')
        .css('z-index', '2')
        .css('background','black')

Update:

In the end it decided to not wrap the container div with the overlay. The styling was getting tricky so I just decided to make the overlay div a sibling of container and then position it over the container. I am using offset values of the container to do this.

var left = $("#container").offset().left;
        var top = $("#container").offset().top;
        var width = $("#container").outerWidth();
        var height = $("#container").outerHeight();
        $("#overlay").css({ "left": left + "px", "top": top + "px", "width": width + "px", "height": height + "px", "opacity": "0.5" });

Nick 2010-02-06 21:08:25

Just keep in mind that the changes to the css that you perform happen to the `#container` div and not the `#overlay` one ..

Gaby 2010-02-06 21:10:25

Ya.. it appears that my container is inheriting from the overlay.. I think these divs will have to be siblings.. ahhhI only went down this road because I was having trouble getting the overlay positioned correctly using the container's offset values.

Nick 2010-02-06 21:23:04

Call .wrap('<div/>'), then string a call to .parent(). The call to "wrap" will create the outer div, and then the call to parent() will make it the subject of the jQuery object. Then you can call your css routines and the right thing will happen.

Pointy 2010-02-06 21:25:49

@Pointy: This has me very close. Thank you. The only issue that remains is that the overlay is very wide. I am trying to set the overlay CSS like this: .css('width', $("#container").width())For some reason the overlay is still too wide and the container has shifted to the left. Argg Almost there! :)

Nick 2010-02-06 21:42:51

ansaurus

tags:

views:

answers:

JQuery Overlay - wrapInner method

related questions