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 co*****@shaw.ca 14 2015
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/
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 co*****@shaw.ca
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]
Hi,
Thanks. It now works great!
Doug van Vianen co*****@shaw.ca
"Doug van Vianen" <co*****@shaw.ca> 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 co*****@shaw.ca
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 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 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.
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
Richard Cornford wrote: 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?
(snip)
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.
That would seem to be the operant question: when does
pants-and-suspenders (and cummerbund & drawstring) object testing of
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?
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:
if (document.getElementById) {var x = document.getElementById('rob')}
versus:
var x = document.getElementById('rob');
for 1,000 iterations took approximately 30 ms and 15 ms respectively -
though in Firefox the tested script sometimes ran in 15 ms also. IE
gave similar but less consistent results. The tested script sometimes
ran in 47ms, and the untested one often took 30ms.
So even testing a feature every time it's used will likely cause an
insignificant delay in program execution (I would think that anyone
calling gEBI 1000 times has more issues with program design in general
than with optimising their feature testing).
Therefore given the minimal overhead that thorough testing costs, why
not go for thoroughness and elegance within reason and just do it?
PS.
I also took the time to test using an array length versus setting a
variable in the for loop, e.g.:
for (var i=0; i< z.length, i++)
versus
for (var i=0, len=z.length; i<len; i++)
There was no measurable difference between the two.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>demo</title>
<script type="text/javascript">
function testYes() {
if (document.getElementById) {
var x = document.getElementById('rob1');
}
}
function testNo() {
var x = document.getElementById('rob2');
}
function runTest1() {
var now0 = new Date();
for ( var i=0; i<1000; i++ ){
testYes();
}
var now1 = new Date();
var elapsed = now1.getTime() - now0.getTime();
alert('Feature tested: ' + elapsed);
}
function runTest2() {
var now0 = new Date();
for ( var i=0; i<1000; i++ ){
testNo();
}
var now1 = new Date();
var elapsed = now1.getTime() - now0.getTime();
alert('Not feature tested: ' + elapsed);
}
</script>
</head>
<body>
<div id="rob1" onclick="runTest1();">tested</div>
<div id="rob2" onclick="runTest2();">untested</div>
</body>
</html>
--
Rob
"RobG" <rg***@iinet.net.auau> wrote in message
news:r1*****************@news.optus.net.au... 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 <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
JRS: In article <b%***************@news2.mts.net>, dated Thu, 20 Jan
2005 19:53:43, seen in news:comp.lang.javascript, Grant Wagner
<gw*****@agricoreunited.com> 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" <sp**@merlyn.demon.co.uk> wrote in message
news:tZ**************@merlyn.demon.co.uk... JRS: In article <b%***************@news2.mts.net>, 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 <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
JRS: In article <2Q***************@news2.mts.net>, dated Fri, 21 Jan
2005 19:35:26, seen in news:comp.lang.javascript, Grant Wagner
<gw*****@agricoreunited.com> 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.
John Stockton wrote:
<--snip--> 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) { ... // ??
IE6 fails that test since it has document.all.
Gecko based browsers pass that test.
if (document.all && document.getElementById){
//It might be IE5+, might not be.
}
If you want a document.all nodelist, just use document.all
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: John Hunter |
last post by:
Does gd lib or gdmodule support clipping? I would like to set a clip
rectangle and when I issue drawing commands (like im.polygon) have
only the part of the polygon inside the clip rectangle...
|
by: Douglas Alan |
last post by:
Is there a way to tell Tkinter that I'd like to allow a window to be
resizable, but only down to the point where no widget clipping occurs?
I know that to get the effect I want, I can always (1)...
|
by: David King |
last post by:
Hi,
I have an hidden DIV in my HTML page. I display it by changing its
visibility property.
My problem is that if this DIV is found outside the frame of the
window (you need to scroll to view...
|
by: Jeff Thies |
last post by:
I'm having trouble clipping an image. My understanding is that this is all
I should need:
<img src="test_img.jpg" style="clip: rect(10px 10px 10px 10px)" alt="alt">
Although I've seen this as...
|
by: phil cunningham |
last post by:
Does anyone know of a good library to handle Polygon clipping in C#.
This would require clipping of shapes with FLOAT verteces and we need the
capability of clipping one Polygon against another...
|
by: Pugi! |
last post by:
I am currently experimenting a bit with clipping (with banners).
1. Is it possible to do more then one clipping on a image. For example:
image of 400px x 80 px:
var TELLER = 0;
function...
|
by: Andy Baxter |
last post by:
hello,
I'm writing a panoramic image viewer in html / javascript. The idea is I
have a div with two identical panoramic photographs embedded in it. The
clipping on the div is set to make it a...
|
by: soren625 |
last post by:
I have searched this (and other) groups extensively, in addition to the
clj FAQ and the Web, and (to my surprise) this question doesn't come up
as often as I thought it would. Maybe this is because...
|
by: dongarbage |
last post by:
Hi there,
I have a panel that I'm trying to draw lines on based on mouse events.
I'm using a Graphics object to do this. However, the region that the
graphics object will draw lines in is...
|
by: erikbower65 |
last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps:
1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal.
2. Connect to...
|
by: linyimin |
last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
|
by: erikbower65 |
last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA:
1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
|
by: kcodez |
last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
|
by: Taofi |
last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same
This are my field names
ID, Budgeted, Actual, Status and Differences
...
|
by: Rina0 |
last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
|
by: DJRhino |
last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer)
If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _
310030356 Or 310030359 Or 310030362 Or...
|
by: lllomh |
last post by:
How does React native implement an English player?
|
by: Mushico |
last post by:
How to calculate date of retirement from date of birth
| |