Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Upside-UP page using DIV tag

    Upside-UP page using DIV tag
    jayakodiu@yahoo.com

    Scientific and tech docs need a page with Y-axis upwards for layouts, charts etc mostly using lines and text, unlike standard web pages where the axis is upside-down. Commercial software use complex methods for an upright page and this snippet uses simple technique as demonstrated in the code below.

    Important:

    Tested and used in IE.
    All elements are to be with style.filter:flipv
    Textarea will have its caret unseen.
    Clipping of DIV shall be avoided.
    (Any clue on what is happening with the caret and clip is welcome)

    ----------
    <HTML xmlns:v ="urn:schemas-microsoft-com:vml"><HEAD><STYLE>
    v\:* {BEHAVIOR:url(#default#VML);position:absolute}
    div{position:absolute;filter:flipv}
    body{margin:0}
    </style>
    <script>
    function upup(){
    cnv.style.overflow='scroll'
    ww=cnv.scrollWidth
    hh=cnv.scrollHeight
    cnv.style.overflow='hidden'
    cnv.style.width=ww
    cnv.style.height=hh
    window.scrollTo(0,hh)}

    function mov(){
    h=cnv.offsetHeight
    x=document.body.scrollLeft+window.event.x-2
    y=h-document.body.scrollTop-window.event.y+2
    window.status=x+','+y}

    function pts(x,y,w,h){
    var ele=cnv.appendChild(document.createElement('div'))
    ele.style.left=x
    ele.style.top=y
    ele.style.width=w
    ele.style.height=h
    ele.style.background=clr
    upup()}

    function htx(x,y,tx){
    var ele=cnv.appendChild(document.createElement('div'))
    ele.style.left=x
    ele.style.top=y
    ele.innerText=tx
    upup()}

    function vtx(x,y,tx){
    var ele=cnv.appendChild(document.createElement('div'))
    ele.style.left=x
    ele.style.top=y
    ele.style.filter='progidXImageTransform.Microsoft.BasicImage(rotation=3) flipv()'
    ele.innerText=tx
    upup()}

    function lin(x1,y1,x2,y2){
    var ele=cnv.appendChild(document.createElement('v:line'))
    ele.from=x1+","+y1
    ele.to=x2+","+y2
    ele.strokeColor=clr
    ele.strokeWeight=stw
    upup()}
    </script>
    </head>
    <body onload=upup()>
    <div id=cnv onmousemove=mov()

    style="width:20;height:20;background:#eeeeee;cursor:crosshair">
    <div style="left:190;top:240;width:20;height:20;background:red"></div>
    <div style="left:212;top:240">20x20 square centered at 200,250</div>
    <div style="left:1180;top:1180;width:20;height:20;background:yellow"></div>
    <div>This page provides for Cartesian world with origin 0,0 at the<br>
    LHS bottom, needed for several scientific and technical documents.<br>
    The coordinates are tracked in the status bar.<br>
    This page is 1200x1200 as defined by the yellow square; with this<br>
    technique we can as well have a 'cartesian window' within a standaed page.</div>
    <div style="left:400;top:300;color:red"><u>CAUTION:</u><br>
    All elements shall have style.filter:flipv<br>
    Textarea will hasve its caret 'elsewhere'<br>
    Do not use style.clip:rect(0,x,y,0)<br>
    Call upup after dynamically adding elements</div>
    </div>
    </body>
    <script>
    var clr,stw,ele

    clr='blue'
    pts(290,140,20,20)
    htx(312,140,'20x20 square centered at 300,150')

    clr='black'
    pts(90,140,20,20)
    vtx(90,162,'20x20 square centered at 100,150')

    clr='#ffff00'
    stw=2
    lin(100,150,200,250)
    lin(200,250,300,150)
    lin(300,150,100,150)
    </script>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts
    I believe this is a MSIE only solution.


  •  

    Posting Permissions

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