JavaScript - Auto Resize On Images - I Need To Remove This Feature

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.

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 this code included within a .php file on my website. I realised that my %age rules defining the width of my website page dont really work once i get to wider sizes so i want to use a fixed width page design using css code (only once wide enough) to achieve this. Please have a look at my code and tell me what im doing wrong i cant find anything wrong with my js. If js is anything like python i may need to change the output from a string to an integer or something along those lines. I can easily just doc.write the width but i cant get it to compare properly


Code:

<script type="text/javascript">
if (document.body.clientWidth > 1280)
{document.write('<link href="wdestyle.css" rel="stylesheet" type="text/css" />')};
else
{document.write('<link href="nrostyle.css" rel="stylesheet" type="text/css" />')};
</script>

I want to remove special characters in form fields. It should be automatic.
I have a name filed where user entering text and i not want special characters, it should remove automatic.

something like this i need,

Code:

onkeyup="javascript:this.value=this.value.replace(/[^0-9]/g, '');"

here, all non-digits get removed automatic.

Need help.

Does anyone know how to go about getting a function a bit like fckeditor / ckeditor where when you type a full URL into the 'link to' box it automatically removes the 'http://' part on the fly (i.e. as soon as another character after the initial 'http://' is typed), just leaving the user with www.etc.... in the input?

I am trying to build something similar, and am a bit lost going through the fckeditor code!

Thanks,
Neil

Hello there I am using the below code to resize images posted on a forum, however when the page is loading it loads the images full size on sreen stretching the page to however wide the largest picture is and only resizes them once every picture has loaded and the page then goes back to normal width.

Does anyone know how I could make it so the images only display once they've resized ?


Code:

<script>

     window.onload = resizeimg;
    function resizeimg()
{
 var theImages = document.getElementsByTagName('img');
 
 for( var i = 0; i < theImages.length; i++ )
 {
  im = theImages[ i ];
       
  if( im.width > 468 && !/\/(pic1\.jpg|pic2\.jpg)/i.test( im.src ) )
  {
   im.style.width = '466px';
   im.style.border = "1px solid #000000";
   im.style.padding = "2px";
   im.style.marginBottom = "1px";
   im.onclick = function()
   {
    window.open( this.src, 'fullscale','width='+ this.width +', height='+ this.height +',scrollbars=1,resizable=1').focus();
   }

   try{ im.style.cursor = 'hand';}catch(e){ im.style.cursor = 'pointer'; }

   im.title = 'Click Here To See Image Full Size ';
  }
 }
}
</script>

Hi All!
I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page.

Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code.

Thanks in advance

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

I'm trying to make my sidebar show 3 images then scroll to the next 3 automatically every 3 seconds or so. (vertically)

Can anyone help me out with a reference I could look at how to do it or show a snippet of code?

I've looked up various scripts for scrolling the pictures I have on the right vertically, but I can't seem to implement any of the ones I've found. I'm not trying to ask for you to code it all for me (unless you really want to), but just need some help! Thanks!

Here's the site:
www.beunthinkable.org

Hi' there

Is there anyway to make a custom resize function that resizes one of my div elements on the webpage the same amount of pixels as the browser window gets resized?

Hi all,

I want to find a Javascript if possible that emmulates the fuctionality shown under Editor's choice on either of these sites.

http://www.irishtimes.com
www.cnn.com

I won't be using video but I would like the user to be able to click on a Left or Right arrow and upon doing this a new batch of Images with associated URL links will slide in.

Problem I have is that I do not know what I should search for. Have tried keywords such as "Image Link Scroller", "Slideshow" but have not found a script that does something like what is on these websites.

Any ideas?

Hi everyone,

I currently have a slideshow working on my client's site, but I can't get lightbox to work properly on it. [bobbivanstudio.com/work.php]

Is there a way to fix the existing slideshow to work with lightbox? Or is there another way of doing this (keeping the same look that is currently in place)?

Thanks in advance!

Hey all - trying to find a good rotating box with SEO content. Like this one, do you know what they are using or how I can accomplish this with something similar?

http://www.studioscentral.com/

Thanks in advance

I forgot to append what key is actually pressed
too, but not sure how? Any quick help would be
appreciated.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang=en> 
<head> 
<title>Question 5</title> 

</head> 
<body> 

	<form>
		Char: <input type="text" id="catch"/> <br /><br />
		Keycode: <br /><textarea id="display"></textarea>
	</form>

	<script type="text/javascript">
	var ip=document.getElementById("catch")
		ip.onkeypress=function(a)
		{
			var a=window.event || a
			var uc=a.charCode || a.keyCode
			document.getElementById("display").value=uc
			
		}

	</script>

</body>
</html>

Hello,

I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.

I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:

Code:

<td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td>

The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script.

The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue..

http://watch-movies-online.anyfilman...-Movie-17.html

To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com.

If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required.

Please feel free to ask any questions, i'll be happy to answer.

Thanks in advance.

Best Regards,
Jonathan.