How to show a div near a button

Question

I have a page which has a lot of buttons. What I need to do is to show a div near the button. I tried this:

<style>
#noteDiv {display:none; position: absolute; background-color: white; border: 1px solid blue;}
</style>
<script>
function showNote(e) {

var x = 0, y = 0;
if (!e) e = window.event;

if (e.pageX || e.pageY) {
      x = e.pageX;
      y = e.pageY;
                  }
else if (e.clientX || e.clientY) {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
                 }


document.getElementById("noteDiv").style.display = "block";
document.getElementById("noteDiv").style.left = (x)+"px";
document.getElementById("noteDiv").style.top = (y-350)+"px";


                }

function hideNote() {
  document.getElementById("noteDiv").style.display = "none";
 }
</script>

<body>    
<?php
 echo "<button type ='button' id = 'noteButton'>Note</button>"; 
 echo "<script>document.getElementById('noteButton').onclick = showNote;\n";
 echo "</script>";
 ?>
</body>
  <div id='noteDiv'  >
  <div ><span onclick="hideNote()">Close</span></div>
  <br clear="all">
  <div id='noteContent' style='max-height: 30em'></div>
  </div>

It does work. But sometimes the page will show one more div on top of the page, like a warning message, and thus the noteDiv's position will be far from the buttons to which it should attach.

My thinking is to get the position of the buttons, and send the x, y values of the button position to the function showNote(), from there show the noteDiv. I don't know if this idea is reasonable and how to get and transfer the current clicked button's position to javascript?

Any suggestions and hints will be appreciated!

Answer 1

All the HTML like <button> <div> <span> <ul><li> <table> etc MUST be inside the <body> </body> tag:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <!-- you can include css and javascript here -->
    <!-- but best place to include javascript ist at the bottom -->
    <!-- see last comment -->
</head>
<body>

    <?php echo '<button type="button" id="noteButton">Note</button>';   ?>


    <!-- best place to include javascript or echo them with PHP what ever
     right before the closing body tag -->
</body>
</html>

You are echoing a <button> via PHP before the opening <body> tag which is wrong. Try use something like firebug and https://validator.w3.org/

Answer 2

From the beginning. Load javascript on top of your page is a very bad idea . I'll let the tons of web articles to explain you why. Just to say one reason, the js files are downloaded before the html is rendered (depending on the browser), resulting in a slower rendering of the page.

About your approach:

Three words: separation of concerns. Positioning dom elements is not what belongs to javascript (except some very rare occasions). Styling the DOM , which comprehends positioning of the objects , belongs to the Cascading Style Sheet, also known as CSS .

So if something is not rendered in the right way, don't try to fix it with javascript. It will only drives you to enormous headaches.

For a better answer, please provide a code that can show us the error.

UPDATE

Here is a working example (probably not optimised) of what you are maybe trying to achieve. Please, please, please, please... read a book about html, css and js. It's totally worth it. I didn't use php , didn't need it.

Just for the records, the general structure of an html page I personally use is like this one:

html
    head
        title
        meta
        styles link
        styles sections
        js **LIBRARIES** which need to be loaded on **TOP**
        google analytics
    body
        html content
        js **LIBRARIES** which need to be loaded on **BOTTOM**
        js scripts

And for your sanity, and of the people who helps you, indent correctly (it's also a sign of respect to the people who are reading your code).

Here is the code with the snippet:

 function toggleNote(id) { var noteParent = document.getElementById(id); var note = noteParent.querySelector('.note'); var display = "none"; if (note.style.display == "none" || note.style.display == "" ) { display = "block"; } note.style.display = display; }

 .note { display: none; position: relative; background-color: white; border: 1px solid blue; } .noteContent { max-height: 30em }

 <body> <div class="buttonContainer" id="note0"> <button id='noteButton' onclick="toggleNote('note0')">Note</button> <div class='note'> <div> <button onclick="toggleNote('note0')">Close</button> </div> <br clear="all"> <div class='noteContent'>It's something!</div> </div> </div> </body>

How to show a div near a button

Question

2 answers

solution1
2 2015-08-21 20:52:29

solution2
2 2015-08-21 20:57:22

How to show a div near a button

Question

2 answers

solution1 2 2015-08-21 20:52:29

solution2 2 2015-08-21 20:57:22

solution1
2 2015-08-21 20:52:29

solution2
2 2015-08-21 20:57:22