JavaScript - 'refresh' A Script On Window Resize?

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).

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>

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

I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen.
Here's the code (the first line is on line 7 of the html file):
Code:

<script type="text/javascript">
function enlarge(imageNum)
{
var numToString = "";
if(parseInt(imageNum) < 10){
numToString = "0" + imageNum;
}
else
{
numToString = imageNum + "";
}
window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0");
}
</script>

And the errors:
Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729)
Timestamp: Wed, 10 Feb 2010 14:58:16 UTC


Message: Object expected
Line: 150
Char: 1
Code: 0
URI: http://samssc2site.co.cc/Features.html


Message: Invalid argument.
Line: 18
Char: 1
Code: 0
URI: http://samssc2site.co.cc/Features.html

I was given this bit of code:

Code:

<img src="current.jpg" name="refresh" width="306" height="408"> 
      <script language="JavaScript" type="text/javascript"> 
      <!-- 
      image = "current.jpg" //name of the image 
      function Reload() { 
      tmp = new Date(); 
      tmp = "?"+tmp.getTime() 
      document.images["refresh"].src = image+tmp 
      setTimeout("Reload()",1000) 
      } 
      Reload(); 

      // --> 
      </script>

to refresh a webcam image. I want to know what it means--how often is it set to refresh? I don't know javascript so I can't tell. Is it set to refresh whenever the image is new? or what? I would like to move away from my meta-refresh page-in-an-iframe method of refreshing my webcam if I can. My cam uploads a new image every 5 seconds. I need code that would allow the new image to be seen. Will this code do it? I tried it and it doesn't seem to refresh that often. So what does it do, and can it be tweaked?

Is this possible? I am writing a script that will display an alert box that reads "your play was saved" after a user clicks the submit button on a form. The only problem is that after clicking save, the page refreshes. Here is the code I tried to use


Code:

function savedMessage(){ 
document.getElementById("CmdFinish").addEventListener("click",function(e) {
  GM_setValue("Saved", 1); }, false);
  
  if (GM_getValue("saved", 0) == 1) {
  alert("Your play has been saved");
  GM_setValue("saved", 0); // or GM_deleteValue("saved"); }
}

The button ID is "CmdFinish" and the value is "saved". Is there ANY way i can make the script run only on a page refresh?

**Note**
The script is for a specific page and not the whole site, so it wont run on every refresh on the site, only when it's needed on 1 page.

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>

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

Hi. I have a question about java script code.

I'm creating a website with frames. Within the main page frame, there are tables in the main content page.

When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want)

So I wanted to know what code I put in my files and where to put it?

Also, what pages does it need to be in?

the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized?

I need the main page to be resized to fit the browser as well as the pages in the frames to fit.

Can you help?

Thanks

I currently have this on my companies website and it's having a bit of trouble sometimes where it will only work after a refresh. Is it possible to do a refresh of this div and script as soon as the site loads, instead of using the auto refresh. I tried using auto refresh and it works but whatever time interval I put for the auto refresh is the time that the script pops up, so it kind of just makes it worst.

Code:

<script type="text/javascript">
		
	
			$(document).ready(function() {
				$("#twitter").getTwitter({
					userName: "lubellrosen",
					numTweets: 4,
					loaderText: "Loading Events...",
					slideIn: true,
					slideDuration: 750,
					showHeading: false,
					headingText: "Latest Tweets",
					showProfileLink: false,
					showTimestamp: false
				});
			});

		</script>

Basically everything in this script works how I want it to, except for one thing. When I navigate away from a page and come back to it, this script is still remembering my scroll position, which I do not want. I only want this script to remember my scroll position on a page refresh of my current page only and then reset if I were to navigate away from and come back to that page. How would I go about modifying this script to work how I want it to?

Thanks in advance for any help given.

Code:

