SitePoint Sponsor |
|
User Tag List
Results 1 to 18 of 18
Thread: CSS - Positioning
-
Aug 20, 2008, 05:18 #1
CSS - Positioning
Hi,
I have an HTML Button on my page and a <div> element (which contains some text), clicking on the button should display the <div> element just UNDER the button (no matter where the button is on the page)
is this something has to do with absolute positioning in CSS?
Please tell me the syntax (or example) for it.
Thanx
-
Aug 20, 2008, 05:38 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The button and the div would have to have a common ancestor element with a position property other that static. Then the div element needs to have position:absolute and use the top, right, bottom and/or left elements to position it, relative to the common ancestor. You'll need to know the position of the button beforehand, though.
As for displaying the div after clicking a button, that's something you can't do with CSS. It will take JavaScript.Birnam wood is come to Dunsinane
-
Aug 20, 2008, 05:40 #3
This is my code
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> </head> <body> <div id="mydiv">Text here..Text here..Text here..Text here..</div> <p> </p> <table width="100%" border="1" cellspacing="2" cellpadding="2"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td align="center"><input type="submit" name="Submit" value="Click Here..." /></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <p> </p> </body> </html>
-
Aug 20, 2008, 06:10 #4
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You'll need to use JavaScript for this, since positioning and tables don't go too well together.
Pardon me for asking, but what the heck is all those table cells with non-breaking spaces for?!Birnam wood is come to Dunsinane
-
Aug 20, 2008, 07:09 #5
-
Aug 20, 2008, 08:39 #6
- Join Date
- Jul 2005
- Posts
- 606
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Shouldn't *really* be using tables for forms any way. It doesn't matter what type of button you have because in this instance it's going to be much easier to go for a pure javascript solution. If the div is a hidden div for an error message or something, why not just have it under the button to start with and have it's display property altered via JS. If it really has to be that dynamic you will have to take the div node and reposition it within the DOM on click.
I can see what Autistic was getting at, it might be doable but would be extremely fiddly, especially if you want other elements to flow around the div etc. I can't see any need for CSS here as this is something where JS should be taking over. (presentation layer/behaviour layer)
-
Aug 20, 2008, 08:58 #7
Can u provide an example plz?
Thanx
-
Aug 20, 2008, 10:03 #8
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've moved this to the JavaScript forum, where you're more likely to get help with JavaScript-related questions.
Birnam wood is come to Dunsinane
-
Aug 20, 2008, 10:25 #9
- Join Date
- Aug 2007
- Location
- Brighton, UK
- Posts
- 2,006
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
From your first post I've got the impression that you want a button with the following functionality: When the button is clicked, the next DIV in the DOM will be shown or hidden dependent on it's current state. i.e. if the DIV is set to display:none; then clicking the button will change it to display:block; Correct?
★ James Padolsey
–––––––––––––––––––––––––––––––––––––––
Awesome JavaScript Zoomer (demo here)
'Ajaxy' - Ajax integration solution (demo here)
-
Aug 20, 2008, 11:23 #10
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Jimmy, there's the additional requirement that the DIV must be displayed right beneath the button, regardless of where on the page the button is located.
Birnam wood is come to Dunsinane
-
Aug 20, 2008, 20:26 #11
You are right AutisticCuckoo
-
Aug 20, 2008, 20:50 #12
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Place the script at the end of the body, just before the </body>.
Code html4strict:<html> <head> </head> <body> ... <script src="script.js"></script> </body> </html>
Not only is this best practice for speeding up your web site, but it makes it a lot easier to attach events to page elements.
It is much easier to just move the div onto the end of the button. This can be achieved by appending the existing div, which will remove it from the old location and add it to the new one.
There is a standard pattern for this:
Code javascript:if (el.nextSibling) { el.parentNode.insertBefore(newEl, el.nextSibling); } else { el.parentNode.appendChild(newEl); }
Here is the script that can be used with your example html code to do the job.
Code javascript:// attach event document.getElementsByName('Submit')[0].onclick = moveDivToButton; // perform task function moveDivToButton() { var div = document.getElementById('mydiv'); if (this.nextSibling) { this.parentNode.insertBefore(div, this.nextSibling); } else { this.parentNode.appendChild(div); } }
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Aug 20, 2008, 21:02 #13
This does not work
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> <script> // attach event document.getElementsByName('Submit')[0].onclick = moveDivToButton; // perform task function moveDivToButton() { var div = document.getElementById('mydiv'); if (this.nextSibling) { this.parentNode.insertBefore(div, this.nextSibling); } else { this.parentNode.appendChild(div); } } </script> </head> <body> <p> </p> <table width="100%" border="1" cellspacing="2" cellpadding="2"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td align="center"><input type="Submit" name="Submit" value="Click Here..." /><div id="mydiv">Text here..Text here..Text here..Text here..</div> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <p> </p> </body> </html>
-
Aug 20, 2008, 21:09 #14
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Place the script at the end of the body.
If you insist on placing it in the head then you'll need to use a technique to run the code after the page has loaded.
Code javascript:window.onload = function () { ... }
See http://developer.yahoo.com/performan...html#js_bottom about why placing scripts in the head is not a good idea.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Aug 20, 2008, 21:10 #15
Still no luck
Code HTML4Strict:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> </head> <body> <script> // attach event document.getElementsByName('Submit')[0].onclick = moveDivToButton; // perform task function moveDivToButton() { var div = document.getElementById('mydiv'); if (this.nextSibling) { this.parentNode.insertBefore(div, this.nextSibling); } else { this.parentNode.appendChild(div); } } </script> <p> </p> <table width="100%" border="1" cellspacing="2" cellpadding="2"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td align="center"><input type="Submit" name="Submit" value="Click Here..." /><div id="mydiv">Text here..Text here..Text here..Text here..</div> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <p> </p> </body> </html>
-
Aug 20, 2008, 21:15 #16
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Place it at the bottom of the body, not the top. Just before the </body> tag.
Examine the following for a moment.
Code html4strict:<html> <head> </head> <body> <!-- html page code --> ... <!-- finally, script code. Using inline script here. Best practice is to use external script file instead of inline. --> <script> ... </script> </body> </html>
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Aug 20, 2008, 21:18 #17
U mean like this?
Code JavaScript:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Test</title> </head> <body> <p> </p> <table width="100%" border="1" cellspacing="2" cellpadding="2"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td align="center"><input type="Submit" name="Submit" value="Click Here..." /><div id="mydiv">Text here..Text here..Text here..Text here..</div> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <script> // attach event document.getElementsByName('Submit')[0].onclick = moveDivToButton; // perform task function moveDivToButton() { var div = document.getElementById('mydiv'); if (this.nextSibling) { this.parentNode.insertBefore(div, this.nextSibling); } else { this.parentNode.appendChild(div); } } </script> <p> </p> </body> </html>
-
Aug 20, 2008, 21:21 #18
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
Nearly, there's still a paragraph element that's been left after the script. Move that out of the way and you'll be there.
And you do not want the test div to be coded just after the input element.
We're wanting to see that the script moves the div to be just after the input element.
If the div is already at the location where the script is supposed to place it, then the script won't appear to do anything.
Move the div away somewhere, such as to the top of the body, so that when you click on the button you will be able to see that the script has moved the div.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
Bookmarks