473,320 Members | 1,846 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 9076
"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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
by: Randy Webb | last post by:
This page: http://www.hikksworld.com/loadJSFiles/ Is one where I was testing the ability of browsers that can/can't dynamically load a JS file with one of the three methods: 1)Changing the src...
13
by: Jon Yeager | last post by:
I need to display a bunch of pictures that are all of various dimensions into a fixed dimension space, like MSN Messenger does with its user photos in the chat windows. Forcing image dimensions...
1
by: Kevin | last post by:
I have a number of JPEG images I have placed, each in its own layer, and I want them to have a uniform heighth/width. I have manually resized each using the transform tool, eyeballing the resize....
1
by: Mohan | last post by:
Hi, In my application, I need to increase the 2-dimensional array size dynamically. Please let me know the procedure to declare a dynamic 2-dimensional array like Single dimensional array,...
2
by: FayeC | last post by:
I have created a site in Joomla with a login (no self registration, users are provided with username and password by the admin). The users are supposed to login to a specific page where they can...
4
by: tvashtar | last post by:
Hi sorry if this isn't the best place to be asking this, I need to create a vector-like container which is arbitrarily multi-dimensional, the number of dimensions has to be determined at run time....
1
by: Teelions | last post by:
I know that this can be done for iframes but am wondering if it can be also done for layers. I have 2 pages: an asp content page that has a html (toc.html) include placed within it. The...
7
by: petethebloke | last post by:
Can anyone help? I have a client who has made a "dynamic interactive map" of our city using Dreamweaver. Each map file has hotspots that pop-up a div with a little image when the mouse goes over...
7
by: Rob | last post by:
This actually compiles and works but it doesn't seem like the best code, so I was wondering is there another way to do this? template <typename Tvector<T>* addDepth(T) { return new vector<T>;...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.