469,352 Members | 1,794 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,352 developers. It's quick & easy.

Dynamically Change CSS layer dimensions?

I don't know much about javascript, so take it easy on me. Is there a way to
dynamically change a CSS layers dimensions on the fly. Here is what I'm
doing. I have a bunch of thumbnails that when clicked on, will open up the
full view in a CSS layer, as opposed to a pop-up window let's say. I had
this before, but with one layer for each image, and as you might imagine,
the markup was way too bloated. So can I just change the css layers
dimensions on the fly. It is important that the layer be sized precisely
because, there is content surrounding the image, like a close button that
hides the layer.
Jul 20 '05 #1
10 8893
"TheKeith" <no@spam.com> writes:
I don't know much about javascript, so take it easy on me. Is there a way to
dynamically change a CSS layers dimensions on the fly.
I *think* I know what you are talking about. However, the word "layer" is
being used with several different meanings, so it should be avoided when
you want to be precise.

What you have is probably an absolutely positioned block element.

You can change its dimensions by setting the CSS properties "width"
and "height".

var elem = document.getElementById("divId");
elem.style.width = "200px";
elem.style.height = "300px"
It is important that the layer be sized precisely because, there is
content surrounding the image, like a close button that hides the
layer.


You'll have to find the size you need then.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #2

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...
"TheKeith" <no@spam.com> writes:
I don't know much about javascript, so take it easy on me. Is there a way to dynamically change a CSS layers dimensions on the fly.


I *think* I know what you are talking about. However, the word "layer" is
being used with several different meanings, so it should be avoided when
you want to be precise.

What you have is probably an absolutely positioned block element.

You can change its dimensions by setting the CSS properties "width"
and "height".

var elem = document.getElementById("divId");
elem.style.width = "200px";
elem.style.height = "300px"
It is important that the layer be sized precisely because, there is
content surrounding the image, like a close button that hides the
layer.


You'll have to find the size you need then.