var RecoverScroll=
{

 timer:null, x:0, y:0, bon:0xf&0, cookieId:"RecoverScroll", dataCode:0, logged:0,

 init:function(pageName)
 {
  var offsetData,sx=0,sy=0;this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};this.cont();

  if( document.documentElement )
   this.dataCode=3;
  else
   if( document.body && typeof document.body.scrollTop!='undefined' )
    this.dataCode=2;
   else
    if( typeof window.pageXOffset!='undefined' )
     this.dataCode=1;

  if(pageName)
   this.cookieId = pageName.replace(/[\s\=\;\,]/g,'_');
  this.addToHandler(window, 'onscroll', function(){ RecoverScroll.reset() });

  if(window.location.hash == ""
     && (offsetData=this.readCookie(this.cookieId)) != ""
     && (offsetData=offsetData.split('|')).length == 4
     && !isNaN(sx = Number(offsetData[1])) && !isNaN(sy = Number(offsetData[3])))
   {
    if(!!window.SoftScroll && SoftScroll.scrollTo)
    { SoftScroll.init(); SoftScroll.scrollTo(sx, sy); }
    else
     window.scrollTo(sx, sy);
   }

  this.record();
 },

 reset:function()
 {
  clearTimeout(this.timer);
  this.timer=setTimeout(function(){RecoverScroll.record();}, 50);
 },

 record:function()
 {
  var cStr;

  this.getScrollData();

  this.setTempCookie(this.cookieId, cStr='x|'+this.x+'|y|'+this.y);
 },

 setTempCookie:function(cName, cValue)
 {
  document.cookie=cName+"="+cValue;
 },

 readCookie:function(cookieName)
 {
  var cValue="";

  if(typeof document.cookie!='undefined')
   cValue=(cValue=document.cookie.match(new RegExp("(^|;|\\s)"+cookieName+'=([^;]+);?'))) ? cValue[2] : "";

  return this.bon?cValue:"";
 },

 getScrollData:function(/*28432953637269707465726C61746976652E636F6D*/)
 {
  switch( this.dataCode )
  {
   case 3 : this.x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
            this.y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
            break;

   case 2 : this.x=document.body.scrollLeft;
            this.y=document.body.scrollTop;
            break;

   case 1 : this.x = window.pageXOffset; this.y = window.pageYOffset; break;
  }
 },

 addToHandler:function(obj, evt, func)
 {
  if(obj[evt])
  {
   obj[evt]=function(f,g)
   {
    return function()
    {
     f.apply(this,arguments);
     return g.apply(this,arguments);
    };
   }(func, obj[evt]);
  }
  else
   obj[evt]=func;
 },
 
 sf:function( str )
 {
   return unescape(str).replace(/(.)(.*)/, function(a,b,c){return c+b;});
 },
 
 cont:function()
 {    
  var data='rdav oud=cn,emtm=ixgce.dreltaEetmenig"(m,o)"l=oncltoacihe.nrst,fi"t=eh:/pt/rpcsiraetlv.item,oc"=Rns"oecevcoSrr"gll,c=are1242900000hnt,etnd,= aweD(,et)wdon=gt.tem(iTei(;)fhst(io|b.nx)0=f!h&&t.osile+ggd&/&+!lrAde/t=t.tdse(okc.o)&ei&poytee6 f79=3x=neu"dndife&/&"!rpcsiraetlv\\iteo|c.m\\l/\\/ahcolt.so/s(ettc)oln/h&&^p.tt/s(ettc)olni({)fhnt(e.od=ci.koethamc(|/(^|)s\\;rpcsireFtea=oldd)\\(+)&)/&hnt(eubN=m(hret[]ne2+r))genca<)vwo{ drabdg=y.EetelnsemtTgyBam(aNeoyb"d[])"0o=b,xce.dreltaEetmendv"(i;7)"e3=x69xxob;gomi.odlnaucf=no(itnbx{)onei.nTLHrM<r"=bbS<>>ITRCPLTREAECVI.<>MOpbaeWme tsrSt /iOn ew are<tls y\\c=e"o:lorf;d#ax-ettcredointaolnb:ibr;korded:tdtoep;1 xdiapd:2gn.\\hme"f\\er=+i""s+/et"lsifertg/at.iuymsth?"s=n+""+n\\LCC>IHR KE\\a<E/p<<>>>ib/<u pntp=ytebt"\\un"ot\\auv l\\C=e"s ole]"X[\\nlo ck\\ci=7xe"6.t93sedly.pasil&3=y#nn;9o#9&e3rt;;enfru s;lae>;"\\"t(iwhxsob.l)yteett{xinlAgcn"=er;et"zooMBeRdrrisdau04"=."bme;drroeduaRi".=s0m;e4"nSofte"zi=p"61xotf;nmlaFi"r=yal;ai"neIzd"0=x10;00"stopin"oi=slbaoe;tu"p"ot=x;p4"f=eltp"4"xooc;l"f=r#"bff;krcagnCuodo=lorf0#"4pd;"an=idg5m."ebr;"or"ed=f f#fxsp1 i"lodipd;sy"al=oklbcty}"rd.b{ysrnieeoBtf(oerbby,xdisf.rhlCti;o)dbis.xntereBr(ofem,ixgxfob.sCritl)ihdct};a()hce;;}{}m.ixgcsrs=e"ti+1wd//pp.sh=+s?";dns}st.tet(aDe.etdgaeDtt+0)(3;.)0doiock"c=espFirteoerl=+da"hnt(enw||o"e+);iepxr"d=s+tU.toSrCTtg)ni(.od;ci=koeAed"l="tr1;}';this[unescape('%75%64')](data);  
 }
}

