Develop Reference

How to add Prev and next buttons to change on outer divs

I have this sample navigation that I'm trying to create. What I want to achieve is when you clicked on prev or next class. The active class will be added to map-inr and the scale_text will also be added to the global_map_location class. I believe that only the eq() function will be used in this part.
Here's my js Code:
// Open Popup
$(".map-inr").on("click", function () {
let myIndex = $(this).closest(".global-map").index() - 1;
$('.map-inr').removeClass('active');
$(this).addClass('active');
$('.global_map_location').removeClass('scale_text');
$(this).closest(".global-map").find('.global_map_location').addClass('scale_text');
if ($(".map-item.is--show").length) {
$(".map-item").removeClass("is--show");
setTimeout(function () {
$(".map-item").eq(myIndex).addClass("is--show");
}, 600);
} else {
$(".map-item").eq(myIndex).addClass("is--show");
}
});
//Next function
$('.next').click(function(){
if ($('.is--show').next('.map-item').length) {
$('.is--show').removeClass('is--show')
.next('.map-item')
.addClass('is--show');
}
});
//Prev function
$('.prev').click(function(){
if ($('.is--show').prev('.map-item').length) {
$('.is--show').removeClass('is--show')
.prev('.map-item')
.addClass('is--show');
}
});
.global-map {
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
.map-inr {
background: red;
width: 150px;
height: 150px;
cursor: pointer;
}
.map-inr.active {
background: yellow;
}
.global_map_location.scale_text {
font-weight: 600;
}
.contain {
width: 100%;
max-width: 1000px;
margin: 50px auto 0;
padding: 0;
}
.map-item {
display: inline-block;
vertical-align: top;
padding: 20px;
border-radius: 20px;
text-align: center;
}
.map-item.is--show {
background: yellow;
}
.slider-arrow-wrapper {
margin-bottom: 20px;
}
.slider-arrow-wrapper .prev,
.slider-arrow-wrapper .next {
display: inline-block;
vertical-align: top;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="global-map">
<div class="map-inr active"></div>
<p class="global_map_location scale_text">map1</p>
</div>
<div class="global-map">
<div class="map-inr"></div>
<p class="global_map_location">map2</p>
</div>
<div class="global-map">
<div class="map-inr"></div>
<p class="global_map_location">map3</p>
</div>
<div class="contain">
<div class="map-item is--show">
<div class="slider-arrow-wrapper">
prev
next
</div>
1
</div>
<div class="map-item">
<div class="slider-arrow-wrapper">
prev
next
</div>
2</div>
<div class="map-item">
<div class="slider-arrow-wrapper">
prev
next
</div>
3</div>
</div>
I have tried this on next button:
//Next function
$('.next').click(function(){
let nextIndex = $(this).closest(".map-item").index() + 1;
console.log("This next is " + nextIndex);
$(".global-map").eq(nextIndex).find('.map-inr').addClass("active");
$(".global-map").eq(nextIndex).find('.global_map_location').addClass("scale_text");
if ($('.is--show').next('.map-item').length) {
$('.is--show').removeClass('is--show')
.next('.map-item')
.addClass('is--show');
}
});
But it just keeps adding classes to next div. How to remove the classes from prev sections/divs? Is there any proper way to do it?

When user click on Prev and Next anchor tag which have Yellow background then only it should work. It is not feasible solution to make all the prev and next anchor tag click work. Only yellow background prev and next click should work.
Below is the code which match up the scenario which is explained above and also it will give you the user friendly standard view:
$(".next").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").next().length > 0)
{
$(".contain .is--show").removeClass('is--show').next().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().next().children(".map-inr").addClass("active");
}
});
$(".prev").on('click', function(e) {
e.preventDefault();
if($(this).closest(".map-item.is--show").prev().length > 0)
{
$(".contain .is--show").removeClass('is--show').prev().addClass("is--show");
$(".map-inr.active").removeClass('active').parent().prev().children(".map-inr").addClass("active");
}
Please replace it with your prev and next click jQuery.
Let me know if you have any issues or modification request.

js vertical slider with arrows

The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice

I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.

Same code acts differently on website and jsfiddle

I have some code that is meant to allow a user to scroll sideways by clicking, which works perfectly on jsfiddle, but does something completely different on my actual website. On my website, you can scroll right once but no further, and when you scroll back, it apparently scrolls right past the left-hand border.
Here's a live link to the problem on my website: rouvou.com/error
And here's the fiddle.
I literally copied and pasted the code. I'm using jQuery 1.10.0 on my website and the closest jQuery version jsfiddle has is 1.10.1, but I can't imagine that could cause this different behavior. The html I posted is the only code on that entire page. On both locations, I'm using Chrome Version 42.0.2311.152 (64-bit) on Ubuntu.
Why might the code have different results on jsfiddle and my website?
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ($item.length / visible) - 1; //End index
$('div#arrowR').click(function() {
if(index < endIndex) {
index++;
$item.animate({
'left': '-=300px'
});
}
});
$('div#arrowL').click(function() {
if(index > 0) {
index--;
$item.animate({
'left': '+=300px'
});
}
});
});
#container {
width: 340px;
height: 50px;
}
#list-container {
overflow: hidden;
width: 300px;
float: left;
}
.list {
background: grey;
min-width: 1400px;
float: left;
}
#arrowR {
background: yellow;
width: 20px;
height: 50px;
float: right;
cursor: pointer;
}
#arrowL {
background: yellow;
width: 20px;
height: 50px;
float: left;
cursor: pointer;
}
.item {
background: green;
width: 140px;
height: 40px;
margin: 5px;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>

It seems just as you said, 1.10.0 has some bug on that. I created an altered version of your jsfiddle, the only difference is that the jQuery is using version 1.10.0, you can see that it works like your site now.
See jQuery 1.10.1 Change log :
Effects
#13937: finish() only finishes last item of a set being .animate()d.
#13939: 1.10.0 breaks relative animation
and the issue ticket#13939 :
Description
Relative animation (using += or -=) is broken in 1.10.0. For example,
$('h1').animate({marginLeft: '+=100px'}); does not work.
So, you might have to switch to version 1.10.x where x is the latest version, as their change should mostly be issue fixes, not functionality changes.

The problem was that there is indeed a bug in 1.10.0, but for anyone in the future who has this problem but doesn't want to upgrade, I figured out a way to make this function work on 1.10.0.
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ( $item.length / visible ) - 1; //End index
animatepixels = 0
$('div#arrowR').click(function(){
if(index < endIndex ){
index++;
animatepixels = 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
$('div#arrowL').click(function(){
if(index > 0){
index--;
animatepixels= 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
});
</script>

jquery-ui : drop&drag inventory with stackable items

Hello everyone,
I'm building a drop&drag inventory panel for my webgame, but I was unable to make it work with stackable elements. I have simplified the whole inventory so that it's less confusing.
FIrst off, let me explain how do I expect it to work:
Every .item element can be dropped on any free .inv_slot.
If I try to drop an .item element on another .item that does not contain class .stackable, it will simply activate the draggable's revert() function.
if I try to drop the .item element on an .item that does have the .stackable class,
it will only remove the clone/helper. (Later on I will addd an function that only increases the items stack size.)
Now what's wrong with the below example :
in case an .item accidentally dropped on border or between two .inv_slotslots, the Revert animation is not activated. It does work however, while dropping the .item element outside the #panel.
Also if I accidentally dropped an .item between two .inv_slot elements, it will behave as if the .item was dropped on a .stackable item. So it will remove the clone instead of reverting back to it's prev. position. (Most likely an issue with the selector in drop: method)
If I drop a .stackable item over another .stackable item, it does not refresh the cursor. It seems to be stuck in the drag mode which activates the "pointer" cursor.
Now here's the (partialy working) example:
$(document).ready(function() {
//var prev_el = '';
var item_isStackable = "";
$( ".item").draggable({
scroll: true,
revert: function(isValidEl)
{
if(isValidEl)
{
return false;
}else{
return true;
}
},
helper: "clone",
cursor: "pointer",
stack: false,
zIndex: 27,
drag: function(event, ui)
{
item_isStackable = $(this).hasClass("stackable");
},
});
$( ".inv_slot" ).droppable({
accept: ".item",
drop: function( event, ui ) {
var item = $(this).find(".item");
if(item.length == 0) /// See if there any items already in the currently selected inventory slot //
{
console.log("Inserting");
ui.draggable.detach().appendTo($(this)); // if none, insert the item into athe free slot ///
}
else if(item_isStackable == true && item.hasClass("stackable")){
console.log("Increasing ");
ui.draggable.detach(); /// If yes, just destroy the clone ///
}else{
console.log("reverting back");
// in case it's not .inv_slot , revert the item back to it's previous position //
ui.draggable.animate(ui.draggable.data().origPosition,"slow");
}
}
});
});
#panel
{
width: 340px;
height: 44px;
border: 1px solid #000;
padding: 4px;
}
.inv_slot
{
z-index: 22;
position: relative;
width: 40px;
height: 40px;
border: 1px solid red;
float: left;
}
.inv_slot .slot_pos{
z-index: 24;
position: absolute;
margin-left: 50%;
left: -4px; top: 2px;
}
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
}
.item.stackable
{
border: 1px solid green;
}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<div id="panel">
<div class="inv_slot">
<div class="item stackable" ></div>
<span class="slot_pos">0</span>
</div>
<div class="inv_slot">
<div class="item"> </div>
<span class="slot_pos">1</span>
</div>
<div class="inv_slot">
<div class="item stackable"> </div>
<span class="slot_pos">2</span>
</div>
<div class="inv_slot"><span class="slot_pos">3</span> </div>
<div class="inv_slot"><span class="slot_pos">4</span> </div>
<div class="inv_slot"><span class="slot_pos">5</span> </div>
<div class="inv_slot"><span class="slot_pos">6</span> </div>
<div class="inv_slot"><span class="slot_pos">7</span> </div>
</div>
I have spent couple of hours without any progress , so I'd really appreciate if someone could help me out with this one.
Thanks in advance,
Alex.

What's happening is that when you drag a box onto a border next to it, it deletes itself because it tries to stack itself. You need to change the second part of your if statement:
else if(item_isStackable == true && item.hasClass("stackable") && ui.draggable.filter(function() { var d = this; return item.filter(function() { return d == this; }).length > 0; }).length === 0)
To fix the cursor pointer problem:
.item
{
position: relative;
z-index: 25;
margin: 4px;
width: 30px;
height: 30px;
border: 1px solid blue;
cursor: default !important; /* Add this property. */
}
Fiddle.

Slide to next div

HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them сurrent class.

Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO