Question about Asp.Net/Javascript

[=?Utf-8?B?Qi4gQ2hlcm5pY2s=?=]

Someone refresh my memory.

Assuming you are limited to VS 2005, ASP.Net, Javascript, and no Ajax (and
no 3rd party controls), is there any way to use Javascript to shift between
multiple pages of data without postback? (i.e. something equivalent to tab
controls?)

(i.e. I thought hiding a component using javascript 'tightened up' the
layout but I just realized that's not so. I may be mistakenly thinking of a
previous job where we did use 3rd party controls.)

[=?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=]

Re: Question about Asp.Net/Javascript

B. Chernick wrote:

Someone refresh my memory.
>
Assuming you are limited to VS 2005, ASP.Net, Javascript, and no Ajax (and
no 3rd party controls), is there any way to use Javascript to shift between
multiple pages of data without postback? (i.e. something equivalent to tab
controls?)
>
(i.e. I thought hiding a component using javascript 'tightened up' the
layout but I just realized that's not so. I may be mistakenly thinking of a
previous job where we did use 3rd party controls.)

Yes, you can easily show and hide elements.

Example:

<script type="text/javascript">

function $(id) { return document.getEle mentById(id); }

function show(index) {
var items = [$('item1'),$('i tem2'),$('item3 ')];
for (var i=0; i<items.length ; i++) {
items[i].style.display = i==index ? 'block' : 'none';
}
return false;
}

</script>

<a href="#" onclick="return show(0);">1</a>
<a href="#" onclick="return show(1);">2</a>
<a href="#" onclick="return show(2);">3</a>

<div id="item1" style="display: block">Item 1</div>
<div id="item2" style="display: none">Item 2</div>
<div id="item3" style="display: none">Item 3</div>

--
Göran Andersson
_____

http://www.guffa.com

[=?Utf-8?B?Qi4gQ2hlcm5pY2s=?=]

Re: Question about Asp.Net/Javascript

Thanks. I'm going to have to try this but frankly, the syntax looks a little
strange to me. I'm not sure I understand what I'm seeing. What I've been
doing is more like this:
var t = document.getEle mentById("F0006 ");
t.style.visibil ity='hidden';

The problem is that even though the table is hidden, it's still taking up
space.

"Göran Andersson" wrote:

B. Chernick wrote:

Someone refresh my memory.

Assuming you are limited to VS 2005, ASP.Net, Javascript, and no Ajax (and
no 3rd party controls), is there any way to use Javascript to shift between
multiple pages of data without postback? (i.e. something equivalent to tab
controls?)

(i.e. I thought hiding a component using javascript 'tightened up' the
layout but I just realized that's not so. I may be mistakenly thinking of a
previous job where we did use 3rd party controls.)

>
Yes, you can easily show and hide elements.
>
Example:
>
<script type="text/javascript">
>
function $(id) { return document.getEle mentById(id); }
>
function show(index) {
var items = [$('item1'),$('i tem2'),$('item3 ')];
for (var i=0; i<items.length ; i++) {
items[i].style.display = i==index ? 'block' : 'none';
}
return false;
}
>
</script>
>
<a href="#" onclick="return show(0);">1</a>
<a href="#" onclick="return show(1);">2</a>
<a href="#" onclick="return show(2);">3</a>
>
<div id="item1" style="display: block">Item 1</div>
<div id="item2" style="display: none">Item 2</div>
<div id="item3" style="display: none">Item 3</div>
>
--
Göran Andersson
_____

http://www.guffa.com

>

[Mark Rae [MVP]]

Re: Question about Asp.Net/Javascript

"B. Chernick" <BChernick@disc ussions.microso ft.comwrote in message
news:698AC3B2-893C-403B-A461-E0E2C2956723@mi crosoft.com...

var t = document.getEle mentById("F0006 ");
t.style.visibil ity='hidden';
>
The problem is that even though the table is hidden, it's still taking up
space.