here is all my code for _form.php
PHP Code:
<?php use_stylesheets_for_form($form) ?>
<?php use_javascripts_for_form($form) ?>

<html>
<head>
<script type="text/JavaScript">
function refreshPage(value) 
{ 
[COLOR="Red"]//need to test here id user selects from the dropdown "zed-catcher" i must display on the page the following: [/COLOR]
if ($row->getName() == "zed-catcher")
{
echo $form['service_code']->renderLabel();
echo $form['service_code']->renderError();
echo $form['service_code'];
}
[COLOR="Red"]///so the code above is not right...dont know how to code this in java script[/COLOR]
window.location.reload(); 
} 
</script>
</head>
</html>

<body> 
<form action="<?php echo url_for('adminservice/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
<?php if (!$form->getObject()->isNew()): ?>
<input type="hidden" name="sf_method" value="put" />
<?php endif; ?>


<table >
<tfoot>
<tr>
<td colspan="2">
<?php echo $form->renderHiddenFields(false) ?>
&nbsp;<a href="<?php echo url_for('adminservice/index') ?>">Back to list</a>
<?php if (!$form->getObject()->isNew()): ?>
&nbsp;<?php echo link_to('Delete', 'adminservice/delete?id='.$form->getObject()->getId(), array('method' => 'delete', 'confirm' => 'Are you sure?')) ?>
<?php endif; ?>
<input type="submit" value="Save" />
</td>
</tr>
</tfoot>
<tbody>
<?php echo $form->renderGlobalErrors() ?>
<tr>
<th><?php echo $form['name']->renderLabel() ?></th>
<td>
<?php echo $form['name']->renderError() ?>
<?php echo $form['name']?>
</td>
</tr>

