I need help with hiding the content of all elements while dragging or sorting the list. Can someone assist me with this? Here is my working fiddle. My jQuery code used in the fiddle is:
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
Appreciate any assistance provided. Thank you.
By using the start and stop callback handler, you can achieve this functionality. Everything remains the same in your code except for the script section.
/*$( function() {
$( "#sortable" ).sortable({
start: function (event, ui) {
ui.item.find(".content").hide();
},
stop: function (event, ui) {
ui.item.find(".content").show();
}
});
$( "#sortable" ).disableSelection();
} );*/ // this is to hide only dragging element content
$( function() {
$( "#sortable" ).sortable({
start: function (event, ui) {
$(".content").hide();
},
stop: function (event, ui) {
$(".content").show();
}
});
$( "#sortable" ).disableSelection();
} ); // this is to hide all elements contents#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
h1{
font-size:12px;
}
.content{
font-size:10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 1
</h1>
<div class="content">
Test Content
</div>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 2
</h1>
<div class="content">
Test Content
</div>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 3
</h1>
<div class="content">
Test Content
</div>
</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 4
</h1>
<div class="content">
Test Content
</div></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 5
</h1>
<div class="content">
Test Content
</div></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 6
</h1>
<div class="content">
Test Content
</div></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<h1>
Item 7
</h1>
<div class="content">
Test Content
</div></li>
</ul>To conceal the contents during dragging, you can use the following code:
$( function() {
$( "#sortable" ).sortable({
start: function( event, ui ) {
ui.item.find("div.content").hide();
},
stop: function( event, ui ) {
ui.item.find("div.content").show();
}
});
$( "#sortable" ).disableSelection();
} );
I am working on a project that involves an HTML section where a user can choose a billing term from a drop-down list. I am in the process of writing JavaScript code to capture the selected option value and use it in another part of the webpage. Here is a ...
Currently, I am utilizing Stylebot in Chrome to modify certain styles on a webpage that I frequently browse. My goal is to conceal elements in a list that have links I have already visited. For instance, there is a <tr> with the class table-row, and ...
Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...
In the questionnaire form, each question is looped over along with its answers to create radio buttons for each answer. The answer object contains a property called answered, which can be true or false depending on whether the answer has been previously ...
Here is the HTML I am working with: <div> <img class="hi" src="http://i.imgur.com/f9WGFLj.png"></img> <img class="HI" src="http://i.imgur.com/f9WGFLj.png"></img> </div> Additionally, I have the following CSS co ...
I'm currently working on building an ajax function that, when triggered, should display information in a newly created modal. I seem to be encountering an error that says "not found" every time I attempt to access the specified URL. Below is a screens ...
I need to recreate a custom input styled like the Google Material Theme design. This is the desired outcome: https://i.stack.imgur.com/QU5dp.png While I am aware that frameworks/libraries can achieve this, it is part of my assignment to create it from s ...
Currently, I have a function set on a timer to retrieve data in the background: (function fetchSubPage() { setTimeout(function() { if (count++ < pagelist.length) { loadSubPage(pagelist[count]); fetchSubPage(); ...
Need some assistance with the following issue. Hello Ray, I have noticed that responses are coming back correctly for IE7/8 immediately. However, Firefox takes its time to upload with a progress bar indicating the process. I'm concerned that someone ...
Hi, I'm new to javascript and seeking help for my table coloring issue. I have a dynamic table where data is inserted through an Ajax call. The goal is to color specific records based on their status. I attempted a solution but only one record gets c ...
I am currently working with the Jade framework for frontend and using Node.js & express for backend development. When rendering a view with data, I am encountering an issue where I can't access this data using JQuery. Below is my service in Node.js ...
Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting the animation in the pseudo-element. i{ position: relative; width: 0; height: 0; border-left: 12px solid transpa ...
As a newcomer in the world of React.js, I am feeling a bit anxious about posting my question on Stack Overflow. I hope everyone can overlook my lack of experience and forgive me for any mistakes. I have been struggling to find the right solution to my prob ...
In my quest to achieve the grid layout illustrated in the image below https://i.sstatic.net/4hsjw.jpg .col_1{ background-color: bisque !important; height: 500px; } .col_2 { width: 300px; height: 287px; background-position: cent ...
Here's the HTML code snippet I've created: <div>IsValid : {{component._isValid || true}}</div> In this code, if component._isValid is undefined, it will display true. However, if it has a defined value, that value will be displayed. ...
My website is built using Bootstrap 5, and I am working on creating a navbar dropdown functionality. On desktop, I want the dropdown to open on hover and lead to a new page when clicked. However, on mobile, I only want the dropdown to open and close on cli ...
I've sourced data from various JSON API links and displayed it in a table. Currently, my code looks like this: <script src="js/1.js"></script> <script src="js/2.js"></script> Above this code is the table structure with <t ...
I am currently working with a responsive container that contains one image. The container and image resize well when the window size changes. However, I now need multiple images to overlap each other (all of the same size). How can I achieve this using HTM ...
Here's the problem: I'm encountering a CSS styling issue with the Live Server extension in Visual Studio Code (by ritwickdey). When I launch the live preview, none of my CSS styles are being applied. Although the HTML displays correctly, the CSS ...
Hi there, I'm encountering an issue with the click event of jQuery. In my ajax function, I am dynamically adding a table row that includes a button with the class btn btn-default getEditCategory, but unfortunately, it is not working as expected. Belo ...