Tuesday

Could anyone help me to center this web content on any size of screen?

2:58 PM css, flexbox, html, javascript, layout No comments

Issue

I've tried my best to center this content on a webpage, but I can't do that up to this point. So, I'd like to ask some help from you guys.

I want this content to be centered on any different screen sizes. If anyone have a moment, I’d appreciate your help. Many thanks in advance:).I ever used flexbox also but nothing changed at that moment and i'm not sure if I did something wrong cause I'm a newbie.

var mouse = {
  'x': 0,
  'y': 0
};

homex = 0;
homey = 0;
forcex = 0;
forcey = 0;
magnet = 300;

$(document).bind('mousemove', function(e) {
  mouse = {
    'x': e.pageX,
    'y': e.pageY
  };
});


$('.box, .box2').each(function(index, el) {
  $(el).data("homex", parseInt($(el).position().left));
  $(el).data("homey", parseInt($(el).position().top));
});

$('.box, .box2').css('position', 'absolute');
setInterval(function() {
  $('.box, .box2').each(function(index, el) {
    el = $(el);
    position = el.position();
    x0 = el.offset().left;
    y0 = el.offset().top;
    x1 = mouse.x;
    y1 = mouse.y;
    distancex = x1 - x0;
    distancey = y1 - y0;

    distance = Math.sqrt((distancex * distancex) + (distancey * distancey));

    powerx = x0 - (distancex / distance) * magnet / distance;
    powery = y0 - (distancey / distance) * magnet / distance;

    forcex = (forcex + (el.data('homex') - x0) / 2) / 2.1;
    forcey = (forcey + (el.data('homey') - y0) / 2) / 2.1;


    el.css('left', powerx + forcex);
    el.css('top', powery + forcey);
    el.text(parseInt(distance));
  });
}, 25);

/* This is the CSS part */

.box {
  height: 4px;
  width: 4px;
  border-radius: 10%;
  font-size: 0px;
  transform: rotate(-2deg);
  background: #82eef6;
}

.box_1 {
  top: 50px;
  left: 50px;
  position: absolute;
  animation-delay: .1s;
}

.box_2 {
  top: 50px;
  left: 100px;
  position: absolute;
  animation-delay: .2s;
}

.box_3 {
  top: 50px;
  left: 150px;
  position: absolute;
  animation-delay: .3s;
}

.box_4 {
  top: 50px;
  left: 200px;
  position: absolute;
  animation-delay: .4s;
}

.box_5 {
  top: 50px;
  left: 250px;
  position: absolute;
  animation-delay: .5s;
}

.box_6 {
  top: 50px;
  left: 300px;
  position: absolute;
  animation-delay: .6s;
}

.box_7 {
  top: 50px;
  left: 350px;
  position: absolute;
  animation-delay: .7s;
}

.box_15 {
  top: 100px;
  left: 50px;
  position: absolute;
  animation-delay: 0.13s;
}

.box_16 {
  top: 100px;
  left: 100px;
  position: absolute;
  animation-delay: 0.14s;
}

.box_17 {
  top: 100px;
  left: 150px;
  position: absolute;
  animation-delay: 0.1s;
}

.box_18 {
  top: 100px;
  left: 200px;
  position: absolute;
  animation-delay: 0.2s;
}

.box_19 {
  top: 100px;
  left: 250px;
  position: absolute;
  animation-delay: 0.3s;
}

.box_20 {
  top: 100px;
  left: 300px;
  position: absolute;
  animation-delay: 0.4s;
}

.box_21 {
  top: 100px;
  left: 350px;
  position: absolute;
  animation-delay: 0.5s;
}

centered-wrapper {
  position: relative;
  text-align: center;
}

.centered-wrapper:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.centered-content {
  display: inline-block;
  vertical-align: middle;
}

html {
  height: 100%;
}

<html>
<script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>

<body>

  <div class="box_1 box"></div>
  <div class="box_2 box"></div>
  <div class="box_3 box"></div>
  <div class="box_4 box"></div>
  <div class="box_5 box"></div>
  <div class="box_6 box"></div>
  <div class="box_7 box"></div>


  <div class="box_15 box"></div>
  <div class="box_16 box"></div>
  <div class="box_17 box"></div>
  <div class="box_18 box"></div>
  <div class="box_19 box"></div>
  <div class="box_20 box"></div>
  <div class="box_21 box"></div>
</body>

</html>

Solution

