www.webdeveloper.com
Results 1 to 13 of 13

Thread: Make any Javascript fit any new size

  1. #1
    Join Date
    Apr 2009
    Posts
    46

    Make any Javascript fit any new size

    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. #2
    Join Date
    Apr 2008
    Posts
    157
    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.

  3. #3
    Join Date
    Apr 2009
    Posts
    46
    I mean scale, not file size, its scale on the screen. That might not be clear, I cant change the thread title either

  4. #4
    Join Date
    Dec 2002
    Location
    Pleasanton, CA
    Posts
    2,132
    Quote Originally Posted by Sunny Day View Post
    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'

  5. #5
    Join Date
    Apr 2009
    Posts
    46
    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.

  6. #6
    Join Date
    Apr 2008
    Posts
    157
    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.

  7. #7
    Join Date
    Apr 2009
    Posts
    46
    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.

  8. #8
    Join Date
    Apr 2008
    Posts
    157
    Can you at least post the code you're talking about?

  9. #9
    Join Date
    Apr 2009
    Posts
    46
    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>

  10. #10
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    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?
    ...but stupidity is terminal.

  11. #11
    Join Date
    Apr 2009
    Posts
    46
    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.
    Last edited by Sunny Day; 09-07-2009 at 03:30 PM.

  12. #12
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786

    Arrow

    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.
    ...but stupidity is terminal.

  13. #13
    Join Date
    Apr 2009
    Posts
    46
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles