Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Clipping in Javascript

Reply
Thread Tools

Clipping in Javascript

 
 
Doug van Vianen
Guest
Posts: n/a
 
      01-18-2005
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
http://www.velocityreviews.com/forums/(E-Mail Removed)


 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      01-18-2005


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/
 
Reply With Quote
 
 
 
 
RobB
Guest
Posts: n/a
 
      01-18-2005
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
> (E-Mail Removed)


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]

 
Reply With Quote
 
Doug van Vianen
Guest
Posts: n/a
 
      01-18-2005
Hi,

Thanks. It now works great!

Doug van Vianen
(E-Mail Removed)

"Doug van Vianen" <(E-Mail Removed)> 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
> (E-Mail Removed)
>
>



 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-19-2005
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
 
Reply With Quote
 
RobB
Guest
Posts: n/a
 
      01-19-2005
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?

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      01-19-2005
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.


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-19-2005
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
 
Reply With Quote
 
Grant Wagner
Guest
Posts: n/a
 
      01-20-2005
"RobG" <(E-Mail Removed)> wrote in message
news:r1mHd.213$(E-Mail Removed)...
> 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 <(E-Mail Removed)>
comp.lang.javascript FAQ - http://jibbering.com/faq


 
Reply With Quote
 
Dr John Stockton
Guest
Posts: n/a
 
      01-21-2005
JRS: In article <b%THd.112$(E-Mail Removed)>, dated Thu, 20 Jan
2005 19:53:43, seen in news:comp.lang.javascript, Grant Wagner
<(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Clipping a remote webpage with Javascript/XPath and including in a "local" webpage soren625 Javascript 2 12-12-2006 02:09 PM
challenge: auto-clipping text on resize humbads HTML 4 02-16-2006 01:32 AM
Clipping a pic and saving it in a file in DOT NET Dixon ASP .Net 4 01-30-2006 03:11 PM
How can I force clipping of text in a table cell? john ASP .Net 1 10-20-2004 07:23 PM
how to force clipping or wrapping? Steve ASP .Net 3 01-22-2004 03:09 PM



Advertisments