Make any Javascript fit any new size

**Sunny Day** · 09-06-2009 08:49 AM

Sometimes I see great javascripts on the net, but the size is wrong for the space on my web page, either the javascript is too small or too big, it would be great if I could re scale it so that it would fit in the space I have available.

Can we do something to override how big the javascript is, either by saying, make this javascipt, say 90% or 150%, or saying make this javascript 10% smaller or 50% bigger, or say make this javascript fit say this many pixels, say the javascript is 400 pixels high by 200 and we wanted it bigger we would say scale it bigger so it was 500x300.

What I would like is some kind of control, a command of some kind that I could put in so that I could re size any javascript I wanted. I suppose one could go and and re set everything that points to a size, but that's too hard for me, I am a beginner at javascript and re sizing every bit of code would cause problems, I want something that overrides it with a simple command that makes it bigger or smaller so javascripts will fit into whatever size space I have available on a web site.

If anyone can come up with an answer to this, it will make me very happy indeed.
Thank you for any help on the problem.

**Teufel** · 09-06-2009 09:49 AM

What??
Javascript doesn't have a "size" - it's text files.
You can use several tools to compress javascript code, but you can't "resize" it.

**Sunny Day** · 09-06-2009 12:00 PM

I mean scale, not file size, its scale on the screen. That might not be clear, I cant change the thread title either

**Nedals** · 09-06-2009 12:28 PM

Originally Posted by Sunny Day

Sometimes I see great javascripts on the net, but the size is wrong for the space on my web page, either the javascript is too small or too big

What are you talking about??. Javascript is a client-side programming language.
It has absolutly nothing to do with 'space on my web page'

**Sunny Day** · 09-06-2009 02:13 PM

Lets make something up here for the sake of an example, lets say we have a javascript for a tic-tac-toe game we have found on the net, lets say we paste the code for it into our web page and the thing is 400x400 pixels in screen size on our web page. Ohh no, its too big, or perhaps its too small, lets say I want it to cover half that screen size, or I want it twice as big or some other change in size it appears on the screen, I want to know if this can be done with some method or some code, so that I can quickly and easily re scale items.

**Teufel** · 09-06-2009 02:22 PM

You need to check inside the script.
Usually the size of an element added by javascript is defined by something like this:

element.style.width = "400px";
element.style.height = "400px";

so what you need to do is look through your javascript file and find these sizes, and change them if you deem it necessary. But usually that kills the whole layout and nothing will work anymore, so good luck.

**Sunny Day** · 09-06-2009 04:09 PM

I dont want to have to re size every single element, it would take forever and Im sure id get problems changing every single element in the script, I am bound to get it wrong and its just not practical if there was loads of elements and I have to go over ever single one of them in all of the code.

isnt there one thing we can add like tell it to enlarge or shirt what size it all is, like a master size thing, just tell it to make everything a certain percentage change.

Also I remember using iframes years back, I'm sure that could be changed in size to how big it displayed it, couldnt something like that be done.

Anyone got any ideas on how I can overide how things are scaled.

**Teufel** · 09-06-2009 04:27 PM

Can you at least post the code you're talking about?

**Sunny Day** · 09-06-2009 10:32 PM

The net has lots of useful free scripts, lets take 2 at random for the sake of testing an example.

first one.

see it working here and the code to copy and paste
I include the code from the site below.
http://javascript.internet.com/games/dice-roller.html

-------------------------------------------------------------------------------

Code:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Michael Hensley (yelsneh@geocities.com) -->
<!-- Web Site:  http://geocities.com/TimesSquare/Castle/6274 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var die = 6;
var dice = 3;
function dice_roll(die, dice) {
var roll = 0;
for (loop=0; loop < dice; loop++) {
// random number fix by George Johnston (cali_scripter@yahoo.com)
roll = roll + Math.round(Math.random() * die) &#37; die + 1;
}
document.form.text.value = roll;
}
// End -->
</script>

<!-- STEP TWO: Add the last coding into the BODY of your HTML document  -->

<BODY>

<center>
<form name=form>
<table border=2 cellpadding=5>
<tr>
<td colspan=2 align=middle>What dice type?</td>
<td colspan=2 align=middle>How many dice to roll?</td>
</tr>
<tr>
<td valign=top align=middle>
<p><input type=radio name=sides onclick="die = 3">3 Sided
<p><input type=radio name=sides onclick="die = 4">4 Sided 
<p><input type=radio name=sides onclick="die = 5">5 Sided
<p><input type=radio checked name=sides onclick="die = 6">6 Sided
<p><input type=radio name=sides onclick="die = 8">8 Sided
</td>
<td valign=top align=middle>
<p><input type=radio name=sides onclick="die = 10">10 Sided
<p><input type=radio name=sides onclick="die = 12">12 Sided
<p><input type=radio name=sides onclick="die = 20">20 Sided
<p><input type=radio name=sides onclick="die = 30">30 Sided
<p><input type=radio name=sides onclick="die = 100">100 Sided
</td>
<td valign=top align=middle>
<p><input type=radio name=number onclick="dice = 1">1 
<p><input type=radio name=number onclick="dice = 2">2
<p><input type=radio checked name=number onclick="dice = 3">3
<p><input type=radio name=number onclick="dice = 4">4
<p><input type=radio name=number onclick="dice = 5">5
</td>
<td valign=top align=middle>
<p><input type=radio name=number onclick="dice = 6">6
<p><input type=radio name=number onclick="dice = 7">7
<p><input type=radio name=number onclick="dice = 8">8
<p><input type=radio name=number onclick="dice = 9">9
<p><input type=radio name=number onclick="dice = 10">10
</td>
</tr>
<tr>
<td align=middle colspan=4>
<input type=button value="Roll Dice" name=button onclick="dice_roll(die, dice)">
<input type=text size=10 name=text>
</td>
</tr>
</table>
</form>
</center>

