Question 331653 in Html Question posted in
Some basic documentation can be found here.

Html – Why Set marginRight ( element.style.marginRigth= xxx) not working?

I am setting margin-right of a div on window resize using javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    function marginFunction(){
        let cardd= document.querySelector(".maincard");
        var stle = cardd.offsetWidth;
        let circle=document.querySelector(".card_circle");
        var ml=(400-stle)/10;
        circle.style.marginRight =  ml +"px";
        document.querySelector(".abc").innerHTML= circle.style.marginRight;
        
    }
    window.onresize=marginFunction;

</script>

</head>
<body>
    <div class="col">
            <a class="maincard" href="IALA boyage.html">
                <div class="card transition">
                    <h2 class="transition">IALA Buoyage</h2>
                    <!--<div class="cta-container transition"><p>Insert some text here to show on hover</p></div>-->
                    <div class="card_circle transition"></div>
                </div>
            </a>
        </div><div class="col">
            <a class="maincard" href="IALA boyage.html">
                <div class="card transition">
                    <h2 class="transition">IALA Buoyage</h2>
                    <!--<div class="cta-container transition"><p>Insert some text here to show on hover</p></div>-->
                    <div class="card_circle transition"></div>
                </div>
            </a>
        </div><div class="col">
            <a class="maincard" href="IALA boyage.html">
                <div class="card transition">
                    <h2 id="abc" class="transition abc">IALA Buoyage</h2>
                    <!--<div class="cta-container transition"><p>Insert some text here to show on hover</p></div>-->
                    <div class="card_circle transition"></div>
                </div>
            </a>
        </div
</body>
</html>

The ‘marginRigth’ function is working because the innerHTML is changing on resizing. However, the margin-right is not changing visually, I don’t know why

Previously I has put the script just before the ” tag but then browser was throwing an error ‘marginFunction’ not defined.

The CSS is :

.transition {
        transition: .3s cubic-bezier(.3, 0, 0, 1.3);
    }
    
    .card {
        background-color: #fff;
        box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
        height: 250px;
        overflow: hidden;
        width: 100%;
        border-radius: 10px;
    }

    .card:hover {
        transform: scale(1.1);
    
    }

    .card:hover .cta-container {
        display: inline;
        margin-top: 380px;
    }

    .card:hover .card_circle {
        background-size: cover;
        border-radius: 50%;
        margin-top: -130px;
    }

    .card:hover h2 {
        background: #3487f7;
        color: #fff;
        margin-top: 100px;
        padding: 5px;
    }

    .card:hover h2 small {
        color: #fff
    }

    .card:hover p {
        margin-top: 300px
    }

    .card{padding-left: auto; padding-right: auto;}
    .card_circle {
        background: url(iala.png) no-repeat center top;
        background-color: #3487f7;
        background-size: cover;
        border-radius: 50%;
        height: 400px;
        margin-top: -270px;
        position: absolute;
        width: 450px;

        ;
    }
    h2 {
        color: #3487f7;
        font-family: 'Raleway', sans-serif;
        font-size: 24px;
        font-weight: 700;
        margin-top: 150px;
        position: absolute;
        text-align: center;
        width: 100%;
        z-index: 9999;
    }
    .maincard{padding: 10px;}

In case the above mentioned snippets are not working,
Here is the codepen of whole webpage.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I did not make a big change, I don't understand why it was not working before The following code is giving the desired result, but now it is only changing marginLeft of the first element and not of all. I'm quite sure it's because of the data types or querySelector(s), I'll look into it

    <script>
function marginFunction() {
    let cardd = document.querySelector(".maincard");
    let w = cardd.offsetWidth;
    let circle = document.querySelector(".card_circle");
    let ml = (450 - w) / 2; // Corrected calculation
    circle.style.marginLeft = "-" + ml + "px";
    document.querySelector(".abc").innerHTML = circle.style.marginLeft;
}
window.onresize = marginFunction;
window.onload = marginFunction; // Trigger on initial load

  2. 0

    It seems like there is a mistake in your JavaScript code. The issue is with the calculation of the ml (margin-left) value. Instead of subtracting the stle from 400, you should subtract it from the width of the card container. Additionally, the card_circle element has a fixed width of 450px in your CSS, which may affect the calculation.

    <script>
    function marginFunction() {
        let cardd = document.querySelector(".maincard");
        let stle = cardd.offsetWidth;
        let circle = document.querySelector(".card_circle");
        let ml = (cardd.offsetWidth - stle) / 10; // Corrected calculation
        circle.style.marginRight = ml + "px";
        document.querySelector(".abc").innerHTML = circle.style.marginRight;
    }
    window.onresize = marginFunction;
    window.onload = marginFunction; // Trigger on initial load
</script>

    added window.onload = marginFunction; to trigger the marginFunction on the initial load of the page. This ensures that the correct margin is set even when the page is first loaded.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search