I add a function modify to change the positon of all boxes to center, and a addEventListener of window resizing to keep the boxs always being in center.

  <style>
        .box {
            height: 4px;
            width: 4px;
            border-radius: 10%;
            font-size: 0px;
            transform: rotate(-2deg);
            background: #82eef6;
        }

        .box_1 {
            top: 50px;
            left: 50px;
            position: absolute;
            animation-delay: .1s;
        }

        .box_2 {
            top: 50px;
            left: 100px;
            position: absolute;
            animation-delay: .2s;
        }

        .box_3 {
            top: 50px;
            left: 150px;
            position: absolute;
            animation-delay: .3s;
        }

        .box_4 {
            top: 50px;
            left: 200px;
            position: absolute;
            animation-delay: .4s;
        }

        .box_5 {
            top: 50px;
            left: 250px;
            position: absolute;
            animation-delay: .5s;
        }

        .box_6 {
            top: 50px;
            left: 300px;
            position: absolute;
            animation-delay: .6s;
        }

        .box_7 {
            top: 50px;
            left: 350px;
            position: absolute;
            animation-delay: .7s;
        }

        .box_15 {
            top: 100px;
            left: 50px;
            position: absolute;
            animation-delay: 0.13s;
        }

        .box_16 {
            top: 100px;
            left: 100px;
            position: absolute;
            animation-delay: 0.14s;
        }

        .box_17 {
            top: 100px;
            left: 150px;
            position: absolute;
            animation-delay: 0.1s;
        }

        .box_18 {
            top: 100px;
            left: 200px;
            position: absolute;
            animation-delay: 0.2s;
        }

        .box_19 {
            top: 100px;
            left: 250px;
            position: absolute;
            animation-delay: 0.3s;
        }

        .box_20 {
            top: 100px;
            left: 300px;
            position: absolute;
            animation-delay: 0.4s;
        }

        .box_21 {
            top: 100px;
            left: 350px;
            position: absolute;
            animation-delay: 0.5s;
        }
    </style>
    <script type="text/javascript" src="//code.jquery.com/jquery-compat-git.js"></script>
    <div class="box_1 box"></div>
    <div class="box_2 box"></div>
    <div class="box_3 box"></div>
    <div class="box_4 box"></div>
    <div class="box_5 box"></div>
    <div class="box_6 box"></div>
    <div class="box_7 box"></div>
    <div class="box_15 box"></div>
    <div class="box_16 box"></div>
    <div class="box_17 box"></div>
    <div class="box_18 box"></div>
    <div class="box_19 box"></div>
    <div class="box_20 box"></div>
    <div class="box_21 box"></div>
    <script>
        var mouse = {
            'x': 0,
            'y': 0
        };
        homex = 0;
        homey = 0;
        forcex = 0;
        forcey = 0;
        magnet = 300;
        $(document).bind('mousemove', function (e) {
            mouse = {
                'x': e.pageX,
                'y': e.pageY
            };
        });
        init()
        function init() {
            $('.box, .box2').each(function (index, el) {
             modify (index, el)
                $(el).data("homex", parseInt($(el).position().left));
                $(el).data("homey", parseInt($(el).position().top));
            });
        }
         function modify (index, el) {
            el = $(el)
            const len = $('.box').length / 2
            // const base = 50vw - 50px * (total - 1) / 2
            if (index < len) {
                el.css('top', 'calc(50vh - 25px)');
                el.css('left', `calc(50vw - 50px * ${(len - 1) / 2 - index})`);

            } else {
                el.css('top', 'calc(50vh + 25px)');
                el.css('left', `calc(50vw + 50px * ${index - len - len / 2 + 1 / 2})`);
            }
        }
        window.addEventListener('resize', init)
        $('.box, .box2').css('position', 'absolute');
        setInterval(function () {
            $('.box, .box2').each(function (index, el) {
                el = $(el);
                position = el.position();
                x0 = el.offset().left;
                y0 = el.offset().top;
                x1 = mouse.x;
                y1 = mouse.y;
                distancex = x1 - x0;
                distancey = y1 - y0;

                distance = Math.sqrt((distancex * distancex) + (distancey * distancey));

                powerx = x0 - (distancex / distance) * magnet / distance;
                powery = y0 - (distancey / distance) * magnet / distance;

                forcex = (forcex + (el.data('homex') - x0) / 2) / 2.1;
                forcey = (forcey + (el.data('homey') - y0) / 2) / 2.1;


                el.css('left', powerx + forcex);
                el.css('top', powery + forcey);
                el.text(parseInt(distance));
            });
        }, 25);
    </script>

Answered By - moon

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Tuesday

Could anyone help me to center this web content on any size of screen?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels