how to move element to another element then auto fulfill some divs - javascript

I would like to use picture to demonstrate my doubt.
For example, i would like to move Boston to the right, which would under USA_LL - United States - Low Pay. My code is below:
function move(elem){
if($(elem).parent().attr("id")=="left-part"){
$(elem).appendTo('#right-part');
}
else{
$(elem).appendTo('#left-part');
}
}
the html code is below:
<div class="panel-body" id="left-part">
<div class="item" onclick="move(this)">
<div class="row">
<div class="col-md-2 item_position"><p class="item-words">Boston(BOS)</p></div>
<div class="col-md-2 arroww"><img class="img-responsive arrow_1" src="file:///Users/cengcengruihong/Desktop/bootstrap%20exercise/static/images/ic_add_arrowshape_15px#1x.png" alt="arrow" width="18px"></div>
</div>
</div>
</div>
<div class="panel-body" id="right-part">
<div class="item2" id="removed">
<div class="row">
<div class="col-md-2 item_position2"><p class="item-words">CAN-Canada</p></div>
<div class="col-md-2 edit_position" style=""><img class="img-responsive edit" src="ic_edit_lightblue_15px#1x.png" alt="edit"></div>
<div class="col-md-1 remove"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
But the output just put the arrow to the right too. What i want is Boston moved to the right without the arrow and also with the edit and cancel icon.
Anyone could give me a hint would be highly appreciated.

