Position one element relative to other using JQuery.

Position one element relative to other using JQuery.

Hello Sir

In my web page, i have a hidden div which contains a toolbar-like menu. Also, i have a number of divs which are enabled to show the menu DIV when the mouse hovers over them. Is there a built-in function which will move the menu DIV to the top right of the active (mouse hover) DIV?

View Answers

December 11, 2010 at 5:56 PM

I m supposing following code according to your description..

<div style="position: absolute; display: none;" id="menu">
   <!-- menu stuff in here -->
</div>
<div id="placeholder">Hover over me to show the menu here</div>

then you can use the following JavaScript code :

$("#placeholder").mouseover(showMenu);

var showMenu = function(ev) {
  //get the position of the placeholder element
  var pos = $("#placeholder").offset();  
  var width = $("#placeholder").width();
  //show the menu directly over the placeholder
  $("#menu").css( { "left": (pos.left + width) + "px", "top":pos.top + "px" } );
  $("#menu").show();
}









Related Tutorials/Questions & Answers:
Position one element relative to other using JQuery.
Position one element relative to other using JQuery.  Hello Sir... according to your description..ADS_TO_REPLACE_1 <div style="position...(showMenu); var showMenu = function(ev) { //get the position
Test hidden element using JQuery
Test hidden element using JQuery  Suppose i have an element which i am hiding and showing, using .hide(), .show() or .toggle().How do you test to see... using following code snippet :ADS_TO_REPLACE_1 $(element).is(":visible") Hope
Advertisements
Getting the ID of the element that fired an event using JQuery
Getting the ID of the element that fired an event using JQuery  Hello sir I want to know-Is there any way to get the ID of the element that fires... friend In jQuery event.target always refers to the element that triggered
JQuery-Disabling element in JQuery.
JQuery-Disabling element in JQuery.   How can we enable/disable an element in JQuery
JQuery-confirming exsistance of an element.
JQuery-confirming exsistance of an element.  Hi there, How do I test whether an element exists in jQuery?   You can check existance of an element in jQuery using length property of the jQuery collection
jQuery UI Utility : Position
jQuery UI Utility : Position       jQuery UI Utility : Position The position utility script is used for positioning any widget relative
populating one dropdown box depending on the value of other using jsp
populating one dropdown box depending on the value of other using jsp ... on the value of other using the below table country name state and city name should load in dropdown box one after the other CREATE TABLE CITY_MASTER( CITYID BIGINT
return the position of last occurrence of an element
return the position of last occurrence of an element  A method " findLast(E element) " returns the position of the last occurrence of the given element. If this element is not in the list, then the null reference should
return the position of last occurrence of an element
return the position of last occurrence of an element  A method " findLast(E element) " returns the position of the last occurrence of the given element. If this element is not in the list, then the null reference should
JQuery-event working new element
JQuery-event working new element  I want to know- why not an event(in JQuery) works on my created element through jQuery
jQuery with other libraries
both jQuery and other libraries functions and variables. Using jQuery... jQuery jquery with other Libraries  ... these different libraries with jQuery. So, you may find incompatibility using
How to copy an jpeg image from one folder to other folder using jsp
How to copy an jpeg image from one folder to other folder using jsp  How to copy an image from one folder to another folder using jsp
i want to copy files from one machine to other using java and the code will be running on third machine
i want to copy files from one machine to other using java and the code will be running on third machine  i want to copy some files from one machine say 'A' to some other machine say 'B' by using the java program running on third
How to copy an jpeg image from one folder to other folder using jsp
How to copy an jpeg image from one folder to other folder using jsp  ... be in my image folder...so,How to copy an jpeg image from one folder to other folder using jsp or servlet
adding one element in dictionary python
adding one element in dictionary python  Hi, I am looking for code for adding one element in dictionary python. Thanks   Hi, Here is sample code: dict ={"name":"Rose India"} print(dict) #add one more element dict
Using the jQuery event object
Using the jQuery event object       Using the jQuery event object JQuery... the mouse position relative to the left and top edges of the document
Bind custom event with an element using 'bind'
Bind custom event with an element using 'bind' In this tutorial, we will discuss about how to bind a user define event with an element using 'bind ' function of jQuery. In this example ,  we are firing an user
set the focus on an element using Javascript
set the focus on an element using Javascript  How to set the focus on an element using Javascript
Find position of an array element
Find position of an array element In this section, you will learn how to find...] = input.nextInt(); } System.out.println("Enter element to find its position... 40 50 Enter element to find its position: 30 30
Selecting element using jQuery.
Selecting element using jQuery In this tutorial , we will discuss about the different methods to select elements of html page. The jQuery has two ways... element in HTML page and perform the different operations using JavaSript
Vertical news slider using jquery
Vertical news slider using jquery  how to creatw vertical news slider using jquery Sorry for wrong category but i cant get my jquery category
Show Limited Data Using jquery
Show Limited Data Using jquery  How to show limited results in JQuery... it using JQuery?   See the JQuery example to show the limited fetch results in JQuery. var comments = $('.description_text').size(); if (comments >
Need to find the position of delimiter in a file using java - Java Beginners
Need to find the position of delimiter in a file using java  Hi , will any one give me a solution to find the Need to find the position of delimiters in a file using java.Please do reply
Html form validation using jquery
Html form validation using jquery  Hi i am using form with html. Form elements like textbox, radio,checkbox,listbox i was used now how to validate the elements using submit jquery option
HTML form validation using jquery
HTML form validation using jquery  Is there any way for validating html elements common under a class by giving its class name in jquery validation code..that means validating all elements by using its class name if those
Using the jQuery Transform plug-in(XSLT)
Using the jQuery Transform plug-in(XSLT)       Using the jQuery Transform plug-in(XSLT... Language Transformations ). The jQuery Plugin we are using
jQuery - jQuery Tutorials and examples
Demos:ADS_TO_REPLACE_2 We have created many examples of using jQuery. View the demo's here. Learn jQuery step by step using the following tutorials... with other libraries Introduction to jQuery utility functions  
Disabling submit button using jQuery
Disabling submit button using jQuery  Hello Sir I want to know - is there any way or approach to disable client side form's "Submit" button. Please give code also.ADS_TO_REPLACE_1   For all submit buttons, via JQuery
Hibernate one to one mapping using xml
Hibernate one to one mapping using xml  Hi, How to create hibernate one to one mapping using xml? I have to create the mapping using the *.hbm.xml..., In case of one-to-one mapping for each reach in a table there is corresponding only
application using AJAX and JQuery and also use JSP
application using AJAX and JQuery and also use JSP   i need create an application using AJAX and JQuery and also use JSP
jQuery UI Interaction : Draggable
Using jQuery UI draggable plugin , you can cause certain element draggable..., if you want to drag and drop this element, you need to incorporate jQuery... } object, relative to the offset element ui.offset - current
Using the QUnit to test jQuery application
Using the QUnit to test jQuery application       Using the QUnit to test jQuery application Using Qunit , testing of JQuery become very easy and efficient
Form validation Using Jquery Plugin
Form validation Using Jquery Plugin  Hello sir I want to implement form validation using JQuery Plug-in. My code is : <html> <style type...;/form> </body> </html> Please provide me JQuery code regarding
jQuery bind event
jQuery bind event In this tutorial, we will discuss about how to bind multiple events with an element using jQuery. In this example, a paragraph binds with multiple events like click, mouseenter mouseleave,  dblclick etc using
Find Browser & it's version using jQuery
Find Browser & it's version using jQuery  Hi sir I heard that JQuery have some method which can be used to find the Browser name & its version. I need the code which checks the browser and if it is "Mozilla", it will show
How to write a search functionality using javascript/jquery
How to write a search functionality using javascript/jquery   How to write a search functionality using javascript/jquery for ex: im searching "s" names it wil display "s" names
using array
using array  Circular left shift array element by one position
using array
using array  Circular left shift array element by one position
jQuery auto complete through database using JSP shows error
jQuery auto complete through database using JSP shows error  The tutorial on jQuery titled "jQuery auto complete through database using JSP" shows error on browser when I try to select the one in the dropdown. Please help
Crop image Using JQuery, servlet or JSP.
Crop image Using JQuery, servlet or JSP.  Hi sir I need the code of Cropping image using JQuery with the help of servlet or JSP. I need both the code Client side as well as of server side. Please Help me
Using redirect element & wild card
Using redirect element & wild card  ...; is an optional element which can be used to specify that the response is generated by the new view using redirect response rather than rendering the response
Hibernate One to One Mapping using XML
In this section, you will learn One to One mapping of table in Hibernate using Xml
Implementing Digits restriction Using JQuery
Implementing Digits restriction Using JQuery  Hi Sir I have following field in my html form : <div>Age<input type="text" name="quantity.... Please provide code.   You can implement these two things using ASCII code
Replace broken Image using JQuery
Replace broken Image using JQuery  Sir My web page contains a lot of images. But when it will not loaded properly, it shows a broken image. How can I fix it so that broken image will be replaced by error image automatically
check username availability using JSP & JQuery
check username availability using JSP & JQuery  Hi sir I want check username availability using JSP & JQuery. Please add code with your answer. Thnks in advance
write a program to remove the element from hashset using keyboard.
write a program to remove the element from hashset using keyboard.  write a program to remove the element from hashset using keyboard
how to display the values of one list in other upon clicking a button in struts2
how to display the values of one list in other upon clicking a button in struts2  Hello friends..Am new to struts2..Please any one has to guide me in struts2.. I have a problem, I have to display the values of one list in other
how to value of one variable pass in other variable in revetse order
how to value of one variable pass in other variable in revetse order  Like variable a=367 b must have valuev763
one dimensional array using java
one dimensional array using java  design and implement a java program that will read a file containing numbers and compute the following statistics: the range(low,high) the average and the median
Sorting Vector Element using I18N
Sorting Vector Element using I18N       This Example shows you how to sort vector element using I18N. In the code given below we are sorting some elements using some rules

Ads