JavaScript - Please Help Flagcounter Resizing

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

Page with iframe: http://www.siteworksweb.com/bbear2/pretest.html

Hi -
I have an iframed page which displays the contents of a form. I would like to be able to vary the height of this page depending the form contents (# of rental units returned) returned. Is there a way to resize this page (the 'child' iframe) dynamically according to the size of the form content? I don't have much control over the form data, which lives on a separate domain.

Also, is there a way to resize the home page http://www.siteworksweb.com/bbear2/pretest.html back to it's original size when a user clicks the 'back' button in a browser after the form contents are displayed?

I would appreciate any input to either of these questions.

Thanks in advance for your time,
Lisa

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 have this slideshow, that twirls around but i'm trying to center it within the browser so the middle picture stays in the middle and the side pictures have about a 10px padding from the browsers border. The weird thing is that it adjusts itself when you first open the link, but if you have it open and resize your browser, it won't adjust to the width. Can't figure what i'm doing wrong. I already posted in the HTML/CSS forum but nobody could help. Thanks guys.

Check it out he
jonathaneiger.com

Hi everyone,

I run a streaming site and am looking to have the option on a chat room next to the stream. Not everyone likes having the chat facility so I'd like to make it optional.

As the page loads I'd like the content to look like the diagram below with the stream (iframe1) taking up 95% of the page and the other 5% being taken up by an image which will say "open chat". The chat (iframe2) would have a width of 0%.


Then when the "open chat" image is clicked I'd like the chat (iframe2) to become 35% and the stream (iframe1) to become 60%. If someone could make a nice sliding effect when the image is clicked that'd be even better. Here's a diagram to show what it'd look like with the resized iframes.


If anyone can help me out and get this working to a good standard there will be a small paypal gift on offer .

Cheers,
Ben

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

I have two vertical frames. The left frame has an image that scales to 100% of the window's height. I am trying to make the page automatically resize the width of that left frame so that it exactly fits the scaled image's width in order to always give the right frame as much space as possible, but I can't seem to get it to work. Can anyone help me out? Here's the code for my frameset:

Code:

<html>
<frameset id="MyFrameset" cols="25%,*" frameborder="no" border="0">
<frame noresize="noresize" src="Leftframe.html" name="LeftFrame">
<frame noresize="noresize" src="Rightframe.html" name="RightFrame">
</frameset>
</html>

And here's the code for my left frame:
Code:

<html>
<body style="overflow:hidden; margin:0; padding:0"
onload="parent.document.getElementById('MyFrameset').setAttribute('cols', 'document.body.clientWidth,*', 0);">
<img src="image.JPG" style="border:none;" height="100%" alt="image"/>
</body>
</html>

Oh yeah, the reason why I need to do this is so if someone is viewing the page on a widescreen monitor, the left frame won't eat up more space than necessary.

Good Day Everyone,

I need some help resizing an iframe to fit it's content.

Basically, I have 10 spreadsheet pages saved as htm files.

I am creating a page that enables me to view each of these htm files.

I need the iframe to be resized for each htm file.

This is my code:

Code:

<html>
<head>

<script language="javascript"> 
<!-- 
var state = 'none'; 

function showhide(layer_ref) { 

if (state == 'block') { 
state = 'none'; 
} 
else { 
state = 'block'; 
} 
if (document.all) { //IS IE 4 or 5 (or 6 beta) 
eval( "document.all." + layer_ref + ".style.display = state"); 
} 
if (document.layers) { //IS NETSCAPE 4 or below 
document.layers[layer_ref].display = state; 
} 
if (document.getElementById &&!document.all) { 
hza = document.getElementById(layer_ref); 
hza.style.display = state; 
} 

}



function autoResize(id)
{      
    
var winW = 0, winH = 0 ;
if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth - 235;
 winH = document.getElementById('page').contentWindow.document.body.scrollHeight;
}
   document.getElementById(id).height=(winH) + "px";   document.getElementById(id).width=(winW) + "px"; 
}

