I'm busy creating a resizer, but on reloading it first switches from 100% until loading the cookie and setting the width to something fixed:
//set width from cookie, unfortunately we need todo this on docready because #main-container is not done rendering -_-
var width = $.cookie("width");
// Set the user's selection for the left column
if (width != null) {
if (width == "fluid") {
alert("fluid!");
$('#main-container').addClass('width-fluid');
} else {
$('#main-container').addClass('width-fixed');
}
} else {
$('#main-container').addClass('width-fixed');
};
Any ideas?
Thanks,
Dennis
just set the default css property "height" and "width" as 0 inline or in a external css file, then when the cookie is loaded, it will set it to what you want.
ex. of inline default css (before js affects it)
<element style="height:0px;width:0px;" />
I'm assuming you're dealing with a block-level element (image), if not you might want to also set the element to "display:block" so it will respect the height and width.
You can set specific css properties using jQuery with the following :
$("#selector").css("property-name", value);
so for width, you would just use:
$("#main-container").css("width", value);
Related
Note that I'm not asking how to make a div the size of the "window" or "viewport" for which there are plenty of existing questions.
I have a web page of some height and width, and I'd like to add an empty, top-level div (i.e., not one containing the rest of the page) with a size exactly equal to the page's height and width. In practice, I also want it to be at least the size of the viewport.
I know I can do a one-time calculation of the height and width in JavaScript:
var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
But this value can change based on images loading, or AJAX, or whatever other dynamic stuff is going on in the page. I'd like some way of locking the size of the div at the full page size so it resizes dynamically and on-demand.
I have tried something like the following:
function resetFakeBg() {
// Need to reset the fake background to notice if the page shrank.
fakeBg.style.height = 0;
fakeBg.style.width = 0;
// Get the full page size.
var pageHeight = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);
var pageWidth = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);
// Reset the fake background to the full page size.
fakeBg.style.height = pageHeight + 'px';
fakeBg.style.width = pageWidth + 'px';
}
// Create the fake background element.
fakeBg = setFakeBgStyle(document.createElement('div'));
document.body.appendChild(fakeBg);
// Keep resizing the fake background every second.
size_checker_interval = setInterval(resetFakeBg, 1000);
Limitations
This is for a Chrome extension, and I'd like to limit my modification of the page to adding this single div. This means that adding CSS to modify the height and width of the html and/or body tags is undesirable because it might have side-effects on the way the rest of the page is rendered.
In addition, I do not want to wrap the existing page in the div because that has the potential to break some websites. Imagine, for example, a site styled with the CSS selector body > div. I'd like my extension to break as few websites as possible.
WHY OH WHY WOULD I NEED TO DO THIS?
Because some people like to hold their answers hostage until they're satisfied that I have a Really Good Reason™ for wanting to do this:
This is for an accessibility-focused Chrome extension that applies a CSS filter across an entire page. Recent versions of Chrome (>= 45) do not apply CSS filters to backgrounds specified on the <html> or <body> tag. As a result, I have chosen to work around this limitation by copying the page's background onto a div with a very negative z-index value, so that it can be affected by the page-wide CSS filter. For this strategy to work, the div needs to exactly imitate the way the page background would appear to a user—by being the exact size of the document (and no larger) and at least filling the viewport.
setInterval() is your best friend in cases like this where you want the .height() and .width() of an element to be asynchronously specified all the time to something that can be dynamicly altered by user input and DOM tree changes. It is what I dub as a "page sniffer", and arguably, works better than $(document).ready if you are working in multiple languages (PHP, XML, JavaScript).
Working Example
You should get away with setting the width and height in the window resize function, you might wanna add it in a load function as well, when all data/images are loaded.
just add width=100%
e.g;-
Hello World
I think you must do it like this:
...
<body>
<script>
function height()
{var height = Math.max(document.body.scrollHeight,
document.documentElement.clientHeight);}
function width()
{var width = Math.max(document.body.scrollWidth,
document.documentElement.clientWidth);}
</script>
<div height="height()" width="width()">
</div>
</body>
...
I'm trying to display a list of information, and it works normally, however when I hide the div containing the list and then show it again, the width of the elements with the "width: auto" styling are being re sized and the new size is too small:
Before hide:
After Hide:
My php generating the elements looks like this:
<div displayitem='true'>
<table>
<?php
foreach($aExistingChangeDetailsData['customers'] as $aCustomer){
?><tr><td><li style='width:auto;'><?php echo $aCustomer['sCustomerName']; ?></li></td></tr><?php
}
?>
</table>
</div>
and my jquery is simply:
function expandSection() {
$("div.cd-content").show("slow");
}
function collapseSection() {
$("div.cd-content").hide("slow");
}
I'm guessing the issue is due to the re sizing nature of the slide animation, is there any simple way to keep the width of width:auto elements after the hide so they are restored to the proper size?
Edit:
It seems to be decreasing the width by exactly 5 for every element.
try to use fadeIn and fadeOut istead of show and hide respectively, cause hide() changes width of element to zero, but fadeOut() changes attribute opacity and doesn't width
your inline width: auto styling is only being set once on first render, you can also set it after events fire:
function expandSection() {
$("div.cd-content").show("slow").css("width", "auto");
}
function collapseSection() {
$("div.cd-content").hide("slow");
}
Try to identify which element(s) width is set to 0 after using .hide().
Then before calling .hide() fetch the original widths i.e. example below
const parentWidth = $('.slick-track').css('width');
const childWidth = $('.js-slide').css('width');
The call .hide() to hide the element block (as per desired functionality)
On calling .show(), set the width of the affected element(s) back to its original widths, i.e.
//fix collapse width
$('.slick-track').css('width', parentWidth);
$('.js-slide').css('width', childWidth);
This will do it, the element width(s) will be restored to its original width
I have jQuery ajax table, and I need to keep table height while its body isn't fully loaded. This is my code:
var tableHeight = parent.height();
// set parent fixed height so page don't jump up/down during adding
parent.height(tableHeight);
// or: parent.css("height", tableHeight + "px");
$tbody.hide().empty();
// no items loaded
if (rowsData.length === 0) {
this._noItems();
} else {
this._rowAdder(rowsData, actionDisplay);
}
$tbody.show();
parent.height("auto");
"parent" is table object
I know, I can use css attribute "visibility", but for example Mozilla doesn't change css style or table attribute and table displays well. My questions are: Why Chromium ignores configured css style or table attribute height? Can anybody help me, please? Ths ;)
Setting the height attribute is not as easy as setting the width.
In most cases you need to set the html and body heights to 100% if you want a child to know what 100% means.
html,body{
height: 100%;
}
I have a Element with the id="somID";
For Example:
Html:
<div id='somID' ></div>
Css :
#somID{ width:500px;height:500px}
and i have a class named : maximize.
So,
.maximize{width:100% !important; height:100% !important; }
Now dynamically i added the class .maximize to my div #somID
And after that i wanna get the width and height of my #somID by calling with its ID like,
$('#somID').width() or .height()
but i want to take the actual height of element that is defined in its ID but i get the .maximize in result not the height or width that is in #somID.
Any buddy have any idea ? That how to retrieve the height of div#somID if it contains .maximize ??
The problem is, there can be many, many selectors that are applied to a given element, with different specificities. There is no API that allows you to request a property from a selector in CSS - it simply wouldn't make much sense.
Having said that, you can create a hack to solve that issue:
function getOriginalDimensions(id) {
var $a = $("<div>", {id:id});
$("body").append($a);
var width = $a.width();
var height = $a.height();
$a.remove();
return {width:width, height:height};
}
console.log(getOriginalDimensions("somID")); // returns {width:500, height:500}
The above works with your example HTML and CSS.
JSFiddle
This basically creates an element with the same ID, appends it to the body, reads the dimensions and deletes it immediately. This is necessary because the div will have no size if it is just kept as a document fragment and not added to the DOM, because the CSS will not get applied.
In theory you could expand this function to make it work with other selectors.
However bear in mind this is a nasty hack and you should reconsider your approach.
A. Make your measurements and save them as .data attributes of the element :
var $el = $('#somID');
$el.data('original_dims', {
height: $el.height(),
width: $el.width()
}
B. Add class that changes the dimensions of the element :
$el.addClass('maximise');
C. Retrive the original dimensions whenever they are needed
var h = $el.data('original_dims').height;
var w = $el.data('original_dims').width;
i want to resize the font of all elements of a page
like user can click increaseFont or decreaseFont this will decrease the fonts of all elems
iam doing doing as writen below
please suggest some better way
$.fn.ChangeFont=function(ratio)
{
return this.each(function(){
var _elm=$(this);
var currFontSize = _elm.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
finalNum *= ratio;
finalNum=finalNum + stringEnding;
_elm.css('fontSize',finalNum);
});
}
$(document).find('*').andSelf().ChangeFont(1.2);//a value bigger than 1 for increase
$(document).find('*').andSelf().ChangeFont(.8);//a value smaller than 1 for decrease
Could you not just set the font-size property on the BODY element to be 125% or 150%?
$("body").css("font-size", "150%");
This is dependent on how the rest of your CSS is structured and what units you are using to assign font-sizes in the rest of the page. If you are using em or % then it is enough to do just like Chase Seibert says:
$("body").css("font-size", "150%");
So simply use the correct units in your CSS and then manipulate the main body text-size. Otherwise you can also choose an element like a div which acts as the root element of all textual content on the page you are creating.
As a comment by #praveen also says is that this will not necessarily affect you non-textual content.