JavaScript:Assorted Scripts

From virtualMV2015wiki
Jump to: navigation, search
 Home  JavaScript/Ajax <

Accessibility

Text resizing

A small bit of JavaScript based on code from Eric Wendelin (2008)[1] that will allow a user to increase/decrease/reset the font size (I have added the normal code - MV.). If no font size is attached to the body tag a 1.0em (the default) size is created first. Note this is different than resizing the web page(using [Ctrl]+[Wheel on mouse]).

function resizeText(intSize) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  if (intSize == "0") {
    document.body.style.fontSize = "1.0em";
  } else {
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (intSize * 0.2) + "em";
  }
}

Create three images [A^] [A] [Av]

<img id="textplus" alt="Increase text size" src="images/TextPlus.jpg" onclick="resizeText(1)" />
<img id="textnormal" alt="Normal text size" src="images/TextNormal.jpg" onclick="resizeText(0)" />
<img id="textminus" alt="Decrease text size" src="images/TextMinus.jpg" onclick="resizeText(-1)" />

Images and photos

Rotate image

 <!-- Paste this code into the HEAD section of your HTML document. -->
 <script type="text/javascript">
 var strImg = new Array("image1.png","image2.png","image3.png");
 // Change the images to your ones - remember array starts at 0
 var intImgNew = 0;
 var intImgTotal = strImg.length;
 function fnImgRotate() {
   intImgNew++;
   if (intImgNew == intImgTotal) {
     intImgNew = 0;
   }
 document.imgRotate.src=strImg[intImgNew];
 // set the time below for length of image display (5*1000 = 5 secs)
 setTimeout("fnImgRotate()", 5*1000);
 }
 window.onload=fnImgRotate;
 </script>
 <!-- The following image is needed in the BODY section -->
 <img src="image1.png" name="imgRotate" />

Click here for a working version

Using Frames for layout

One problem is that the frames "wrapper" page is used in the title. This can be fixed using a little JavaScript/

Add the following to each of the individual pages

<script type="text/javascript">
<!--
top.document.title = document.title;
// -->
</script>

Changing a page in an iFrame

You can create an Page containing an iFrame then by clicking on a link change what is displayed in the iFrame.

<script type="text/javascript">
<!--
.. one day??
// -->
</script>

For now you can check out Chaterjee (2006)[2]

Icon References.png References

  1. Wendelin, E. (2008) Change Text Size On Click With Javascript. Retrieved October 7, 2009 from http://davidwalsh.name/change-text-size-onclick-with-javascript
  2. Chaterjee, J. (2006) Working with IFRAME in JavaScript . Retrieved November 24, 2010 from http://www.devarticles.com/c/a/JavaScript/Working-with-IFRAME-in-JavaScript/

JavaScript:Assorted Scripts. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 12, 2017, from http://www.virtualmv.com/wiki/index.php?title=JavaScript%3AAssorted_Scripts    (zotero)