Include js files

  • Thread starter jfancy-Transport Canada
  • Start date
J

jfancy-Transport Canada

Hi, I am making a js file that increases font sizes by its relative
size. It works fine as all one file with the script in the html file
but when i go to put the js in a seperate file and reference it as a
source file, it doesn't work properly. What happens is that when i go
to increase the font size, it goes lower(the first time), but the next
time it increase and increases, and decreases, which is fine. But
whatever happens, it sets it to a different start value, which is
wrong.

here's the code for the html file:
-------------------------------------------------------------------
<html>
<head>
<SCRIPT TYPE="text/javascript" SRC="textsize2.js"></SCRIPT>
</head>
<body>

<h1>Hello there</h1>
<h2>Test</h2>
anything.

<input type="button" onclick="resizeBodyText(2, 'n')" value="Font +" >
<input type="button" onclick="resizeBodyText(-2, 'n')" value="Font -" >

<input type="reset" onclick= "resizeBodyText(0, 'y')">

</body>
</html>
------------------------------------------------------------------



And here's the code for the js file:

-------------------------------------------------------------------
var current = parseInt(getCookie("fontFactor"))
if (isNaN(current))
current= 0;

resizeBodyText(current, "n")
function resizeBodyText(factor, reset)
{
if (reset=="y")
factor= (current * -1);

window.alert(current + " " + factor)
//------------------------------------------------
var a = document.all;
var s = '';
current += factor;

if (current < 0)
current = 0;
else
for (var i = a.length-1; i >0;i--)
{
s=a.currentStyle.fontSize+'';
s=Right(s,2);
a.style.fontSize = parseInt(a.currentStyle.fontSize)+factor+s;
}
setCookie("fontFactor", current)
}

//-----------------------------------------------
function Right(str, n) {
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var iLen = String(str).length;
return String(str).substring(iLen, iLen - n);
}
}
//-------------------------------------------------
function getCookie(name) {
var dc = document.cookie;
var index = dc.indexOf(name + "=");
if (index == -1) return null;
index = dc.indexOf("=", index) + 1; // first character
var endstr = dc.indexOf(";", index);
if (endstr == -1) endstr = dc.length; // last character
return unescape(dc.substring(index, endstr));
}
function setCookie(name, value)
{
document.cookie= name + "=" + escape(value);
}
 
R

RobG

jfancy-Transport Canada said:
Hi, I am making a js file that increases font sizes by its relative
size. It works fine as all one file with the script in the html file
but when i go to put the js in a seperate file and reference it as a
source file, it doesn't work properly. What happens is that when i go
to increase the font size, it goes lower(the first time), but the next
time it increase and increases, and decreases, which is fine. But
whatever happens, it sets it to a different start value, which is
wrong.
Click to expand...

It seems pointless to replicate a function that is provided by a
browser in a much more efficient manner than you can do, but let's have
fun anyway.

I ignored the cookie stuff.
here's the code for the html file:
-------------------------------------------------------------------
<html>
<head>
<SCRIPT TYPE="text/javascript" SRC="textsize2.js"></SCRIPT>
</head>
<body>

<h1>Hello there</h1>
<h2>Test</h2>
anything.

<input type="button" onclick="resizeBodyText(2, 'n')" value="Font +" >
<input type="button" onclick="resizeBodyText(-2, 'n')" value="Font -" >

<input type="reset" onclick= "resizeBodyText(0, 'y')">

</body>
</html>
------------------------------------------------------------------



And here's the code for the js file:
Click to expand...

You should always use parseInt with a radix. In this case, probably
better to use parseFloat anyway (font size units may be decimal). I
just set current to 0 and removed the cookie stuff.
if (isNaN(current))
current= 0;

resizeBodyText(current, "n")
Click to expand...

This will attempt to run your resizeBodyText function probably before
the document has finished loading. Run it from an onload (either in
the HTML source or using window.onload).
function resizeBodyText(factor, reset)
{
if (reset=="y")
factor= (current * -1);

window.alert(current + " " + factor)
//------------------------------------------------
var a = document.all;
Click to expand...

This will only work in browsers that support document.all, so feature
test first:

if (document.all) {
var a = document.all;
} else {
return; // No point in continuing
}

or add an alternative if you add cross-browser support for
currentStyle:

if (document.getElementsByTagName) {
var a = document.getElementsByTagName('*');
} else if (document.all) {
var a = document.all;
} else {
return; // No point in continuing
}
var s = '';
current += factor;

if (current < 0)
current = 0;
else
Click to expand...

?
Don't understand the logic of the if..else. Why not just the
following 'for'?
for (var i = a.length-1; i >0;i--)
{
s=a.currentStyle.fontSize+'';
s=Right(s,2);
a.style.fontSize = parseInt(a.currentStyle.fontSize)+factor+s;
}
Click to expand...


This seems cumbersome. Try this, it eliminates Right() and tests for
currentStyle & style support before trying to use them:

// exit if currentStyle or style not supported
if (!a[0].currentStyle || !a[0].style ) return;

var s, an, au, i=a.length;
while ( --i ) {
s=a.currentStyle.fontSize;
an = parseFloat(s); // Get the number part
au = s.replace(an,''); // Get the units
a.style.fontSize = an + factor + au;
}

Note that use of currentStyle is likely IE only (certainly won't work
in Firefox).

If you want to add support for other browsers, do a search in the news
group for getComputedStyle - you will likely want to create your own
function that uses one or the other depending on browser support.

You may realise that the above avoids a[0], which is the HTML
element. Setting the font size there will give all elements the same
size font (this may not have been intended originally, but that's what
happens).
setCookie("fontFactor", current)
}

