JavaScript - Help With Very Simple Js Problem - Auto Resize Page Script

Hi!

I have a mysql database with a bunch of quotations in it. I created a blog at http://aro2220.blogspot.com

At the top of the blog is an iframe window that directs to http://aro2220.com/blog

On that page it uses php to pull out a random quote from the database. The iframe window displays that quote onto the blog.

It works great except that the height is not automatically resizing.

Is there a way I can use javascript to do this instead? Here is some pseudo-code of what I'd like to be able to do: (p.s. I do not know javascript or much of anything so I am looking for people to tell me how to ACTUALLY do this)

Quote:
var stringvariable = http://aro2220.com/blog/index.html;

int stringlength = stringlength(stringvariable);

int autosize = 200 + stringlength * 5;

<iframe width="100%" frameborder="0" src="http://aro2220.com/blog" height=$autosize scrolling="no"></iframe>
Obviously these are not real functions or proper syntax but hopefully it will paint a clear picture on what I am trying to do.

Hello,

http://www.phoenixdigitalweb.com/Con...urecommercial/

The main image is actually 1087 pixels wide. I want all the photos to appear 1087 pixels wide, but there is some code that is resizing the images.

Can someone please take a look for me? Let me know if any code is needed.

Thanks!!

http://isensors.com.sg/isensors-GJ/

That's the page I'm working on now, the script I'm using from he http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007.