This structure can help you. You can clone element using clone() and then append it to another div using .appendTo().
$('.copy').click(function() {
$(this).parents('h1').clone().append('<span class=remove>×</span>').appendTo('.div-2');
$(this).parents('h1').remove()
})
$(document).on('click', '.remove', function() {
$(this).parents('h1').remove();
})
div {
border: 1px solid;
margin-bottom: 10px;
float:left;
width:48%;
min-height:200px;
}
.div-2{
float:right
}
.div-2 .remove,
.div-1 .copy{
float:right;
cursor:pointer;
}
.div-2 .copy{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-1">
<h1>Element 1 <span class=copy>→</span></h1>
<h1>Element 2 <span class=copy>→</span></h1>
<h1>Element 3 <span class=copy>→</span></h1>
<h1>Element 4 <span class=copy>→</span></h1>
</div>
<div class="div-2">
<h1>Element 5 <span class=remove>×</span></h1>
</div>

Related

add more field using jquery

I have 2 input fields 1 for image and 1 for video.
I want to add more fields when +Add More button is pressed.
Here is the code
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>#lang('app.addMore')</a>
</div>
</div>
$("body").on("click",".add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
How can i get the desired result. Please help
your issue is about wrong CSS selector :
$("body").on("click",".add-more",function(){
should be :
$("body").on("click","#add-more",function(){
ALSO your codes will correctly adds your desired element, but the element contents is nothing so you cannot view it .
you can get some style to the element for view it :
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
check it in the snippet :
$("body").on("click","#add-more",function(){
var html = $(".partPending").first().clone();
$(html).find(".change").html("<label for=''> </label><br/><a class='btn btn-danger remove'>- Remove</a>");
$(".partPending").last().after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".partPending").remove();
});
div{
background : green;
}
.partPending {
display:block;
background:yellow;
height: 20px;
border:1px black solid;
width:100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
fieldId="part_video" />
</div>
</div>
<div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3 mt-2">
<div class="col-md-12">
<a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
class="icons icon-plus font-weight-bold mr-1"></i>#lang('app.addMore')</a>
</div>
</div>

Maximum call stack size exceeded when click on the card to trigger button inside div

I have a card detail order, I want the whole card to be clickable and it will trigger a button inside the card to bring up the modal details. I've made the code as below but there is a Maximum call stack size exceeded error and also my console.log('clicked') is triggered hundred times.
how to handle this? please help me
$(document).ready(function(){
$(".order-list-detail-container").each(function() {
$(this).on("click", function() {
console.log('clicked')
$(this).find('.order-detail-trigger').click()
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-list-detail-container" style="margin-bottom:30px;">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T123456</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1200</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 6", RBG6</div>
<div class="product-catalog-code">RBG6</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">3 Product</span>
<div class="product-weight">(8 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="order-list-detail-container">
<button class="hidden order-detail-trigger" hx-get="/order-detail" hx-trigger="click" hx-target="#orderDetailModal">Detail Trigger</button>
<!-- Date -->
<div class="date-container">
<span style="display: inline-block; width: 33%" class="date">9 Nov 2021</span>
<div style="width: 33%;"></div>
<div style="width: 33%;"></div>
</div>
<!-- SO Number, Status, Price -->
<div class="order-info-container" style="display:flex; border-bottom: 1px solid gainsboro; margin-bottom: 5px;">
<div class="order-info with-margin-right" style="width: 33%">
<div class="label">Shipping Order Number</div>
<div class="value no-order-value" style="color: #cb4645;">T127890</div>
</div>
<div class="order-info" style="width: 33%">
<div class="label">Status</div>
<div class="value" style="color: #cb4645;">
In Process
</div>
</div>
<div class="order-info-grand-total" style="width: 33%; text-align: right;">
<div class="label">Total</div>
<div class="value">$1800</div>
</div>
</div>
<div class="products-list">
<div class="product-container">
<div class="product-inner-container">
<div class="product-info-container">
<div class="product-name">Grinder 8", RBG8</div>
<div class="product-catalog-code">RBG8</div>
<div class="product-detail-info">
<div class="product-metadata">
<span class="product-qty">2 Product</span>
<div class="product-weight">(3 kg)</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Working example. You only need to make trigger for a button when you click Container. And when you click button - it's default button behavior. In both ways you will now have hx-get working.
$(document).ready(function() {
$('.order-list-detail-container').on('click.div', function() {
$('.order-detail-trigger').trigger('click.button');
console.log('clicked');
});
Update 1: If you want different buttons and cards to do different stuff, add numbered ID's for buttons and DIV's use this code:
$('#order-list-detail-container-1').on('click.div',function(){
$('#order-detail-trigger-1').trigger('click.button' );
console.log('1 button or DIV clicked');
});
$('#order-list-detail-container-2').on('click.div',function(){
$('#order-detail-trigger-2').trigger('click.button' );
console.log('2 button or DIV clicked');
});
// duplicate the code block for amount of buttons with Divs you are going to have
Update 2: Added functionality to create ID dynamically to every button and DIV. So you won't need to add any ID's manually when you will create more cards! Also, every button or div click will be counted as individual click and button 1 click won't trigger button 2 clicks:
$('.order-detail-trigger').each(function(index) {
$(this).attr('id', 'button-' + index);
});
$('.order-list-detail-container').each(function(index) {
$(this).attr('id', 'container-' + index);
});
$( document ).ready(function() {
$('.order-list-detail-container').each(function(index) {
$('#container-' + index).on('click.div',function() {
$('#button-' + index).trigger('click.button');
let test = $('#container-' + index).attr('id');
let test2 = $('#button-' + index).attr('id');
//console.log('clicked');
console.log(test + ' clicked!');
console.log(test2 + ' AUTO clicked!');
});
});
});
Uncomment //console.log('clicked'); to see that clicking DIV or Button - it only happens 1 time:

jQuery toggle for multiple elements

Hello I am trying to make a toggle for multiple elements in jQuery but it not working the plus button when click does not slide toggle the element please help here is the link
HTML
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div id="post-info" class="collapse col-xs-12" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->
CSS
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
jQuery
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).siblings(".post-info").slideToggle();
});
});
Totally wrong selector post-info is an id not a class, then post-info not siblings of post-btn11 but it's parent siblings, so the selector should like this:
$(".post-btn11").click(function(){
$(this).parent().siblings('#post-info').slideToggle();
});
But better use class because it should repeat and not unique. Also add this class to first one too.
$(".post-btn11").click(function(){
$(this).parent().siblings('.post-info').slideToggle();
});
JSFiddle
Here is the correction to your code. I have also updated your fiddle so go check it out. You had a problem with giving your post-info element an ID. In corrected version I simply add post-info as a class name. And also the .sublings() function will not work, since you applied it to your button element and it will not find any nested elements in it. So I needed to find a button's parent element first to get on the "same level" with your next post-info element and then simply use .next() function
$(document).ready(function(){
$(".post-btn11").click(function(){
$(this).parent(".col-xs-2").next(".post-info").slideToggle();
});
});
.post-card {
background-color: #f4f4f4;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
.fa {
float: right;
}
.post.info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-post end for post 3-->
<!-post begin-- post 4 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
hello this is a test caption
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button">+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>10 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
10 likes</span>
</div>
</div>
<!-post end for post 4-->
<!-post begin-- post 5 >
<div class="col-xs-12 post-card">
<div class="col-xs-3">
</div>
<div class="col-xs-7 post-start" >
This is a test comment
</div>
<div class="col-xs-2">
<button class="fa fa-plus plus-icon post-btn11" type="button" >+</button>
</div>
<div class="collapse col-xs-12 post-info" style="font-size: 16px; color:#646464;">
<i class="fa fa-comments comment2"></i> <span>11 comments</span><span class="margin-left-10"><i class="fa fa-heart"></i>
13 likes</span>
</div>
</div>
<!-post end for post 5-->

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Isotope filtering with bootstrap

I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.
Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?
HTML Snippet 1
<span class="menu-button" id="food-button">Food</span>
<span class="menu-button" id="staff-button">Staff</span>
<span class="menu-button" id="all-button">All</span>
HTML Snippet 2
<div class="container">
<div class="row grid">
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a food"></a>
</div>
<div class="col-md-4">
<a class="gallery-image-a staff"></a>
</div>
</div>
</div>
CSS
.gallery-image-a {
display:block;
height:360px;
background-position:center center;
transition: ease all 950ms;
background-repeat:no-repeat;
box-sizing: border-box;
border:10px solid #fff;
background-size:cover;
background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}
JavaScript
$grid = $('.grid');
$grid.isotope();
$('#food-button,#staff-button, #all-button').click(function(){
var id = $(this).attr('id');
var className = id.replace("-button", "");
if (className == 'all') {
$grid.isotope({ filter: '*' });
return false;
}
$grid.isotope({ filter: '.' + className });
});
2 problems. First, the filter works on children so change HTML to this
<div class="container">
<div class="row grid">
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 food">
<a class="gallery-image-a"></a>
</div>
<div class="col-md-4 staff">
<a class="gallery-image-a"></a>
</div>
</div>
</div>
second, even if it does work, you won't see it. add min-width to class
min-width: 100px;
here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/
Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?
$('.grid').isotope({
itemSelector: '.grid-item'
});
EDIT:
I put up a working example on codepen:
http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

Categories