Output wrong div width by width() in jQuery

Question

I created a popup with bootstrap to store several Social media share buttons. Then I created two left and right buttons to navigate between them. My logic is, if modal-body width is less than share buttons content div width, then navigation buttons should be appeared and move to the very end in both sides . Here, in my code, I'm getting wrong modal-body width and therefore right-side navigation button is not working as expected which is I can't go to the last share button . It seems perfectly working with the default loading screen size. The Problem can be exactly seen by reducing the screen size and trying to navigate to the last share button . What I missed here?

 $('.modal').on('show.bs.modal', function () { var currentPos = 0; var shareBtns = $(".a2a_kit a").length; var sampleDivWidth = $(".a2a_button_facebook span").width(); var actualButtonWidth = sampleDivWidth + 26 var shareDivWidth = (actualButtonWidth * shareBtns) / 3; var mainDivWidth = $(".modal-body").width(); //var mainDivWidth = 445; var x = shareDivWidth / actualButtonWidth; var y = mainDivWidth / actualButtonWidth; var z = (x - y); var stopPos = z * (-actualButtonWidth); //alert(mainDivWidth); if( (mainDivWidth - 30) < shareDivWidth ) { $(".move-btn").css("display", "block"); } else { $(".move-btn").css("display", "none"); } if ( currentPos === 0 ) { $(".move-btn-l").css("display", "none"); } $(".move-btn-r").on("click", function() { $(".a2a_kit").animate({ left : ""+ (currentPos -= 66) +"px" }, 200); $(".move-btn-l").css("display", "block"); if (currentPos <= stopPos) { $(".move-btn-r").css("display", "none"); } }) $(".move-btn-l").on("click", function() { $(".a2a_kit").animate({ left : ""+ (currentPos += 66) +"px" }, 200); $(".move-btn-r").css("display", "block"); if (currentPos == 0) { $(".move-btn-l").css("display", "none"); } }) }) 

 .share-link-div{ overflow: hidden; width: 75%; margin: auto; } .a2a_kit { display: inline-flex; position: relative; width: max-content; } .a2a_kit a .a2a_svg { border-radius: 50% !important; padding: 5px; width: 50px; height: 50px; float: none !important; } .a2a_kit a:hover { text-decoration: none !important; } .move-btn{ background-color: #fff; border: 1px solid #ccc; border-radius: 50%; width: 35px; height: 35px; position: absolute; top: 20px; cursor: pointer; box-shadow: 0 3px 3px #7d7d7d; } .move-btn-r { right: 15px; } .move-btn-l { left: 15px; } .move-btn span{ margin-left: 12px; margin-top: 6px; position: absolute; } .embed-btn .a2a_svg { float: left; background-color: #dedede; color: #000; font-size: 12px; height: 32px; font-weight: 600; } .embed-btn .a2a_svg:hover { opacity: 0.7; } .embed-btn .a2a_svg p { margin: 0px; top: 5px; position: relative; text-align: center; } .embed-src{ padding: 10px; border: 1px solid #ececec; background-color: #fafafa; font-size: 14px; font-weight: 400; } .embed-button{ overflow: hidden; display: flex; margin-top: 20px; } .embed-button .embed-src { float: left; width: 100%; } .copy-iframe { border-radius : 0 4px 4px 0; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script async src="https://static.addtoany.com/menu/page.js"></script> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="share-link-div"> <div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_button_facebook"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_google_plus"></a> <a class="a2a_button_pinterest"></a> </div> <div class="move-btn move-btn-l"> <span>&lt;</span> <!-- <i class="fas fa-chevron-left"></i> --> </div> <div class="move-btn move-btn-r"> <span>&gt;</span> <!-- <i class="fas fa-chevron-right"></i> --> </div> </div> <div class="embed-button"> <div class="embed-src"> <span>URL and Code</span> </div> <button type="button" class="btn btn-primary copy-iframe">Copy</button> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

Here is the editable code :

http://jsfiddle.net/rgL2ak0z/3/

Answer 1

I think you cant get width of dynamicaly created div without prior width initialization. Maybe you could get width of document and calculate it? Like:

var mainDivWidth=document.documentElement.clientWidth;