473,325 Members | 2,308 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,325 software developers and data experts.

Question about Asp.Net/Javascript

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.)
Jul 28 '08 #1
6 1287
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.getElementById(id); }

function show(index) {
var items = [$('item1'),$('item2'),$('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
Jul 28 '08 #2
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.getElementById("F0006");
t.style.visibility='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.getElementById(id); }

function show(index) {
var items = [$('item1'),$('item2'),$('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
Jul 29 '08 #3
"B. Chernick" <BC*******@discussions.microsoft.comwrote in message
news:69**********************************@microsof t.com...
var t = document.getElementById("F0006");
t.style.visibility='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

Jul 29 '08 #4
I'm still a bit confused. I've never heard of that 'block' value.

However this seems to do what I want:

t = document.getElementById("F0005");
t.style.display='none';
var t = document.getElementById("F0006");
t.style.visibility='visible';

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

More testing tomorrow.... Thanks.
"Mark Rae [MVP]" wrote:
"B. Chernick" <BC*******@discussions.microsoft.comwrote in message
news:69**********************************@microsof t.com...
var t = document.getElementById("F0006");
t.style.visibility='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

Jul 29 '08 #5
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.getElementById('item1');
items[1] = document.getElementById('item2');
items[2] = document.getElementById('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.getElementById("F0006");
t.style.visibility='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
Jul 29 '08 #6
"B. Chernick" <BC*******@discussions.microsoft.comwrote in message
news:EB**********************************@microsof t.com...

[top-posting corrected]
>>var t = document.getElementById("F0006");
t.style.visibility='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...

I'm still a bit confused. I've never heard of that 'block' value.
http://www.google.co.uk/search?sourc...+display+block
--
Mark Rae
ASP.NET MVP
http://www.markrae.net

Jul 29 '08 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Randell D. | last post by:
Folks, I'm still learning javascript - I've invested in a couple of books and reading online as much as possible. I'm pretty sure what I am suggesting is possible though I'm trying to weigh up...
5
by: Henry | last post by:
HTML is an acronym for Hyper Text Markup Language. But why is it hyper? Too much java . . . http://takeoff.to/henry
2
by: Mark Preston | last post by:
Its perhaps a bit early to ask, since I'm still doing the page design and haven't got down to the coding yet, but I wonder if anyone can help with a bit of a question. To lay the groundwork, a...
2
by: Hazzard | last post by:
I just realized that the code I inherited is using all asp.net server controls (ie. webform controls) and when I try to update textboxes on the client side, I lose the new value of the textbox when...
3
by: Diana M | last post by:
Hello, I have started my first asp.net application (beginner). I have 2 text boxes on the form that should contain 2 different dates (beginning and end). It would be nice to have 2 small buttons...
1
by: google1 | last post by:
Has anyone written this one? Seen such a thing? Please send me a link: Skill Testing Question Exploder --------------------------------------------- Basically the plan is to create the...
5
by: Joh | last post by:
I'm using mailto to open up an email that have a hyperlink in the body. The hyperlink passes two variables Name and Emailadress. The problem is that only the first variable Name show up in the...
1
Frinavale
by: Frinavale | last post by:
Hi there! I'm not sure if this question should be posted under the .NET form or the JavaScript form...I just have a general question about JavaScript and .NET. I usually test my JavaScript in...
6
by: John | last post by:
Hello, I was thinking of trying out JavaScript and learn it on my own. I had a few questions though. Is it still popular with businesses today? Is JavaScript bad for search engine opt....
3
by: Zhang Weiwu | last post by:
Hello! I wrote this: ..required-question p:after { content: "*"; } Corresponding HTML: <div class="required-question"><p>Question Text</p><input /></div> <div...
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: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
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...
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)...
1
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: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

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.