Thanks a lot I really appreciate it. I'm trying to modify your code a little
so that it works as a function. My javascript isn't very good--can you take
a look at what I got and tell me what's wrong?
<html>
<head>
<script type="text/JavaScript">
<!--
function twohundredsquare(divid,divwidth,divheight) {
boxdimensions = getElementById (divid);
boxdimensions.style.width = divwidth;
boxdimensions.style.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascript:twohundredsquare("blue","200px"," 200px");">change to 200
x 200</a><br>
<div id="blue" style="position:absolute; left:209px; top:89px; width:115px;
height:95px; z-index:1; background-color: #0000FF; layer-background-color:
#0000FF; border: 1px none #000000;"></div>
</body>
</html>
Basically the link is supposed to change the dimensions of the div element
by calling on that function. Any help would be great--thanks.
Jul 20 '05 #3
"TheKeith" <no@spam.com> wrote in message
news:9p********************@giganews.com...

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...
"TheKeith" <no@spam.com> writes:
I don't know much about javascript, so take it easy on me. Is there a way to dynamically change a CSS layers dimensions on the fly.
I *think* I know what you are talking about. However, the word "layer" is being used with several different meanings, so it should be avoided when
you want to be precise.

What you have is probably an absolutely positioned block element.

You can change its dimensions by setting the CSS properties "width"
and "height".

var elem = document.getElementById("divId");
elem.style.width = "200px";
elem.style.height = "300px"
It is important that the layer be sized precisely because, there is
content surrounding the image, like a close button that hides the
layer.


You'll have to find the size you need then.


Thanks a lot I really appreciate it. I'm trying to modify your code a

little so that it works as a function. My javascript isn't very good--can you take a look at what I got and tell me what's wrong?
<html>
<head>
<script type="text/JavaScript">
<!--
function twohundredsquare(divid,divwidth,divheight) {
boxdimensions = getElementById (divid);
boxdimensions.style.width = divwidth;
boxdimensions.style.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascript:twohundredsquare("blue","200px"," 200px");">change to 200 x 200</a><br>
<div id="blue" style="position:absolute; left:209px; top:89px; width:115px; height:95px; z-index:1; background-color: #0000FF; layer-background-color:
#0000FF; border: 1px none #000000;"></div>
</body>
</html>
Basically the link is supposed to change the dimensions of the div element
by calling on that function. Any help would be great--thanks.

nevermind, I got it working. Here is what I did:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function viewer_dimensions(divid,divwidth,divheight) {
specs = document.getElementById(divid);
specs.style.width = divwidth;
specs.style.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascript:viewer_dimensions('blue','200px', '200px')">change to 200
x 200</a>
<div id="blue" style="position:absolute; left:209px; top:89px; width:115px;
height:95px; z-index:1; background-color: #0000FF"></div>
</body>
</html>
Jul 20 '05 #4
"TheKeith" <no@spam.com> writes:
nevermind, I got it working. Here is what I did:
Remember to add a !DOCTYPE declaration for the version of HTML that you use.
It can also put modern browsers in standards mode.
<script type="text/JavaScript">
<!--
You don't need HTML comments in your Javascript code.
function viewer_dimensions(divid,divwidth,divheight) {
specs = document.getElementById(divid);
I would make "specs" a local variable instead of a global one. I.e.,
var specs = document.getElementById(divid):
<a href="javascript:viewer_dimensions('blue','200px', '200px')">change to 200
x 200</a>


It is not recommended to use javascript:-URI's.
<URL:http://jibbering.com/faq/#FAQ4_24>
The intended usage of these is to return the new content of the page,
so using them can cause the current page to disappear, if one is not
careful. If you just want to run some code, use the onclick attribute:
<a href="WhyYouNeedJS.html"
onclick="viewer_dimensions('blue','200px','200px') ;return false;">

Otherwise, good luck :)
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #5

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:7k**********@hotpop.com...
"TheKeith" <no@spam.com> writes:
nevermind, I got it working. Here is what I did:
Remember to add a !DOCTYPE declaration for the version of HTML that you

use. It can also put modern browsers in standards mode.
I always do--I just left it out for clarification's sake.
<script type="text/JavaScript">
<!--
You don't need HTML comments in your Javascript code.


Really! I thought you were supposed to use it to hide the script from
browsers that can't read it? Is that just something that most programmers
have abandoned since all newer browsers support js?

function viewer_dimensions(divid,divwidth,divheight) {
specs = document.getElementById(divid);
I would make "specs" a local variable instead of a global one. I.e.,
var specs = document.getElementById(divid):


I didn't know there was a difference between declaring your variables with
the var in front and without. Could you explain the difference? Thanks.
<a href="javascript:viewer_dimensions('blue','200px', '200px')">change to 200 x 200</a>


It is not recommended to use javascript:-URI's.
<URL:http://jibbering.com/faq/#FAQ4_24>
The intended usage of these is to return the new content of the page,
so using them can cause the current page to disappear, if one is not
careful. If you just want to run some code, use the onclick attribute:
<a href="WhyYouNeedJS.html"
onclick="viewer_dimensions('blue','200px','200px') ;return false;">


Got it--much appreciated. What should I put in the href section?

Otherwise, good luck :)


I really appreciate all your help. Thanks a lot.
Jul 20 '05 #6
"TheKeith" <no@spam.com> writes:
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:7k**********@hotpop.com...
Remember to add a !DOCTYPE ....
I always do--I just left it out for clarification's sake.
Good :)
You don't need HTML comments in your Javascript code.


Really! I thought you were supposed to use it to hide the script from
browsers that can't read it?


Correct.

Those browsers are not the ones that just don't support Javascript. It
is the ones that don't even understand the script *tag*. The latest
such Netscape was version 1, the latest IE was version 2. I haven't
seen any browser made after 1997 that didn't understand the script tag
well enough to not render the content.

There are some, dated, utilities that gets confuzed. I wouldn't worry
about that unless I use them myself, as the author of the page.
Is that just something that most programmers have abandoned since
all newer browsers support js?
Too few programmers have abandoned it. The Crusade Against HTML
Comments in Javscript(TM) will fight this bad habit to the end! :)
It is time to move on.

It is also a bad idea in XHTML, since a conformant XML parser must
ignore everything inside comments *before* starting to interpret it
(IIRC).
I didn't know there was a difference between declaring your variables with
the var in front and without. Could you explain the difference? Thanks.
Without the var in front, you don't *declare* the variable. Assigning
to an undeclared variable name will create a new global variable of
that name.

Inside a function, the "var" keyword is used to declare local variables.
If you have a global variable called "foo" and a function declares a local
variable of the same name, then inside the function body, only the local
variable is visible. Changes to it doesn't affect the global variable.

Example:
---
<script type="text/javascript">
var foo = 42; // *declares* variable in global scope
function bar() {
var foo = "arglebargle"; // declares variable as local in function's scope
foo += foo;
return foo;
}
alert(bar());
alert(foo);
</script>
---
This alerts first "arglebarglearglebargle" and then "42".

You can assign to global variables without declaring them first.
---
<script type="text/javascript">
var foo = 42;
bar = 37;
alert(foo + bar);
</script>
---
This alerts "79". Afterwards, both "foo" and "bar" are global variables
(i.e., properties of the global object).

You cannot *read* from undeclared global variables
---
<script type="text/javascript">
var foo;
alert(foo);
alert(bar);
</script>
---
This alerts "undefined" (the value given to a declared but
uninitialized variable), and then it gives an error because
"bar" is an undeclared variable.

There is no reason not to declare your global variables. In fact,
recently, someone had troubles because he was using undeclared global
variables with the same name as an element's id. I believe declaring
the variables solved the problem.

There is absolutely no reason not to declare your local variables.
Programming is much easier when you have local scopes. You don't have
to worry that your variable is named the same as some other function's
variable.
Got it--much appreciated. What should I put in the href section?


A link to a page that either:

1) substitutes for what you try to do, just without the javascript.
E.g., if you want to open a fancy window to show an image, then put
plain link to the image, so people without Javascript can still see
it. They just miss the extra bells and whistles.
or,
2) if that is not possible, put a link to a page that explains why
your page requires Javascript in order to function.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:1x**********@hotpop.com...
"TheKeith" <no@spam.com> writes:
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:7k**********@hotpop.com...
Remember to add a !DOCTYPE ...
I always do--I just left it out for clarification's sake.
Good :)
You don't need HTML comments in your Javascript code.


