Develop Reference

Auto-Scroll to bottom of timeline not working

I want to auto-scroll my timeline to the bottom. I tried jQuery but that didn't worked I am using bootstrap's scroll-area-lg class for creating a scroll area.
My Code -
<div id="autoScrollArea" class="scroll-area-lg" style="height: 70vh;">
<div class="scrollbar-container" >
<div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 1 <span class="text-danger">*</span></p>
</fieldset>
</div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 2 <span class="text-danger">*</span></p>
</fieldset>
</div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 3 <span class="text-danger">*</span></p>
</fieldset>
</div>
<div class="col-md-12 text-center">
<fieldset class="position-relative form-group">
<p class="font-weight-bold">Question 4 <span class="text-danger">*</span></p>
</fieldset>
</div>
<button class="btn btn-primary" id="submitButton" ng-click="submit()" ng-if="showOnSubmit">Submit</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="scrollBottom()">Scroll Bottom</button>
<script>
$scope.scrollBottom=()=>{
var questionScrollSectionHeight = $('#questionScrollSection').height();
//get scroll height
var scrollHeight = $('#questionScrollSection').scrollTop() + questionScrollSectionHeight;
console.log('scrollHeight', scrollHeight); //getting height
$('#questionScrollSection').animate({
scrollTop: scrollHeight
}, 1000);
//focus on submit button
$('#submitButton').focus();
}
</script>
I am getting the height but the area is not scrolling. I am also not getting any errors on the console.

HTML - Show/Hide Buttons on Bootstrap Panel collapse/expand

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');
})

add html in middle of parent in jquery

my code is
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
//Here I want to add some html
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
When somebody clicks on addnewsticky I want to add html immediatly after that sticky,
Expected output
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
<h3>Hi this is added html</h3>
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
See newly added html <h3> tag
How to do that using jquery?
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().find('.stickyboard').html("some html");
}
but this is adding to the same class itself not after that class

You can insert it after the .stickyboard ancestor of the click target.
So
$(e.currentTarget).closest('.stickyboard').after("<h3>Hi this is added html</h3>");

You can use .after() also like:
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().after("some html");
}

Toggle only one instance of class

I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});

.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});

You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok

Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();

jQuery check if div is empty after templating

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;
}