Home Answers Viewqa JavaScriptQuestions Position one element relative to other using JQuery.

 
 


samar
Position one element relative to other using JQuery.
1 Answer(s)      2 years and 6 months ago
Posted in : JavaScript Questions

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 Pages:
Position one element relative to other using JQuery.
Position one element relative to other using JQuery.  Hello Sir... showMenu = function(ev) { //get the position of the placeholder element var... according to your description.. <div style="position: absolute; display
jQuery UI Utility : Position
jQuery UI Utility : Position       jQuery UI Utility : Position The position utility script is used for positioning any widget relative
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 (within
jQuery - jQuery Tutorials and examples
created many examples of using jQuery. View the demo's here. Learn jQuery step by step using the following tutorials: Overview of jQuery...? How to use jQuery with other libraries Introduction to jQuery utility
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
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 : $(element).is(":visible") Hope this will helpful
jQuery UI effects
: 135px; padding: 0.4em; position: relative... jQuery UI effects       jQuery UI effects effects.core.js
jQuery with other libraries
both jQuery and other libraries functions and variables. Using jQuery...;    jQuery.noConflict(); //For using other libraries   // Use jQuery... jQuery jquery with other Libraries  
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... to understand the concept. Thanks in advance   Dear friend In jQuery
Theming JQuery
styles. The jQuery UI CSS Framework points the role an element's role... Theming JQuery       Theming JQuery The jQuery widgets are designed
JQuery-Disabling element in JQuery.
JQuery-Disabling element in JQuery.   How can we enable/disable an element in JQuery
JQuery
), textbox is in one jsp file, the ajax mathod call should be in another jsp file using url of the doctors, use jquery autocomplete
jQuery UI Interaction : Draggable
Using jQuery UI draggable plugin , you can cause certain element draggable..., relative to the offset element ui.offset - current absolute position... and drop this element, you need to incorporate jQuery UI Droppable
jQuery selectors
selectors. The jQuery selectors are one of the main feature in jQuery library... the elements of page to operate upon with jQuery library methods. For using JQuery... jQuery selectors      
jQuery UI Interaction : Droppable
Using jQuery droppable plug-in , you can  make selected elements... draggable element, a jQuery object. ui.helper - current draggable helper, a jQuery object ui.position - current position of the draggable helper
load more with jquery
load more with jquery  i am using jquery to loadmore "posts" from my...; } .suggestionsBox { position: relative; left: 30px; margin...... whats the problem can any one will say please? here is my code
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 Features
methods of jQuery. It is using CSS 3.0 syntax which provide us freedom to select one or more elements. Using CSS , you can select element by id, class...-ins The jQuery architecture provide us freedom to extend functionality using
JQuery-Selecting class or ID
JQuery-Selecting class or ID  Hi Guys, I am new to JQuery. I am getting little trouble in selecting an item using class or ID in jQuery?   Given below code selects an element of id name "element1
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 password validation
jQuery password Validation : jQuery "equalTo: "#password" " is the method to validate or check password if the element is empty (text input...; Getting Started with jQuery "equalTo: "#password""
jQuery required validation
jQuery required Validation: jQuery "required" is the method to validate or check  if the element is empty (text input) or unchecked (radio...;/option>. Getting Started with jQuery required : In this example
jQuery email validation
jQuery Email Validation : jQuery "required email" is the method to validate or check email  if the element is empty (text input) or ... with jQuery "required email" : In this example there are the following
JQuery url validation
jQuery url Validation : jQuery "required url" is the method to validate or check url if the element is empty (text input) or  wrong url type... } } }); </script> Getting Started with jQuery "
jQuery filters
etc. Use of jQuery attribute filters Using jQuery attribute filters make... jQuery filters       jQuery filters What is jQuery filters ? The jQuery filters
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... as a string to the jQuery constructor (eg. $("div > ul a"
jquery
jquery  What are the Jquery similarities or difference with other java script libraries
Getting Started with jQuery
into the project directory. Nowadays jQuery is one of the most popular library...jQuery: jQuery:  jQuery is a JavaScript library which accentuates interaction between JavaScript and HTML. jQuery helps programmers to keep
jQuery CSS Selector
jQuery CSS Selector       jQuery CSS Selector In this section we are learning about the jQuery CSS Selector. The CSS Selectors is the powerful API provided
Creating custom animations in jQuery
function of jQuery. We can do following things during animation using...="223" style="position: relative; left: 10px;"... Creating custom animations in jQuery   
JQuery
JQuery  hi there, I am just beginner for jQuery and i want to know-what is jQuery ? How it is better than JavaScript ?   jQuery... JavaScript : Each jQuery returns itself so you can chain them together(Chaining
jquery
jquery  how to display the leaves taken or holidays of the year or half working days in a calendar in some colors to identify the days using jquery plugin
JQuery
JQuery  how to create jquery auto-complete textbox ? in which data...://www.roseindia.net/tutorial/jquery/autoSuggestTextbox.html   thank you for fast reply. when i m using key-down than cursor is not going down.i m not able
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
The 'innerfade' effect using jQuery plug-in
The 'innerfade' effect using jQuery plug-in In this tutorial , we will discuss about how to use 'innerfade' effect of jQuery. In below example, a table has a unordered list ,whose each element displays one by one using
JQuery
), textbox is in one jsp file, the ajax mathod call should be in another jsp file, use jquery autocomplete
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... Enter element to find its position: 30 30 is found at index
jQuery Demos
in different file Display current time using jQuery & JSP Selecting element using jQuery. Showing content of a file... with an element using 'bind' jQuery 'select' form
Conflict with jQuery scripts
Conflict with jQuery scripts  Hi, How to avoid Conflict with jQuery scripts while using jQuery with other libraries? Thanks   Hi, Read the using jQuery with other libraries tutorial for more information. Thanks
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
position of a link
position of a link  I have 10 links which links to a table if i click the first one the table appears at the top likewise if i click the 10th position of a link the table appears at the bottom i want it to be display at the top
How can we implement Pop-up in JQuery without Plugin?
can we Implement pop-up in JQuery without using plug-in. Please provide me code... one png image for pop box. Here we are using "bubble.png" as background image...; width: 100px; position: relative; } div.rss-popup em { background
jQuery Utility Functions
jQuery Utility Functions      In this section we are discussing about jQuery Utility Functions... these funtions very frequently while writing your jQuery application. Here is the list
jQuery UI Interaction : Sortable
jQuery UI Interaction : Sortable       jQuery UI Interaction : Sortable Using jQuery sortable plug-in , you can sort selected element by mouse drag
jQuery UI Widget : Accordion
jQuery UI Widget : Accordion       jQuery UI Widget : Accordion Using...; Because of jQuery's architecture, other developers can use its
The animation of image using the 'animate' effect of jQuery
The animation of image using the 'animate' effect of jQuery... function of jQuery. We can do following things during animation using it's...="223"  style="position: relative; left: 10px;" />
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
jQuery Drop Down Menu
, sans-serif; z-index: 100; position: relative; } .van li { border... jQuery Drop Down Menu       In this JQuery tutorial we will develop a program  to make Drop Down menu