Yes, it will still take up space if you use the above syntax...

If you want to do it properly, you'll need something like:

t.style.display ="none";

to make it invisible, or

t.style.display ="block";

to make it visible again...


--
Mark Rae
ASP.NET MVP

http://www.markrae.net

[=?Utf-8?B?Qi4gQ2hlcm5pY2s=?=]

Re: Question about Asp.Net/Javascript

I'm still a bit confused. I've never heard of that 'block' value.

However this seems to do what I want:

t = document.getEle mentById("F0005 ");
t.style.display ='none';
var t = document.getEle mentById("F0006 ");
t.style.visibil ity='visible';

(Table F0005 vanishes and Table F0006 moves up to it's place.)

More testing tomorrow.... Thanks.
"Mark Rae [MVP]" wrote:

"B. Chernick" <BChernick@disc ussions.microso ft.comwrote in message
news:698AC3B2-893C-403B-A461-E0E2C2956723@mi crosoft.com...
>

var t = document.getEle mentById("F0006 ");
t.style.visibil ity='hidden';

The problem is that even though the table is hidden, it's still taking up
space.

>
Yes, it will still take up space if you use the above syntax...
>
If you want to do it properly, you'll need something like:
>
t.style.display ="none";
>
to make it invisible, or
>
t.style.display ="block";
>
to make it visible again...
>
>
--
Mark Rae
ASP.NET MVP

http://www.markrae.net

>
>

[=?UTF-8?B?R8O2cmFuIEFuZGVyc3Nvbg==?=]

Re: Question about Asp.Net/Javascript

B. Chernick wrote:

Thanks. I'm going to have to try this but frankly, the syntax looks a little
strange to me. I'm not sure I understand what I'm seeing.

Yes, the syntax might look a bit strange if you are not used to it.

Another way of writing the show function, that you may be more familiar
with, could be:

function show(index) {

var items = new Arra();
items[0] = document.getEle mentById('item1 ');
items[1] = document.getEle mentById('item2 ');
items[2] = document.getEle mentById('item3 ');

for (var i=0; i<items.length ; i++) {
if (i==index) {
items[i].style.display = 'block';
} else {
items[i].style.display = 'none';
}
}

return false;
}

What I've been
doing is more like this:
var t = document.getEle mentById("F0006 ");
t.style.visibil ity='hidden';
>
The problem is that even though the table is hidden, it's still taking up
space.

Yes, that's how the visibility attribute works. It shows or hides an
element, but it still takes up space in the document flow all the time.

The display attribute controls how the element behaves in the document
flow. The value 'block' makes it behave like a div element, the value
'inline' makes it behave like a span element, and the value 'none'
removes it from the document flow entirely.

As you probably want one page at the time to be visible, and the other
pages totally out of the way, the display attribute is a better option
than the visibiliy attribute.

--
Göran Andersson
_____

http://www.guffa.com

[Mark Rae [MVP]]

Re: Question about Asp.Net/Javascript

"B. Chernick" <BChernick@disc ussions.microso ft.comwrote in message
news:EB0C4814-A6C1-42C4-9096-6D6CC3814A63@mi crosoft.com...

[top-posting corrected]

>>var t = document.getEle mentById("F0006 ");
>>t.style.visib ility='hidden';
>>>
>>The problem is that even though the table is hidden, it's still taking
>>up
>>space.

>>
>Yes, it will still take up space if you use the above syntax...
>>
>If you want to do it properly, you'll need something like:
>>
>t.style.displa y="none";
>>
>to make it invisible, or
>>
>t.style.displa y="block";
>>
>to make it visible again...

>
I'm still a bit confused. I've never heard of that 'block' value.

http://www.google.co.uk/search?sourceid=navclient&hl=en-GB&ie=UTF-8&rlz=1T4GZEZ_en-GBGB252GB252&q=JavaScript+style+display+block

--
Mark Rae
ASP.NET MVP

http://www.markrae.net