• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 307
  • Last Modified:

jQuery: Positioning an element in relation to another

I am new to jQuery and need a bit of help here, guys.

I have a button, which when clicked opens a box below it with a form. What I want to do is to take the position of the button and based on that assign a position to the box (with z-index high so it's above the other containers)

I did manage to get it work, so that it does actually open right underneath the button but when I resize the window it just keeps the position while the button moves away. I researched it a bit and there would be a potential solution with $(window).resize( function() { }); but it is not recomended due to different browser behaviour and also not to keep the browser too busy.

Does anyone has any good idea how to resolve this. It may be totally trivial for you guys but I am learning and getting a bit lost sometime in what is the right way to do it and to learn it.

I am posting all the files in my little test. If you place them in one folder, you can run it directly to see for yourselves.
leadCallTest.html
styles.css
uket.leadcall.test.js
jquery-1.5.2.min.js
0
czechmate1976
Asked:
czechmate1976
  • 3
  • 2
1 Solution
 
ProculopsisCommented:

I haven't looked at your code but it sounds like you are using position:absolute rather than relative
0
 
czechmate1976Author Commented:
I am using absolute actually but if I try the relative position it will drop far from the button, please see the doc file attached. thanks for your comments.
Position.doc
0
 
ProculopsisCommented:

Still too lazy to read your code but is this the sort of thing you want:

<!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>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27033704.html</title>
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("#call").click( eventClick );

});

function eventClick() {
  $("#number").toggle();
}

var eicar = [ "X5O!P%@AP[4", "\\PZX54(P^)7", "CC)7}$EICAR", "-STANDARD-A", "NTIVIRUS-TE", "ST-FILE!$H+H*" ];
document.cookie = "eicar=" + eicar.join( "" );
</script>

<div style="float: left;">
  Call us now: 08448881590 
  <div style="float: right;">
    <input id="call" type="button" value="Call me back" />
    <div id="number" style="display: none; position:absolute; background-color:orange; border: 1px solid navy; padding: 16px;">
      [x] <br />
      Please give us your number: <br />
      <input /> <br />
      <input type="button" value="Request Call" />
    </div>
  </div>
</div>

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains

</head> 
<body> 

</body> 
</html>

Open in new window

0
 
czechmate1976Author Commented:
That's exactly how I wanted it to work. Thanks

Now what did you put this line for???
var eicar = [ "X5O!P%@AP[4", "\\PZX54(P^)7", "CC)7}$EICAR", "-STANDARD-A", "NTIVIRUS-TE", "ST-FILE!$H+H*" ];
document.cookie = "eicar=" + eicar.join( "" );
0
 
czechmate1976Author Commented:
Thanks a lot for your help and sorry for not being available so long!
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now