//-----------------------------------------------
function Right(str, n) {
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else {
var iLen = String(str).length;
return String(str).substring(iLen, iLen - n);
}
}
Click to expand...

No longer required

[...]
If someone could help me, it would be greatly appreciated! Thanks
Click to expand...

The buttons should only appear in browsers that support the features of
your script, so maybe test that right up front and only show them if
they're going to work.

The resize function is now:

function resizeBodyText(factor, reset) {
if (reset=="y"){
factor = (current * -1);
}

current += factor;

if (document.getElementsByTagName) {
var a = document.getElementsByTagName('*');
} else if (document.all) {
var a = document.all;
} else {
return; // No point in continuing
}

// exit if currentStyle or style not supported
if (!a[0].currentStyle || !a[0].style ) return;

var s, as, au, i = a.length;
while ( --i ) {
s = a.currentStyle.fontSize;
an = parseFloat(s); // Get the number part
au = s.replace(an,''); // Get the units
a.style.fontSize = an + factor + au;
}

setCookie("fontFactor", current)

}
 
R

RobG

RobG said:
jfancy-Transport Canada said:
Hi, I am making a js file that increases font sizes by its relative
size. It works fine as all one file with the script in the html file
but when i go to put the js in a seperate file and reference it as a
source file, it doesn't work properly. What happens is that when i go
to increase the font size, it goes lower(the first time), but the next
time it increase and increases, and decreases, which is fine. But
whatever happens, it sets it to a different start value, which is
wrong.
Click to expand...

It seems pointless to replicate a function that is provided by a
browser in a much more efficient manner than you can do, but let's have
fun anyway.
[...]

Note that use of currentStyle is likely IE only (certainly won't work
in Firefox).

If you want to add support for other browsers, do a search in the news
group for getComputedStyle - you will likely want to create your own
function that uses one or the other depending on browser support.
Click to expand...

Below is a cross-browser version, tested in IE 6 and Firefox. One
issue is that it loads, then does the re-size so in larger pages there
will be some issues when the page re-sizes. Highlights that this is
not a good idea.



<!-- new body tag in HTML -->

<body onload="resizeBodyText('onload','n')">



/* Revised script */

// Setup cross browser functions
// Get all elements
var getAll;
var getFontSize;

function initFunctions(){
if (document.getElementsByTagName) {
getAll = function() {return document.getElementsByTagName('*')};
} else if (document.all){
getAll = function() {return document.all};
} else {
getAll = function() {return false};
}

// Get element font size
var x = document.body;
if ( x.currentStyle ) {
getFontSize = function(el) {
return el.currentStyle.fontSize;
}
} else if ( document.defaultView.getComputedStyle(x,'').fontSize ){
getFontSize = function(el) {
return document.defaultView.getComputedStyle(el,'').fontSize;
}
} else {
getFontSize = function(el) {
return false;
}
}
}

// Resize text
function resizeBodyText(factor, reset) {
if (reset=="y"){
factor -= current;
}

if ( 'onload' == factor ) {
factor = current;
} else {
current += +factor;
}

var a = getAll();

// exit if features not supported
if (!a || !getFontSize(a[0]) || !a[0].style ) return;

var s, as, au, i = a.length;
while ( --i ) {
s = getFontSize(a); // Get the font size
an = parseFloat(s); // Get the number part
au = s.replace(an,''); // Get the units
a.style.fontSize = an + factor + au;
}
setCookie("fontFactor", current)
}

//-------------------------------------------------
function getCookie(name) {
var dc = document.cookie;
var index = dc.indexOf(name + "=");
if (index == -1) return null;
index = dc.indexOf("=", index) + 1; // first character
var endstr = dc.indexOf(";", index);
if (endstr == -1) endstr = dc.length; // last character
return unescape(dc.substring(index, endstr));
}
//-------------------------------------------------
function setCookie(name, value)
{
document.cookie = name + "=" + escape(value);
}

// Get the factor from the cookie
var current = +getCookie("fontFactor");
if ( isNaN(current) ){
current = 0;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Browser compatibility 0
Why doesn't this work? 0
Interesting 6
Compatible for all browsers. How!? 3
Javascript Puzzle Anyone?? 1
I Need Help with making a function that draws in a canvas using location data. 1
I need help making a zooming function 11
Login script help 0

Members online

Total: 33 (members: 1, guests: 32)
Robots: 652

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top