How Do I Set A Div Width Through The Onresize Event?
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
ADVERTISEMENT
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
Oct 27, 2008
How does one use the onResize() event to dynamically resize a web page according to the size of the user's viewport?
View 10 Replies
View Related
Aug 27, 2005
I need to refresh page cathcing "onResize" event.
I wrote this code:
<body onResize="javascript:winodw.location.reload(true); return true;">
On I.E. it works, but it doesn't work on Firefox.
View 6 Replies
View Related
Apr 23, 2011
I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height.
As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it?
<html><head><title>Title</title><script languaje="javascript">
const c_ra=16/9;
window.onresize = function WindowReSize() {
var myWidth = 0, myHeight = 0;
[Code].....
View 2 Replies
View Related
Oct 1, 2010
var img_large = new Image();
$(img_large).load(function () {
$(".image_enlarge_container").append(this);
[code]....
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
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
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 7, 2005
The window.onresize is not called (in Mozilla) when changing the text size on the browser (crtl + or View/Text Zoom).
Is the xAddEventListener function usefull ? What does the "For some browsers the window.onscroll and window.onresize events are simulated." mean ?(found in the X Library function reference).
View 2 Replies
View Related
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
View Related
Jan 16, 2009
I'm having a problem with window.onresize firing when the page is initially loaded.
View 2 Replies
View Related
Oct 4, 2010
let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. [URL]... I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works.
View 6 Replies
View Related
Apr 26, 2011
Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.
View 1 Replies
View Related
May 5, 2010
I currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)
View 1 Replies
View Related
May 18, 2010
I've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width. Here is the problem (and here's why i post this question in "General use" and not in "Plugin").
The starting, and working, code is:
$(document).ready(function(){
$("#flex1").flexigrid
(
{
[Code].....
This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like var percentage = $(#div.id).width()*0.XX with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)
View 3 Replies
View Related
Jun 4, 2011
I am trying to setup a javascript function that sets a div's width based on the combined width of the li's with the name "navItem". The problems I have been running into when trying to define the width of the li's is that they do not have a width defined in css. Can anyone help me out with this? The javascript function setWindow is suppose to show the div loginWindow and set the width of it.
Code:
<div id="topNav">
<ul>
<li><img src="<?php print $site->folder['images']['header']; ?>topmenu_left.jpg" border="0" alt="" /></li>
<li name="navItem"><a href="<? print $site->url['about']; ?>">About Us</a></li>
<li name="navItem"><a onmouseover="setWindow('loginWindow');" href="<? print $site->url['billing']; ?>">Client Services</a></li>
[Code]...
View 3 Replies
View Related
Jul 28, 2010
Is the next jQuery code the best way to decrease an elements width?[code]I tried using the next code:[code]but that's not working, also not with '-20'.Maybe it's an idea to add this functionality? It's is already used in the .animate() function for changing the position of an element.
View 3 Replies
View Related
Sep 10, 2009
I need a code that when a button or image is clicked then a div's width and height are changed.
Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work.
I need a code that when a button is clicked then the div's and the flash's width and height are changed.
please have a look at the temp website latinunit net / temp / , you will understand where im coming from.
on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down.
My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file.
View 4 Replies
View Related
Jun 2, 2010
I got a table, first tr got 10 td, how to get the sum of the first three td's width
All I know is like:
Is there any solution via jQuery?
View 1 Replies
View Related
Nov 5, 2011
I want to set the width of a div to be the same width of the image inside the div.The following code works great. But...The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier?
jQuery:
$(document).ready(function(){
var newWidth = $('div.wrapper img').attr('width');
$('div.wrapper').width(newWidth);
});
HTML:
<div class="wrapper">
<p><img src="image1.jpg" width="200" /><br />
Caption</p>
</div>
[code].....
View 7 Replies
View Related
Jul 4, 2009
I got this problem with live() event.I have used it as follows.
$(".addressDiv span").live("mouseover", function(){
//clickable function here......
------------------------
});
I have used the live() event to trigger the function on mouseover in the dynamically added elements. But the problem i got is that once the live event is called it takes the class of the element and stores. And when the class of that particular element is changed dynamically the live() event does not detect the new classed added dynamically, instead it takes the former class. Live() event does not update the class.
View 3 Replies
View Related