<p><center>

-------------------------------------------------------------------------------

Second one, this one uses some gif images, so Im interested to see what effect re sizing will have on images.

See it working here
http://javascript.internet.com/games/concentration.html

-------------------------------------------------------------------------------

Code:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Brian Gosselin (bgaudiodr@aol.com) -->
<!-- Web Site:  http://www.bgaudiodr.iwarp.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var pics = new Array();
for (i = 0; i <= 18; i++) {
pics[i] = new Image();
pics[i].src = 'image' + i + '.gif';
}
var map=new Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18);
var user = new Array();
var temparray = new Array();
var clickarray = new Array(0, 0);
var ticker, sec, min, ctr, id, oktoclick, finished;
function init() {
clearTimeout(id);
for (i = 0; i <= 35 ;i++) {
user[i] = 0;
}
ticker = 0;
min = 0;
sec = 0;
ctr = 0;
oktoclick = true;
finished = 0;
document.f.b.value = "";
scramble();
runclk();
for (i = 0; i <= 35; i++) {
document.f[('img'+i)].src = "image0.gif";
   }
}
function runclk() {
min = Math.floor(ticker/60);
sec = (ticker-(min*60))+'';
if(sec.length == 1) {sec = "0"+sec};
ticker++;
document.f.b.value = min+":"+sec;
id = setTimeout('runclk()', 1000);
}
function scramble() {
for (z = 0; z < 5; z++) {
for (x = 0; x <= 35; x++) {
temparray[0] = Math.floor(Math.random()*36);
temparray[1] = map[temparray[0]];
temparray[2] = map[x];
map[x] = temparray[1];
map[temparray[0]] = temparray[2];
      }
   }
}
function showimage(but) {
if (oktoclick) {
oktoclick = false; 
document.f[('img'+but)].src = 'image'+map[but]+'.gif';
if (ctr == 0) {
ctr++;
clickarray[0] = but;
oktoclick = true;
} else {
clickarray[1] = but;
ctr = 0;
setTimeout('returntoold()', 600);
      }
   }
}
function returntoold() {
if ((clickarray[0] == clickarray[1]) && (!user[clickarray[0]])) {
document.f[('img'+clickarray[0])].src = "image0.gif";
oktoclick = true;
} else {
if (map[clickarray[0]] != map[clickarray[1]]) {
if (user[clickarray[0]] == 0) {
document.f[('img'+clickarray[0])].src = "image0.gif";
}
if (user[clickarray[1]] == 0) {
document.f[('img'+clickarray[1])].src = "image0.gif";
   }
}
if (map[clickarray[0]] == map[clickarray[1]]) {
if (user[clickarray[0]] == 0&&user[clickarray[1]] == 0) { finished++; }
user[clickarray[0]] = 1;
user[clickarray[1]] = 1;
}
if (finished >= 18) {
alert('You did it in '+document.f.b.value+' !');
init();
} else {
oktoclick = true;
      }
   }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="init()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<center>
<h2>Concentration</h2>
<form name="f"> 
<table cellpadding="0" cellspacing="0" border="0">
<script language="javascript">
<!-- Begin
for (r = 0; r <= 5; r++) {
document.write('<tr>');
for (c = 0; c <= 5; c++) {
document.write('<td align="center">');
document.write('<a href="javascript:showimage('+((6*r)+c)+')" onClick="document.f.b.focus()">');
document.write('<img src="image0.gif" name="img'+((6*r)+c)+'" border="0">');
document.write('</a></td>');
}
document.write('</tr>');
}
// End -->
</script>
</table>
<br><br>
<input type="button" value="         " name="b" onClick="init()">
</form>
</center>

<p><center>

**opifex** · 09-06-2009 11:35 PM

hmmm.... and the problem is???
first example.... change the text size
2nd example... resize the images

and fix the html in both

if this is really what you are talking about?

**Sunny Day** · 09-07-2009 03:25 PM

One of the links was broken, here is it fixed
http://javascript.internet.com/games/dice-roller.html

Here is what I want. see image

http://img42.imageshack.us/img42/2512/image1jo.jpg

Dead simple, just change what size it is on the screen, what I dont want is to go over hundreds of line of code and change the size on every element, these examples are small, some scripts could be very large, I want something that can be done easilly to alter the size it is on the screen of the user.

**opifex** · 09-07-2009 07:00 PM

use percentages for containers and images.... called from the css.

there is really no such thing as a "drop-in" script... you will always have to make adjustments to style or content and most of the old javascripts floating around are not w3c compliant... you will have to fix them up. small price to pay.

**Sunny Day** · 09-07-2009 09:56 PM

Could anything be done with iframes, I seem to remember using them years ago to put other sites content into my site and Im sure I changed the scale of the content, though perhaps the content may of been in flash, or just html, I cant remember as it really was quite some time ago.

Thread: Make any Javascript fit any new size

Thread Tools

Display

Make any Javascript fit any new size

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions