JavaScript - Auto-resizing, Proportional Background Image With Minimum Size Preset

Sup everyone

I'm trying to find a script that will automatically resize the height of an iframe depending on the document it contains. I found the script he

Code:

<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->

The only problem is that although it gets larger when the page changes, it doesn't get smaller. Any one know how to fix this???

Im using the below javascript to resize images on a forum I have created but I want it to ignore 2 certain images that are part of my header.

Heres the code

Code:

<script>
     window.onload = resizeimg;
    function resizeimg()
    {
       if (document.getElementsByTagName)
       {
          for (i=0; i<document.getElementsByTagName('img').length; i++)
          {
             im = document.getElementsByTagName('img')[i];
             if (im.width > 600)
             {
                im.style.width = '600px';
                eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
                eval("im.onclick = pop" + String(i) + ";");
                if (document.all) im.style.cursor = 'hand';
                if (!document.all) im.style.cursor = 'pointer';
                im.title = 'Click Here To See Image Full Size ';
             }
          }
       }
    }

    </script>

But I want it to ignore 2 images..and not resize them.

head1.jpg
head2.jpg


Any help would be gratefully recieved !! Cheers !!

I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know:

Code:

var obj=document.getElementsByTagName("img");
	for(var i=0;i<obj.length;i++){
		if(obj[i].className == "avatar") {
			if(getElementWidth(obj[i]) > 150) {
				obj[i].style.width = 150;
			}
		}
	}

Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px

I know it's pretty simple but it's hurting my head! :P

Thanks in advance
-Alux

I have been looking around for a while on google and have come accross a few things but still am unable to find the exact codes.
I am trying to have a page setup so that when the user clicks a button it will add preset text to a form box and keep the chronological order of buttons that are clicked. This is going to be used for my ambulance service to assist dispatch so basically i am looking for preset buttons that the dispatcher can click disp. and have the dispatch and time added to a list in the form box that can later be copied and emailed to our cell phones.

Thanks for any help.

i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch.

can any one guide me i am new to programming

Thanks in advance!!!

Hi there,
I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code:

Code:

<script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
	headerImage();
});

var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
	$('.headerImage').animate({height: '436px'},speed);
	$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
	$('.headerImage').stop().animate({'height': origHeight},speed);
	$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
	origMT = $('.headerImage img').css('margin-top');
	origHeight = $('.headerImage').css('height');
  $('.headerImage img').css('margin-top','0');
	$('.headerImage').css('height','436px');
	setTimeout(shrinkHeader,speed*2);
	$('.headerImage').hover(expandHeader, shrinkHeader);
}

/* ]]> */
</script>

If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere.

Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this.

I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help.

Thanks,
Brandon

I am trying to dynamically resize an image. Here is my code:
Code:

<img border="0" src="images/right.gif" width="16" height="100" name="right">

<SCRIPT Language=Javascript> 
<!--
function ChangeImgSize(){
right.height = 3000;
}
ChangeImgSize()
//--> 
</SCRIPT>

This is on an asp page, and the <script> tag is the last thing on the page before </body>

The image does not get resized. I've been testing the page on current browsers (IE 8, Firefox, Chrome). I'm certain I'm doing something newbish, I don't really know Javascript all that well.

Thanks in advance,

Skip

Hello all;

I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code:

Code:

<body> 
    <canvas id="worldscreen" class="map"></canvas><br  />

<script type="text/javascript">  
    function loadImages(arrow, call) {
    var images = {};
    var loaded = 0;
    var num = 0;
    for (var src in arrow) {
        num++;
    }
    for (var src in arrow) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loaded >= num) {
                call(images);
            }
        };
        images[src].src = arrow[src];
    }
}
 
window.onload = function(images) {
    var canvas = document.getElementById("worldscreen").getContext("2d");
 
    var arrow = {
        top: "sideQUEST/images/arrow-top.png",
		right: "sideQUEST/images/arrow-right.png",
		bottom: "sideQUEST/images/arrow-bottom.png",
        left: "sideQUEST/images/arrow-left.png",
    };
 
    loadImages(arrow, function(images) {
        canvas.drawImage(images.top, 100, 18);
		canvas.drawImage(images.right, 215, 36);
		canvas.drawImage(images.bottom, 100, 115);
        canvas.drawImage(images.left, 36, 36);
    });
};
</script>
</body>

You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you.

QUESTION 1:

Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction.

Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings.

I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image.

So, let's say this is the URL: www.adomainname.com/image.jpg

and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k.

So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px.

For an image that's 300 px x 500 px, it should remain as such.

For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px.

I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited.

Note: The part that I am most interested in is in being able to detect the size / dimensions of the image.

QUESTION 2:

On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.)

i have been trying all sorts of things, but falling short... i'm trying to set up a way to detect a user's browser size and then call a specific background image accordingly...

say (for example) that BKGD1.jpg is for users who have browsers that are 1280x1024 and higher; BKGD2.jpg is for users who have browsers that are smaller than 1280x1024...

i'm even open to an option that only displays a background image if the browser is (as in the example above) 1280x1024, and just a background color if the browser is smaller than that...

i don't know... i am totally lost on this one... any help would be amazing!!! thank you...

Hello,

How can we calculate size of image by using javascript ?

Thanks in advance

Hi there,

I have found some script to auto change an image on my website, but i would like to do this in 2 other places using completely new pictures. for ease i have set up 3 cells in a table and would like them to appear in each cell. Can any body help altering my code to allow this. The code i have so far is

Code:

<html lang="en"> 
<head> 

<script type="text/javascript"> 
var c=0 
var s 
function photoGallery() 
{ 
if (c%4==0){ 

document.getElementById('photo-gallery').src = "boots.jpg"; 
} 
if (c%4==1){ 

document.getElementById('photo-gallery').src = "adidas.jpg"; 
} 
if (c%4==2){ 

document.getElementById('photo-gallery').src = "play.jpg"; 
} 
if (c%4==3){ 
document.getElementById('photo-gallery').src = "argos.jpg"; 
} 

c=c+1 
s=setTimeout("photoGallery()",1000) 
} 
</script>

</head> 
<body onLoad="photoGallery()">
<table border="1">
<tr>
<td><img src="amazon.jpg" id="photo-gallery" width="420" height="260"></td>
<td>another image loop here</td>
<td>and another image loop here</td>
</tr>
</table>

</body> 
</html>

Thank you in advance

Hi , i have got this img src html..

how do i write a javascript to auto save this image in C:\ without right click on the image?

<img src="/user_images/V/VI/VIR/Virgo001/1135356474_ylittlekid.jpg" alt="1135356474_ylittlekid.jpg"></img>

thanks for help!

I have a script that allows someone to set a value that has both a maximum and a minimum. They click a [+] and [-] button that increases or decreases the value until it hits either the max or the min. The problem is, I can't come up with an if statement that does this right.

Code:

var = controls;
controls = functions() {
    if (object.x > 1 && object.x < 50) {
        ...do something...
    }
};

This is a dumbed-down version. This function is actually part of an object and "object.x" is something else in the object. "...do something..." increases or decreases the value of "object.x" when a user clicks a button. This doesn't work though. if it hits either 1 or 50, it breaks because one or the other becomes false.