www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: need urgent help on a small script!!!

Hybrid View

  1. #1
    Join Date
    Dec 2011
    Posts
    14

    Angry need urgent help on a small script!!!

    hey everyone im new to this site and javascript. i really need help coz ill go blind soon for researching

    what im trying to accomplish is simple but i couldnt.. i have a set of images with the id 'resizing' its in the middle row of a 3 row table. top and bottom rows have fixed heights.

    now i need a script that will calculate the window height and resize the height of images with the id 'resizing' to 70% of window height.. here is what ive written but it doesnt work and i call that function on body onload.. should i call it on img onload once ive got a working script?

    function resize_images()
    {
    var img = document.getElementById('resizing')
    var window_height = document.body.clientHeight
    var image_height = document.getElementById('resizing').height
    if(image_height = window_height / 100 * 70)
    {
    img.style.height = window_height / 100 * 70
    }
    else
    {
    img.style.height = window_height / 100 * 70
    }
    }

  2. #2
    Join Date
    Sep 2009
    Posts
    159
    I'm guessing you're confusing between = and ==?

    == is a comparison operator, whereas = is a substitution operator. Try to use comparison in the if conditional.

    Besides you could have said
    Code:
    var image_height = img.height;
    insead of
    Code:
    var image_height = document.getElementById('resizing').height;
    Another advice. It is always a good practice to put a semi-colon after each statement.
    Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

    Click jQuery vault to help us help you.

  3. #3
    Join Date
    Dec 2011
    Posts
    14
    well ive done it may way coz i want the script to affect only the elements with the id 'resizing'... thanks a lot ill try ur suggestion and report back

  4. #4
    Join Date
    Dec 2011
    Posts
    14
    nope... didnt work.. look here is the link of the site http://www.erkutacar.com/senol/beauty.php and u already know the scriptcode.. (image the borders visible to see whats going on :] )

  5. #5
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    I don't think you understand what was suggested and why.

    Code:
    var img = document.getElementById('resizing');
    var image_height = document.getElementById('resizing').height; // this is not needed
    Code:
    var image_height = img.height; // this is what you need.
    the object image when accessing a property of that object like img.height is only the same as saying document.getElementById('resizing').height;
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  6. #6
    Join Date
    Dec 2011
    Posts
    14
    Quote Originally Posted by JunkMale View Post
    I don't think you understand what was suggested and why.

    Code:
    var img = document.getElementById('resizing');
    var image_height = document.getElementById('resizing').height; // this is not needed
    Code:
    var image_height = img.height; // this is what you need.
    the object image when accessing a property of that object like img.height is only the same as saying document.getElementById('resizing').height;
    hmm ok but then how do i refer only to the images with the id #resizing?

  7. #7
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    The point I am making is that you already have "Grabbed" an instance of the object, pointless duplication of an objects information.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  8. #8
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    You can only refer to ONE id as ALL ID's have to be UNIQUE

    It is NAME tags in elements that can share, your alternative would be to use the getElementsByClass workaround and give only those elements you want changes a class name and an empty entry in the css table.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  9. #9
    Join Date
    Dec 2011
    Posts
    14
    ok ive changed it the way u said but still not working.. oh and ive tried img.height instead of im.style.height but still didnt work..

    function resize_images()
    {
    var img = document.getElementById('resizing');
    var window_height = document.body.clientHeight;
    var image_height = image.height;
    if(image_height == window_height / 100 * 70);
    {
    img.height = window_height / 100 * 70;
    }

    }

  10. #10
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    1. your posting only your script.
    2. we have no HTML to associate with your function.
    3. we have no way of knowing how you have implemented your script and code.
    4. its img.height not image.height
    Code:
    function resize_images()
     {
     var img = document.getElementById('resizing');
     var window_height = document.body.clientHeight;
     var image_height = image.height; // <---- Pardon me!
     if(image_height == window_height / 100 * 70);
     {
     img.height = window_height / 100 * 70;
     }
    
     }
    So please post your HTML so we can see what it is thats causing the function to not work in addition to the changes in the code as indicated.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  11. #11
    Join Date
    Dec 2011
    Posts
    14
    oh damn it worked then i changed image for img but only for the first pic.. as u mentioned every object should have a unique id.. so would giving a class name instead of id work?

    here is my html: (i posted the link of the page so u could see the code but i guess u didnt bother)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/resize.js"></script>
    <link rel="stylesheet" type="text/css" href="stl/stl.css" />
    <title>SENOL KOC '12</title>
    </head>

    <body onload="resize_images()">

    <table id="siteContainer" cellpadding="0" cellspacing="0">
    <tr>
    <td id="header">
    <div id="menuContainer">
    <a href="index.php" target="_top"><img id="title" alt="Senol Koc" src="pix/senol.png" /></a>
    <br /><br />
    <div id="menu">

    <div id="buttonContainer1">
    <div id="button1" style="background-color:#666;">&nbsp;</div>
    <div id="menuButton1"><a href="beauty.php">Beauty</a></div>
    </div>

    <div id="buttonContainer2">
    <div id="button2">&nbsp;</div>
    <div id="menuButton2"><a href="fashion.php">Fashion</a></div>
    </div>

    <div id="buttonContainer3">
    <div id="button3">&nbsp;</div>
    <div id="menuButton3"><a href="celeb.php">Celebrity</a></div>
    </div>

    <div id="buttonContainer4">
    <div id="button4">&nbsp;</div>
    <div id="menuButton4"><a href="portrait.php">Portraits</a></div>
    </div>

    <div id="buttonContainerSpace">
    <div id="menuSpaceThin">&nbsp;</div>
    <div id="menuSpace">&nbsp;</div>
    </div>

    <div id="buttonContainer5">
    <div id="button5">&nbsp;</div>
    <div id="menuButton5"><a href="contact.php">Contact</a></div>
    </div>

    </div>
    </div>
    </td></tr>






    <tr><td id="galleryContent">

    <table id="gallery" cellpadding="0" cellspacing="0"><tr>
    <?php
    $files = glob("beauty/*.jpg");
    for ($i=1; $i<count($files); $i++)
    {
    $num = $files[$i];
    echo '<td><img id="resizing" src="'.$num.'" alt="random image"></td>';}
    ?>
    </tr>
    </table>

    <td></tr>






    <tr><td id="footer">
    <div id="galleryFooter">
    <span id="site"><a href="index.php">www.senolkoc.com</a></span><span id="rights">&copy;&nbsp;2012&nbsp;&reg;Tum haklari saklidir.</span>
    </div>
    </td></tr>


    </table>


    </body>
    </html>

  12. #12
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    This bit in your PHP

    PHP Code:
    <img id="resizing" src="'.$num.'" alt="random image"></td
    the id could be changed to name and you use the document.getElementsByName which means you could then do...
    PHP Code:
    <img name="resizing" src="'.$num.'" alt="random image"></td
    and BTW...
    PHP Code:
    <img id='resizing' src='{$files[$i]}' alt='random image'></td
    is easier to read and open your strings and close string with " first and inner quotes of ' and where you need to have a value, as illustrated, the $num is replaced directly with $files[$i]

    Then when you got your PHP pumping out code correctly, you can then worry about the javascript as its pointless dealing with that until the underlying HTML is working or properly formatted.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  13. #13
    Join Date
    Dec 2011
    Posts
    14
    ClassName nor Name worked.. but ById worked (only for the first img) and what u said about php stopped my script it was working fine the original way..

  14. #14
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Search the internet for the function getElementByClass and also the getElementByName

    With the "Class" you use this with an empty stylesheet entyr, call it imagesize, then you apply the class="imagesize" to the <img tag you generate, then the getElementByClass will pull all elements with the class name of "imagesize" ready for your script to manipulate.

    With the getElementsByName will pull all elements by the name tag.

    Again, we have no script to see how you implemented the changes, so its stabbing in the dark time again, talking of which, I have been up since 4am and its coming up to midnight and I am offski to bedski.

    I suggest that you understand how to use these functions and the importance of getting your HTML output error free first then worry about the javascript.

    You have herd of the term / expression "Running before you can walk", well this is just that scenario, your transfixed by the javascript end of the programming which is pointless unless you have the underlying HTML sorted out.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  15. #15
    Join Date
    Dec 2011
    Posts
    14
    thnx a lot for the effort man.. ive also tried document.getElementById('gallery').getElementsByName('resizing'); but didnt work. i havent made any other changes to the html and it doesnt have any errors.. i validated it... sleep well

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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