By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

Position <DIV> Based on Click Link/Cell

P: 10
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?
Mar 13 '07 #1
Share this Question
Share on Google+
21 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 13 '07 #2

P: 10
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.
Mar 13 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 13 '07 #4

P: 10
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??
Mar 13 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 13 '07 #6

P: 10
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.
Mar 13 '07 #7

Expert 100+
P: 1,892
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.
Mar 13 '07 #8

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 13 '07 #9

P: 10
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?
Mar 13 '07 #10

drhowarddrfine
Expert 5K+
P: 7,435
You need to read this.
Mar 13 '07 #11

Expert 100+
P: 1,892
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.
Mar 13 '07 #12

P: 10
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....
Mar 13 '07 #13

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

http://www.bowlingballsandmore.com/bsa/test.asp
Mar 13 '07 #14

Expert 100+
P: 1,892
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
Mar 14 '07 #15

P: 10
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?
Mar 14 '07 #16

P: 10
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
Mar 14 '07 #17

Expert 100+
P: 1,892
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....
Mar 14 '07 #18

P: 10
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...
Mar 14 '07 #19

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 14 '07 #20

100+
P: 136
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
Mar 14 '07 #21

Expert 100+
P: 1,892
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.
Mar 14 '07 #22

Post your reply

Sign in to post your reply or Sign up for a free account.