IE 8 & 9 Not Resizing Container When Width Set In Image.load
Sep 19, 2010
The *small, medium fullsize* text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.
Code [URL] Line 154:
Code JavaScript:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');
[code]...
From what I can tell the `container.width(imageWidth);` is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.
View 2 Replies
ADVERTISEMENT
Jul 19, 2011
I got this working in chrome and was happy until I got to check out IE8! Enough said about that.The code I have now will work (in both chrome and IE8) if I manually set the height and width of the image but I cannot get them dynamically, for instance if images have different sizes, I've been trying for a while now but cannot get anywhere with it.The code I am currently using (of my own creation) is;
$("#lightbox_image_container").html('<img id="lightbox_image" src="http://www.veritywebdesign.com/gallery/gallery_images/image.jpg" />');
$("#lightbox_image").load(function() {
// image_width = $("#lightbox_image").width();
[code]....
How do I get the height and width dynamically after loading the image?
View 1 Replies
View Related
May 25, 2011
I've set up jcarousel and configured it to work how I need it to, apart from one thing; I need the images to keep their width - height ratio when the browser is resized.
I'm using the Flexible carousel configuration and the width of the images changes appropriately when the window is resized, but the height stays the same, I need it to change.
View 3 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 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 19, 2009
I was able to resize the images in the css with a width-max; 600px; but the container stay big. How can I resize it in lightbox.js?
Here is the code
// once image is preloaded, resize image container
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
[code]....
What can I add there to have a max container?
View 2 Replies
View Related
Jun 23, 2010
I have images inside of a container that is inside of an iframe. When I click on an image, content underneath is revealed by sliding everything underneath it down. The problem I have is that when it slides the content down, all the other images and content are cut off. I want it that when the content extends past the height of the div#container, it autoresizes, if that's possible. But I don't wanna use the iframe scrollbar. Only the parent scrollbar.
Here's a link for the entire code of the Website. Open up index.html, click on Salvation and click on one or two of the images, and you'll see what I'm talking about. The salvation.html is the source for the iframe.
URL]
View 1 Replies
View Related
Oct 30, 2011
I have a strange issue with jQuery while using the following code :
$("#image").append('<img src="'+json.filename+'" id="cropje" alt="None" />');
$('#cropje').load(function() {
alert($(this).width());
}) .error(function(){
alert("FAIL TO LOAD IMAGE");
And the result is : 0 But it looks like the image gets loaded after the alert... How is that possible?
View 4 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
Mar 19, 2005
I did some searching on here and came across a nice example of how to resize an iframe's height using javascript. I've been screwing with it for hours now but I can't seem to get it working for resizing the width. I can't seem to figure out what I'm doing wrong. Here is the code:
function getIFrameDocumentWidth (IFrameDoc)
{
if (typeof IFrameDoc.width != 'undefined') newWidth = IFrameDoc.width;
else {
if (IFrameDoc.body && typeof IFrameDoc.body.scrollWidth != 'undefined') newWidth = IFrameDoc.body.scrollWidth;
else newWidth = null;
}
return newWidth;
}
function resizeIFrameWidth (iframeID, minWidth)
{
var IFrameDoc, oIframe = document.getElementById(iframeID);
if (typeof oIframe != null)
{
if (oIframe.contentDocument)
IFrameDoc = oIframe.contentDocument;
else if (oIframe.contentWindow)
IFrameDoc = oIframe.contentWindow.document;
else if (oIframe.document)
IFrameDoc = oIframe.document;
var newWidth = getIFrameDocumentWidth (IFrameDoc);
if (newWidth != null) oIframe.style.width = String(newWidth + 'px');
else oIframe.style.width = String(minWidth + 'px');
}
}
Then in the html page whre the iframe sits I use:
Code:
<body onload="parent.resizeIFrameWidth('myFrame', 250)">
Any ideas why this might not be working?
View 5 Replies
View Related
Apr 8, 2007
can a text area be flexible to fit the width/height of its container ?
i tried style=width:100%;height:100% and only the width seems to be
effective in IE
View 1 Replies
View Related
May 5, 2009
I have made a script that can resize a image to the "Max Width" on load. And then when you click the image you can switch between the orginal size and scaled size.
But ther are a problem with it sometime makes the image 10 px x 10 px. when the image is 800x600 and the max width is 700. I think this have something to do with it getting the org image size before the image has loadet complety. But i have tryed all day and just can't get it to work.
[Code]...
View 1 Replies
View Related
Jun 3, 2011
How do I load content depending on the class of the remote content?
I want to load the content of div #remote_content into div #container ONLY if div #remote_content has the class .active?
View 1 Replies
View Related
Dec 14, 2010
I have a problem with load(), which I cannot find on forum search or google. I have a container "right_col" that should be filled with jQuery after clicking on any hyperlink. The result shall be a HTML page that only changes the content area. On the first loading of the page it works as intended. But after the first load() no more jQuery is used and the page changes URL in Browser and reloads the entire page. After this reload you have again one jQuery that is working and so on.
HTML Code:
<div id="right_col">
<div id="right_content">
</div></div>
This is my JS code:
$(document).ready(function(){
var fadeTime = 200;
$("#right_col").css("display", "none");
$("#right_col").fadeIn(fadeTime);
// links
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#right_col").fadeOut(fadeTime, contentloader);
});
function contentloader() {
$('#right_col').load(linkLocation + ' #right_content',null, function(){
$("#right_col").fadeIn(fadeTime);
});}});
As you can see, I'm loading the whole linkLocation and want to replace the content within #right_col with all HTML of #right_content including this div aswell.
I tried Firebug to fugure out if i have more than one #right_col after the load().
I tried replacing IDs with classes to prevent element doubling.
I tried to remove the #right_content param and pass a variable to my script to only print the needed HTML.
Nothing works.
And the Fun part: I also have a menu outside of #right_col. Calls from there on are working perfectly as intended.
View 1 Replies
View Related
Apr 30, 2009
I am trying to fade a container and then load the content and then fade it back in. However the content loads before the first animation is done. How do I tell it to wait for the animation to be finished before it loads the content.
View 1 Replies
View Related
Jul 23, 2005
I'm looking for the way to resize an element when the page loading. I'm doing some test and I've try :
function placeHeader () {
var x;
document.getElementById('header').style.display = 'visible'
for (x = 0; x < 150;x++) {
document.getElementById('header').style.width = x + "px";
}}
View 2 Replies
View Related
Nov 5, 2010
I have a form in my website that I want to hide at page load. But after the page load, there remains empty space. The form is inside the table. So, I tried resizing table with following code. But its not working.
<script type="text/javascript">
function HideForm()
{
document.getElementById('emf-form').style.visibility='hidden';
document.getElementById('page2').style.height='200px';
}
</script>
View 2 Replies
View Related
Mar 8, 2010
I am preloading some images, so prior to the downloading I have:
In Mozilla: initially WxH = 0x0 ... after img downloaded WxH = good# x good# the div just stretches just the right amount to fit snuggly around the newly loaded image;
But the other browsers do different things;
My current solution, which works, uses a new Image().width approach where I manually resize the container div;
How to get the other browsers to automatically resize the container divs;
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
Jan 13, 2011
i am working with a simple jQuery tabbed container and am wondering how to make the main body of the container use a background image instead of a background color. Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>[code].....
But that obvioously does not work. what do I need to do to put a background image in there?
P.S. this code works other than that so you can throw it in a notepad doc to see the page in action.
View 4 Replies
View Related
Mar 19, 2007
We are code crushing the width of images from 285px to 260 pix.
However we aren't changing the height. we need a bit of javascript
that can make that percentage change to the height as well.
View 6 Replies
View Related
Apr 1, 2009
I am using Lightbox 2.04. I would like to change the size of the image container for the large image. No matter what size I actually make the image, when it appears it always fills the containing box and is too big. It is portrait orientation and sometime the image needs vertical scrolling to see it all.
How do I change the size of the image container so it fits nicely within the screen and where do I find the code to do this? I want the container to be the size of the image. Does this happen automatically based on the actual size of the image? If so, mine doesn't do that.
View 1 Replies
View Related
Apr 9, 2010
I wish to display some text dynamically below a series of images. I need to get the position of each image, and so I require some way of getting the position of an image in relation to the div holding the images.
I managed to get the position of the image in relation to the entire page, but this was no good for my purposes.
View 7 Replies
View Related
Mar 16, 2010
im trying to resize an image to fit it in a cell in my table which is a fixed width and height. The images im using have varying sizes some are more tall than wide and some are more wide than tall .
So im using this javascript code that i have got from somewhere on the net ( cant mind where now) that should hopefully resize the image keeping the aspect ratio but the code is not resizing the image .
my page for example is on [URL] and if you click the text "previous" or "next" you will see what i mean
View 2 Replies
View Related
Jul 24, 2010
I'm trying to bend my mind to insert a <div class="image_container"/> before the text in an list element
<li>text1</li>
<li>text2</li>
<li>text3</li>
should become:
<li><div class="image_container"></div>text1</li>
<li><div class="image_container"></div>text2</li>
<li><div class="image_container"></div>text3</li>
$('li', this).before('<div class="image_container"></div>')
makes<div class="image_container"></div><li>text1</li>
I tried other things, but I think I'm overlooking an obvious command.
View 2 Replies
View Related
Aug 22, 2011
I've seen several posts around this issue but nothing that seems like a definitive resolution.Cycle defaults to positioning the slides at top:0 and left:0 within the container div. I want them to be bottom:0 and left:0 within the container div.
[Code]...
View 11 Replies
View Related
