Mohan Ravi Mohan Ravi - 3 years ago 70
CSS Question

Why when i add the src to image using jQuery custom plugin, the paragraph is getting moved down?

Here is my code



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
<title>Box using Plugin</title>
<script>
(function ($) {
$.fn.boxPlugin = function (options) {
//default values
var settings = $.extend({
color: "green",
width: "100px",
height: "100px",
backgroundColor: "black",
imageURL: "",
display: "inline-block"

}, options);

$(this).addClass('boxAdded').css({ "color": settings.color, "width": settings.width, "height": settings.height, "background": settings.backgroundColor, "display": settings.display }).find('img').attr('src', settings.imageURL);
}
}(jQuery));
</script>
<style>
p {
margin: 0px;
}
</style>
<script>
$(function () {
$(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
$("#boxOne").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue", imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" });
})
</script>
</head>

<body>
<p class="box"></p>
<p class="box"></p>
<p class="box"></p>
<p id="boxOne">
<img src="" />
</p>
</body>

</html>





If i don't add imageURL to option then width, height are set and it works just fine.

But when i add the imageURL option the image gets linked to its source but the paragraph get moved down a little why is this happening? So strange!

Thanks.

Answer Source

You need to assign the display:block; to img to fit with the box. Because your all block are inline-block.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
    <title>Box using Plugin</title>
    <script>
        (function ($) {
            $.fn.boxPlugin = function (options) {
                //default values
                var settings = $.extend({
                    color: "green",
                    width: "100px",
                    height: "100px",
                    backgroundColor: "black",
                    imageURL: "",
                    display: "inline-block"

                }, options);

                $(this).addClass('boxAdded').css({ 
                "color": settings.color, 
                "width": settings.width, 
                "height": settings.height, 
                "background": settings.backgroundColor, 
                "display": settings.display }).find('img').attr('src', settings.imageURL).css('display',settings.imgdisplay);
            }
        }(jQuery));
    </script>
    <style>
        p {
            margin: 0px;
        }
    </style>
    <script>
        $(function () {
            $(".box").boxPlugin({ width: "200px", height: "200px", backgroundColor: "lightblue" });
            $("#boxOne").boxPlugin({ 
            width: "200px", 
            height: "200px", 
            backgroundColor: "lightblue", 
            imageURL: "https://www.w3schools.com/images/w3schools_green.jpg" ,
            imgdisplay: "block"
            });
        })
    </script>
</head>

<body>
    <p class="box"></p>
    <p class="box"></p>
    <p class="box"></p>
    <p id="boxOne">
        <img src=""  />
    </p>
</body>

</html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download