How to replace scrollbars of a div with overflow:auto with arrows - javascript

I am trying to make a small div that will be used to scroll between pictures in a jquery image zoom plugin for an eCommerce website.
Here is what I have so far.
<div style="width:125px;height:300px;overflow:auto;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>
Here is a jsfiddle https://jsfiddle.net/2o482ofp/
I need to hide the scrolls bars and instead have fixed arrow buttons to move up and down within the div.
I am trying to mimic the functionality that can be found on https://www.daraz.pk/ca-sports-black-pu-running-shoes-for-men-6605753.html
I did a lot of googling but could not find any tutorial, guide, plugin or anything regarding what I am trying to do so if anyone can please help much appreciated.

var blockHeight = 75;
var marginTop = 10;
$('.up').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
console.log('currentOffset', currentOffset);
var result = currentOffset - blockHeight - marginTop;
$elem.css("margin-top", result + "px");
});
$('.down').click(function(){
var $elem = $('div>div:eq(0)');
var currentOffset = parseInt(window.getComputedStyle($elem[0], null)['marginTop'].split('px')[0], 10);
var result = currentOffset + blockHeight + marginTop;
console.log('.currentOffset', currentOffset)
$elem.css("margin-top", result + "px");
})
div > div {
transition: margin 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
<div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>

Related

How to hide an item?

var r1=Math.floor(Math.random()*255)
var g1=Math.floor(Math.random()*255)
var b1=Math.floor(Math.random()*255)
$(".color1").click(function (){
$(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")")
})
$(document).ready(function () {
$(document).on('click', function (event) {
$target = $(event.target);
$target.addClass('clicked');
});
})
var numItems
var getfirstclass
var getsecondclass
$('div').click(function saveclassnames(){
var getfirstclass=$(this).attr('class')
console.log(getfirstclass)
var getsecondclass=$(this).attr('class')
console.log(getsecondclass)
getfirstclass===null
getsecondclass===null
})
$('div').click(function remove(){
var numItems = $('.clicked').length
if(numItems===2 && getfirstclass === getsecondclass){
$('.clicked').css('opacity', '0')
}
else{
$('.clicked').css('background', 'black')
}
})
<body>
<div class="container">
<div class="row">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
</div>
<div class="row">
<div class="color5"></div>
<div class="color3"></div>
<div class="color1"></div>
<div class="color6"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color6"></div>
<div class="color8"></div>
<div class="color5"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color8"></div>
<div class="color4"></div>
<div class="color2"></div>
</div>
</div>
</body>
I am trying to make a game called "Memory" (if 2 flipped cards are same, the cards will disappear, but if the cards are not the same, they will flip back). But there is a difference between the original one). I am using random colors instead of card pictures, but I cannot make <div> elements with the same background-color disappear, or flip back if they are not the same. Can someone explain to me why this code does not work?
Thanks.
opacity: 0; hiding generates a lot of space although the element is not visible.
background: black; – the element needs to blend in with the background, otherwise it will not work (technically it won't work)
You can either do this:
$('yourItem').css({
display: 'none'
});
Or, the "simplest way to hide an element":
$('yourItem').hide();
For more information see https://api.jquery.com/hide/
You could use
display: none
If that messes with other stuff, use
visiblity: hidden;

How to stop scrolling when there is no content to display in angular 6?

I am making angular 6 application where i am making a scrollable divs which has,
HTML:
<button class="lefty paddle" id="left-button"> PREVIOUS </button>
<div class="container">
<div class="inner" style="background:red"></div>
<div class="inner" style="background:green"></div>
<div class="inner" style="background:blue"></div>
<div class="inner" style="background:yellow"></div>
<div class="inner" style="background:orange"></div>
</div>
<button class="righty paddle" id="right-button"> NEXT </button>
TS:
ngOnInit() {
const container = document.querySelector(".container");
const lefty = document.querySelector(".lefty");
let translate = 0;
lefty.addEventListener("click", function() {
translate += 200;
container.style.transform = "translateX(" + translate + "px" + ")";
});
const righty = document.querySelector(".righty");
righty.addEventListener("click", function() {
translate -= 200;
container.style.transform = "translateX(" + translate + "px" + ")";
});
}
Working Stckblitz: https://stackblitz.com/edit/angular-mncf26
In this working demo you can see there is next and previous button which will make translate of 200px either to right or left as per the click..
Here if the click was made either in left or right even if there is no content it is scrolling 200px either side..
How can i stop the scroll if there is no content to display??
This is tricky because you are moving the container in a reverse direction, so you have to play on the negative values of your variables.
I made a quick stackblitz showing that (and I changed your code a bit to simplify it, sorry), tell me if it is what you want :
<button class="lefty paddle"
(click)="translateValue = translateValue + 200"
[disabled]="-translateValue <= 0"> PREVIOUS </button>
<div class="container" #container [ngStyle]="getStyle">
<div class="inner" *ngFor="let item of elements" [style.background]="item" #items></div>
</div>
<button class="righty paddle"
(click)="translateValue = translateValue - 200"
[disabled]="-translateValue >= container.offsetWidth"> NEXT </button>

jQuery: show/hide are instantaneous

I've one div that contains to other one:
<div>
<div id="card-container">....</div>
<div id="wait-for-result-container" style="display: none;">...</div>
</div>
On some event, I want to change the displayed element, with a fadeIn/fadeOut effect.
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
(I put some big number to really see the effect)
But when I trigger my effect, it is instantaneous, there is no fade-in/fade-out.
I'm not sure it matters, but I'm using jquery-3.1.1 and bootstrap 4 alpha.
Any idea what is going wrong?
EDIT
As asked, here is some clarification.
The element that I'm trying to hide is hided immediatly and the one I show is appearing immediately.
EDIT
I tried to put a demo here with the code from above:
$('#myBt').click(function(){
$('#card-container').hide(5000);
$('#wait-for-result-container').show(5000);
});
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Click me</button>
If you can use the full version of jQuery, give jQuery fadeOut and fadeIn a try :)
$('#myBt').click(function(){
var duration = 5000;
$('#card-container').fadeOut(duration);
$('#wait-for-result-container').delay(duration).fadeIn(duration);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example1</button>
If you have to stick with the slim version, you can use setInteval
$('#myBt').click(function(){
var duration = 5000;
var op = 0.9; // initial opacity
var timer1 = setInterval(function () {
if (op <= 0.1){
clearInterval(timer1);
op = 0;
$('#card-container')[0].style.display = 'none';
}
$('#card-container')[0].style.opacity = op;
op -= 100/duration;
}, 100);
var timer2 = setInterval(function () {
if (op <= 0){
$('#wait-for-result-container')[0].style.opacity = 0;
$('#wait-for-result-container').show();
}
if (op >= 1){
clearInterval(timer2);
}
if($('#wait-for-result-container').is(':visible')){
$('#wait-for-result-container')[0].style.opacity = op;
op += 100/duration;
}
}, 100);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div>
<div id="card-container">First one</div>
<div id="wait-for-result-container" style="display: none;">Second one</div>
</div>
<button id="myBt">Example2</button>

Remove Link on scroll

In my application I have 4 links with different IDs and 4 DIV with same ID as each link (I use them for anchor-jumping).
My current code:
One
Two
Three
Four
<div class="col-md-12 each-img" id="1">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="2">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="3">
<img src="img/album-img.png">
</div>
<div class="col-md-12 each-img" id="4">
<img src="img/album-img.png">
</div>
Sometime users just scroll to second div id="2" first before they click on buttons and when they do so, they are sent to top id="1" first instead of continue to next ID id="3".
Only one button is visible at a time with use of CSS and when link is clicked, I remove that link.
CSS
a.btn{display: none}
a.btn a:first-child{display: block !important;}
jQuery
$(document).ready(function(){
$('a.btn').click(function () {
$(this).remove(); // remove element which is being clicked
});
});
How can I achieve so if user scroll down, each link that has same ID as the DIV get removed.
For instance: If user scroll down to <div class="col-md-12" id="1">, One gets removed and Next link would be Two to click on.
PS: This is for a dynamic page and IDs will change, so we need another selector maybe
This is what I have tried until now, but problem is that it removes all the links and not first one only
$(function() {
var div = $('.each-img').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('.each-img').each(function(){
if (scrollTop >= div) {
$("a.btn:eq(0)").remove();
//$("a.btn:first-child").remove();
}
});
});
});
PS: The way HTML & CSS is setup doesn't need to like this and I can change it to whatever that will be better for the function
It's no problem to make it dynamic:
JSFiddle: https://jsfiddle.net/rc0v2zrw/
var links = $('.btn');
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
links.each(function() {
var href = $(this).attr('href');
var content = $(href);
if (scrollTop > content.offset().top) {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="http://lorempixel.com/400/500/">
</div>
<div class="col-md-12" id="2">
<img src="http://lorempixel.com/450/500/">
</div>
<div class="col-md-12" id="3">
<img src="http://lorempixel.com/480/500/">
</div>
<div class="col-md-12" id="4">
<img src="http://lorempixel.com/500/500/">
</div>
I think this is more or less what you're after:
JSFiddle
https://jsfiddle.net/wc0cdfhv/
It's good to cache the position of your elements outside the scroll function, this way it doesn't need to be calculated every time.
You should also keep in mind this won't scale too well if you have dynamic content but if you're just working with 4 static links it will do fine.
Code
$(function() {
var scroll1 = $('#1').offset().top;
var scroll2 = $('#2').offset().top;
var scroll3 = $('#3').offset().top;
var scroll4 = $('#4').offset().top;
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop >= scroll4) {
$("#go1, #go2, #go3, #go4").hide();
}
else if (scrollTop >= scroll3) {
$("#go1, #go2, #go3").hide();
$("#go4").show();
}
else if (scrollTop >= scroll2) {
$("#go1, #go2").hide();
$("#go3, #go4").show();
}
else if (scrollTop >= scroll1) {
$("#go1").hide();
$("#go2, #go3, #go4").show();
}
else {
$("#go1, #go2, #go3, #go4").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:fixed; top:0; left:0; right:0; background:#CCC">
One
Two
Three
Four
</div>
<div class="col-md-12" id="1">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="2">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="3">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
<div class="col-md-12" id="4">
<img src="https://www.myoodle.com/images/easyblog/616/2014042_Therapy_Dog_003.jpg">
</div>
use scrollEvent listener
$(window).scroll(function(e){
if($(this)).scrollTop >= $('div#1').offset().top){
$("a#1").hide();
}
});
Use Something like that and it will work .. Hope this helps

Image not hiding correctly

I made a JQuery carousel from scratch, so far the code is good and it works quite nice.
The main issue is when I try and use the fadeOut function alongside the fadeIn function, the images stack on top of each other.
I cant figure out how to make them overlap.
I tried to play around with absolute positioning but had no luck.
You can clearly see it when you go on my website http://techyhesh.com/Dogs/
html
<div class="carousel">
<div id="background-slideshow">
<div style="display: none;" id="img1" class="slides">
<img src="/2015/03/Carosuel2.png">
<div class="textblock">
<p class="carousel-text1">Slider 1</p>
<p class="carousel-text2">His nose gets into everything</p>
</div>
</div>
<div style="display: block;" id="img2" class="slides">
<img src="/2015/03/Carosuel.png">
<div class="textblock">
<p class="carousel-text1">Slider 2</p>
<p class="carousel-text2">His nose gets into everything</p>
</div>
</div>
<div style="display:none;" class="SlideJSON">2</div>
</div>
</div>
JS
jQuery(document).ready(function($) {
var slides= $(".JSONNumber").html();
var slides= parseInt(slides);
var animateInterval;
var i = 1;
var x = 2;
function animate() {
$("#img" + i).fadeOut(2000)
$("#img" + x).fadeIn(2000);
if (i == slidenumber) {
$("#img1").fadeIn(2000);
i = 1;
x = 2;
} else {
i++;
x++;
}
}
animateInterval = setInterval(animate, 3000);
})
As per your HTML, The selector you've used is wrong.
$("#img" + i)
It should be
$("#slideimg" + i)
in your slides css, just add display: inline-block;

Categories

Resources