I am attempting to extract an inner div from an outer div and relocate it outside of the outer div.
https://i.stack.imgur.com/NSS7B.png
<div class="vc_gitem-zone-mini">
<div class="vc_gitem_row.............."></div>
<div>
I Would like to achieve :
<div class="vc_gitem-zone-mini">
<div>
<div class="vc_gitem_row.............."></div>
Is there a way to accomplish this using CSS or jQuery..?
If you want to achieve this effect, you can utilize the .after() method instead of splitting the process into remove and add steps. The following code snippet demonstrates how it can be done:
$('button').click(function(){
$('.vc_gitem-zone-mini').after($('.vc_gitem_row'));
});.vc_gitem-zone-mini{
background: green;
width: 200px;
height: 200px
}
.vc_gitem_row{
background: red;
width: 100px;
height: 100px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vc_gitem-zone-mini">
<div class="vc_gitem_row"></div>
</div>
<button>LEAVE!</button>Identify the div with the selector $('div') and then move it to a position after another element using the jQuery method .after()
// Find the specific div that you want to relocate
var inner = $(".inner");
// Move the div after another element
$(".outer").after(inner);
// The DOM structure after executing the code above will be:
//
// <div class="outer"></div>
// <div class="inner">inner div</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">inner div</div>
</div>After analyzing the code below, it appears that the component is being rendered before the completion of the rest call, resulting in an empty DOM. The second ajax request within the loop will be triggered 50 times due to the 50 direct reportees under a man ...
One issue I encountered involves a jqGrid where users have to click a button in order to apply any row edits. This button is supposed to trigger a dialog box, which will then initiate an ajax call based on the selected option. The problem lies in the fact ...
Recently, I've delved into the world of JavaScript and started exploring object orientation, prototyping, and using objects for all functions and variables. However, there is one aspect that many frameworks like jQuery or extJS have that I struggle wi ...
When I adjust the resolution of my display, the text on my top bar also changes. Can anyone help me fix this issue? In normal view: With changed resolution or smaller browser window: This is my HTML code: <body> <div class="top-panel"> ...
I came across this drag and drop demo for Jquery UI that was working perfectly at a regular zoom level. However, when I zoomed out to 50%, things started acting strange. Can anyone provide suggestions on how to fix the demo? Link to Demo Any help would be ...
I've been struggling to solve this issue for hours with no success.. Let me start by asking my specific question, and then I'll provide the broader context in case my entire approach is flawed. Specific Question: I'm attempting to replace a ...
Recently, I set up a server using Node.JS express where I specified the location of an HTML file in the public folder. app.use(express.static(__dirname + '/public')); app.listen(8080); In previous projects, this setup worked seamlessly. However ...
function sorting(type) { $("#parentDiv").empty(); $.getJSON("example_data.json", ({ Find })); function Locate(a, b) { return (a[Find.type] < b[Find.type]) ? -1 : (a[Find.type] > b[Find.type]) ? 1 : 0; }; } The example_data.j ...
Can anyone lend a hand? I've been struggling to solve this issue. I created a directive (see below) to display a pre-written ul-list on a page using html data fetched asynchronously from a database server. Both the Directive and The Service are funct ...
Currently, I have developed an AJAX search function that retrieves keyword values upon key up and triggers the script. The objective is to update the content area with results in alphabetical order as the user types each key. However, the issue I am facin ...
Whenever I make an ajax call, I keep getting an undefined value. Take a look at my code on this fiddle Link I am wondering if we can include data in json format like this: 'north': '44.1', 'south'='-9.9' , 'e ...
I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...
I have a webpage with an iframe embedded, and I'm using Selenium for test automation: <iframe class="wysihtml5-sandbox" security="restricted" allowtransparency="true" frameborder="0" width="0" height="0" marginwidth="0" marginheight="0" style="dis ...
I find it frustrating when webpages load slowly and you can see the process happening. In my opinion, it would be more satisfying to wait until everything is fully loaded - scripts, images, and all - before displaying the page. This brings up two questio ...
I'm having trouble adding LI items to the #historial <UL> tag. Whenever the for loop is inside the function, the list displays with some elements duplicated. I believe the for loop should remain outside of the function. Could someone please he ...
Client .. inserting some content into a form <textarea name="data"></textarea> After typing the following data into the textarea: {title: 'Hello one!', author: 'someone'} {title: 'Hello two!', author: 'mygf ...
This is the program: <?php require_once 'swift-mailer/lib/swift_required.php'; $name = $_POST['name']; $email = $_POST['email']; $form_subject = $_POST['form_subject']; $form_message = $_POST['form_message ...
I'm having trouble formatting a graph in my code. I keep encountering an undefined error when using console.log to output the data. Here's the snippet of my code: $(document).ready(function () { var graphData = new Array(); $.getJSON("ds ...
Check out our Custom Sizing Solution, designed to offer sizing options tailored to different devices and viewports. Here's what we can do: For small devices, the width will be set at 100% For larger devices, the width will be adjusted to 75% For ext ...
Is there a way to dynamically update the x and y position based on user clicks, and then apply these changes to the top and left properties of a div? .dataCardAbsolute { position: absolute; top: 100px; left: 300px; overflow: auto; } React.useEffec ...