I just created a card-form(bootstrap) and in the form,
there are a plus icon and hidden contents(id=mycontent_1 with display: none). what I'm trying to do is listed as follows.
I tried to do the first one on my java-script but it's not working.
when I click plus icon, my function(toggler) should be executed and the icon would be hidden and my contents(text boxes and delete button) have to be visible.
similarly in opposite direction, when I click the delete button, my
contents(text boxes and a delete button) have to be invisible and the
plus icon should be visible.
need your kind helps for my two functions.
here are my codes for jsfiddle.
https://jsfiddle.net/Sanchez/aq9Laaew/219304/
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader1" style="visibility: hidden;"> no name </div>
<div class="card-body">
<a href="#" class="btn btn-info btn-lg" onclick="toggler('myContent_1');">
<span class="glyphicon glyphicon-plus" id=icon1 onclick="toggler('myContent_1');"></span> Plus
</a>
<div id="myContent_1" class="card-title" style="display: none;" >
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Number</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Title</span>
</div>
<input type="text" id="title_1" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" id="delBtn_1" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
function toggler(divId){
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
x.style.display = "none";
y.style.visibility = "visible";
$("#delBtn_" + tempId).show();
$("#" + divId).toggle();
}
To begin with you should place you js code on the head before the body.
Afterwards, replace the a tag with button
Finally call toggler function on delete button's onclick
<script>
function hidePlusBtn() {
$("#plusBtn").hide();
}
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
x.style.display = "none";
y.style.visibility = "visible";
$("#delBtn_" + tempId).show();
$("#" + divId).toggle();
}
</script>
<div class="col-sm-6">
...
<button
id="plusBtn"
class="btn btn-info btn-lg"
onclick="toggler('myContent_1');">
<span
class="glyphicon glyphicon-plus"
id=icon1
onclick="toggler('myContent_1');">
</span> Plus
</button>
...
<button
type="button"
id="delBtn_1"
class="btn btn-danger"
onclick="toggler('myContent_1'); hidePlusBtn()">Delete
</button>
...
</div>
Updated Demo: https://jsfiddle.net/1s390orm/
Related
I'm creating add file function for my user, in this function, user have to insert their file name, choose their file then click on the Add Document button.
once user have add the document it will display back the user document under the add document button. User can add more as many as document they want.
I have trouble in adding the data. The file keep getting missing when user try to attach new file.
I want to display all file list of the user before the submitting it.
first add document
then user wants to add another document, the first document get replaced
second document
how do I make it not to overwrite the older document when user add more document ?
<div class="col-md-12 mb-3">
<textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
<input type="file" id="file" hidden>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>
<div>
<p id = "demo"></p>
</div>
<script>
function myFunction() {
let filename= $('#name').val();
let doc = $('#file').val();
let fileData = '';
fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div class="col-md-12">
<ul class="perfomer-lists m-0 p-0" id="">
<li class="d-flex mb-4 align-items-center">
<img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
<div class="media-support-info ml-3">
<a class="font-size-12 font-weight-600"><b>${filename}</b></a>
<p class="mb-0 font-size-12"> ${doc}</p>
</div>
</li>
</ul>
</div>
</div>
</div> `;
document.getElementById("demo").innerHTML = fileData;
Besides the fact that your approach brings some pitifals in performance you have a little logical mistake
<div class="col-md-12 mb-3">
<textarea class="form-control" id="name" ></textarea>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-success w-100 choseDoc">Select document</button>
<input type="file" id="file" hidden>
</div>
<div class="col-md-12 mb-3">
<button type="button" class="btn btn-info w-100" onclick="myFunction()">Add Document</button>
</div>
<div>
<p id = "demo"></p>
</div>
<script>
let fileData = ''; // <--- must be declared outside your function to keep the state
function myFunction() {
let filename= $('#name').val();
let doc = $('#file').val();
fileData += `<div class="tab-content col-12 mt-4" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div class="col-md-12">
<ul class="perfomer-lists m-0 p-0" id="">
<li class="d-flex mb-4 align-items-center">
<img class="avatar-20 rounded ml-2" src="assets\avatar.png" style="width: 50px;">
<div class="media-support-info ml-3">
<a class="font-size-12 font-weight-600"><b>${filename}</b></a>
<p class="mb-0 font-size-12"> ${doc}</p>
</div>
</li>
</ul>
</div>
</div>
</div> `;
document.getElementById("demo").innerHTML = fileData;
I have this code:
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form3">Title</label>
<input type="text" id="form3" class="form-control validate val1" name="val1">
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">Desc</label>
<input type="email" id="form2" class="form-control validate val2" name="val2">
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div></div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div></div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div></div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div></div>
</div>
</div>
</div>
<form name="saveForm" action="#" method="post" style="margin-left: 15px">
<div class="itemsBox" >
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$(document).on("click", ".removeMe", function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.saveBtn').click(function(e) {
e.preventDefault();
var val1 = $(".val1").val(); // title
var val2 = $(".val2").val(); // description
var cX = $(".coorX").text();
var cY = $(".coorY").text();
var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
"<div>" +
"<a href='#' class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>' data-placement='top' data-html='true' rel='tooltip'></a>" +
"</div>" +
"</div>";
var nextObjNumber = $(".itemsBox").children("div").length + 1;
var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber +
"<div class='removeMe' id='"+nextObjNumber+"'>X</div>" +
"</div>";
$(".scalize").append(newPoint); // inserting new point
$(".itemsBox").append(newObject); // inserting new object
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
$("#modalSubscriptionForm").modal("hide");
$(".val1").val("");
$(".val2").val("");
alert('Add!');
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
});
</script>
I have a problem with deleting some elements. After clicking anywhere on the jacket's photo, a form will pop up adding a new point in the picture (where you click). Under the photo I have a list of point names from "X" which causes deleting points from the image. This works fine, but only for elements added at page startup (when the website is refreshed).
I have a problem with the newly added points in the image. They are deleting from the list below the picture. Points do not delete from the picture.
How to fix it?
Prview: http://serwer1356363.home.pl/pub/component/index2.html
When you're creating your new point, you have var newPoint = "<div class='item-point' data-top='" + cY + "' data-left='" + cX + "' id='point1'>" +. The id is being set to 'point1' for every new point added. If you update that to set the id dynamically to match the id of the remove button that you're creating, it should work as expected.
I'm using a Bootstrap collapsible panel.
Here's the Fidle for it
I'm trying to do the following :
I want to move both the buttons on the Panel header(at the extreme
right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And
when the panel is hidden the buttons should be hidden too.
How can I achieve this. What would be the JS for it?
I tried to do the following in JS:
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.
Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
It is very similar to this bootsnipp
$(".panel-success").on('show.bs.collapse', function() {
$('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
$('.buttonCon').removeClass('vis');
})
.panel{
position:relative;
}
.buttonCon{
position:absolute;
top:5px;
right:10px;
display:none;
}
.buttonCon.vis{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-success">
<div class="buttonCon">
<button type="button" class="btn btn-primary" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
<button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
Buttonn2
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
<div class="form-group row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-2 col-md-offset-5">
</div>
</div>
</div>
</div>
</div>
You can use bootstrap collapse events to achieve it.
$('#accordion').on('shown.bs.collapse', function() {
$(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
$(".buttons").hide();
})
Check this fiddle.
The following JsFiddle is another option compared to the answers already given.
Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.
Got it working by combining the answers provided by #kittyCat (the updated solution) and #BuddhistBeast .
Here's the Fiddle.
HTML code :
<div class="container">
<div class="panel panel-success" id="js-panel">
<div class="panelButtons">
<button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
Button2
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
</div>
</div>
</div>
JS Code :
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');
I am looking to if a div is empty and my code works if the div looks like this with no white space, but I am using Smarty and want to show data if it is available. If the highlights class is empty then I want to show the no_highlights well.
If it helps the only content that will appear inside the highlights is <div class="form-group"> <!-- different content --> </div>
<div class="highlights">
{if $highlights}
{/if}
</div>
<i class="fa fa-plus"></i> Add Highlight <br>
<div class="well no_highlights">
<h4>No highlights found</h4>
<p>You have not yet added any highlights to this property</p>
<p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>
var highlight = '<div class="form-group"> <label for="highlight" class="col-sm-3 col-lg-2 control-label">Highlight:</label> <div class="col-sm-9 col-lg-3 controls"> <input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" placeholder="Highlight Name"> </div> <div class="col-sm-9 col-lg-7 controls"> <textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea> <i class="fa fa-plus"></i> Remove Highlight </div> </div>';
if(('.highlights')){
$('#add_highlight').hide();
$('#order_highlights').hide();
}else{
$('.no_highlights').hide();
}
$('.first_highlight').click(function(){
$('.no_highlights').hide();
$('#add_highlight').show();
$('#order_highlights').show();
$('.highlights').append(highlight);
});
$('#add_highlight').click(function(){
$('.highlights').append(highlight);
});
Try this,
Template
{if $highlights}
<div class="highlights">
</div>
{/if}
Jquery
if(! $('.highlights').length){
$('#add_highlight').hide();
$('#order_highlights').hide();
}else{
$('.no_highlights').hide();
}
Else you can choose any one from How to check if div element is empty
To check if a div element is empty refer here
Alternatively you should put a check in the template itself
<div class="highlights">
{if $highlights}
{/if}
</div>
<a href="#" class="pull-right showhouse-text {if $highlights}{else}hidden{/if}" id="add_highlight">
<i class="fa fa-plus"></i>Add Highlight
</a> <br>
<div class="well no_highlights {if $highlights}hidden{/if}">
<h4>No highlights found</h4>
<p>You have not yet added any highlights to this property</p>
<p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>
CSS:
.hidden{
display: none;
}