Currently, I am attempting to position a div absolutely using CSS. I have two divs on which I am implementing jQuery slide down and slide up functionalities. The issue I am facing is that when one div slides down, the other div is also affected by the same behavior. You can view the code here.
Can someone please suggest an approach to prevent the second div from sliding when the mouse is over the first div, and vice versa?
Check out the modifications made to http://jsfiddle.net/K2ndZ/3/
My adjustments were limited to the
.combobox {cursor:pointer;float:left; margin-left:10px;}Take a look at the following link: http://jsfiddle.net/sarfarazdesigner/K2ndZ/5/ where you need to make some changes to the CSS.
.combobox {cursor:pointer;display:inline-block; position:relative;}
.combobox .selector {position:relative; float:left; }
.combobox .selector p{border:1px solid #cccccc;padding: 2px 5px;}
.combobox ul {padding:0;margin:0;display:inline-block;border:1px solid #eeeeee;background-color:#cccccc;}
.combobox li {padding: 2px 5px}
This is the HTML code:
<div class="combobox">
<div class="selector">
<p>Please select</p>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div class="selector">
<p>Please select</p>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
This is the jQuery part:
$(document).ready(function(){
$('.combobox ul').hide();
$('.combobox p').hover(
function(){
console.log(this);
$(this).next('ul').stop().slideDown();
},
function(){
$(this).next('ul').stop().slideUp();
}
);
$('.combobox li').click(function(){
$(this).parents('.combobox').find('.selector').text($(this).text());
});
});
Here is the updated link based on your requirements:
Preface: I have referenced a helpful article for my project. You can find it here. I am working on providing visual feedback to the user when they submit a form. I was inspired by YouTube's progress bar and wanted to implement something similar wher ...
I have a form with multiple buttons that, when submitted, will redirect to a different page and pass along some variables. echo " <form method=\"POST\" action=\"sightWordsTest.php\"> ...
Utilizing jQuery functions is a common practice for us. However, there has been talk about its impact on performance. While it is simple to write, understand, and maintain, some say that it is slower compared to using traditional raw JavaScript code. But ...
I am seeking a way to either eliminate the label that indicates the number of selected files, or be able to control it so that when I upload a file, the label increases and decreases when I delete an uploaded file. How can I achieve this? Below is my HTML ...
The AJAX function was intended to return HTML inside the div checkout-wrap on the same page, but it is redirecting to a blank page and displaying the array instead. Here is the code in the Controller: return ['success'=>1, 'msg'=&g ...
Here is a snippet of my JavaScript code: function getSelectedText(){ if(window.getSelection){ select = window.getSelection().getRangeAt(0); var st_span = select.startContainer.parentNode.getAttribute("id").split("_") ...
My survey is lengthy and I don't want users to accidentally lose their data by clicking the back button. Currently, I have an alert that warns them about potential data loss, but the alert also pops up when they submit the form. Is there a way to disa ...
I have a flexbox with columns that each take up one third of the width. However, due to using flex-grow, the last element does not stick to its column size. I understand why this is happening, but I don't want to use max-width as it's not always ...
Looking to update the highlighted text within a p tag. The code below addresses handling new line characters, but for some reason the replacement is not working as expected. Check out the HTML snippet: <p id="1-pagedata"> (d) 3 sdsdsd random: Subj ...
I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...
I am currently utilizing the bootstrap grid system, as depicted below, and I am attempting to center some div elements (pic). Despite my attempts with various CSS properties like {margin:0 auto; width:50%}, I am unable to achieve the desired result. I fi ...
Hello there! I am in the process of creating a web constructor. Currently, my application functions as follows: I verify the URL that the user is visiting (such as localhost:3000) I identify their project name within my web constructor (localhost:3000 -&g ...
Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly. In an attempt to fix this issue, I tried using fully qualified path ...
Apologies for my poor English. Is there a way to retrieve the value of a select box when a user either changes the select box or hovers over it with just one event? I attempted the following code snippet but it did not work as expected: jQuery("select[nam ...
import { TextField } from "@mui/material"; import { FunctionComponent } from "react"; interface IProps { type: string; label: string; color: | "error" | "primary" | "secondary" | &quo ...
Hey everyone, I could really use some assistance. I'm attempting to utilize this code to dynamically retrieve variables and values from a form. However, the form contains numerous checkboxes that may or may not be checked. I'm looking for a way ...
Consider a scenario where you have a component with logic to toggle the visibility of its contents: @Component({ selector: 'hello', template: `<div *ngIf="visible"> <h1>Hello {{name}}!</h1></div>`, styles: [`h1 { fo ...
I have encountered a specific issue. Within my code, there are certain elements, specifically <li> elements, that undergo a particular operation triggered by a click event: $('.panelTabs li').on('click', function () { // ..som ...
Currently, I'm in the process of constructing a website with Bootstrap 5 and have integrated a form that is intended to be completed and forwarded to my email address. I've chosen to utilize formsubmit.co for this purpose. However, when I attempt ...
I work with two main models: Collections and Images Collection Model class Collection < ActiveRecord::Base has_many :images, dependent: :destroy accepts_nested_attributes_for :images end Image Model class Image < ActiveRecord::Base belongs_ ...