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
Related
var DocHeight = $('.xxx').height();
$(".yyy").height(200 -DocHeight);
Hello,
Above I show scheme changing height element depends on another element height, and I have question, is an option do the same but with max-height?
Any css attribute can be set using .css (if you use jquery of course). So basically you do something like this:
$(".yyy").css('max-height', (200 - DocHeight) + ' px');
Note that in this case you have to manually add 'px' because .height() makes the conversion automatically, now you need to specify unit of measure (I'm assuming pixels from your example).
More examples here: http://api.jquery.com/css/
I also assumed that you wanted just to set the max-height. If you want also to get the max-height you can do it in a similar matter:
var DocHeight = $('.xxx').css('max-height');
$(".yyy").css('max-height', DocHeight);
Note that in this case DocHeight comes exactly as it is defined in css so something like '100px' or '10%'. You need to manually convert it to a number if you want to compute something based on it (as you can see I removed the '200 -' part from the second instruction since that would've been invalid because you would be subtracting a string from a number).
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.
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' });
});
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
So I have
VARIABLE = Math.floor(5*Math.random());
Then
.animate({left: '+=VARIABLE'}
but it doesn't work.
In my css my div already has a left attribute. If I do left: newx + 'px' it sends it to the random number I generated, meaning it jumps to the top of the page.
Variables are not interpolated in strings. Try this:
.animate({left: '+='+VARIABLE}
What do you mean by += a variable? You want to increase the current value of the left position? If so you can also fetch the raw number with the .offset() method, increase it, and use it as the new position.