Onresize Pereserve Aspect Ratio Slightly Off In IE?
Mar 31, 2010
so im almost finished my first site! very excited. its for my dads business, hes a screening contractor.actually i doubt he will get any business out of it, even once we get our real domain name and everything because i don't even know how to get Google to like it. its OK though, its mainly just a practice site for me anyways before i make a resume site for myself. anyways, this mayt sound like a flash question but i asked on flash sites and they have no idea, and i think it has more to do with how i embedded the flash. yoy see, it consists of 3 divs, an html content area, and a flash banner and a flash menu, which stretch depending on the window size to keep their aspect ratio. its that streachyness that i believe is causing the problem. everything works exactly as planned in Firefox, chrome, and pure flash player. but in IE, safari and opera, the size and position of things are way messed up! (only really care about IE). the edges of dynamic text are slightly to the left or right and hanging behind things because of it, same with some movie clips and when i didn't want things to appear on the stage i set their x position to be the length of the stage,
i think that ie is calculating the size onresize incorrectly. heres the site, take a look at the the script file:[URL]..
View 1 Replies
ADVERTISEMENT
Mar 13, 2007
This slideshow works fine except that it keeps the aspect ratio of the original pic image. If original image is a portrate all photos are portrate size, even landscapes. If original is landscape, the same is true. The script works correctly when viewing in MS FrontPage. After FTP uploading problem appears. Code:
View 2 Replies
View Related
Jan 29, 2006
I am building a site in Dreamweaver for a client which uses templates
for a photogallery that uses simple Javascript to load images "OnClick"
into a named <img> tag. The <img> tag has no dimensions preset because
the loaded images vary in size and aspect ratio (the images
are all prepared so that they will fit easily within the rest of the page
layout, using their actual dimensions).
This all works just fine on Firefox (Apple), but on Safari and Mac IE
there is a problem. When image-2 replaces image-1 (using MM_swapimage),
if image-2 has the same height but a narrower width than image-1, then
image-2 appears with image-1's width. Both image-2 and image-1 have
the same height, so the display of image-2 now has the wrong aspect
ratio (everthing looks "fatter").
I haven't checked Windows browsers yet. I searched around and
haven't seen a similar issue. Anyone know about this, and a good workaround?
View 3 Replies
View Related
May 21, 2004
Has anyone got any suggestions for keeping aspect ratio when scaling an image. I want to use it on my 'advert full details' on my website. This page displays an image the user has uploaded to my database, but sometimes I get really hugh images uploaded! When I scale them using % in Dreamweaver I lose the aspect ratio!
View 8 Replies
View Related
Dec 22, 2009
displaying images properly maintaining its aspect ratio?
My requirement:
===========
I have a table with single cell (means single row and column). I have to display image inside this cell. But when I do so using the below mentioned statement, the image expands and cover the entire cell area.
<table border=2 width= �600� height= �400�>
<tr>
<td> <img src= �MyPic.jpg�> </td>
</tr>
</table>
I will be loading different images inside the same cell, all having different height and width.
if you know how I can do it. I will be happier if you can paste the code here
View 22 Replies
View Related
Jul 8, 2010
Is there a way to create a div or some container in which there will be an image such that the image fills the container but retains its aspect ratio? So if the container is 100px x 100px and an image is 200px x 100px it will be resized to 100px x 50px. Conversely, if the image is 100px x 200px then it resizes to 50px x 100px. An image of 400px x 50px becomes 100px x 12.5px and so forth.
The issue is I have to dynamically build the container pulling images from an image folder. The images can come in all sizes. But I want to make sure they all fit in the same square 'box' without distorting the image.
There is text and a button below the image and I want them to stay in the same 'spot' on the screen without being moved around because the height or width of the image above it grows/shrinks to accommodate a change in either the height or width. These can change but not outside a controlled 'box'.
Maybe there's a way to get the actual size (through Javascript or something) then calculate a percentage to resize the image to?
View 4 Replies
View Related
Jan 18, 2010
I've been working at this one for a few days now, and I keep getting the same puzzling results on what should probably have been a simple issue.
My page has images I've loaded at the top and set to {display: none}. The eventual goal is to create thumbnails that will maintain the original images' proportions, but fit within 150x150 px (this is for an artist's gallery page, so it's pretty important to keep the thumbnails looking like the originals). Obviously, the first thing I need to do is get the images' heights and widths. I've tried to do this by iterating through the document.images array and just getting the widths and heights, but for some reason I always get 0 x 0 for the first image. I've tried fixing this by inserting another image before it and then starting the loop at 1 instead of 0 (so it excludes that first image), but I still get the same value. I even tried setting the script to "defer" so it wouldn't run until the page had loaded. Same results. It also doesn't seem to matter whether I ask for document.images[x].width or document.images[x].naturalWidth. The same thing happens either way. Does anyone know what's going on? There's got to be something I'm missing.
View 6 Replies
View Related
Apr 14, 2011
where da boss wants our a large piece of our site to be fully dynamic and integrated on any screen size. This means changing font on size. Well I cam up with a solution, figured if no one has one better, then i'll share
[Code]..
View 7 Replies
View Related
Feb 4, 2011
I have developed my own fake language like pig latin but ever so slightly different, I want to make a translator for it as there are so many for pig latin,english-my language:
1: put the first letter at the end (hello becomes elloh)
2: put an 'a' 2 letters in (elloh becomes elaloh)
obviously if the inputted word had a capital letter at the begining, then the new first letter should be in capitals, and the translator should be able to translate whole sentences not just word by word,I have downloaded countless javascript/html files for pig latin translating because obviously the first step for translating to the 2 languages is the same and ive managed to stop it adding the 'ay' or 'way' to the end of the word as it is in pig latin bu i dont think ive done it very efficiently?
View 1 Replies
View Related
Aug 12, 2010
I'm trying to develop proper exception handling for a javascript framework I'm developing but I keep hitting an annoying dead end: caller and line numbers / stack trace.I have a basic exception class:
Code:
/**
* Exception.js
*
* @classException
[code].....
The problem is that the console.trace() function returns only one line: "log", referring to ExceptionHandler.log(e) (at least in webkit). What I'd love to do is have the Exception class get information as to (at the very least) what called it and also, although perhaps less viable, the line number it was called on. I don't think the line number is going to work though. I would _like_ this to happen automatically, but if I have to include another argument called_from it won't be the end of the world. I know about arguments.caller but this is depreciated (as of ECMAScript 1.3 (?)).
View 5 Replies
View Related
Jan 4, 2010
I'm using the newest version of jQuery
[Code]...
It is a "content slider" that rotates content "slides". It is setup to auto rotate on a set time, and you can also hit the previous/next buttons to move through the slides. This has been working great. Now I have the need for a pause button that will stop the auto rotate. I think this should be fairly easy for someone familiar with javascript and jQuery.
View 3 Replies
View Related
Aug 26, 2010
I am building a gallery for a client w/an admin etc. But visually she would like the images to be slightly rotated but stationary not animated. is there a way to do this with jquery here is a link to a rough draft.[URL]... so basically I want each of the images to be slightly rotated.
View 2 Replies
View Related
Oct 21, 2010
I've been trying to find a jQuery that will have buttons float from left to right onto a page, then grow a little / shrink back to normal size on mouseover.
I've found lots of things that are predominantly for drop down menus - that's not really it.
Using my (limited) javascript skills I've modified a script that moves buttons or divs onto a page but it looks very dull. Powerpoint-like even.
Here's a link: [URL]
All the buttons need to do is jump to another page - the background image does not need to change at all / slide out or anything like that.
So basically what I'm looking for is a pointer to a jQuery thingy [!] that will do the above while looking a lot snazzier
View 1 Replies
View Related
Apr 28, 2011
I'm using a service to remotely create a pdf - it creates a pdf of the page you're on. Unfortunately that includes the link as well. I'd like to push the pdf generator to a slightly different url which would remove the offending link. The link I have is:
[Code]....
but it is not fooled! It seems I need to edit location.href but I don't know how to do it!!
View 2 Replies
View Related
Oct 12, 2005
I'm having a problem getting the window.onresize to work properly. Here
is a simple test case I wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test window.onresize</title>
<script type="text/javascript">
function resize_func() {
alert ('resize_func has been called');
}
window.
</script>
</head>
<body>
<p>Just Some Text</p>
</body>
When I load this page in firefox (1.0.6). I get the alert box that pops
up on initial load, but any subsequent resizing of the window fails to
trigger the event. It's probably something really simple, but so far
I'm stumped.
View 1 Replies
View Related
Dec 6, 2005
I have a script that is called by the window.onresize event. The
problem is that the script is called multiple times when I'm resizing
the window in IE - obviously, because IE continuously fires the
onresize event while it is being resized.
What I'm wondering is - does anyone have any suggestions on making the
script function only once, after the last onresize event, rather than
on every one?
I've done some searching, but I'm not getting much - probably because
I'm having trouble finding a good phrasing for the search.
View 2 Replies
View Related
Feb 26, 2004
I have a left column that needs to be resized based on the middle content height. (the left nav needs to be subtracted from the total maxHeight to determine how long to make the left column) I am using the following:
function adjustLayout()
{
var main_height = document.getElementById("main").offsetHeight;
var left_nav_height = document.getElementById("vertical_left_nav").offsetHeight;
var maxHeight = Math.max(main_height, left_nav_height);
var left_content_height = maxHeight - left_nav_height;
document.getElementById("left_content").style.height = left_content_height+'px'
}
window.onresize = function()
{
adjustLayout();
}
PROBLEM: The code works in firebird (even with multiple resizing), but in IE 6 the the left nav will not shorten if resized. In fact, it appears that each time you resize, the left column gets longer, and longer - so it is stretching the page way beyond the content.
Does this make sense?
View 8 Replies
View Related
Apr 10, 2009
I want to make a nice floating bar at the bottom of the screen, which hovers about 15px from the bottom. I am doing this to make a site look good in small and big resolutions. The minimum height for the bar to hover is 600px about, if the window is smaller, it is still there so it doesn't go into the content, if the window is bigger, it will follow the resize and be at the bottom still. It is obviously absolutely positioned, and also centered using some javascript (getting the width of the window).The second function is called in the header and positions the bar. The last two document.get things are just for testing so I can see the height in px somewhere. This works fine in IE. If I resize the window, making it shorter, everything goes as planned, and I can see the pixel count dropping in the header where it is displayed. However, in FF it does not work.
The weird thing is this. If I resize by a small amount, less than 10px, it works fine. However, I can not resize by more than 10px! If I do, the window height shown in the top still drops by only 10px.So if my window is 1000px tall, and I close it to say 500px, the value of the height will still be 990px. If I then resize it to any where higher than the 500px, say 550px, the javascript still sees it as making it smaller, since it says the height is 990px, therefore, the window height goes down to 980px. If I shrink the window to 500px and reload everything is fine, if I make it bigger, it works in both browsers. I am thinking that this could be a problem which is like "sampling rate" in music. When in IE I expand or shrink the window I can see the pixel count drop continuously and the bar floating down as I move the window, as if it was "sampled" every 0.05 seconds or something. In FF, shrinking is not working, but if I expand the window the pixel count doesn't change and the bar doesn't change place until I stop resizing (let go of the mouse button), as if it was sampled once, when I stop, so the problem maybe is related?
View 1 Replies
View Related
Jan 3, 2003
I am trying to set a div width through the onresize event. For some reason, I am able to set the height ok. When setting the width, it will set once and then both the height and the width will not respond to the onresize event anymore. I basically want the div to resize whenever the browser is resized.
To demonstrate what I mean, copy and paste this code into a htm file. Add long strings of text to the div so that it will scroll both horizontally and vertically. Notice when resizing, the resize will get called once, but when resizing again it will not. Comment out the width line, and now the resizing will always get called.
Here is the code:
View 2 Replies
View Related
Aug 5, 2009
I have a form which is used to calculate residential Floor Area Ratio (FAR). The form is structured into seven parts as follows:
Part A: Maximum FAR and Floor Area:
Part B: Gross Floor Area of the main floors of the main house:
Part C: Gross Floor Area of the basement or cellar:
Part D: Gross Floor Area of the attic:
Part E. Gross Floor Area of all accessory structures except detached garages: (including cabanas, guest houses, caretaker's cottages, pool houses, sheds, barns, or other structures except a detached garage)
Part F. Gross Floor Area of the garage: (not including basement garages)
Part G: Total Floor Area:
The Javascript involved in the calculations is as follows:
[CODE]
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function checkAllInputFields(){
IsValidEntry(entireForm.A1.value)
IsValidEntry(entireForm.A5.value)
[Code]....
I have attached the html file as a .txt file for reference, and I have attached a .txt document including all the values I used for testing.
View 5 Replies
View Related
Jul 26, 2011
From Implementation Tips - Google TV Web Developer's Guide - Google Code they give the following js snippet.
Code:
function init() {
var w = screen.width;
var h = screen.height;[code]....
what I manipulate in the js to change the zoom ratio? I don't want my webpage for Chrome TV to zoom as much. I'm a designer and have little js experience.
View 3 Replies
View Related
Mar 19, 2007
I am attempting to modify the style of an element (its width) as the
window is being resized, in firefox.
Long story short, I've tried to use CSS but one particular part of the
layout just won't do what I need.
The javascript solution assigns a function to window.onresize that
sets the inline style, it works with one problem -- the handler only
gets called after the resizing stops, and so there is noticeable lag
before it redraws.
It is not the function that is taking a long time to execute, its
appears to be firefox's handling. It doesn't call it as frequently as
I expected.
Is there another javascript method to accomplish this without the
extra lag?
View 2 Replies
View Related
Nov 19, 2004
I've built a page which uses javascript to snap roll-over layers to a centered (div) layer. It works fine, and is called when the page loads. However, calling the same function 'onresize' works, but doesn't validate as XHTML - because the XHTML body tag does not support the onresize event handler.
As a consequence, I need to extract the onresize handler into it's own script file and use it to call a page reload.
I can get this to work in IE 6 on a PC, but it doesn't work in FireFox. I really need this to be as cross-compatible as possible. The code I have in the page header is:
Code:
<script type="text/javascript">
function reDo(){ window.location.reload() }
window.onresize = reDo;
</script>
Does anyone know how to achieve a cross-compatible means of reloading a page upon resizing?
View 1 Replies
View Related
May 17, 2007
I'm listening for the window.onresize event and trying to get the document.body.clientWidth afterwards to make sure a wide block fits onscreen. I'm working in Firefox and the thing is, when a scrollbar is added to the page due to content getting longer, the body.clientWidth gets smaller, but the window.onresize doesn't fire (I guess this makes sense as the window hasn't been resized per se).
I am assuming that I will have to check the body.clientWidth manually after the content gets longer and then call my resize function if so. But is there a way to achieve this or watch body.clientWidth other than window.onresize?
View 2 Replies
View Related
Apr 25, 2010
in IE, my page gets buggy when the user resizes the window. ive fixed it for when the user clicks and drags the corner of IE, but it is still buggy when the user maximizes the window. i know i can fix this as well if i can just learn to detect the difference on the onresize event between maximizing and all other ways the user can resize it.
View 6 Replies
View Related
Jan 16, 2011
so i have a div that is a minimum of 960px wide x 500px high with a minimum of 20px margin to the left + right of it. there should be no scroll bars unless you go under the minimum dimensions (including left + right margin). when you resize the window, the #main div should resize (in correct ratio). here is my attempt:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[code]....
View 1 Replies
View Related
