The overlay menu in Jquery version 1.10.1

In a nutshell, my issue is this: I am looking to create split-buttons with a menu inside (achieved using jquery-ui as shown here: jqueryui-demo). However, I want these buttons to not impact the positioning of other elements. The second button should remain in place even when the first split-button expands its menu, which is currently not the case as demonstrated in this jsfiddle. While I understand that changing the position attribute in the CSS to absolute might be a solution, I prefer not having to manually calculate and adjust positions whenever changes occur.

Is there a way to instruct jquery.menu to overlay my menu?

The gist of the jsfiddle problem can be summarized as follows:

JavaScript

$(function () {
     $.each($(".key"), convert);

 });

 function convert(index, element) {
     //retrieve button-value
     var key = $(element).text();
     //exchange elements html with the split-button and the menu
     $(element).html(
         '<div><div><button class="KeywordTag">' + key + '</button>
          <button class="selectButton">Options</button></div>
          <ul>
            <li><a href="#" class="addtoquery">Add to Query</a></li>
            <li><a href="#" class="opentab">Open in new Tab</a></li>
            <li><a href="#" class="addtoquerytab">Add to Query in new Tab</a></li>
          </ul></div>');
     //call jquery.button(...) to turn the buttons into good looking buttons the the
     //unordered list into a menu
     //...
     //add event handling
     //...
  }

CSS

//for round borders...
//I'd probably need to change the position attribute, but I really don't want to
//have to calculate each position by hand...
.KeywordTag {
    -moz-border-topleft-radius: 75px;
    -moz-border-bottomleft-radius: 75px;
    -webkit-border-topleft-radius: 75px;
    -webkit-border-bottomleft-radius: 75px;
    border-bottom-left-radius:75px;
    border-top-left-radius:75px;
}
.selectButton {
    -moz-border-topright-radius: 75px;
    -moz-border-bottomright-radius: 75px;
    -webkit-border-topright-radius: 75px;
    -webkit-border-bottomright-radius: 75px;
    border-bottom-right-radius:75px;
    border-top-right-radius:75px;
}

HTML

<!-- Those spans will be exchanged with 
     the actual buttons and menus by the javascript above -->
<span class="key">examplekey</span>
<span class="key">examplekey2</span>

Answer №1

This morning, I successfully resolved an issue and decided to share the solution for others who might encounter the same problem.

To achieve the desired functionality, simply define the <ul> element as

<ul style='position: absolute; z-index=1'>
.

You can view it in action here: http://jsfiddle.net/crapman/VUBqK/7/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Bootstrap 4 to trigger multiple alert notifications

I want to show two different alerts on a form text field: <form> <div class="main"> <div class="input-group"> <input type="text" class="form-control item" placeholder=" ...

What is the best way to create a sleek typewriter effect transition by hovering between tabs?

When hovering over a tab, the content in the main content area's child div should be displayed from a sibling div that holds the content. Initially, the details div style is set to hide the contents but upon hover, it is displayed. The described func ...

Is it possible to swap out one ID value for another using JavaScript?

I am facing two issues 1) First Issue I need to update the current id value with a new one. Whenever the a tag is clicked, an event in jQuery code should be triggered to change the id value. For example, When a button is clicked <div class="video" i ...

Tips on making a bubble similar to the one on the Google homepage that prompts you to make Google your default homepage

I am looking for a subtle way to suggest visitors to make my website their homepage. While I considered using a popup, I didn't want it to be too intrusive for the visitor to see a large popup every time they visited the website. I'm interested ...

What is the method for adding content to the initial frame?

Here is the code snippet that I am currently working with: <frameset rows="70,*" frameborder="0" border="0" noresize=""> <frame name="heading" scrolling="no" noresize="" src="head.htm" marginwidth="0" marginheight="0"> <frame name="onli ...

jQuery scrollTop animates to the start of the webpage

Upon loading the page, the div appears at the top of the screen but then jumps to its correct position once scrolling begins. To view the website, click on this link: calretirement.com/classes-test.php CSS: .register{position:fixed !important; bottom:1 ...

utilizing window.location.href to direct to a page with javascript capabilities

I am currently developing my own personal website. It is designed to be very light in terms of loading and content. This website relies heavily on the use of jquery, so if a user's browser does not have JavaScript enabled, the site will not function ...

Tips for retrieving the concealed input value from the div directly preceding

Is it possible for me to retrieve the hidden input value by clicking on the text "upload profile photo"? I don't have much experience in this area. <div> <input type="hidden" value='<?php echo $list['profil ...

Issue with page layout arises due to a problem with AngularJS directive

I recently downloaded the Ace Admin template from As I tried to integrate it into my AngularJS project, I encountered a problem when using specific parts of the template in custom directives. To isolate and simplify the issue, I created a plunker at https ...

Inadequate speed and efficiency in Javascript and JQuery operations

I'm facing severe lag problems in my JavaScript code, particularly with the parallax effects being very slow. I suspect this is due to multiple executions of functions. Below is the code snippet: function tada() { $(".arrow").addClass("tada"); s ...

Is there a way to use jQuery to gather checkboxes and add the selected ones to an array?

How can I efficiently collect values of checked checkboxes with a specific classname and store them in an array? Here is the current approach: var a = new Array(); $('.categoriesCb').each(function(i, item) { if ($(item).prop('checked&apos ...

Trimming text from the start and inserting ellipsis in a multi-line passage

My goal is to present a paragraph on the webpage that will be dynamically updated based on user actions. I want to restrict the content to a specified number of lines and if the user tries to exceed this limit, the beginning of the paragraph should be trun ...

Personalized color scheme for calendar td

I am facing an issue with my event calendar where I want to change the background color of td. I came across a helpful solution in this question, but it did not fully solve my problem. When I implemented the following jquery: $('[class*="fc"]'). ...

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

Sass includes line-specific comments to indicate where a certain definition is located

There seems to be a strange occurrence when I save my file and it's generated by Compass. Each declaration is followed by a comment indicating the line of the sass file, like this: /* line 55, ../sass/app.scss */ In addition, my config.rb file conta ...

Discover the seamless integration of using Angular UI select2 with Angular 1.2.5 for a smooth user

I am attempting to make this jsfiddle compatible with angular 1.2.5 instead of just 1.0.5. http://jsfiddle.net/hWXBv/25/ <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> The goal is to create a Gmail-lik ...

Creating responsive modal windows in Vue and Laravel to dynamically adjust to the screen size

I am currently working with a modal window code snippet. <transition name="modal" @close="showModal = false"> <div class="modal-mask" style=" width: 90% !important;"> <div class="modal-wrapper"> < ...

Ajax is malfunctioning and defaults to the initial method and action

I am facing an issue with ajax not working for a form, except for one form that works perfectly with AJAX. I have tried various solutions such as changing input to button and altering the type from "submit" to "button", experimenting with different jQuery ...

Use PHP to read and echo the entire contents of a file, then transmit it

Currently, I am utilizing the JQuery Form Plugin to facilitate file uploads. While I can successfully transmit the contents of an uploaded txt file to the associated jQuery code using the variable $c in my PHP script, I am interested in sending the entire ...

Verify if an element is not being hovered over using jquery

I've been experimenting with creating my own tooltip, and while it works well, I noticed that if you move the mouse quickly out of the div, the tooltip remains visible. The problem seems to be that the tooltip follows the cursor closely, making it fr ...