Whole site overlay div? - javascript

I'm using this snippet to append an overlay to a whole site:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
It works great, only I need one element to sit above this overlay ID. I've given that element a z-index greater than the 5000 here, but it never seems to ascend above the gray overlay---any ideas?

Make sure it's a sibling and direct child of body to guarantee it'll work in IE along with giving it a position of anything other than static and a higher z-index than 5000.

Give it position:absolute too, or position:relative.

Make sure the element you want overlaying is positioned (like absolute or relative).. other wise z-index means nothing

1st check where exactly the 2nd element is being added in other words if ur assigning this value in JQuery but ur using plain css to code the 2nd elements values there may be a confliction. Also u should try using some quotes where ur values are i found that using double quotes with opacity values help.
Just a suggestion though instead of trying to dynamically assign elements using JQuery and give them properties might i suggest u try plain css when giving the elements attributes and only use JQuery to manipulate what needs to be calculated and or cannot be accomplished by css alone. Then ur code would be like this:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay").height(docHeight);
$("#overlay").css({"opacity":"0.4"});
});
and the element would also have the properties assigned by the default css file

Related

Using the height() method in jquery

I am new to jquery and am currently trying to set a variable equal to the height of some div with id="thing" before animating another div with class=".init_leftbar" by the same quantity.
var iHeight = $("#thing").height();
$(".init_leftbar").animate({top: iHeight + "px"});
However, this does not seem to be working.
if I just set "iHeight" equal to some number it will animate however.
I figured there has been some misunderstanding on my part as to how the "height()" method works.
Any help is greatly appreciated.
I would try to print $("#thing").height() in the browser console with
console.log($("#thing").height());
to see what is returning from the div.
I also noticed that .height() has some problems with absolute positioned divs given a display:block; style.
As documented in the Jquery API:
http://api.jquery.com/height/
// Returns height of browser viewport
$( window ).height();
// Returns height of HTML document
$( document ).height();
Consider running the script on document ready, allowing everything else to load first.
Also, you might get better mileage with outerheight(), which accounts for everything which can make up the height, including padding.
What about replacing:
$("#thing").height();
with:
$('#thing').css("height");
Be aware that css() returns string as "100px" and not 100 as height()
so you need to delete the '+ "px"' suffix.

jQuery dynamic centering in not working as expected

I'm trying to center a dynamicly sized .nav, within a static .container div. I have the following code:
JSFIDDLE
$('.nav').css({
'position': 'fixed',
'left': '50%',
'top': '50%',
'margin-left': -$(this).outerWidth() / 2,
'margin-top': -$(this).outerHeight() / 2
});
Can anyone explain why the .nav is not centering within its parent element?
The primary problem is that this doesn't refer to what you think it does. You are still in the same scope when execution reaches these lines:
'margin-left': -$(this).outerWidth() / 2,
'margin-top': -$(this).outerHeight() / 2
so this still refers to what it did before the .css call. For the most part, this only changes (at jQuery's hands) when you are inside a callback to a jQuery function or event.
After fixing that, it sort of works: http://jsfiddle.net/8jfkv/11/, but there is still something off with your calculations.
2 issues:
As Chris pointed out, $(this) is not .nav. In your example, $(this) is JSFiddle's Result iframe, so you're calling outerWidth/Height on the wrong element.
I recommend capturing .nav as a local variable (to minimize jQuery selections).
Since .nav is initially position: static, its initial width is 100% of its container. So (and assuming you already fixed #1) outerWidth() in your fiddle would return 500px which would lead to a left margin of -250px.
.nav's position needs to be set before you call outerWidth() so that its width collapses first. (And its position needs to be set to absolute instead of fixed.)
Both issues fixed in this fiddle: http://jsfiddle.net/8jfkv/13/

Jquery slide to visibility hidden?

I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.
This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)
EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div
You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/

Give element height and remove it after

I am using Easy Pagination plugin to paginate some content. The problem is that after clicking 'next', the browser jumps up do to the height of the element loading data for Pagination.
I am trying to fetch the height of the element, example .recent, and give it to .recent before clicking .next (Before the pagination happens), then set it after.
So I am wondering how can I set the height of .recent, and then take off?
Here is what I tried so far:
var recentH = $('.recent').height();
$('.next').click(function(){
$('.recent').css( 'height', recentH );
});
I am trying to fetch the height of the element
$.height() or $.css('height') is what you´re looking for, they both get and set values. See height() and css().
"The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px)"
before clicking .next (Before the pagination happens), then set it after.
Are you using some plugin for the pagination and does it have it´s own click event handler for the .next element?
Notice that your selectors matches elements by their CSS class and that there might be multiple elements. You should therefore specify the element to read the height of.
Short example;
$('.next').click(function(){
var height = $('#firstElement').height();
// Pagination actions here (toggling elements)
$('#secondElement').css(height + 'px');
});
After seeing the example I figured this might help:
var h = $('.recent').height();
$('.next').click(function(){
$('.recent').css({ 'height': h + 'px', 'display': 'block' });
});

Inserting a variable into jQuery .css

I have a JavaScript Variable that stores the width of an element ,called popupWidth, in px, e.g. '200px'. The '' are part of the variable, because jQuery needs them.
How can I insert the variable into jQuerys .css?
$(this).css({
width: + popupWidth,
});
The code above doesn't work.
Take a look at the jQuery .css() man page...
http://api.jquery.com/css/
It shows that you have to enter the css attributes as essentially a JSON type datastructure... not as just pure text.
$(this).css({ width : popupWidth });
the above should work for you as you have 'already' added the px to the popupWidth variable

Categories

Resources