www.webdeveloper.com
Results 1 to 11 of 11

Thread: Aligning print fields

  1. #1
    Join Date
    May 2011
    Posts
    101

    Aligning print fields

    Hi All

    Can anyone hazard a guess at why THIS works:

    Code:
    function moveUp() {
    var presentPos = document.getElementById("box1").style.top;
    var intPosition = parseInt(presentPos);
    intPosition = intPosition - 10;
    var newPosition = intPosition +'px';
    document.getElementById("box1").style.top = newPosition;
    }
    and yet THIS doesn't:

    Code:
    function moveLeft() {
    var presentPos = document.getElementById("box1").style.left;
    var intPosition = parseInt(presentPos);
    intPosition = intPosition - 10;
    var newPosition = intPosition +'px';
    document.getElementById("box1").style.left = newPosition;
    }
    ?

    Thanks in adv.

    Chris
    Sometimes, when you re-invent the wheel, you end up with a better wheel.
    ---------------------------------------------
    One-on-One Scripting Tuition/Mentoring

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Style.top and style.left are only available if the have been informed before !

    You have to use offsetTop or offsetLeft (see this page) to read the position and style.top or left to move the box.

    Another method is to use this function whose existence is interesting to know.

  3. #3
    Join Date
    May 2011
    Posts
    101
    Thanks for reply, 007Julien.
    -
    The original left and top ARE set in the CSS,
    as is position: absolute for the element:
    Code:
    #box1 {
      border: 2px solid black;
      position: absolute;
      height: 100px;
      width: 400px;
      top: 100px;
      left: 100px;
      
    }
    The odd thing about the code is that style.top works
    fine and yet style.left doesn't.

    Both fail to work in IE8, but that neither surprises nor bothers me.

    Chris
    Sometimes, when you re-invent the wheel, you end up with a better wheel.
    ---------------------------------------------
    One-on-One Scripting Tuition/Mentoring

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    For me it's work fine (in IE 8, FF 5.0, Opéra 11.11, Safari 5.0.5 and Google Chrome 12.0.742.112) with offsetTop and offserLeft instead of style.top and style.left !

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    Perhaps a div whitout HTML style attribut has a height but not a width ???

    See this page JavaScript style objects and properties for further developments...

  6. #6
    Join Date
    May 2011
    Posts
    101
    Sorry for the bump but this is really annoying me, now.
    -
    In every modern browser except IE8 or IE7, this works perfectly:

    Code:
    function moveUp() {
    var box = document.getElementById("boxSelect").value;
    y -= 10;
    document.getElementById(box).style.top = y +"px";
    }
    In other words, the value of box is fetched from a pick-list
    and the appropriate <div> gets moved correctly.

    In Internet Exploder, the script gets interrupted on the
    Code:
    document.getElementById(box).style.top = y +"px";
    line, with an 'invalid argument' exception.

    Has anyone any ideas for a workaround ?
    I'm not fond of using 'if(ie)' hacks but I will on this occasion
    if anyone can supply one !

    Thanks for patience.

    Chris

    Although it doesn't relate directly to the problem, I am nevertheless grateful
    to you, 007Julien, for pointing me at the Sophox blog, where I learned
    several things I didn't know before !
    Last edited by chriseccles; 07-07-2011 at 04:03 AM. Reason: Thanks
    Sometimes, when you re-invent the wheel, you end up with a better wheel.
    ---------------------------------------------
    One-on-One Scripting Tuition/Mentoring

  7. #7
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    For me your two first function give, at the first call, a inexistant value for presentPos in all moderne browsers (IE, Mozilla Firefox, Google Chrome, Op&#233;ra and Safari) and your last exemple works perfectly in IE8 if you replace y by box !

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    function moveUp() {
    var box = document.getElementById("boxSelect").value;
    y -= 10;
    box.style.top = y +"px";
    }

  9. #9
    Join Date
    May 2011
    Posts
    101
    Thanks for getting involved, lads, because this is really starting to
    become quite tricky, now !

    Quote Originally Posted by criterion9 View Post
    function moveUp() {
    var box = document.getElementById("boxSelect").value;
    y -= 10;
    box.style.top = y +"px";
    }
    That doesn't work, criterion9. Maybe you misunderstood what is in
    the <select> tag named 'boxSelect'. The <option>'s there are strings,
    "box1", "box2", etc, equivalent to the ID's of the <div>'s to be moved.
    In your reply (for which I am grateful), 'box' is just a string and not a DOM
    object, and therefore cannot be styled. What I'm tripping up on, here, is in
    attempting to pass the <div> name contained in 'box' as a parameter
    to the getElementById() method. In other words, I want to make an DOM object
    from the HTML element named by whatever is in the <select> element.

    Quote Originally Posted by 007Julien View Post
    For me your two first function give, at the first call, a inexistant value for presentPos in all moderne browsers (IE, Mozilla Firefox, Google Chrome, Opéra and Safari) and your last exemple works perfectly in IE8 if you replace y by box !
    Non-existent values I can live with, 007Julien, because these could always be set
    in Javascript onLoad, anyway. I just don't get your 'replace y by box ' ! That just
    falls over, here - no results at all, because 'box' is a string value derived from the
    drop-down list in the 'boxSelect' <select /> tag. I'm developing on Safari and IE8 in
    parallel, with occasional cross-checks in Windows Firefox and Apple Firefox to keep
    a lid on Mozilla oddities.

    The main functionality of the moveXx() functions is actually working OK across
    all browsers, using style.top and style.left, with the proviso that I hard code the
    <div> name into the function
    , which totally defeats the objective of having the
    user decide in the drop-down which box he/she wants to actually move about ! ! !

    Don't want to be a pain but really need to resolve this otherwise the page will get
    cluttered up with more button elements than sane users could cope with.

    Thanks for all help.

    Chris
    Sometimes, when you re-invent the wheel, you end up with a better wheel.
    ---------------------------------------------
    One-on-One Scripting Tuition/Mentoring

  10. #10
    Join Date
    Jan 2009
    Posts
    3,346
    Quote Originally Posted by chriseccles View Post
    Thanks for getting involved, lads, because this is really starting to
    become quite tricky, now !



    That doesn't work, criterion9. Maybe you misunderstood what is in
    the <select> tag named 'boxSelect'. The <option>'s there are strings,
    "box1", "box2", etc, equivalent to the ID's of the <div>'s to be moved.
    In your reply (for which I am grateful), 'box' is just a string and not a DOM
    object, and therefore cannot be styled. What I'm tripping up on, here, is in
    attempting to pass the <div> name contained in 'box' as a parameter
    to the getElementById() method. In other words, I want to make an DOM object
    from the HTML element named by whatever is in the <select> element.



    Non-existent values I can live with, 007Julien, because these could always be set
    in Javascript onLoad, anyway. I just don't get your 'replace y by box ' ! That just
    falls over, here - no results at all, because 'box' is a string value derived from the
    drop-down list in the 'boxSelect' <select /> tag. I'm developing on Safari and IE8 in
    parallel, with occasional cross-checks in Windows Firefox and Apple Firefox to keep
    a lid on Mozilla oddities.

    The main functionality of the moveXx() functions is actually working OK across
    all browsers, using style.top and style.left, with the proviso that I hard code the
    <div> name into the function
    , which totally defeats the objective of having the
    user decide in the drop-down which box he/she wants to actually move about ! ! !

    Don't want to be a pain but really need to resolve this otherwise the page will get
    cluttered up with more button elements than sane users could cope with.

    Thanks for all help.

    Chris
    Can we see the select code please? Have you explicitly set the value for each option?

  11. #11
    Join Date
    May 2011
    Posts
    101

    Resolved*

    Hi, criterion9.
    -
    By means of a back-to-the-drawing-board approach, I seem to
    have resolved this problem, and I am grateful for 007Julien's help
    in directing me to look at the SOPHOX pages, because that is where
    I found the clue to getting this to work.
    -
    For the benefit of others, I am posting an abridged form of the code
    for the page which seems to work fine on IE8, IE9 (tested by my son),
    Safari 4, Safari 5 (OSX10.5.8), Firefox and Opera. Allowing users to
    line up fields for printing might become increasingly useful in cloud
    applications so I hope this solution to my original problem has some
    long-term benefits !

    Here is the HTML/Javascript (abridged for only two boxes):

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<title>PRINT TESTS</title>
    	
    	<style type="text/css" media="all">
    	  @import "print.css";
    	</style>
    
    <script type="text/javascript">
    
    function moveUp() {
    var a = parseInt(y);
    a -= 10;
    y = a + "px";
    document.getElementById(selected).style.top = y;
    }
    function moveDown() {
    var a = parseInt(y);
    a += 10;
    y = a + "px";
    document.getElementById(selected).style.top = y;
    }
    function moveLeft() {
    var a = parseInt(x);
    a -= 10;
    x = a + "px";
    document.getElementById(selected).style.left = x;
    }
    function moveRight() {
    var a = parseInt(x);
    a += 10;
    x = a + "px";
    document.getElementById(selected).style.left = x;
    }
    
     function getPositionValues(el) { 
       selected = el.id;
       var cs;
       y = 0;
       x = 0; 
       if (window.getComputedStyle) { 
          cs  = getComputedStyle(el, null); 
          y = cs.getPropertyValue("top"); 
          x = cs.getPropertyValue("left"); 
       } else {
         y = el.currentStyle["top"];
         x = el.currentStyle["left"];
         }      
    }
     
    </script>
    
    </head>
    <body>
    
    <div class="container">
    
    <div id="box1" class="printBox1" onClick="getPositionValues(this)">
    <div>
    <span id="labelField1" class="inlineL">Data Field Box 1</span>
    </div>
    </div>
    
    <div id="box2" class="printBox1" onClick="getPositionValues(this)">
    <div>
    <span id="labelField1" class="inlineL">Data Field Box 2</span>
    </div>
    </div>
    
    
    <div class="buttonPanel">
    Click on a print field to select it,<br/>
    then use these buttons to move field:
    <div>
    <input type="button" value="UP" onClick="moveUp()"/>
    <input type="button" value="DOWN" onClick="moveDown()"/>
    <input type="button" value="LEFT" onClick="moveLeft()"/>
    <input type="button" value="RIGHT" onClick="moveRight()"/>
    </div>
    
    </div>
    
    </body>
    </html>
    and the CSS:

    Code:
    .inlineL {
      font-size: 10px;
      color: red;
      margin: 0px 10px 0px 10px ;
    }
    .container {
      position: absolute;
     
    }
    .buttonPanel {
      position: relative;
      top: 500px;
      float: right;
    }
    #box1 {
      border: 2px solid black;
      position: absolute;
      height: 100px;
      width: 400px;
      top: 10px;
      left: 100px;
      
    }
    #box2 {
      border: 3px solid yellow;
      position: absolute;
      height: 100px;
      width: 400px;
      top: 150px;
      left: 100px;
      
    }
    Thanks for everyone's patience with my niggles.

    Chris
    Sometimes, when you re-invent the wheel, you end up with a better wheel.
    ---------------------------------------------
    One-on-One Scripting Tuition/Mentoring

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