I'm trying to execute javascript function - onload only in specific div, but I'm stuck, so if someone can help me, please. Thank you very much in advance
function dropsFall() {
}.drop {
display: block;
min-height: 280px;
overflow: hidden;
}<div class="row">
<div class="col-xl drop"></div>
</div>This snippet of code performs an animation inside a specified div (that acts like a container):
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.rectangle
{
width: 300px;
height: 20px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small
{
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: green;
}
</style>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$('body').ready(function(){
$('.rectangle')
.find('.square-small')
.animate({
left: $('.rectangle').width() - $('.rectangle').find('.square-small').width()
}, 'slow');});
</script>
<div class="rectangle">
<div class="square-small"></div>
</div>
</body>
</html>
Then why not write your script inside your div like following:
<div class="row">
<div class="col-xl drop">
<script>dropsFall()</script>
</div>
</div>
Pass your div ID to the function as a parameter and use if statement to check if it is the required div or not
function dropsFall(my_div) {
if(my_div==‘your required div’){
//your code will be here
}
}
Do you want to add drop class in div on click event ?
<div class="row">
<div class="col-xl" onclick="dropsFall(this)"></div>
</div>
divclicked ? please search about it then post your question.