Member Avatar for Pleasant 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, 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.

  • 2 Contributors
  • 6 Replies
  • 204 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by codejoust
Member Avatar for codejoust

There are no such things as 'javascript objects' like flash objects in html.
Javascript modifies the html, just like you would with a text editor.
Prewritten programs, as I'm assuming your talking about, have specified certain sizes for the elements they create. Resizing these elements to fix the page would require changing css classes or the image with attributes.
If you have any examples, or a more concrete description, that would be nice.

Member Avatar for Pleasant Day

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

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

<HEAD>

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

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

<!-- 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) % 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

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

<HEAD>

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

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

<!-- 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>
Member Avatar for Pleasant Day

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

[IMG]http://img42.imageshack.us/img42/2512/image1jo.jpg[/IMG]

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.

Member Avatar for codejoust

OK,

To change the dice-roller's size, simply change the default font-size of the table that contains it.
To do that, find, <table border=2 cellpadding=5> and replace it with <table border="2" cellpadding="5" style="font-size: 12px"> To resize the memory game, it's slightly more complex.
Try adding this to the script tags (right after the game):

window.onload = function(){ for (x=0;x<document.body.getElementsByTagName("img").length;x++){
var newsize = 60; //Set the newsize of the pictures in pixels
document.body.getElementsByTagName("img")[x].height=newsize;
document.body.getElementsByTagName("img")[x].width=newsize;
} };
Edited by codejoust because: Code Tags, need to preview more :)
Member Avatar for Pleasant Day

Thanks for your input, I'm really looking at a general fix for any javascript, I used these as examples, but it could be anything at all, otherwise you have to keep re inventing the wheel, I want something that I can do or add to 'any' javascript, is this possible?

I had thought of perhaps using an iframe, I recall using one years ago I think I remember re sizing the content, I cant remember if it was a simple command in % or if it was a size in width and length, Id have to dig the code out from the site, though perhaps I'm wrong and you couldn't change the scale it was shown on your own web page, I cant really remember.

Whatever the solution I want something easy to add across multiple javascripts, a uniform solution to the problem.

Edited by Pleasant Day because: n/a
Member Avatar for codejoust

Sorry, but that really can't be done unless your working with flash objects.
You might wish to try writing your own javascript scripts, but using others won't get you far.
To resize stuff, if it's text, you can use the css font-size selector, and images, skew to width and height, but there is no "catchall" resize that you can do to an object in an document.
I'd recommend learning CSS though, and that might help you immensely.
Take a look at Learning PHP CSS / HTML

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.