//--> 
</script> 

<style type="text/css">

.yssOver{background-color:#ffffff;}
.yssOut{ background-color:#E6EFFF;}


#content {

position:absolute;
left:210px;
top:40px;
}

html {
	overflow:off;
}



img {
	display:block; 
	vertical-align:text-top;} 

h1{
	color: #000000; 
	font-family:"Arial",Times,sans-serif; 
	font-weight:bold;
	font-size:12px; 
	margin-bottom:0px; 
}

#document{
	position:absolute;
	top:0px; 
	left:0px; 
}

#menu{
	margin: 0 0 0 0;
	padding-left:0px;
	border: 0 -10 0 0;
}




img.arrow { 
	margin: 4 0 0 0; 
}


table.menu td { border: 1px solid; border-color:#7D91D0; }
table.div td { border: 0px solid; border-color:#7D91D0; }

a:link {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px;  text-decoration: none;}
a:active {color: #000000; font-family:"Arial",Times,sans-serif; font-weight:bold; font-size:12px;}
a:visited {color: #000000; font-family:"Arial",Times,sans-serif; text-decoration: none; font-size:12px;}
a:hover {color: #000000; font-family:"Arial",Times,sans-serif; font-size:12px;}

</style>


</head>


<body onLoad = "window.frames['page'].location = 'home.png'" >


<table id=document border=0 cellpadding=0 cellspacing=0>

		<tr><td>

			<img src=halifax_logo.png></img>

		</td><td width=100%>

			<img src=headerback.png width=100% height=80></img>

		</td></tr>

		<tr><td>


<table width=95% class=menu border=1 id=menu border=0 cellpadding=0 cellspacing=5 background=menuback.png>
	
	<tr><td>
	</td></tr>
	
	
	
	
	<tr><td class=menutd background=tdback.png>
	<a href="cofunds designations.htm" target="page">&nbsp;Cofunds Designations</a>

	</td></tr>
	





	
	<tr><td class=menutd background=tdback.png>
<a href="Commission Codes Most Used.htm" target="page"  " height=516 width=974 onmousedown="if(document.getElementById('div2').style.display == 'none'){ document.getElementById('div2').style.display = 'block'; }else{ document.getElementById('div2').style.display = 'none'; }">&nbsp;Commission Codes</a>


<div id="div2" style="display: none;">

	<table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%>
		<tr><td>
			<img class=arrow src=side_grey_arrow.png></img>
		</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
			<a href="Commission Codes Most Used.htm" target="page">Most Used</a>
		</td></tr>
		<tr><td valign=top>
			<img class=arrow src=side_grey_arrow.png></img>
		</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
			<a href="Commission Codes.htm" target="page">All</a>
		</td></tr>
	</table>

</div> 

	
	
	</td></tr>
	
		<tr><td class=menutd background=tdback.png>
<a href="corporate accounts1.htm" target="page">&nbsp;Corporate Accounts</a>


<div id="div3" style="display: none;">

	<table class=div border=0 cellpadding=0 cellspacing=0 style=background-color:#E6EFFF; border: 1px solid; border-color:#7D91D0; width=100%>
		<tr><td>
			<img class=arrow src=side_grey_arrow.png></img>
		</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
			<a href="research.png" target="page">Research Centre</a>
		</td></tr>
		<tr><td valign=top>
			<img class=arrow src=side_grey_arrow.png></img>
		</td><td class="yssOut" onmouseover="className='yssOver';" onmouseout="className='yssOut';">
			<a href="reports.png" target="page">Company Reports</a>
		</td></tr>
	</table>

</div>

	
	
	<tr><td class=menutd background=tdback.png>
		<a href="dealers.htm" target="page">&nbsp;Dealers</a>




	
	
	</td></tr>
	
	
	
	
	<tr><td class=menutd background=tdback.png>
		<a href="halifax funds.htm" target="page">&nbsp;Halifax Fund Managers</a>


	</td></tr>

<tr><td class=menutd background=tdback.png>
		<a href="other fund managers.htm" target="page">&nbsp;Other Fund Managers</a>
		
	</td></tr>

<tr><td class=menutd background=tdback.png>
		<a href="international codes.htm" target="page">&nbsp;International Codes</a>
	
	</td></tr>

<tr><td class=menutd background=tdback.png>
		<a href="market makers1.htm" target="page">&nbsp;Market Makers</a>


	</td></tr>
	<tr><td height=750>
	</table>



		</td><td>

<div id=content>
<IFRAME name=page src="cofunds designations halifax.htm" onLoad="autoResize('page');" frameborder=0 overflow=no marginwidth=0 marginheight=0></iframe>
</div>


		</td></tr>
	</table>



	</body>
</html>

This seems to work but it has a few issues, It does not resize properly for every link, only some of them.

Can somebody please have a look & tell me where I am going wrong, or provide me with some better code, mine is a bit shoddy!

Thanks
Harry

can any one say me how to resize a div by mouse dragging in javascript........
..first of all is it possible or not?? and if so , what should i do......

Hey guys, I am fairly new to Javascripting. I have made a table with a textarea that is resizable. The problem is that when it resizes, it also resizes the table row and columns. Is there a way to fix this? Maybe a way to resize from the right side and bottom of the textarea only. I have read a lot of places and could not find a solution.

hi,

deleted old thread, since that didn't answer problem. posting
code because of all the dynamic variables would be confusing.

so, if anyone can help, here's some link instructions:

1) go to http://www.vehicle411.com

2) in the "vehicle classifieds" panel just click "search" which will
bring up 68 vehicles.

3) click on link for any vehicle, which will display vehicle information in a popup window.

up to this point everything is fine. BUT when you click the popup's
"connect" button to link to a dealership the new window is
undersized (actually, if it replaced the original vehicle411 window
that would be fine).

have tried a lot of different combinations, including the
<a href="javascript:photowindow('dealerurl')"> suggested in
the other post gives weird result showing
javascript:photowindow('dealerurl') in the address window
instead of the actual url--meaning it doesn't call the photowindow
function.

P.S. if you look at the source--all the server values are passed
correctly and don't interfere with the code. right now, I've got
a simple <a href="dealerurl"> instead of the JS method. Also,
have hard coded values to make sure dynamic stuff was working--
and they work. what's really annoying is that I've used just about
the same JS code to create that vehicle popups.

P.P.S. went back and changed code to using <a href="#" etc.
which doesn't work either. but have a direct url for anyone
reading this (when clicking on "connect" button it's just
creating a copy of itself!!!

http://www.vehicle411.com/_system/di...9765108&cid=1#

I have a master page that has an IFRAME, which we use for resizing. Locally, when we are using our web application within our network, the resizing works perfectly for both Firefox and IE. However, when I access the web application from outside the network the resizing doesn't always work. Most of the time, the offsetheight for the div(container is the name) is not correct, thus I don't see all the results that I need to see in the IFRAME Here is the resizing code below.

function resizeTheFrame() {
var iframe = document.getElementById('innerFrame');
var containerHeight = document.getElementById('container').offsetHeight;
var DefaultPageHeight = 400;
if (containerHeight > DefaultPageHeight) {
var heightdiff = 100;
}
else {
var heightdiff = DefaultPageHeight - containerHeight;
}
containerHeight = containerHeight + heightdiff;
var counter = parent.top.window.location.href.lastIndexOf("/");
var urlStr = parent.top.window.location.href.substring(0, counter + 1);
iframe.src = urlStr + "resizer.htm?height=" + containerHeight;
}

I am in the process of making a website and have a question as I am new to javascript, for the smaller screens I would like to have a script that moves the link buttons closer together and resizes them to make them smaller. Is this possible and if so can someone write the code for me to then alter for the website. The website is tvbcraft.com and it is the menu bar i am trying to add a script to. The buttons have a menustyle.css sheet and a menuscript.js file.