Really! I thought you were supposed to use it to hide the script from
browsers that can't read it?


Correct.

Those browsers are not the ones that just don't support Javascript. It
is the ones that don't even understand the script *tag*. The latest
such Netscape was version 1, the latest IE was version 2. I haven't
seen any browser made after 1997 that didn't understand the script tag
well enough to not render the content.

There are some, dated, utilities that gets confuzed. I wouldn't worry
about that unless I use them myself, as the author of the page.
Is that just something that most programmers have abandoned since
all newer browsers support js?


Too few programmers have abandoned it. The Crusade Against HTML
Comments in Javscript(TM) will fight this bad habit to the end! :)
It is time to move on.

It is also a bad idea in XHTML, since a conformant XML parser must
ignore everything inside comments *before* starting to interpret it
(IIRC).
I didn't know there was a difference between declaring your variables with the var in front and without. Could you explain the difference? Thanks.


Without the var in front, you don't *declare* the variable. Assigning
to an undeclared variable name will create a new global variable of
that name.

Inside a function, the "var" keyword is used to declare local variables.
If you have a global variable called "foo" and a function declares a local
variable of the same name, then inside the function body, only the local
variable is visible. Changes to it doesn't affect the global variable.

Example:
---
<script type="text/javascript">
var foo = 42; // *declares* variable in global scope
function bar() {
var foo = "arglebargle"; // declares variable as local in function's

scope foo += foo;
return foo;
}
alert(bar());
alert(foo);
</script>
---
This alerts first "arglebarglearglebargle" and then "42".

You can assign to global variables without declaring them first.
---
<script type="text/javascript">
var foo = 42;
bar = 37;
alert(foo + bar);
</script>
---
This alerts "79". Afterwards, both "foo" and "bar" are global variables
(i.e., properties of the global object).

You cannot *read* from undeclared global variables
---
<script type="text/javascript">
var foo;
alert(foo);
alert(bar);
</script>
---
This alerts "undefined" (the value given to a declared but
uninitialized variable), and then it gives an error because
"bar" is an undeclared variable.

There is no reason not to declare your global variables. In fact,
recently, someone had troubles because he was using undeclared global
variables with the same name as an element's id. I believe declaring
the variables solved the problem.

There is absolutely no reason not to declare your local variables.
Programming is much easier when you have local scopes. You don't have
to worry that your variable is named the same as some other function's
variable.
Got it--much appreciated. What should I put in the href section?


A link to a page that either:

1) substitutes for what you try to do, just without the javascript.
E.g., if you want to open a fancy window to show an image, then put
plain link to the image, so people without Javascript can still see
it. They just miss the extra bells and whistles.
or,
2) if that is not possible, put a link to a page that explains why
your page requires Javascript in order to function.


Hey thanks again for the great info.
Jul 20 '05 #8
On 23 Oct 2003 19:42:41 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
It is also a bad idea in XHTML, since a conformant XML parser must
ignore everything inside comments *before* starting to interpret it
(IIRC).


AIUI it's may not must, but it's an optimisation I'd expect.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #9
ji*@jibbering.com (Jim Ley) writes:
AIUI it's may not must, but it's an optimisation I'd expect.


You are correct.
---[about comments]---
They are not part of the document's character data; an XML processor
may, but need not, make it possible for an application to retrieve
the text of comments.
--- XML 1.0, 2nd edition - W3C recommendation ---

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #10
On 24 Oct 2003 22:37:43 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:
ji*@jibbering.com (Jim Ley) writes:
AIUI it's may not must, but it's an optimisation I'd expect.


You are correct.
---[about comments]---
They are not part of the document's character data; an XML processor
may, but need not, make it possible for an application to retrieve
the text of comments.
--- XML 1.0, 2nd edition - W3C recommendation ---


After a brief discussion today with Hixie, I actually think I was
wrong and you were right in the first place - the point being that a
comment inside an XHTML is exactly that - a comment, so none of the
data should be passed to the script engine irrelevant to whether the
UA actually keeps the comment in the DOM.

Sorry for misleading.

Jim.
--
comp.lang.javascript FAQ - http://jibbering.com/faq/

Jul 20 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by Randy Webb | last post: by
13 posts views Thread by Jon Yeager | last post: by
4 posts views Thread by tvashtar | last post: by
1 post views Thread by Teelions | last post: by
7 posts views Thread by petethebloke | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.