Guide to positioning a toolbar within an element when hovering over it in HTML with the help of JQuery

function attachMenuBar() {
    $('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) {
        if (this === e.target) {
            (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
        }
    });
}

function setMenuBox(obj) {
    $(obj).wrap('<div class="toolBarWrapper" style="position:relative;"/>');
    $(".toolBarWrapper").append($('.printToolBar'));
}

function removeMenuBox(obj) {
    $(".toolBarWrapper").remove('.printToolBar');
    $(obj).unwrap();
}

function createToolBar() {
    var ul = $("<ul>").attr({
        'class': "printToolBar",
        style: "border: 1px solid #ff0000; position:absolute; top:0 ; right: 0;"
    });
    var li = $("<li>").attr({
        'className': "printToolBarList"
    }).text('Print');
    var printLi = li.clone().attr({
        id: "print"
    }).on('click', function (e) {
        console.log(this);
    });
    ul.append(printLi).appendTo("body");
};

attachMenuBar();
createToolBar();

I am implementing a menu bar for every HTML element, but I am facing an issue with detaching the event on the menu bar itself. This is causing some JavaScript errors. Is there any alternative approach to achieve the same functionality?

Answer №1

If you want to remove the 'hover' effect from the ul element, it seems like you need to modify your initial line of code:

$('body').on('mouseover mouseout', '*:not(.printToolBar), *:not(ul)', function (e) {
     if (this === e.target) {
        (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
     }
});

With this change, the mouse events will be applied to all elements except for ul and .printToolbar.

UPDATE :

To specifically detach UL children:

$('body').on('mouseover mouseout', '*:not(ul.printToolBar), *:not(ul.printToolBar > *)', function (e) {
    if (this === e.target) {
       (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
    }
});

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

Access information from an array in Angularjs and transfer it to an identifier

I am facing an issue with passing values from the view to the controller and storing them in an array. My goal is to then retrieve a value from the array and pass it as the id value in the update method. Here is my current setup: HTML <label class="c ...

Hold on for the completion of Angular's DOM update

I am facing an issue where I need to connect the bootstrap datepicker to an input field generated by AngularJS. The typical approach of using jQuery to attach the datepicker doesn't work as expected because the element is not yet available: $(functi ...

Determine using Javascript or jQuery whether the value of input1 is greater than the value of input2

Ensuring that Value1 is always greater than Value2 in a form submission is crucial. If Value1 becomes greater than or equal to Value2, an error message should be displayed and the form submission should not be processed. Below is the code for the form: & ...

Exploring ways to extract key:value pairs from an encoded URL form using POST in express/node.js

I have a web form with 4 input fields. The form is set up as follows: <form action="/" method="post" onsubmit="alert('data submittet')"> It should default to x-www-form-urlencoded. The form functions correctly and I am able to submit my d ...

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

Partially filling circles for a personalized coin-slider experience

Looking to create a unique coin-slider that changes the filled factor of a coin as it moves through a specific range of images. For example, when scrolling through 10 images, the filled part of the coin would transition from 0 to 1 depending on which image ...

Transferring a Sharepoint 2010 List Item between folders

Currently, I am facing an issue while attempting to transfer a list item from one folder to another. Despite utilizing a code that I discovered (the link to the source of the code can be found below), I keep encountering an error message stating "Value doe ...

Using CSS to customize the dropdown text styling of a select box within a custom wrapper

I have a specific customized dropdown menu using the styled-select wrapper: HTML: <div class="styled-select"> <select name="example_length" aria-controls="example" class=""> <option value="10">10</option> <option value="25"> ...

In the game of rock paper scissors, the icons become unclickable once you achieve a score of 5

I have created a Rock Paper Scissors game where the score resets if either the user or computer reaches 5 points, but I want to prevent any further play after hitting 5. Currently, the game displays a message and reloads after 5 seconds, during which tim ...

Tips for getting a sticky table header and including a limited number of columns, each with checkboxes or input fields

Encountering issues while trying to implement functionality with a jQuery library. One specific problem is the inability to interact with checkboxes on sticky columns, as well as difficulties clicking and typing in text fields. I am utilizing the jQuery S ...

A guide to sorting an array based on user input using Javascript

I have developed an app that utilizes JavaScript and the VueJS framework. I am currently working on implementing a 'dropdown' feature for items that are dynamically filtered based on user input. Below is the code snippet responsible for renderin ...

Challenges with locating text within the innerHtml property of a VB WebBrowser Object

Using Visual Studio 2010 with Visual Basic.NET In my project, I have created a form that utilizes a WebBrowser control to load an HTML file. Users are able to search for specific words or phrases within the document, prompting me to extract the innerHtml ...

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

The application suddenly displays a blank white screen after encapsulating my layout with a context provider

Here is the custom layout I created: export const metadata = { title: "Web App", description: "First Project in Next.js", }; export default function CustomLayout({ children }) { return ( <html lang="en"> ...

What is the best way to make IE 10 display a pointer instead of an I-bar for a select list?

Is there a way to make IE 10 display a pointer instead of an I-bar when selecting from a list? Despite trying various methods found in similar questions, I have been unable to resolve this issue. The cursor: pointer property works as expected on other br ...

Concealing and organizing navigation bar items for mobile devices

Currently, my navbar looks like this on a larger screen: But here's how it appears on a smaller screen (phone): What I'm hoping to achieve is to make the U logo on the top left disappear and align "get in touch" closer to the other elements. On ...

Applying CSS to an iframe using JavaScript: A Step-by-Step

I have an Iframe editor and I am trying to change some CSS inside the editor. However, when I attempt to apply the CSS, it does not affect the styles within the Iframe. <div id="editor" style="flex: 1 1 0%;"> <iframe src="https://editor.unlay ...

Is your Discord bot failing to log on?

I created a discord bot, but I'm having trouble getting it online. There are no errors and I'm not sure why. Here is my code: const TOKEN = "MyBotsToken"; const fs = require('fs') const Discord = require('discord.js'); const C ...

The custom div slider speed is too quick, specifically when transitioning back from a different browser tab

While observing the code in action, everything seems to work fine but when I switch to another browser tab and come back, the speed of the animation is too fast. Below is the jQuery code snippet: var divId = 1; var lp = 0; $(document).ready(function (){ ...

Dependencies in Scala.js for CSS styling

I am currently having an issue implementing Scala.js with the bootstrap library. Including the js file was a simple and straightforward process: jsDependencies +="org.webjars" % "bootstrap" % "3.3.7-1" / "bootstrap.js" minified "bootstrap.min.js" However ...