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.
10  9105 
"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.getEle mentById("divId ");
elem.style.widt h = "200px";
elem.style.heig ht = "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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
"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.getEle mentById("divId ");
elem.style.widt h = "200px";
elem.style.heig ht = "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 twohundredsquar e(divid,divwidt h,divheight) {
boxdimensions = getElementById (divid);
boxdimensions.s tyle.width = divwidth;
boxdimensions.s tyle.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascrip t:twohundredsqu are("blue","200 px","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.
"TheKeith" <no@spam.com> wrote in message
news:9p******** ************@gi ganews.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.getEle mentById("divId ");
elem.style.widt h = "200px";
elem.style.heig ht = "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 twohundredsquar e(divid,divwidt h,divheight) {
boxdimensions = getElementById (divid);
boxdimensions.s tyle.width = divwidth;
boxdimensions.s tyle.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascrip t:twohundredsqu are("blue","200 px","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>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function viewer_dimensio ns(divid,divwid th,divheight) {
specs = document.getEle mentById(divid) ;
specs.style.wid th = divwidth;
specs.style.hei ght = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascrip t:viewer_dimens ions('blue','20 0px','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>
"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_dimensio ns(divid,divwid th,divheight) {
specs = document.getEle mentById(divid) ;
I would make "specs" a local variable instead of a global one. I.e.,
var specs = document.getEle mentById(divid) :
<a href="javascrip t:viewer_dimens ions('blue','20 0px','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="WhyYouNee dJS.html"
onclick="viewer _dimensions('bl ue','200px','20 0px');return false;">
Otherwise, good luck :)
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
"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_dimensio ns(divid,divwid th,divheight) {
specs = document.getEle mentById(divid) ;
I would make "specs" a local variable instead of a global one. I.e.,
var specs = document.getEle mentById(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="javascrip t:viewer_dimens ions('blue','20 0px','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="WhyYouNee dJS.html"
onclick="viewer _dimensions('bl ue','200px','20 0px');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.
"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 = "arglebargl e"; // declares variable as local in function's scope
foo += foo;
return foo;
}
alert(bar());
alert(foo);
</script>
---
This alerts first "arglebarglearg lebargle" 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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
"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 = "arglebargl e"; // declares variable as local in function's
scope foo += foo;
return foo;
}
alert(bar());
alert(foo);
</script>
---
This alerts first "arglebarglearg lebargle" 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.
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.javas cript FAQ - http://jibbering.com/faq/ ji*@jibbering.c om (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/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.' This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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 property of a script tag.
2)Inserting a script src="" tag in a div via innerHTML
3)Using document.createElement to add a script element.
The fourth...
|
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 will warp the proportions, so that's no good.
Forcing one coordinate while leaving the other flexible will maintain
proportions, but the x,y...
|
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. How can I
find out what the dimensions of each is, in pixels or whatever, and how
do I reset to the desired dimensions?
(I'm using the trial...
|
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, ArrayList.
Thanks,
Mohan
|
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 see
4 images.
I have the following code:
<?php
// define directory path
$dir = "images/user1/";
// iterate through files
| | |
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. Is there a preexisting library to do this (I've tried MultiArray
in Boost but templating seems to require compile time dimension
setting) or will...
|
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 content of toc.html is a menu list placed inside a layer called
"navcontainer". The content of the asp page is inside a layer named
"wrapper". And the...
|
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 them. They
also link to another file.
I've converting the application to a PHP-AJAX system at
http://www.ilex-urc-maps.com/testing.html but I...
|
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>;
}
....a templated meth...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
