JavaScript - 'refresh' A Script On Window Resize?

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

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

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

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

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.

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?

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>

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>

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

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);  
 }
}

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