what is wrong with the following code? I had problem to mix double quotes, with single quotes. so, I defined separate method for onclick. Some how it seems syntax is not right
<table style='border-style:none; cursor:pointer;' onclick="myFunc()" >
function myFunc() {
width1= getWindowDim().width;
height1= getWindowDim().height; opt23='resizable=yes,fullscreen=yes,location=no,toolbar=no,directories=no,status=no,menubar=no,scrollbars=yes,fullscreen=yes,width='+width1 +',height='+heigh1;
window.open('http://ibm.com','popupwin',opt23);
}
Use jquery for height and width it may work
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
Try this, onclick had missing double quote
<table style="border-style:none; cursor:pointer;" onclick="myFunc()" >
function myFunc() {
width1 = getWindowDim().width;
height1 = getWindowDim().height;
opt23 = 'resizable=yes,fullscreen=yes,location=no,toolbar=no,' +
'directories=no,status=no,menubar=no,scrollbars=yes,' +
'fullscreen=yes,width= ' + width1 + ',height=' + heigh1;
window.open('http://ibm.com','popupwin',opt23);
}
Related
I am trying to get image size by javascript, for that I used offsetHeight, scrollHeight, clientHeight but none of these worked. The naturalHeight property worked but it return the actual size of image even if the image is resized by css. Strangely if I click the try button then the same code work well. Where did i wrong?
Please explain:
Why does the code work well when I execute it by clicking a button?
How can I get the image size when it is resized by css or screen size?
var imageHeightMethodOne = document.querySelector('.one').offsetHeight;
console.log('MT1-The height of img is ' + imageHeightMethodOne);
var imageHeightMethodTwo = document.querySelector('.one').scrollHeight;
console.log('MT2-The height of img is ' + imageHeightMethodTwo);
var imageHeightMethodThree = document.querySelector('.one').clientHeight;
console.log('MT3-The height of img is ' + imageHeightMethodThree);
var imageHeightMethodFour = document.querySelector('.one').naturalHeight;
console.log('MT4-The height of img is ' + imageHeightMethodFour);
function test() {
var imageHeightMethodOne = document.querySelector('.one').offsetHeight;
console.log('MT1-The height of img is ' + imageHeightMethodOne);
var imageHeightMethodTwo = document.querySelector('.one').scrollHeight;
console.log('MT2-The height of img is ' + imageHeightMethodTwo);
var imageHeightMethodThree = document.querySelector('.one').clientHeight;
console.log('MT3-The height of img is ' + imageHeightMethodThree);
var imageHeightMethodFour = document.querySelector('.one').naturalHeight;
console.log('MT4-The height of img is ' + imageHeightMethodFour);
}
<div class='container' style='width:40%;'>
<img class='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6K8uN-QjZpaY10m_SQvqnwXDr8vqQijLi_XhZrJqSLDkMz5vvag' style='width:100%;height:auto;' />
</div>
<button onclick='test()'>try</button>
function test() {
var imageHeightMethodOne = document.querySelector('.one').offsetHeight;
console.log('MT1-The height of img is ' + imageHeightMethodOne);
var imageHeightMethodTwo = document.querySelector('.one').scrollHeight;
console.log('MT2-The height of img is ' + imageHeightMethodTwo);
var imageHeightMethodThree = document.querySelector('.one').clientHeight;
console.log('MT3-The height of img is ' + imageHeightMethodThree);
var imageHeightMethodFour = document.querySelector('.one').naturalHeight;
console.log('MT4-The height of img is ' + imageHeightMethodFour);
}
<body onload="test();">
<div class='container' style='width:40%;'>
<img class='one' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6K8uN-QjZpaY10m_SQvqnwXDr8vqQijLi_XhZrJqSLDkMz5vvag' style='width:100%;height:auto;' />
</div>
<button onclick='test()'>try</button>
</body>
Call the function in the onLoad event. This will ensure the assets of the page have loaded, including images,css.
1: by that time, the page has been loaded and the browser has painted the layout, so sizes exist.
2: Duplicate Question.
Google Query: dom image height
Top Result: How to get image size (height & width) using JavaScript?
This is the code I'm trying to use in order to set the height of a background div to always cover at least the background of the maindiv + the footer I have set up.
var bgheight = $('.maindiv').css("height");
$('#background').css('min-height', bgheight+'75px');
For some reason the code won't even apply to the #background div and I'm starting to run out of ideas.
When I do something like this
var bgheight = $('.maindiv').height();
$('#background').css({'min-height':beheight+'75px'});
The style is applied but the min-height is gigantic, like almost 50000px tall.
Any ideas?
You are making a string concatenation, not a sum.
Try this:
var bgheight = $('.maindiv').height();
$('#background').css({'min-height': (beheight + 75) + 'px'});
To ensure you are not concatenating strings, you can set Number() function.
var bgheight = Number($('.maindiv').height());
$('#background').css({'min-height': (beheight + 75) + 'px'});
OR (two parameters instead of object)
$('#background').css('min-height', (beheight + 75) + 'px');
I was wondering how I could constantly get the current browser's height and width. Right now, I am using jQuery and have something like this:
var height = window.innerHeight;
var width = window.innerWidth;
This does initially work as it gets the screen when the page is loaded up. However, when the user changes the screen width/height manually, I can't seem to get the current dimensions and the page starts faulting with errors. How should I be checking the dimensions at all times? I've tried googling the answer but I can't seem to find anything applicable, though I'm sure many others have had the same issue (I don't think I'm searching up the right keywords!). Please let me know what I can do!! Thanks!
Use a window.onresize function as well as a window.onload handler to update the width and height variables.
(Resizeable Demo)
var width,height;
window.onresize = window.onload = function() {
width = this.innerWidth;
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
}
Using jQuery objects it would look like this.
(Resizeable Demo)
var width,height;
$(window).on('load resize', function() {
width = this.innerWidth; // `this` points to the DOM object, not the jQuery object
height = this.innerHeight;
document.body.innerHTML = width + 'x' + height; // For demo purposes
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try this:
$(window).on("resize",function(){
console.log($(this).height() + " " + $(this).width());
});
fiddle
Try this
var width = window.outerWidth;
var height = window.outerHeight;
To resize the current window, use
window.resizeTo(width, height);
You can trigger the resize function using:
$( window ).resize(function() {
//....
});
Hope it helps you
You can use this to detect a change in screen size:
$(window).resize(function() {
height = window.innerHeight;
width = window.innerWidth;
//other code you wish to run on screen size change;
});
This assumes that height and width were declared in a scope that the function has access to. Otherwise make sure to place var before each variable.
I want to show a remote url's content or site in popup using iframe. But i do not want to fix height of iframe. I have already used some code
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
for
and i have tried another code
document.getElementById('iframe1').scrollHeight();
But this is not working.
Please suggest
Try this:
newheight = document.getElementById(iframe1).contentWindow.document.body.scrollHeight;
//For Firefox:
document.getElementById(id).height = (newheight) + "px";
//For Other:
$('#' + iframe1).css('min-height', newheight + 'px');
I think you missed style attribute:
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
Or for the second I think you should do something like
$('#iframe1').height(300); //will set your Iframe height with id iframe1 to 300px
Otherwise
$('#iframe1').css("height", "300px") //do the same
I have this javascript to center a span in a div:
var winWidth = $(window).width();
var winHeight = $(window).height();
var positionLeft = (winWidth/2) - 62;
var positionTop = (winHeight/2) - 32;
$('#centerMessage').ccs("position","absolute");
$('#centerMessage').ccs("top",positionTop);
$('#centerMessage').ccs("left",positionLeft);
I keep getting the error that the object does not have the method css. Any idea what is wrong?
All the HTML and CSS are at this fiddle (I am getting the exact same error there: http://jsfiddle.net/chromedude/s6WQD/
you are using ccs not css in your code
$('#centerMessage').css("position","absolute");
$('#centerMessage').css("top",positionTop + 'px'); // add unit also
$('#centerMessage').css("left",positionLeft + 'px');
You should add units to your values, as well:
$('#centerMessage').css("top",positionTop + "px");
You need to be using .css, not .ccs
you sure you have jquery included into your page ?
.ccs => .css
Try:
$('#centerMessage').css("top",positionTop + "px");
$('#centerMessage').css("left",positionLeft + "px");
misspelled the property:
.ccs - > .css