Position <DIV> Based on Click Link/Cell

[BLarche]

I am not really sure how to do this, but I need to create <DIV>'s that correspond to a given week that is clicked. So, when my ASP is generating the page, it will create the hidden divs. When a week number is clicked, I want the DIV to show up for that week next to it, like I have in the following example:

http://www.bowlingballsandmore.com/bsa/EditScores.gif

Can anyone point me in the right direction or give me an example?

[drhowarddrfine]

If this is an asp question you should ask in the asp board. But you can hide/unhide the div using css and the visibility property.

Another possibility is making the week numbers on the left hand side :hover and then display the contents.

[BLarche]

If this is an asp question you should ask in the asp board. But you can hide/unhide the div using css and the visibility property.

This is not an ASP question. I will be generating a div for each week using ASP, but that is not my question.

Once the DIV's are created, how do I get them to position/display next to each week as I have shown in the sample graphic??

Also, I understand how to hide/unhide the DIV's, that is no problem either. It is completely a positioning problem.

[drhowarddrfine]

I edited my previous post with an added idea.

What you want to do is more involved than I have time for but not difficult. You can enclose the week numbers and the data in one div and use the :hover property to make the data visible/hidden. :hover does not work 100% in IE6 so you may want to surround the whole div in a <a> and hover that which will work in all browsers.

[BLarche]

I still cannot get this to work. You can view my code here:

http://www.bowlingballsandmore.com/bsa/test.asp

It tries to insert the table into the main table's TD rather than on top of it. Does anyone have any suggestions??

[drhowarddrfine]

First problem is you are not using a doctype and that puts IE into quirks mode. You are using a xhtml namespace yet don't declare xhtml.

Second, validate your code because you are missing some end tags and other things.

Third, some of the tags you are using are deprecated.

[BLarche]

First problem is you are not using a doctype and that puts IE into quirks mode. You are using a xhtml namespace yet don't declare xhtml.

Second, validate your code because you are missing some end tags and other things.

Third, some of the tags you are using are deprecated.

I don't believe that has anything to do with it, but I did remove the xhtml namespace. Also, the validation of the code should have nothing to do with the divs not displaying correctly... I believe it is logic and not code.

[AricC]

Also, the validation of the code should have nothing to do with the divs not displaying correctly

Validation and DocType have everything to do with the way your code is displayed.

[drhowarddrfine]

You will never get IE to pretend it's a modern browser without a proper doctype. It's difficult enough to work with valid code than to have to deal with one containing errors.

Just a few hours ago, I pointed out validation to someone who insisted it had nothing to do with his problem. But he fixed his errors anyway and the problem went away.

[BLarche]

Validation and DocType have everything to do with the way your code is displayed.

I still disagree. Anyways, I am obviously missing the boat on this one. Does anyone have an example of what I am trying to accomplish?

[drhowarddrfine]

You need to read this.

[AricC]

I still disagree. Anyways, I am obviously missing the boat on this one. Does anyone have an example of what I am trying to accomplish?

I don't see how you disagree Doctypes and Validation have everything to do with the way a browser is going to render your page. Here are the results of your page through the validator as you can see you have no Doctype and some other errors.

[BLarche]

I don't see how you disagree Doctypes and Validation have everything to do with the way a browser is going to render your page. Here are the results of your page through the validator as you can see you have no Doctype and some other errors.

Because my "validation" and "no doctype" are not critical in this error. They are not causing the page to "not work". I know enough about HTML to know that... trust me. This is a logical error in the way I am writing my DIVs and TABLEs. Plus, I looked through my HTML, and I am missing ZERO opening and closing tags....

[BLarche]

Here, is this better? Is this validated and include the proper doc types??

http://www.bowlingballsandmore.com/bsa/test.asp

[AricC]

Here, is this better? Is this validated and include the proper doc types??

http://www.bowlingballsandmore.com/bsa/test.asp

I think this is what you are looking for:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<?xml version="1.0" encoding="utf-8" ?>
<head>
<title>Layout Test</title>
<style type="text/css">
.clsWeeks
{
width: 100px;
height: 20px;
border: 1px solid black;
float: left;
}
.clsData
{
width: 500px;
height: 20px;
border: 1px solid black;
}


</style>


</head>

<body>
<div class="clsWeeks">
Week 1
</div>
<div class="clsData">
Some Data
</div>
<div class="clsWeeks">
Week 2
</div>
<div class="clsData">
Some Data
</div>
<div class="clsWeeks">
Week 3
</div>
<div class="clsData">
Some Data
</div>



</body>
</html>
[/html]

HTH,
Aric

[BLarche]

That still does not get me to where I need to be with the edit scores portion. I need the table in the BG to stay as is, and the "edit scores" layer to layer on top of the others... just like the picture:

http://www.bowlingballsandmore.com/bsa/EditScores.gif

Or does it?

[BLarche]

How do I get the "Some Data" layer to display over the Game 1, Game 2, and Game 3 scores???

http://www.bowlingballsandmore.com/bsa/test1.asp

[AricC]

How do I get the "Some Data" layer to display over the Game 1, Game 2, and Game 3 scores???

http://www.bowlingballsandmore.com/bsa/test1.asp

Do you want 'Some Data' layer above the Game 1 etc...? Or you want that to appear on top of Game 1....

[BLarche]

Do you want 'Some Data' layer above the Game 1 etc...? Or you want that to appear on top of Game 1....

For each week number, I will have a layer that has to appear next to the week number on TOP of the game scores, so, for instance, on top of 175, 200, and 300 in the example I provided. I need it to show/hide WITHOUT altering (expanding) the table beneath it...

[drhowarddrfine]

My first thought is this isn't going to be possible with CSS alone because the data traverses table cells. Maybe there's something I'm not thinking of so I'm going to look around a bit.

[devsusen]

Hi,

to design the page u require DIV tag, CSS, and Javascript too. Your table will be in a div tag and there will be another hidden div tag. Using CSS you can make a div visible and hidden. to make the div tag appear on the table you need to use z-index property.

Now for each week link u need to call a Javascript function and u need to pass some argument which can identify the week number within the function. Now depending on the parameter passed within the function u need to calculate the location where you will show the 2nd div. Then you need to set the position of the div, put the form content (update form) in the div and then make it visible.

You need to have good concept of CSS and Javascript to design this. I hope this will help to design your page.

susen

[AricC]

My first thought is this isn't going to be possible with CSS alone because the data traverses table cells. Maybe there's something I'm not thinking of so I'm going to look around a bit.

I also think Javascript would be the best way to go about this, you probably could do this in CSS only, but it will be a huge pain.