Detecting Image Dimensions With Javascript?
Nov 28, 2006
I have some CSS/javascript which takes an image and re-sizes it on a page with a hover-over state which causes it to expand. However, this will only re-size to specific proportions (in this case 1:1).
This is fine in the case of e.g. an 86x86 image but what I want to be able to do is detect if the image has a height greater than it's width, and if so, crop the image accordingly to make it a square.
Is there a way of doing this with javascript?
View 3 Replies
ADVERTISEMENT
Jun 6, 2003
I'm working on an image gallery and want to popup windows that are the size of the images they're meant to show.
In php I would use getimagesize() and plug the dimensions into a new window but the server doesn't support it so I'm sort of stumped on how to dynamically size the windows appropriately. Any suggestions?
View 2 Replies
View Related
Jul 23, 2005
Is there any way to determine the pixel height and width of an originalimage?
Specifically, If I have <IMG id=myImg src="pic.jpg" height=200 width=300> can I figure out what the original size of pic.jpg is (had I not placed the height and width attributes on the image, whether in the original tag or later via javascript)?
View 5 Replies
View Related
May 19, 2009
The position and visibility of the image element is dynamically updated.The following code displays the correct dimensions in Firefox 3.0.10 and Chrome 1.0.154.65, but displays "0,0" in IE8.
View 1 Replies
View Related
May 8, 2011
So I'm working in a project where I need to get the dimensions of an image. If I use .height() of the image I get 0 returned, but if use .height() on its surrounding div I get the image's height returned.I need the height and width of the actual image, what should I do?
View 8 Replies
View Related
Jul 23, 2005
I am rotating images at one location of my web site. My problem is if I set the width and height of the new image before I show the new image, the old image is stretched first to the new image dimensions, and if I show the new image before setting its dimensions, the new image is stretched first to the old image dimension before it is adjusted to its own dimension. I would like to load a new image with its own dimension at the same time. How can I do this?
View 5 Replies
View Related
Feb 12, 2010
I have a photo gallery built with XML and PHP (pulling images from a client's Myspace albums).The gallery works fine, displays thumbnails and captions, paginates properly, etc.The whole thing is loaded by AJAX into a div, which complicates things a bit, but it works.When a visitor clicks a thumbnail, the full-sized image displays in a div overlay on top of the gallery div.The overlay is hidden until a thumbnail is clicked, when it is toggled to "visibility:visible". When the overlay "close" link is clicked, the overlay is hidden again.That also works. Some of the images are too large to display properly inside the div without throwing off the layout, so I had to set a max height and width.I can't just use CSS to set the dimensions or it'll size EVERY image to those dims, and the photos are all different sizes...some wider, some longer.So I used javascript to check the image size when the thumbnail is clicked.
All of that worked.(Although strangely, if I try to toggle the visibility as part of the function rather than putting it into the link, it doesn't work!)The problem is that once the dimensions of "img1" are set, they STAY that size even when the next thumbnail is clicked.So if the first image is 800px tall, the script crops it to 640px...then the next image may only be 400px pix tall but it displays as 640px high, making it distorted.I tried to add a "resetImgSize" function to the "close" link in the overlay, setting the img1 dimensions back to 2px x 2px when the overlay is closed, but the same thing happens...Once the img1 dimensions are set to 2x2px, they stay that way even when a new thumbnail is clicked.
View 10 Replies
View Related
Dec 24, 2010
The following code returns the width and height as: undefined in the alert. I can`t see what i am doing wrong here. I would like the width and height of the chosen image to be displayed in the alert.
<html>
<head>
<script type="text/javascript" language="javascript">
function getImageSize() {
[code]...
View 8 Replies
View Related
Oct 13, 2009
I will have two text boxes that will accept numeric values and an image. What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa.
Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size.
View 4 Replies
View Related
Oct 29, 2010
I have also Googled this issue plenty of times, but nothing seems to be working 100% and/or the "solution" found is several years old.I have a text field on a webpage where a user enters in a URL to an image and then clicks a button to preview it. I want to restrict the image's size, so if it is larger than 600x450 then it will be automatically resized to those dimensions.The problem I have with this code is that the myImage.onerror event always fires if the image is large. My question is: how do you make the script "wait" for the image to load completely before trying to retrieve the width and height? Or, even better, how do you prevent the image failing to load?
Also, I know how to get the image's dimensions via PHP; however, according to the getimagesize() function's documentation on php.net, the function downloads the image to the server before retrieving the image's width and height, which could be potential trouble if a malicious or ignorant user enters a URL to an excessively large image.
View 2 Replies
View Related
Sep 13, 2006
Does anyone here know of a way using javascript to detect if a specific website is up (by accessing a specific url for example), and then once it responds to redirect the user to it?
View 5 Replies
View Related
Jul 5, 2007
can i know what is wrong with this script? cause my ie6 doesnt seem to be able to detect the flash and i dont know why.. or is there any other recommedation of site that i can read up from?
and by detecting flash, will it slow down the whole site?? i am a beginner in this area.
function message()
{
if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"])
{
do something......
}
else
{
do other stuff...
}}
View 1 Replies
View Related
Jul 20, 2005
I have a question if it is possible to manipulate the settings of
character encoding in Ms Internet Explorer 5.0, 5.5 and 6.0. The
problem is that the default instalation of Ms IE seems to have hard
selected default encoding to "Western European (ISO)", which means
iso-8859-1. When browsing pages with some Central/Eastern European
characters these are converted to iso-8859-1 so displayed wrong.
I would suppose the "auto-select" option should be default, so the
browser can select the right encoding according to the meta-tags in
the head of webpage. But this is apparently not true.
Please, is it possible to use JavaScript or Java applet to get the
information about the current client character encoding settings
and/or change it to the "auto-select" value ? How to do this ?
View 10 Replies
View Related
Nov 23, 2011
I'm trying to keep record of how many times an image has been downloaded. Is it possible to detect if a client manually saves an image through their browser?
View 1 Replies
View Related
Dec 21, 2006
I have a page with content. Upon a certain action, two images get updated/replaced.
Because the images are on another server, it sometimes takes a couple of seconds.
* I would like to block specific actions (click on a button/other image) UNTIL the images are loaded.
* How do I detect when the images are done loading?
Something like readyState, complete, or something?
View 3 Replies
View Related
Jul 20, 2005
I want to have an image inside a div section, like a background image. that
adjust its size to the dimensions of div container:
<body
<div class="logo" id "logot">
<img src="logo.png" id="imagelogo">
</div>
a script function retreives the div section:
oLogo = document.getElementById("logot")
but oLogo.clientWidth gets the logo.png's width instead of the div area.
I have no problems with a similar function in mozilla browser,
any idea for IE?
View 2 Replies
View Related
Oct 2, 2006
I have a div which wraps a table. Initially, the div's display attribute is "none", basically I need to find the height of the table in the div, and use that information to render the div to the user. The div is rendered only on the users request.
View 1 Replies
View Related
Feb 20, 2005
My site's encased in a pop-up, and since I don't know JavaScript, well, at all, I got some script from one of the many JS sites out there. I'm having an issue with it, though. It seems that different browsers are rendering its size differently, which is a bit of a hassle. For instance, it's a few pixels too tall in Firefox, but in Safari its a few pixels too wide and too tall. So, uh, what's wrong with it?
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=450,left = 362,top = 159');");
}
(...)
<a href="javascript:popUp('dLog.html')">Development Log</a>
Looks messy to me, so if anyone wants to completely fix it up...
View 2 Replies
View Related
Jul 12, 2006
I'd like to know where I can find some informations on how to retrive
element dimensions in a cross browser whay. Until now I used
offsetWidth and offsetHeight, but I know their are not standard and
they have a different behaviour on different browsers. I need a way
that includes also margins, padding and eventually border size. I know
I have to deal with doctypes, but my javascript knowledge is not so
advanced.
View 3 Replies
View Related
Nov 2, 2010
I cannot get the dimensions of my swf to animate for whatever reason. This works:
function resizeSwf(contentHeight){
document.getElementById('swfplayer').height = contentHeight + 20;
}
But this does not:
function resizeSwf(contentHeight){
$("#swfplayer").animate({
height:contentHeight + 20
},400);
}
I am using jquery-1.4.3.min.js and I have verified it is at the correct path.
View 2 Replies
View Related
Jul 14, 2004
I would like to force the initial location of a window to the (0,0) coordinate and give it a specific width and height when it loads.
I use the following:
Code:
function initPage() {
window.moveTo(0, 0);
window.resizeTo(400, 400);
}
I call this function at the onload event of the page body.
I get an error saying: "Access is denied"
what is the problem with the code? what could be causing this?
View 2 Replies
View Related
Jul 6, 2009
my website[url]... has a pop-up video player but on certain videos (speeches for example) the video is of slightly different dimensions. I can not re-encode the video so I was wondering if I could easily edit a file in notepad to change the dimensions of the player in order to enable the user to be able to see all of the player controls. In the flash folder I have .swf and .flv files. Is there another file that represents the player dimensions/controls elsewhere?In addition to this, if a video is playing and I click off of the video player (onto the greyed out background) then the video player stops. Does anyone know how to stop this happening?
View 3 Replies
View Related
Sep 18, 2009
I'm trying to figure out the dimensions of the users viewable browser screen (how much is actually rendered) i.e my screen is 1680x1050 but when my browsers full screen that's not what is the viewable size, its less.So I tried this:
var height = window.innerHeight;
var width = window.innerwidth;
alert("width: "+height+"width: "+width);
and I get undefined. how I can get the height and width?
View 1 Replies
View Related
Jun 16, 2010
I've got the jquery-ui slider working on adjusting the size of my thumbnails, BUT the problem is if the image is portrait, it overflows out of the container�*jquery to the rescue, right? Not quite.Below is the js and basic css that i'm using. Shouldn't this be applying a different class on each img element based on the height/width values? They're all getting the same class.Am I needing to do some sort of loop function for this instead?
Code JavaScript:
$("#thumbnail_size").slider({
range: "min",
min: 125,
[code]....
View 7 Replies
View Related
Sep 26, 2004
I am trying to resize a modal window so that its dimensions will be minimal (based on its content). For some reason, I am getting a weird result Here is the JavaScript function I am running in the window's onload event:
function resize() {
var height = window.document.body.scrollHeight;
var width = window.document.body.scrollWidth;
var left = screen.availWidth / 2 - width / 2;// center window horizontally
var top = screen.availHeight / 2 - height / 2;// center window vertically
window.dialogLeft = left + "px";
window.dialogTop = top + "px";
window.dialogHeight = height + "px";
window.dialogWidth = width + "px";
}
I believe that I need to do these calculations because only in onload, the browser knows what dimensions it will need for the popup window. I cannot set the dimensions when invoking the window using window.showModalWindow(), because I don't know at that time how much area the browswer will need for the window.
The problem with the calculation I am doing is that sometimes I am getting an extra gray area between the client side right side, and the window's sidebar... I have attached an image to make my point more clear. I think there is a minimal limit on a modal window width and height but I am not sure.
View 2 Replies
View Related
May 9, 2010
how to imitate browser zoom with javascript?I know you are not allowed to control browser's zoom capabilities, but perhaps there's a way to change all content dimensions with javascript?In firefox, when you press ctrl+, the whole page resizes appropriately, even background images.With this imitation JS zoom, background images would not zoom since there is no scale size numer or anything like that in CSS.It would simply be cool to have a script that resizes everything on the page. That way, you can design highdefinition content that fits a 1280 * 960 browser frame, but can zoom out for smaller resolutions (1024 or 800).
View 4 Replies
View Related
