SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question 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

  2. #2
    SitePoint Author silver trophybronze trophy

    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

  3. #3
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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>&nbsp;</p>
    <table width="100%" border="1" cellspacing="2" cellpadding="2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td align="center"><input type="submit" name="Submit" value="Click Here..." /></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>

  4. #4
    SitePoint Author silver trophybronze trophy

    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

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post


    You'll need to use JavaScript for this, since positioning and tables don't go too well together.
    Ok, but how? An example would be great.

    Quote Originally Posted by AutisticCuckoo View Post
    Pardon me for asking, but what the heck is all those table cells with non-breaking spaces for?!
    Well, its just for me to understand how would the css/js work under such condition.


    also, please note that its NOT a submit button but a normal HTML button.

  6. #6
    Non-Member
    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)

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Can u provide an example plz?


    Thanx

  8. #8
    SitePoint Author silver trophybronze trophy

    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

  9. #9
    Function Curry'er JimmyP's Avatar
    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)

  10. #10
    SitePoint Author silver trophybronze trophy

    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

  11. #11
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You are right AutisticCuckoo

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 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

  13. #13
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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>&nbsp;</p>
    <table width="100%" border="1" cellspacing="2" cellpadding="2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 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

  15. #15
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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>&nbsp;</p>
    <table width="100%" border="1" cellspacing="2" cellpadding="2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 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

  17. #17
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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>&nbsp;</p>
    <table width="100%" border="1" cellspacing="2" cellpadding="2">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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>&nbsp;</p>
    </body>
    </html>

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •