I have a div in my code that is hidden by default. I want to show this div exactly left whenever the user clicks on the show button. Since there are multiple show buttons on my page, I would like to display the div as described above.
<div id="menu" style="display: none;">
<!-- insert div content here -->
</div>
<button id="showBtn">Show</button>
To make it simpler (and reduce reliance on Javascript), you can rearrange the button and menu in the HTML:
<button id="showBtn">Show</button>
<div id="menu" style="display: none;">
<!-- content of the div goes here -->
</div>
By doing this, you can use the :focus state of the button to show the corresponding menu.
#showBtn:focus + #menu {
display: block!important;
}
This rule essentially means "when the button is focused, display the following menu". The !important declaration is needed to override any inline styles.
It seems like you are looking to adjust the display style to 'inline-block' after clicking the button.
<div id="menu" style="display: none;">Test
<!-- content goes here -->
</div>
<button id="showBtn" onClick="$('#menu').css('display', 'inline-block')";>Show</button>
To dynamically position your #menu element, you can utilize jQuery's .offset() method. This will allow you to get the top/left position of your button:
$(".show").on("click", function () {
var topPos = $(this).offset().top;
var leftPos = $(this).offset().left - $("#menu").width();
$("#menu").css({
top: topPos + "px",
left: leftPos + "px"
}).fadeIn(100);
})
Check out this live example for reference.
I have a CSS file located in the public directory and two EJS templates in the views directory. The CSS file works fine when using this route: app.get('/theresa', (req, res) => { res.render('templates/home') }) However, when I ...
Currently, I'm utilizing React JS and I've brought in a component from Material UI known as (https://material-ui.com/api/table-pagination/). My goal is to customize the Default labelDisplayedRows that looks like this: ({ from, to, count }) => ...
I'm a newcomer to Node.js and encountering some challenges. Whenever I attempt to open 127.0.0.1:3000/bejelentkezes, I encounter the following error: POST /bejelentkezes 500 550.784 ms - 2259 GET /css/404.css 304 2.751 ms - - 1 Successful login Erro ...
In the midst of my work on an Angular application, I have been utilizing angular material components. However, as I delved into styling the application, I encountered difficulties in styling the angular material component, particularly in enlarging a dropd ...
I'm a newcomer to JQuery Mobile and trying to implement it in my Apache Wicket-based application to enhance the mobile user experience. However, I'm facing "Error Loading Page" issues when clicking on page links, which never occurred before integ ...
My issue lies in the usage of DISPLAY:BLOCK for the td cells with a class of column. Despite applying it appropriately, the logo and CALL US td cells do not stack vertically when resized to mobile size. While they are supposed to take up 100% width, they ...
Currently, I am facing a challenge in adding multiple values to a database using PHP from an HTML form. The issue is that I am unable to simply refer to the name attribute of the HTML form because each field in the form is dynamically generated by a PHP sc ...
Here is a unique question that involves comparing JSON structures and extracting the differences. A JqTree has been created, where when the user changes its tree structure, both the "old" JSON and "new" JSON structures need to be compared. Only the values ...
I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...
Currently, I am utilizing the react-hook-form in combination with MUI components. In order to incorporate the Select component, I have enclosed it within the Controller since direct registration is not possible. Although everything seems to be functioning ...
I'm having trouble positioning the Facebook login button in my header. It keeps appearing far to the left and below other links :) I'm currently testing it on this page: My goal is to have the button display just to the left of the login link a ...
Is it possible to dynamically change the tooltip content as I drag the div that contains the tooltip? I want to display the ui.position.top in the tooltip during the drag event. I have checked the jQuery UI API documentation for tooltip content, which ment ...
I have developed an app for password validation using an AngularJS directive. The requirements for the password include at least one special character, one capital letter, one number, and a minimum length of 8 characters. Additionally, I have included a pa ...
Is it possible to have two jQuery flip switches side by side, but only one visible if the screen is too narrow? I've tried assigning different classes to each switch for styling purposes, but it doesn't seem to work correctly. When I assign a cl ...
I am facing a challenge where I need to trigger the function showExtraBlogposts() in Blogpostreader.js upon clicking on a button rendered in Blog.js. Initially, I attempted to call it using onClick={Blogpostreader.showExtraBlogposts()} but it returned an ...
I am attempting to save multi-select input using ajax in a Laravel application, but I keep encountering the following error: {message: "Function name must be a string", exception: "Error", …} Below is my Blade code: <select class= ...
I'm just starting to get the hang of jQuery, but I've hit a roadblock right from the start. I can't seem to get any function to execute in getJson. I attempted to write a separate function to run it, but that didn't solve the issue. So ...
Are there any resources that explain how to style the input type "time" completely? I have been searching but unable to find a comprehensive guide with all the necessary style attributes! The only example I came across is: input[type="time"]{ /**styl ...
I am facing an issue with a navbar that has buttons to reveal hidden divs underneath. <a data-bs-toggle="offcanvas" href="#select" role="button" aria-controls="select"></a> <div id="select" c ...
I am facing a challenge with five divs that I want to display inline and make them responsive. The issue is that when the window size changes, they end up getting squished together instead of breaking into a new row as desired. I have tried various methods ...