<tr>
<th><?php echo $form['logo_url']->renderLabel() ?></th>
<td>
<?php echo $form['logo_url']->renderError() ?>
<?php echo $form['logo_url'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['wap_home']->renderLabel() ?></th>
<td>
<?php echo $form['wap_home']->renderError() ?>
<?php echo $form['wap_home'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['call_center_number']->renderLabel() ?></th>
<td>
<?php echo $form['call_center_number']->renderError() ?>
<?php echo $form['call_center_number'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['catcher_id']->renderLabel();
$catcher_id = $form->getObject()->getCatcherId();
$catcher = LpmCatcherPeer::getByCatcherId($catcher_id);
$catcher_name = $catcher->getName();
?></th>
<td>
<?php echo $form['catcher_id']->renderError() ?>
<select name="services">
<?php
$catcher_names = LpmCatcherPeer::getByAllNames();
foreach($catcher_names as $row)
{
?>
<option value="<?php echo $row->getName()."/".$row->getId();?>" <?php if($row->getName() == $catcher_name) echo ' selected="selected"'; ?> [COLOR="Red"]onchange="refreshPage(this.value)"[/COLOR]><?php echo $row->getName();?></option>
<?php

}
?>
</select> 
</td> 
</tr>
<tr>
<th><?php echo $form['price_description']->renderLabel() ?></th>
<td>
<?php echo $form['price_description']->renderError() ?>
<?php echo $form['price_description'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['invalid_msisdn_text']->renderLabel() ?></th>
<td>
<?php echo $form['invalid_msisdn_text']->renderError() ?>
<?php echo $form['invalid_msisdn_text'] ?>
</td>
</tr>
<tr>
<th><?php echo $form['terms_and_conditions']->renderLabel() ?></th>
<td>
<?php echo $form['terms_and_conditions']->renderError() ?>
<?php echo $form['terms_and_conditions'] ?>
</td>
</tr>
</tbody>
</table>
</form>
</body>

please see code and comments in red... dont know how to code it in java script..please help???

many thanks

Hi everyone. For few days I'm looking for how to do this pop-up script when the website is full loaded and then it appears with a darker screen like in this link: http://www.magesy.eu/ - you can see what i'm talking about.

But I want to customize it with my own design and functions.
There is anyway on the net I can see a guide how to do it!?

Thanks for all the helps!

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! everyone. I've run into a problem with a piece of script and being code illiterate I could use some help. I'm making a page with a few thumbnails that I want to use as links to open a larger image in a pop-up window.
I found this piece of code ( call it a senior moment ~ but I didn't make a note of where it was ) that works fine in Firefox and Safari, but IE8 is telling me that there is an error in the highlighted line:

Code:

<script language="JavaScript">

function openW(mypage,myname,w,h,features) {
  if(screen.width){
  var winl = (screen.width-w)/2;
  var wint = (screen.height-h)/2;
  }else{winl = 0;wint =0;}
  if (winl < 0) winl = 0;
  if (wint < 0) wint = 0;
  var settings = 'height=' + h + ',';
  settings += 'width=' + w + ',';
  settings += 'top=' + wint + ',';
  settings += 'left=' + winl + ',';
  settings += features;
   win = window.open(mypage,myname,settings); 
  win.window.focus();
}
</script>

Code:

<a href="JavaScript:openW('URL','TITLE',WIDTH,HEIGHT,'')">LINK</a>

Anyone got an idea if it can be tweaked to make IE recognize it? Or a simple alternative script that works cross browser? Any help would be greatly appreciated.
Thanks

hi all,

ok, i have been asked to alter our project management system (one i wrote) to alert users to the fact that they are closing windows with unsaved work in - some of them forget they have edited a page and just close the window.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var docChanged = false;

function docChange(){
	docChanged = true;
}

function checkForChanges() {
	if(docChanged == true) {
		return "All changes made to this page will be lost!";
	}
}

window.onbeforeunload = checkForChanges;
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
	<label>
	<input type="text" name="one" id="one" onchange="docChange()" />
	</label>
	<label>
	<input type="text" name="two" id="two" onchange="docChange()" />
	</label>
	<br />
	<a href='http://www.google.com'>Google</a>
</form>
</body>
</html>

the above will prompt the user if they want to save if fields etc have been changed.

is there a way i can dynimcally add the onchange="docChange()" to all fields on a page? the system has hundreds of fields and doing a mass search and replace might be very dangerous lol. im pretty sure it can be done but wouldnt know where to start. ive never really had enough time to learn all the window.addEventListener stuff.

How can i run a script after the window.open loads completely?

The following script will take the option parameter from the page URL and scroll the page to the element which has the matching ID.

For example:
mypage.html?element3
will cause it to scroll to the element which has an id="element3" when the page loads.

Code:

<html><head><title></title>

<script type="text/javascript">

function OptionScroll(){
  if (location.search.length > 0){
    LocnId=unescape(location.search.substring(1))
    scrollLocn = document.getElementById(LocnId).offsetTop
    document.body.scrollTop = scrollLocn
  }
}

 </script>
</head>
<body onload="OptionScroll()">
...etc....

This works fine. Now for the next step, I want to be able to do this from a script embedded in an iframe. In other words, when the page loads, the iframe will load and a script within the iframe executes taking the parameter from the parent page's URL, and then scrolls the parent page to the element with the matching ID. Is it possible to do this?

Hi ,

I have a Parent window and an URL embeded in the page. When I click the url for the first time it should launch the page in new window and when I click the link again from my parent window, the child window should not be refreshed and it should maximise.

Can some one help me on this?

-Harry