Looking for a more efficient way to display a dropdown menu div with the tags below on click of multiple buttons. Instead of hiding the div under each button or making an Ajax call to render the content every time, I am exploring options to hide the div somewhere in the page and use jquery/JS to display it under the button when triggered.
<div id=”statusmenu”>
<ul>
<li>menu Item#1</li>
<li>menu Item#2</li>
</ul>
</div>
Initially, it's important to note that creating multiple instances of the specified div is not feasible due to the requirement for unique ids. To address this, one could consider utilizing a class name instead, like class="statusmenu". Additionally, determining which elements should display the menu below can be achieved by assigning them the class="status". In such scenario, the following script can be used to implement the menu:
$(document).on("click",'.status',function(){
if($(this).find('.statusmenu').length == 0){
var d = document.createElement("div");
d.setAttribute("class","statusmenu");
var ul = document.createElement("ul");
var li1 = document.createElement("li");
li1.innerHTML = "menu Item#1";
var li2 = document.createElement("li");
li2.innerHTML = "menu Item#2";
ul.appendChild(li1);
ul.appendChild(li2);
d.appendChild(ul);
$(d).hide();
this.appendChild(d);
$(d).slideDown();
}else{
$(this).find('.statusmenu').slideUp('fast',function(){ $(this).remove() });
}
});
Check out the demonstration on jsfiddle: http://jsfiddle.net/jakVp/
I need to prepopulate a knockout component when the document is ready. This is the code I have written: function Finding(id, trigger) { var self = this; self.id = ko.observable(id); self.trigger = ko.observable(trigger); } function FindingVi ...
Today I discovered the Holy Grail of Layouts while coding, but when I implemented it, the output in browsers was not as expected. The borders were incomplete and strange: Here is the code snippet that caused the issue: #container { border: 10px soli ...
I currently have a unique JS Fiddle demonstrating a div with a background image inside a content editable input. My goal is to highlight the div as if it were regular text. .input { border: 1px solid black; width: 200px; } .emoji { width: 16px; ...
https://i.stack.imgur.com/ZA32X.png https://i.stack.imgur.com/iDHZW.png I am facing an issue with updating the local storage of a current User for only username. When I update the username, it's not reflecting in local storage. Even though I can s ...
I'm facing an issue with my angular reactive-form project. I have successfully set up everything except routing. After defining all the routes in the app.module.ts file, things started getting messy. In my basic form, I had a responsive CSS grid with ...
Default phone feature: When an input is focused on a mobile device, it automatically scrolls to that input. Issue: This functionality is not working in my ionic app due to horizontal scrolling. Consequently, when I tap on an input, it does not scroll to i ...
Currently working on a React.js project using Bootstrap 4. The issue I'm facing involves two elements - navbar and alert, both implemented from Bootstrap4. Strangely, when setting position:fixed for both elements (overriding CSS), they become semi-tra ...
I'm feeling a bit lost when it comes to handling ajax data in Python... I prefer not to use Flask, as I need to retrieve data from a PHP file and my website that uses port 80. After some research on Google, I came across the idea of using CGI for th ...
While examining the source code of a webpage, I stumbled upon this intriguing piece of JavaScript right after the standard stylesheet declaration: <script type="text/javascript"> if('' != '') { document.write("< ...
I have a unique situation where I have an iframe containing a DIV element named "pageContainer1". My goal is to insert a canvas element into that specific DIV and then be able to access it in order to draw something on it. Despite my attempts so far, this ...
Initially: https://i.sstatic.net/SLG7O.png After adding a new row and then removing it. https://i.sstatic.net/FegjK.png Why is this happening? When I set val(""), the textbox should have no value. What mistake did I make in my code? Please assist. Her ...
I am working with HTML code that looks like this: <input id="fieldname-1" name="field_name[value][1]" value="1" type="checkbox" /> <input id="fieldname-2" name="field_name[value][2]" value="2" type="checkbox" /> <input id="fieldname-3" name ...
I have two divs located in the footer of my website and they can be seen here: divs in question Below is the code for these divs: .upNextCard{ /* Rectangle 68 */ position: absolute; width: 214.29px; height: 255.69px; margin-left:300px; margin ...
My prototype includes a method for adding callbacks: /* * Add a callback function that is invoked on every element submitted and must return a data object. * May be used as well for transmitting static data. * * The callback function is supposed to e ...
I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...
Currently, I am utilizing Async Request to update the post meta of Wordpress in a loop. Sadly, some users who are implementing my code have reported encountering errors. Upon checking their logs, they have discovered entries such as: [Fri Sep 30 15:12: ...
I am currently utilizing velocityjs, localscroll (which is dependent on scrollTo). By default, there is a hidden form on my webpage. I have implemented an anchor tag that, upon clicking, will reveal the form. html <a href="#myForm" class="button" id= ...
Is it possible to ensure consistent line-height between all lines by specifying it as 0.99em for both P tags and UL tags? Along with that, is it possible to maintain a space of 0.99em between P tags and UL tags, as well as between P tags themselves? To se ...
How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...
My preference is to use standard CSS rules for different styles that include various vendor prefixes. To test, I would start with the following: border-radius: 5px; box-shadow: 0px 0px 4px 0px #fff; transform: rotate(90deg); For the final version, I woul ...