Clipping in Javascript

Discussion in 'Javascript' started by Doug van Vianen, Jan 18, 2005.

  1. Hi,

    I am trying to show a clipped part of a picture on a webpage and
    move it on the page and/or change the clipping to a different part
    of the picture. I show the picture in the body of the page by
    using

    <div id=div1 style="position:absolute; top:200; left:400; width:200;
    height:200; z-index:1; background-image:url(ole01.jpg);
    clip:rect(0,150,50,100)"></div>

    This shows the appropriate clipped part of the picture at the correct
    location. I try to use the following Javascript code in the head to
    change the position of the picture clip:

    <script language="JavaScript">
    <!--
    function Dochange(ident) {
    var ref=document.getElementById(ident);
    ref.style.left=300;
    }
    -->
    </script>}

    and the following button in a form:

    <input type="submit" name="Change" value="Change" size=20
    onClick="Dochange('div1')">

    The code is accessed when the button is clicked (I used an alert to
    check this), but nothing happens to the position of the clipped
    picture and no error message appears. Can someone help me?

    When I get this working I would like to add any statements necessary
    in the Javascript to change the clipping area. Would it be something
    like

    ref.style.clip:rect(0,50,50,0);

    or what?

    Thank you.

    Doug van Vianen
    Doug van Vianen, Jan 18, 2005
    #1
    1. Advertising

  2. Doug van Vianen wrote:


    > <div id=div1 style="position:absolute; top:200; left:400; width:200;
    > height:200; z-index:1; background-image:url(ole01.jpg);
    > clip:rect(0,150,50,100)"></div>


    Try with
    top: 200px;
    left: 400px;
    and so on to have proper CSS and then try

    > ref.style.left=300;


    ref.style.left = '300px';
    here and


    > <input type="submit" name="Change" value="Change" size=20
    > onClick="Dochange('div1')">


    <input type="button" onClick="Dochange('div1')"
    here

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
    Martin Honnen, Jan 18, 2005
    #2
    1. Advertising

  3. Doug van Vianen

    RobB Guest

    Doug van Vianen wrote:
    > Hi,
    >
    > I am trying to show a clipped part of a picture on a webpage and
    > move it on the page and/or change the clipping to a different part
    > of the picture. I show the picture in the body of the page by
    > using
    >
    > <div id=div1 style="position:absolute; top:200; left:400; width:200;
    > height:200; z-index:1; background-image:url(ole01.jpg);
    > clip:rect(0,150,50,100)"></div>
    >
    > This shows the appropriate clipped part of the picture at the correct
    > location. I try to use the following Javascript code in the head to
    > change the position of the picture clip:
    >
    > <script language="JavaScript">
    > <!--
    > function Dochange(ident) {
    > var ref=document.getElementById(ident);
    > ref.style.left=300;
    > }
    > -->
    > </script>}
    >
    > and the following button in a form:
    >
    > <input type="submit" name="Change" value="Change" size=20
    > onClick="Dochange('div1')">
    >
    > The code is accessed when the button is clicked (I used an alert to
    > check this), but nothing happens to the position of the clipped
    > picture and no error message appears. Can someone help me?
    >
    > When I get this working I would like to add any statements necessary
    > in the Javascript to change the clipping area. Would it be something
    > like
    >
    > ref.style.clip:rect(0,50,50,0);
    >
    > or what?
    >
    > Thank you.
    >
    > Doug van Vianen
    >


    It's a CSS property, like any other, although the manipulation of it
    can get a bit sticky as the four clip values are combined.

    1) Get the element reference
    2) Specify the style.clip property
    3) Assign it a new string value in the combined format

    var el;
    if (el = document.getElementById('div1'))
    el.style.clip = 'rect(40px,auto,auto,40px)';

    Use 'auto' to return that specific clip value to fully revealed
    (unclipped).

    One of the few lovable things about Netscape 4 is it's parsing out of
    the separate clip values into read/write properties. IE exposes
    separate .currentStyle properties for each clip, but they're read-only.
    <script type="text/javascript"> ["language" attribute deprecated]
    RobB, Jan 18, 2005
    #3
  4. Hi,

    Thanks. It now works great!

    Doug van Vianen


    "Doug van Vianen" <> wrote in message
    news:Z4dHd.112937$Xk.88837@pd7tw3no...
    > Hi,
    >
    > I am trying to show a clipped part of a picture on a webpage and
    > move it on the page and/or change the clipping to a different part
    > of the picture. I show the picture in the body of the page by
    > using
    >
    > <div id=div1 style="position:absolute; top:200; left:400; width:200;
    > height:200; z-index:1; background-image:url(ole01.jpg);
    > clip:rect(0,150,50,100)"></div>
    >
    > This shows the appropriate clipped part of the picture at the correct
    > location. I try to use the following Javascript code in the head to
    > change the position of the picture clip:
    >
    > <script language="JavaScript">
    > <!--
    > function Dochange(ident) {
    > var ref=document.getElementById(ident);
    > ref.style.left=300;
    > }
    > -->
    > </script>}
    >
    > and the following button in a form:
    >
    > <input type="submit" name="Change" value="Change" size=20
    > onClick="Dochange('div1')">
    >
    > The code is accessed when the button is clicked (I used an alert to
    > check this), but nothing happens to the position of the clipped
    > picture and no error message appears. Can someone help me?
    >
    > When I get this working I would like to add any statements necessary
    > in the Javascript to change the clipping area. Would it be something
    > like
    >
    > ref.style.clip:rect(0,50,50,0);
    >
    > or what?
    >
    > Thank you.
    >
    > Doug van Vianen
    >
    >
    >
    Doug van Vianen, Jan 18, 2005
    #4
  5. Doug van Vianen

    RobG Guest

    RobB wrote:
    [...]
    > if (el = document.getElementById('div1'))
    > el.style.clip = 'rect(40px,auto,auto,40px)';


    Probably should test style too:

    if (el = document.getElementById('div1') && el.style)
    ...


    --
    Rob
    RobG, Jan 19, 2005
    #5
  6. Doug van Vianen

    RobB Guest

    RobG wrote:
    > RobB wrote:
    > [...]
    > > if (el = document.getElementById('div1'))
    > > el.style.clip = 'rect(40px,auto,auto,40px)';

    >
    > Probably should test style too:
    >
    > if (el = document.getElementById('div1') && el.style)
    > ...
    >
    >
    > --
    > Rob


    Why? Are there browsers that support getElementById and not Style
    objects?
    RobB, Jan 19, 2005
    #6
  7. RobB wrote:
    > RobG wrote:
    >> RobB wrote:
    >> [...]
    >> > if (el = document.getElementById('div1'))
    >> > el.style.clip = 'rect(40px,auto,auto,40px)';

    >>
    >> Probably should test style too:
    >>
    >> if (el = document.getElementById('div1') && el.style)
    >> ...

    <snip>
    > Why? Are there browsers that support getElementById and
    > not Style objects?


    If - document.getElementById - has been emulated in its absence for
    increased back compatibility then there is every chance that it will
    return element references that do not implement a - style - object. This
    would be particularly significant for authors of code that may be
    deployed alongside code written by others as the fact that you know that
    you did not emulate getElementById in its absence does not guarantee
    that those other authors haven't.

    Generally it is best to verify everything practical in javascript, and
    therefor worth considering how that testing may effectively be done
    without itself becoming a burden to the executing code.

    Richard.
    Richard Cornford, Jan 19, 2005
    #7
  8. Doug van Vianen

    RobG Guest

    RobB wrote:

    [...]
    > Why? Are there browsers that support getElementById and not Style
    > objects?
    >


    I have no idea, maybe not - but support for one feature should not be
    used to infer support for another. Unless you can guarantee that every
    browser that supports getElementById *does* support the style object,
    it seems prudent to test it.

    --
    Rob
    RobG, Jan 19, 2005
    #8
  9. Doug van Vianen

    Grant Wagner Guest

    "RobG" <> wrote in message
    news:r1mHd.213$...
    > RobB wrote:
    > [...]
    >> That would seem to be the operant question: when does
    >> pants-and-suspenders (and cummerbund & drawstring) object testing of

    >
    > Belt and braces? ;-)
    >
    >> this sort become a 'burden', occupying a significant volume of the
    >> codebase? I've never seen a script which intentionally enhanced
    >> functionality by patching in getElementById in user agents which did
    >> not implement Style objects, although I suppose anything is possible.
    >> Should everything be tested for before assuming its implementation?
    >> When may asumptions be made?

    >
    > A good question and worth pondering. However, before navel gazing,
    > lets look at the practicalities. I put each of the following into a
    > separate function, then called them 1000 times from separate
    > functions,
    > hopefully avoiding any conflicts between the two:


    It is neither a performance issue, nor a burden, if handled properly:

    Once at the beginning of your code you could do:

    document.getElementStyleById = (function()
    {
    if (document.getElementById)
    {
    return function(id)
    {
    var node;
    if ((node = document.getElementById(id)) && node.style)
    {
    return node.style;
    }
    return null;
    }
    }
    else if (document.all)
    {
    return function(id)
    {
    var node;
    if ((node = document.all[id]) && node.style)
    {
    return node.style;
    }
    return null;
    }
    }
    })();

    By the way, I'm surprised no one noticed, but:

    if (node = document.getElementById(id) && node.style)

    won't work. It will be interpreted as:

    if (node = (document.getElementById(id) && node.style))

    and generate an error that "node has no properties" (or worse, test
    the -style- property of some other object assigned to -node-). To make
    it work properly, you need extra brackets:

    if ((node = (document.getElementById(id)) && node.style)

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Jan 20, 2005
    #9
  10. JRS: In article <b%THd.112$>, dated Thu, 20 Jan
    2005 19:53:43, seen in news:comp.lang.javascript, Grant Wagner
    <> posted :
    >
    >document.getElementStyleById = (function()
    >{
    > if (document.getElementById)
    > {
    > return function(id)
    > {
    > var node;
    > if ((node = document.getElementById(id)) && node.style)
    > {
    > return node.style;
    > }
    > return null;
    > }
    > }
    > else if (document.all)
    > {
    > return function(id)
    > {
    > var node;
    > if ((node = document.all[id]) && node.style)
    > {
    > return node.style;
    > }
    > return null;
    > }
    > }
    >})();


    Would the following not work, assuming I've correctly edited gESBI ?

    if (document.all && !document.getElementById) {
    document.getElementById = function(id) {
    return document.all[id] } }

    document.getElementStyleById = (function()
    {
    return function(id)
    {
    var node;
    if ((node = document.getElementById(id)) && node.style)
    {
    return node.style;
    }
    return null;
    }
    })();

    Having executed the first part is likely to be useful elsewhere.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Jan 21, 2005
    #10
  11. Doug van Vianen

    Grant Wagner Guest

    "Dr John Stockton" <> wrote in message
    news:...
    > JRS: In article <b%THd.112$>, dated Thu, 20 Jan
    > 2005 19:53:43, seen in news:comp.lang.javascript, Grant Wagner
    > Would the following not work, assuming I've correctly edited gESBI ?
    >
    > if (document.all && !document.getElementById) {
    > document.getElementById = function(id) {
    > return document.all[id] } }
    >
    > document.getElementStyleById = (function()
    > {
    > return function(id)
    > {
    > var node;
    > if ((node = document.getElementById(id)) && node.style)
    > {
    > return node.style;
    > }
    > return null;
    > }
    > })();
    >
    > Having executed the first part is likely to be useful elsewhere.


    Yes, when I wrote my example I was thinking that it was pretty obvious
    that I had a lot of duplicate code there, but I didn't give much thought
    about how to best factor out the commonality. Although the second part
    doesn't need to return a function now and could be re-written as:

    document.getElementStyleById = function(id)
    {
    var node;
    if ((node = document.getElementById(id)) && node.style)
    {
    return node.style;
    }
    return null;
    }
    }

    One point, and both you and I are guilty of doing it. We are treating
    document.all[id] as equivilent to document.getElementById(id), and they
    are not. It is possible for document.all[id] to return a NodeList,
    document.getElementById(id) never will (or should not).

    Extra code (or care) is required to ensure that document.all[] returns a
    single Node. A simple solution to prevent any errors might be:

    if (document.all && !document.getElementById) {
    document.getElementById = function(id)
    {
    var node = document.all[id];
    if (node && 'undefined' != typeof node.length)
    {
    return node[0];
    }
    else
    {
    return node;
    }
    }
    }

    Whether returning the first Node of a NodeList of matches is "correct"
    would have to be determined by the situation.

    --
    Grant Wagner <>
    comp.lang.javascript FAQ - http://jibbering.com/faq
    Grant Wagner, Jan 21, 2005
    #11
  12. JRS: In article <2QcId.115$>, dated Fri, 21 Jan
    2005 19:35:26, seen in news:comp.lang.javascript, Grant Wagner
    <> posted :


    >One point, and both you and I are guilty of doing it. We are treating
    >document.all[id] as equivilent to document.getElementById(id), and they
    >are not. It is possible for document.all[id] to return a NodeList,
    >document.getElementById(id) never will (or should not).
    >
    >Extra code (or care) is required to ensure that document.all[] returns a
    >single Node. A simple solution to prevent any errors might be:
    >
    >if (document.all && !document.getElementById) {
    > document.getElementById = function(id)
    > {
    > var node = document.all[id];
    > if (node && 'undefined' != typeof node.length)
    > {
    > return node[0];
    > }
    > else
    > {
    > return node;
    > }
    > }
    >}
    >
    >Whether returning the first Node of a NodeList of matches is "correct"
    >would have to be determined by the situation.



    (a) I suppose getElementById will return the first of a list.

    (c) The substitute getElementById needs to be documented to say
    specifically when it will, or may, return a nodelist. So does FAQ
    DynWrite.

    (c) The identifier document.getElementById is rather long; maybe it
    is better to define a function findID to use instead.


    So I'd try

    if (document.all && !document.getElementById) {

    findID = function(id) {
    var node = document.all[id];
    return (node && 'undefined' != typeof node.length) ? node[0] : node
    }

    }


    If it was felt useful to have document.all[id] return a nodelist,
    then ISTM that it should be useful to have code so that IE6 cam also get
    a list :-

    if (!document.all && document.getElementById) { ... // ??


    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Jan 22, 2005
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dixon
    Replies:
    4
    Views:
    561
    Piotr Dobrowolski
    Jan 30, 2006
  2. Steve
    Replies:
    3
    Views:
    4,155
    Steve
    Jan 22, 2004
  3. john
    Replies:
    1
    Views:
    608
    alan.washington
    Oct 20, 2004
  4. humbads
    Replies:
    4
    Views:
    1,242
    Shailesh Humbad
    Feb 16, 2006
  5. soren625
    Replies:
    2
    Views:
    371
    soren625
    Dec 12, 2006
Loading...

Share This Page