Studento919 Studento919 - 2 months ago 7
CSS Question

Focus or scroll to input element after .trigger(click) event

I am have a bit of JQuery which uses a .trigger event to open/close bootstrap collapse containers but am having issues scrolling to an element right after the container has been opened.

Once the container is open I need to scroll to or focus the current

"input[required]"
once the container is open. But I have no such joy in doing so.

Below is an example of what am doing.



$(document).on("click", ".savechanges", function() {
$("input[required]").on("invalid", function(event) {
var collaspe = $(this).closest('.collapse').hasClass("in");
if (!collaspe) {
$(this).closest('.panel').find('img').trigger("click");
$(this).focus();
} else if (collaspe) {
$("input[required]").off();
} else {
console.log("Do Nothing");
return false;
}
});
});

.container {
width: 75%;
}
.head {
background: #D9DBDE;
}
.panel-heading {
background-color: #D9DBDE;
padding: 20px;
margin-bottom: 10px;
border-radius: 0;
}
.panel-title {
font-size: 21px;
display: block;
width: 100%;
color: #4F5858;
line-height: 1.3;
font-weight: normal;
}
.panel-icon {
width: 30px;
padding: 5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<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.6/js/bootstrap.min.js"></script>

<form action="/update" id="formwrite">
<div class="panel-group secondary-bridge container" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title va-middle">Testing
<img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
</h4>
</div>
<div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-default">
<div class="panel-body row fieldpos">
<fieldset class="form-group">
<label for="test">test 1</label>
<input type="text" class="form-control" id="test" placeholder="test">
</fieldset>
<fieldset class="form-group">
<label for="test">test 2</label>
<input type="text" class="form-control" id="test" placeholder="test">
</fieldset>
<fieldset class="form-group">
<label for="test 3">test 3</label>
<input type="email" class="form-control" id="test 3" placeholder="test">
</fieldset>
<fieldset class="form-group">
<label for="test 4">test 4</label>
<input type="email" class="form-control" id="test 4" placeholder="test">
</fieldset>
<fieldset class="form-group">
<label for="test 5">test 5</label>
<input type="email" class="form-control" id="test 5" placeholder="test">
</fieldset>
<fieldset class="form-group">
<label for="test 6">test 6</label>
<input type="email" class="form-control" id="test 3" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="" required>
</fieldset>
<fieldset class="form-group">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
<fieldset class="form-group textwide">
<label for="test 7">test 7</label>
<input type="email" class="form-control" id="test 7" placeholder="">
</fieldset>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success form-control savechanges">Save Changes</button>
</form>





Here is the JSFiddle.

Anyone any idea how to accomplish this or suggestions?

Answer

You could use scrollIntoView() DOM API method and call it from relevant bootstrap event:

$('#accordion').on('shown.bs.collapse', function (e) {
    $('input:focus').prev()[0].scrollIntoView()
});

-jsFiddle