It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE.
<script type="text/javascript">

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["contentframe", "newsframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<=iframeids.length; i++){
var iframeid = iframeids[i];
if (document.getElementById)
resizeIframe(iframeid)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+50;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight+50;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script> Could someone kindly help me find the problem? Thanks.

I have found a jQuery slide show at http://tobia.github.com/CrossSlide/ which interests me because of its smooth, cross-browser fade transitions. I would like to add a feature which automatically resizes the images proportionally, to fit the browser window. This feature is demonstrated in the Supersized slide show at www.mauitradewinds.com, but I am not satisfied with the quality of fade transition with Supersized -- especially under Safari. I would appreciate any guidance as to how to implement auto-resizing with the Cross-slide plug-in. Additionally, it would help if Cross-slide launched the slide show without waiting for all images to load.

Hey guys, so I am a designer (not a developer) doing a site for someone.
I am playing with some simple free javascripts.

I have lightbox and toggler. Both work great individually.
They are conflicting and everywhere online says to set the both to onLoad in the body tag.
Sounds easy enough.

But I can't seem to figure out the call for this script:
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/expand.js"></script>
<script type="text/javascript">

$(function() {
$("h2.expand").toggler({method: "fadeToggle"});
});
//--><!]]>
</script>

<body onload="toggler();initLightbox()"> is what is seems like it should be for me. But that isn't working at all.

Please help!

I feel like I have tried every possible name with the toggler()...


If you need more, I can point you to the site itself and you can see all of the (messy) code.

Having an unusual problem with the simple validation script below. In my script, I want to validate the username text field so that if the value of the text field (i.e. the amount of characters in the field) is less than 5, it would show a message in the page using innerHTML. The script works, but in a roundabout sort of way, or at least that's what it seems to me. Instead of making sure that the amount of characters in the text field is less than 5, it seems to disregard this entirely and instead make it so that if it has no value at all, the message will be shown. If it has a value of even 1 character, though, the message does not show. Not what I was trying to do, and I really don't know what's happened.

Thanks in advance to anyone who can help out a newbie in need.

Code:

function uservalidate() {
	if (document.getElementById("user").value < 5) 
                        { document.getElementById("userdiv").innerHTML = "Username must be six characters or more." }
             else 
                 {
	    document.getElementById("userdiv").innerHTML = ""
	     }
}

Code:

<body>
      <form id="form1">
         <input type="text" id="user" onblur="uservalidate()" /> 
         <div id="userdiv"></div>
      </form>
</body>
</html>

Hi, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file:

Code:

function swapIt(id1,id2,id3)
{
	var object1 = document.getElementById(id1);
	var object2 = document.getElementById(id2);
	var object3 = document.getElementById(id3);
	
	var z1 = object1.style.zIndex;
	var z2 = object2.style.zIndex;
	var z3 = object3.style.zIndex;
	
	object1.style.zIndex = z3;
	object2.style.zIndex = z1;
	object3.style.zIndex = z2;
}

Here's the code invoking this function in my html file:

Code:

function moveAvalon()
	{
		var x = xCoord("avalon");
		
		if(x <= (W - 125))
		{
			shiftIt("avalon", 10, 0);
			setInterval("moveAvalon()", 50);
		}
		else if(x > (W - 125))
		{
			swapImages();
		}
	}
	
	function swapImages()
	{
		showIt("kids");
		showIt("fiction");
		showIt("nfiction");
		
		setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
	}

Hi All

Is is possible to 'Refresh' a script when the browser window is resized?

I know how to execute a script using the (window).resize event but I effectively need to 'destroy' the initial instance and re-load it. This must be acheived without refreshing the browser

If it helps I'm using the SmoothDivScroll plugin which has a known bug whereby widths aren't recalculated when the window is resized. The script stops working untill the browser is restored to it's initial width and unfortunately I don't have the expertise to fix that

All help appreciated

Cheers
Craig

I'm trying to reduce the space between the page content and the footer..this is the code i'm using to resize and the method call is implemneted in master page pageload()

Code:

function resize() {
    var windowHeight;
    if (document.getElementById("leftnav") && document.getElementById("content")) {
//         document.getElementById('leftnav').style.height = document.getElementById('content').offsetHeight - 20 + 'px';
        if (document.getElementById("content").offsetHeight >= 698) {
                        document.getElementById("leftnav").style.height = document.body.clientHeight + "px";
                        document.getElementById("content").style.height = document.body.clientHeight + "px";
       }
    }

This method resizes based on the content but it gives more extra space between the content and the footer which is not our site standards. Any suggestions please?
thanks

I have been trying for some time now to find a script to create a cookie for the following, so that the user selected font size is remebered throughtout the site.

I have traweled the internet for some time now but all to no avail, the only guides i can find are for resizing a single element, which is no good for what i require.


The code i already have is:

<script type="text/javascript">
//Specify affected tags. Add or remove from list:
var tgs = new Array( 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'b', 'li', 'form.button' );

//Specify spectrum of different font sizes:
var szs = new Array( 'x-small','small','medium','large','x-large' );
var startSz = 2;

function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;

sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 5 ) sz = 5;
startSz = sz;

if (!( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

cEl.style.fontSize = szs[ sz ];

for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}
</script>

On a seperate issue i would also like to know if there is a script i can put in to enable users to quickly return to the default font size (although it would not be the end of the world if such a thing is not possible).

Hi
I would appreciate a pointer in the right direction for a script I require.

I will have two text boxes that will accept numeric values and an image.
What I need is if the user change the value of box 1, the value in box 2 will automatically update depending on the pixel dimensions of the image and vice versa.

Basically I need to automatically calculate the pixel ratio of an image and then use that value to multiply by the user inputted size.

Any ideas?
Rob

Hello,

I have this short script he

Code:

function resizeImages() { //Function will be ran onload in the <body> tag
	var img = document.images; //Puts all the images in an array
	
	for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
		var parentElement = img[i].parentNode; //Gets parent element of image
		
		var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
		var imgWidth = img[i].width(); //Gets image width
		
		var parentHeight = parentElement.height(); //Gets height of parent element
		var imgHeight = img[i].height();//Gets image height
		
		if (parentWidth < imgWidth){
			img[i].width(parentWidth); //Sets width of image to width of parent element
			img[i].style.height = "auto"; //Scales height
		}
		
		if (parentHeight > imgHeight){
			img[i].height(parentHeight);  //Sets height of image to height of parent element
			img[i].style.width = "auto"; //Scales width
		}
		
		alert(parentWidth); //To test if parentNode is working correctly.  Should return an integer.
	}
}

It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage.

Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed.

The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder.

Thank you,
Jared

This is my test page: http://www.thesacstudio.com/ccid_web...ndex_copy.html

Am using Dynamic Drive's smooth menu javascript

When viewed on a PC using IR the menu makes the page "jump" i am a Mac guy and at my limit of what to do.

thanks for any assistance

Hello Frnds,
I made a website, but when I resize my window the content get disturbed. How to stop it.
Please gimme suggestion ASAP

Been trying to get this auto refreshed instead of clicking to refresh

<center><iframe src="http://orange.citrus3.com:8338/played.html" width=800 height=400 frameborder=0 scrolling=no id="myiframe"></iframe></center><br>
<center><b><BIG><body link="#FF0000"><a href="javascript:myiframe.document.location.reload()">Refresh Current Song</a></BIG></b></center>