I have this sticky card and just need it to stay on hold in a certain position vertically when scrolling past a certain point. All i can do right now is just change it's position to absolute and it will disappear from the current area when scrolling down.
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if ($(window).width() > 991) {
if (distanceFromTop < 2350) {
$('.sticky-card').css({ position: 'fixed' });
}
else {
$('.sticky-card').css({ position: 'absolute' });
}
}
else {
$('.sticky-card').css({ position: 'relative' });
}
});
.sticky-card {
position: fixed;
width: 400px;
max-width: 400px;
z-index: 1000;
top:15%;
height:735px;
background: rgb(149, 202, 228);
background: -moz-linear-gradient(162deg, rgba(149,202,228,1) 0%, rgba(0,141,210,1) 52%, rgba(2,100,148,1) 100%);
background: -webkit-linear-gradient(162deg, rgba(149,202,228,1) 0%, rgba(0,141,210,1) 52%, rgba(2,100,148,1) 100%);
background: linear-gradient(162deg, rgba(149,202,228,1) 0%, rgba(0,141,210,1) 52%, rgba(2,100,148,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#95cae4", endColorstr="#026494", GradientType=1);
color: white;
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.1);
box-shadow: 15px 15px 5px rgba(0, 0, 0, 0.1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-md">
<div class="row">
<div class="col-md-12 col-lg-8">
<div class="container">
<div class="text-left">
Some text on the left
</div>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="sticky-card">
Some content here
</div>
</div>
</div>
</div>
Well I found a way to do this, I don't know if it's the best or not but it's the only
thing i could think of. This will keep the sticky stuck in that position after scrolling past it, once scroll back up it will be fixed and move with scroll again
.sticky-card.bottom{
position: absolute;
top: 1275px;
}
$(window).scroll(function () {
var distanceFromTop = $(document).scrollTop();
if ($(window).width() > 1199) {
if (distanceFromTop < 2200) {
$('.sticky-card').addClass('fixed');
$('.sticky-card').removeClass('bottom');
}
else {
$('.sticky-card').removeClass('fixed');
$('.sticky-card').addClass('bottom');
}
}
else {
$('.sticky-card').removeClass('fixed');
}
});
Related
I am using Watupro plugin for simple test. In result window there are variables that display numeric test results: %%CATEGORY-POINTS-4%%, %%CATEGORY-POINTS-5%% etc.
I am using Progress Bar plugin, to display progress bar with results via shortcode.
[wppb progress=%%CATEGORY-POINTS-4%%/130 option=green] gives me nice progress bar, based on student's results in each category.
However I want to display different colors of progress bar, depending on result. In order to achieve that, I want to change value of shortcode, based on numeric values.
I came up with this code so far:
HTML:
<div class="bar" data-score="%%CATEGORY-POINTS-4%%">[wppb progress=%%CATEGORY-POINTS-4%%/130 option=green]</div>
<div class="bar" data-score="%%CATEGORY-POINTS-5%%">[wppb progress=%%CATEGORY-POINTS-5%%/130 option=green]</div>
<script type="text/javascript">
results();
</script>
JavaScript:
function results() {
var bar = document.getElementsByClass('bar');
var score = bar.getAttribute('data-score');
alert (score);
if (score < 47) {
// ???
}
if (score > 46 && 4_score < 71) {
// ???
}
if (score > 70) {
// ???
}
I guess I need to come up with code that changes shortcode attribute option to different color for each div respectively.
Any ideas?
Since you are using WP, you can try jQuery like this:
let score = jQuery('.bar').data('score'); // get element data-score
if (score > 46 && score < 71) { // your condition
$(".green").toggleClass('green yellow'); // changes class green to yellow
}
Then create new CSS class yellow:
div.wppb-progress > span.yellow {
background: linear-gradient(to bottom, #ffe893 0%,#ffd644 33%,#f5c001 62%,#bd9400 100%);
}
Ok. I got it solved.
I added loop, so, Javascript goes through all divs.
Here's the code:
<div id="watupro_quiz" class="quiz-area single-page-quiz">
<div id="startOutput"> </div>
<!--<script type="text/javascript" src="https://psy-help.ee/wp-content/scripts/test_results.js"></script>-->
<div class="bar" data-score="71" data-less="47" data-more="70">
<div class="wppb-wrapper ">
<div class="wppb-progress fixed"><span class="yellow" style="width: 39.230769230769%;"><span></span></span></div>
</div>
</div>
<div class="bar" data-score="62">
<div class="wppb-wrapper ">
<div class="wppb-progress fixed"><span class="yellow" style="width: 47.692307692308%;"><span></span></span></div>
</div>
</div>
<!--<script type="text/javascript">
results();-->
</script>
</div>
div.wppb-wrapper {
clear: both;
}
div.wppb-progress {
height: 25px;
width: 400px;
background: #555;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
position: relative;
}
div.wppb-progress > span.green {
background: #83c783;
background: -moz-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c783), color-stop(33%,#52b152), color-stop(62%,#008a00), color-stop(100%,#005700));
background: -webkit-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
background: -o-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
background: -ms-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
background: linear-gradient(to bottom, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
}
div.wppb-progress > span {
display: block;
height: 25px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
background: #5a84c4;
background: -moz-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a84c4), color-stop(100%,#1a2275));
background: -webkit-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
background: -o-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
background: -ms-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
background: linear-gradient(top, #5a84c4 0%,#1a2275 100%);
-webkit-box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
-moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
overflow: hidden;
position: relative;
}
let barElement = document.getElementsByClassName("bar");
for (let i = 0; i < barElement.length; i++) {
let wrapper = barElement[i].firstElementChild;
let bar = wrapper.firstElementChild;
let span = bar.firstElementChild;
let score = barElement[i].getAttribute("data-score");
let low = barElement[i].getAttribute("data-less");
let high = barElement[i].getAttribute("data-more");
if (score < low) {
span.classList.remove("yellow");
span.classList.add("green");
} if (score > high) {
span.classList.remove("yellow");
span.classList.add("red");
}
}
Working example here: https://codepen.io/nick-gregory-the-looper/pen/wvympmg
Just in case, its my 1th question.
I have:
nav menu with transparent background and trying to change backrgound when reached top edge of window.
window.addEventListener("scroll", navSticky);
function navSticky(){
let nav = document.getElementById('navbar');
let bounding = nav.getBoundingClientRect();
if(bounding.top <= 0 ){
nav.classList.add("sticky");
}else{
nav.classList.remove("sticky");
}
}
*{
margin: 0;
text-align: center;
}
body{
background: lightgrey;
}
header h1{
padding: 40px;
}
nav{
position: sticky;
top: 0;
padding: 12px;
background: linear-gradient(to right,
rgba(0,0,0,0),
rgba(0,255,0, 0.5),
rgba(255,0,0, 0.5),
rgba(0,0,0,0));
color: black;
}
nav:before{
content: "now bg transparent";
}
.container{
min-height: 1000px;
padding: 20px;
}
nav.sticky{
background: linear-gradient(to right,
rgb(0,255,0),
rgb(255,0,0));
color: white;
}
nav.sticky:before{
content: "now bg isn't transparent";
}
<body>
<header>
<h1>Header, that ask u to scroll page</h1>
</header>
<nav id="navbar">
</nav>
<div class ="container">
When we scroll page, and nav reached top of screen, .sticky add to classList<br>
</div>
</body>
Its work, but I have several questions:
is it possible to do same without js?
is it possible to optimise this script cuz scroll event calling so often..
Thank you!
Unfortunately no.
Yes, the IntersectionObserver API is a very good and performant solution for this specific issue.
The API allows you to observe elements when they enter or leave the viewport. It does this away from the main thread, so you won't get any render blocking code.
In your specific case, observe the <header> element. Whenever the element leaves the view is the same point when the navbar becomes sticky. In the callback check if the isIntersecting property is true or false. This property indicates if the observed element is (partially) in view or not.
const header = document.querySelector('#header');
const nav = document.querySelector('#navbar');
const callback = ([entry]) => {
const { isIntersecting } = entry;
nav.classList.toggle('sticky', !isIntersecting);
};
const options = {
root: null,
rootMargin: '0px',
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(header);
* {
margin: 0;
text-align: center;
}
body {
background: lightgrey;
}
header h1 {
padding: 40px;
}
nav {
position: sticky;
top: 0;
padding: 12px;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
color: black;
}
nav:before {
content: "now bg transparent";
}
.container {
min-height: 1000px;
padding: 20px;
}
nav.sticky {
background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0));
color: white;
}
nav.sticky:before {
content: "now bg isn't transparent";
}
<body>
<header id="header">
<h1>Header, that ask u to scroll page</h1>
</header>
<nav id="navbar"></nav>
<div class="container">
When we scroll page, and nav reached top of screen, .sticky add to classList<br>
</div>
</body>
I have searched extensively for the same but none of the solution worked so asking here
I want to change the background image [basically change the class of an element], in a loop. But the really tricky part for me [being new to JavaScript] is that setTimeOut stops after a fix number of times. Here's the code:
function addHomeInnerClass(selector, imageNumber = 0) {
imageNumber += 1;
if (imageNumber === 1) {
selector.classList.add('home-content-1');
}
if (imageNumber === 2) {
selector.classList.add('home-content-2');
}
if (imageNumber === 3) {
selector.classList.add('home-content-3');
}
if (imageNumber === 4) {
selector.classList.add('home-content-4');
imageNumber = 0;
}
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
Here's my HTML section for the same:
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
Here's my CSS3:
.home {
background-image: linear-gradient(to right, #ff5517 0%, #ff7000 40%, #db1d5e 80%);
height: 88.98vh;
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (2).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (3).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/(4).jpg") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.9) 80%), url("/app/assets/images/slider/ (1).jpg") no-repeat center center/cover;
z-index: 1;
}
}
I know CSS & HTML code hardly matter here but if I could get some other method to do what I want to, that would be great.
What I want to do?
Use pure javascript to get the fade in and fadeout image effect.
Where am I stuck?
Cannot figure out how to run setTimeOut infinite times?
NOTE: I don't want to use any third party library. It's a learning project.
As I said in a comment, the problem isn't that the timer stops running. It's that you're not removing the old classes when you add the new one. Here's how you could do that while also simplifying the code:
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
Live Example (I modified the CSS at bit to make it easy to see the changes; I also added the missing } after the .home rule):
function addHomeInnerClass(selector, imageNumber = 0) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber = imageNumber % 4 + 1;
selector.classList.add('home-content-' + imageNumber);
setTimeout(() => addHomeInnerClass(selector, imageNumber), 1000);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
addHomeInnerClass(homeInner, 0);
});
.home {
height: 88.98vh;
}
.home-content-1 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=1") no-repeat center center/cover;
z-index: 1;
}
.home-content-2 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=2") no-repeat center center/cover;
z-index: 1;
}
.home-content-3 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=3") no-repeat center center/cover;
z-index: 1;
}
.home-content-4 {
height: 98%;
border-bottom-right-radius: 20rem;
background: url("https://via.placeholder.com/100/0000C0/FFFFFF?text=4") no-repeat center center/cover;
z-index: 1;
}
}
<section class="home" id="home">
<div class="home-inner">
</div>
</section>
As suggested in the comments, setInterval is exactly tailored for your needs. It allows you to run a function (like addHomeInnerClass in your case) every x milliseconds. Please note however that using this function requires you to change your imageNumber logic a bit.
Additionally, as mentioned in the comments as well, you should remove the old classes before adding new ones.
I would suggest the following approach:
let imageNumber = 0;
function addHomeInnerClass(selector) {
selector.classList.remove('home-content-' + imageNumber);
imageNumber++;
if(imageNumber === 5) imageNumber = 1;
selector.classList.add('home-content-' + imageNumber);
}
document.addEventListener('DOMContentLoaded', function() {
const homeInner = document.querySelector('.home-inner');
setInterval(() => addHomeInnerClass(homeInner), 1000);
});
Requirement:
Needed to add custom scale numbers to the range slider from the Rangeslider.js plugin, so that whenever it slides over the horizontal line it needs to display the selected number range from the console
Actual Results:
Whenever I tried to add custom numbers the whole design including marker gets ruined. Here is the below codes of the snippet which needs to add custom number scales
Code I:
init(1, 10);
function init(min, max) {
$("#io").append($("<div style='text-align:center;'><div><input type='range' id='slider' min='" + min + "' max='" + max + "' step='1' value='3' data-rangeslider><output id='val'></output></div></div>"));
$('head').append('<link href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet" type="text/css">');
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js")
.done(function(script, textStatus) {
console.log(textStatus);
//Preform here
initRangeSlider($("#slider"));
});
}
function initRangeSlider(ele) {
ele.rangeslider({
// Deactivate the feature detection
polyfill: false,
// Callback function
onInit: function() {
//valueOutput(this.$element[0]);
},
// Callback function
onSlide: function(position, value) {
console.log('onSlide');
console.log('position: ' + position, 'value: ' + value);
},
// Callback function
onSlideEnd: function(position, value) {
console.log('onSlideEnd');
console.log('position: ' + position, 'value: ' + value);
}
});
}
.rangeslider--horizontal {
height: 6px !important;
width: 66% !important;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>Range Slider</b><br/>
<div id='io'></div><br/><br/>
Code II:
Here the below code of snippets doesn't seem to fit for my project. This was my actual result when I tried to integrate. So I need to modify the above code I with the below code II snippets
var $r = $('input[type="range"]');
var $ruler = $('<div class="rangeslider__ruler" />');
// Initialize
$r.rangeslider({
polyfill: false,
onInit: function() {
$ruler[0].innerHTML = getRulerRange(this.min, this.max, this.step);
this.$range.prepend($ruler);
}
});
function getRulerRange(min, max, step) {
var range = '';
var i = 0;
while (i <= max) {
range += i + ' ';
i = i + step;
}
return range;
}
.rangeslider,
input[type='range'] {
max-width: 400px;
height: 6px !important;
width: 66% !important;
float: center !important;
}
.rangeslider__ruler {
cursor: pointer;
font-size: .7em;
margin: 20px 3px 0 3px;
position: relative;
top: 100%;
text-align: justify;
}
// Workaround to justify only one-line.
// Extra element to force a new line.
.rangeslider__ruler:after {
content: "";
display: inline-block;
width: 100%;
}
.rangeslider__handle {
background: white;
background-image: none;
background-size: auto;
border: 1px solid #ccc;
cursor: pointer;
display: inline-block;
width: 24px !important;
height: 25px !important;
position: absolute;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.css" integrity="sha256-F8gzbY2A1VTf49iOrc8Lst/UvcUtoFr3myix0WMiNqA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.min.js" integrity="sha256-vFhEtGnaQ2xB+yjBTSXxssthNcfdbzu+lmLYhCdp2Cc=" crossorigin="anonymous"></script>
<!--
rangeslider.js example
https://github.com/andreruffert/rangeslider.js
by André Ruffert - #andreruffert
-->
<br/>
<input type="range" min="0" max="4" step="0.5">
Here is a resulting snapshot showed after integrating the code II to my project
Expected Result:
Code I needs to be integrated/modified taking the code from the Code II snippets
OR
Apart from rangeslider.js plugin if in case, if there are any other procedures needs to be followed.
I have some social icons and I put a div that its visibility is hidden and I want to show it when every of the icons is hovered. I wrote the jQuery code below and works nicely, I have used console.log to see event.pageY and top property when is visible and they are same :
$(function() {
$('.social-icons a img').hover(function(event) {
var socialIconName = $(this).data('name');
var Y = event.clientY;
var DOMTarget = $('#social-icon-text');
DOMTarget.text(socialIconName);
DOMTarget.css({
'top': Y,
'visibility': 'visible'
});
}, function(event) {
$('#social-icon-text').css('visibility', 'hidden');
});
});
My HTML code :
<div class="social-icons">
<img src="Images/GitHub.png" alt="GitHub" data-name="GitHub">
<img src="Images/Instagram.png" alt="Instagram" data-name="Instagram">
<img src="Images/Telegram.png" alt="Telegram" data-name="Telegram">
<img src="Images/Twitter.png" alt="Twitter" data-name="Twitter">
<div id="social-icon-text">Instagram</div>
</div>
And this is my CSS :
#social-icon-text {
background-image: linear-gradient(120deg, #D4FC79 0%, #96E6A1 100%);
color: #555;
position: absolute;
font-size: 12px;
padding: 3px 10px;
border-radius: 3px;
top: 0;
left: 120%;
text-shadow: -1px 1px 5px rgba(0, 0, 0, .25);
visibility: hidden;
}
#social-icon-text::before {
content: "";
width: 0;
height: 0;
border-right: 5px solid #D4FC79;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
position: absolute;
top: 50%;
right: 100%;
transform: translateY(-50%);
}
My problem image
My problem is when the div is appeared, although pageY and top property are the same but div has higher value that is showed underneath of the icon but I want them beside together.
Any response will be appreciated.
I used position method and its top property instead of changing pageX value.