A javascript slider array issue

A javascript slider array issue - javascript

Having a slider with images implementation from array, cant figure out why images dont want to be shown up from array, tryed to make a path but it didnt work.I want this code to reflect this image every time a push the button: fpoimg.com/100x100.
Im trying to fix it only with clean javascript.
Here is a sandbox
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame:0,
set:function(image){
path = path || 'http://fpoimg.com/';
document.getElementById('scr').style.backgroundImage ="url ("+path+ image+")";
},
init:function() {
this.set(this.slides[this.frame]);
},
left:function() {
this.frame--;
if(frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right:function() {
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
.scr {
margin:20px auto;
width: 600px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background:none;
border:none;
}
.left {
left:25px;
}
.right {
right:25px;
}
<body>
<button class="left" onclick="slider.left();"><</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();">></button>
</body>

On Line 6 of your Javascript, you have used getElementById('scr'). You have no element with an Id or scr, you needed to use getElementsByClassName('scr')
Your new code:
var slider = {
slides: ['100x100', '100x100', '100x100', '100x100'],
frame: 0,
set: function(image) {
path = path || 'http://fpoimg.com/';
document.getElementsByClassName('scr').style.backgroundImage = "url (" + path + image + ")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if (frame < 0) this.frame = this.slides.length - 1;
this.set(this.slides[this.frame]);
},
right: function() {
if (this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
}, 5000);
};
.scr {
margin: 20px auto;
width: 600px;
height: 320px;
margin-top: 20px;
background-color: white;
background-size: cover;
}
button {
position: absolute;
top: 150px;
width: 25px;
height: 150px;
font-size: 30px;
text-align: center;
background: none;
border: none;
}
.left {
left: 25px;
}
.right {
right: 25px;
}
<body>
<button class="left" onclick="slider.left();">
</button>
<div class="scr"></div>
<button class="right" onclick="slider.right();"></button>
</body>

It seems you've got getElementById() when you meant getElementsByClassName()

Related

document.addEventListener blocking highlight in textarea

I did a div that is moveable but unfortunetaly the function that let user move the div also block the highlight of the text in the text area behind.
I would like to keep the possibility to move the div and to highlight the text in textarea like I want.
Ps: I already tried to put the addEventListener on varMoveButtonNotesWindow but it's really ncomfortable to use it like that (we need to keep the cursor in the little box, and I dont want the box to be bigger it wouldn't look good).
Here's the code:
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

This can do like but not perfact：
RollBack selection when focus back it.
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
window.addEventListener('load',function(){
var logTextSelection = function(event) {
var tgItem = event.target;
tgItem.setAttribute("lastSelectionStart",tgItem.selectionStart);
tgItem.setAttribute("lastSelectionEnd",tgItem.selectionEnd);
}
var rollBackSelection = function(event){
var tgItem = event.target;
var lastSelectionStart = tgItem.getAttribute("lastSelectionStart");
var lastSelectionEnd = tgItem.getAttribute("lastSelectionEnd");
if((lastSelectionStart !== lastSelectionEnd)){
tgItem.focus();
tgItem.setSelectionRange(lastSelectionStart,lastSelectionEnd);
}
}
var docTextareas = document.getElementsByTagName('textarea');
for (var i = 0; i < docTextareas.length; i++) {
docTextareas[i].addEventListener('select', logTextSelection, true);
docTextareas[i].addEventListener('keyup', logTextSelection, true);
docTextareas[i].addEventListener('focus', rollBackSelection, true);
}
});
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

OK I found it, i just created a div that replace document for the addeventListener.
Ps I set the color to rgba(0, 175, 0, 0.3) just for you to see how it react and work you can obviously change it to 0.
function start() {
varNotesWindow.classList.add('show');
}
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
const constAlternativeDocumentForMoveButtonsWindow = document.getElementById('alternativeDocumentForMoveButtonsWindowId');
//Start Move Notes Window
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
constAlternativeDocumentForMoveButtonsWindow.classList.add('use');
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mouseup', function() {
constAlternativeDocumentForMoveButtonsWindow.classList.remove('use');
});
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//End Move Notes Window
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.alternativeDocumentForMoveButtonsWindowClass {
display: none;
}
.alternativeDocumentForMoveButtonsWindowClass.use {
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 175, 0, 0.3);
}
#notesWindow {
display: none;
}
#notesWindow.show {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<button onclick='start()'>Let's Go</div>
<div class="alternativeDocumentForMoveButtonsWindowClass" id="alternativeDocumentForMoveButtonsWindowId"></div>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

Simple-slider add class correctly when reversed

I have a slider that is almost working good enough. Left and right buttons work but I want it to have a .current-slide class on the visible. That is achieved onSlideChanged function and works when using next button but unfortunately when using prev button it's inaccurate?
Basic example: https://codepen.io/rKaiser/pen/KKdZxqv
Try as I might, I couldnt get it, it's something to do with the reversed indexes that I couldnt bind correctly when prev button is clicked, I think.
<div class="nav-example">
<div id="myslider" class="nav-slider">
<img class="current-slide" src="http://placekitten.com/g/612/612"/>
<img src="https://picsum.photos/612/612"/>
<img src="https://picsum.photos/612/612?random=1"/>
<img src="https://picsum.photos/612/612?random=2"/>
<img src="https://picsum.photos/612/612?random=3"/>
</div>
<a id="prev-button" href="#" class="slide-button"><</a>
<a id="next-button" href="#" class="slide-button">></a>
</div>
var container = document.getElementById('myslider');
var children = container.children;
function onSlideChanged(prev, next) {
children[prev].className = '';
children[next].className = 'current-slide';
}
var isNext = true;
var imgSlider = simpleslider.getSlider({
container: container,
children: children,
prop: 'left',
init: -612,
show: 0,
end: 612,
unit: 'px',
paused: true,
onChange: onSlideChanged
});
document.getElementById('prev-button').onclick = function(e) {
if (isNext) {
imgSlider.reverse();
isNext = false;
}
imgSlider.next();
e.preventDefault();
};
document.getElementById('next-button').onclick = function(e) {
if (!isNext) {
imgSlider.reverse();
isNext = true;
}
imgSlider.next();
e.preventDefault();
};
.nav-example { position: relative; width: 612px; height: 612px; }
.nav-slider { position: absolute; top: 0px; left: 0px; z-index: 1;}
#myslider { width:612px; height:612px; }
a.slide-button { position: absolute; padding: 300px 0px 0px 15px; top: 0px; left: 0px; z-index: 12; width: 30px; height: 612px; color: #FFF; background-color: rgba(0,0,0,0.4); text-decoration: none; font-weight: 600; box-sizing: border-box; }
#next-button { left: auto; right: 0px; }
/* ------------------------- */
.current-slide {
filter: invert(1);
border-radius: 50%;
}

Got it to work like this, feels a bit crude but atleast it works.
function onSlideChanged(prev, next) {
if (isNext) {
children[prev].className = '';
children[next].className = 'current-slide';
} else {
var currentSlide = $('#myslider img.current-slide');
if ( currentSlide.is(':first-child') ) {
console.log('first');
$('#myslider img').removeClass('current-slide');
$('#myslider img').last().addClass('current-slide');
} else {
console.log('not first');
currentSlide.prev().addClass('current-slide').next().removeClass('current-slide');
}
}
}

JS/jQuery array looping thumbnails using next and previous image arrows for navigation

I'm fairly new to arrays and I was interested in using it to control a series of thumbnail positions whenever a next or previous arrow is pressed. Additionally these thumbs should loop whenever an image completes a cycle across the array. I used a series of if/else statements and splice to add and remove thumbs that needed to be recycled.
I was successful at getting the Next button to accomplish the task I was working to achieve, but I cannot seem to get the Previous button to behave the same way and reverse the thumbnail flow in the opposite direction. I've tried many different things, but have had no success.
// find elements
var $galleryThumbs = $('#galleryThumbs');
var $galleryThumbsWrapper = $('#galleryThumbsWrapper');
var $next = $('#nextBtn');
var $prev = $('#prevBtn');
var $thumb01 = $('.thumb#t01');
var $thumb02 = $('.thumb#t02');
var $thumb03 = $('.thumb#t03');
var $thumb04 = $('.thumb#t04');
var $thumb05 = $('.thumb#t05');
var $thumb06 = $('.thumb#t06');
var $thumb07 = $('.thumb#t07');
// handle click and add class
var pic = new Array();
pic = [$thumb05, $thumb06, $thumb07, $thumb01, $thumb02, $thumb03, $thumb04];
var x = $($galleryThumbsWrapper);
var thumbOrder = 0;
function checkNextOrder(thumbOrder) {
x.css('float', 'left');
if (thumbOrder == 0) {
console.log("thumbOrder == 0");
pic.splice(0, 1, $thumb04);
x.append($thumb04);
return thumbOrder;
} else if (thumbOrder == 1) {
console.log("thumbOrder == 1");
pic.splice(0, 1, $thumb05);
x.append($thumb05);
return thumbOrder;
} else if (thumbOrder == 2) {
console.log("thumbOrder == 2");
pic.splice(0, 1, $thumb06);
x.append($thumb06);
return thumbOrder;
} else if (thumbOrder == 3) {
console.log("thumbOrder == 3");
pic.splice(0, 1, $thumb07);
x.append($thumb07);
return thumbOrder;
} else if (thumbOrder == 4) {
console.log("thumbOrder == 4");
pic.splice(0, 1, $thumb01);
x.append($thumb01);
return thumbOrder;
} else if (thumbOrder == 5) {
console.log("thumbOrder == 5");
pic.splice(0, 1, $thumb02);
x.append($thumb02);
return thumbOrder;
} else if (thumbOrder == 6) {
console.log("thumbOrder == 6");
pic.splice(0, 1, $thumb03);
x.append($thumb03);
return thumbOrder;
}
}
function checkPrevOrder(thumbOrder) {
x.css('float', 'right');
console.log('previous');
if (thumbOrder == 6) {
console.log("thumbOrder == 6");
pic.splice(6, 1, $thumb04);
x.append($thumb04);
return thumbOrder;
} else if (thumbOrder == 5) {
console.log("thumbOrder == 5");
pic.splice(6, 1, $thumb03);
x.append($thumb03);
return thumbOrder;
} else if (thumbOrder == 4) {
pic.splice(6, 1, $thumb02);
x.append($thumb02);
return thumbOrder;
} else if (thumbOrder == 3) {
console.log("thumbOrder == 3");
pic.splice(6, 1, $thumb01);
x.append($thumb01);
return thumbOrder;
} else if (thumbOrder == 2) {
console.log("thumbOrder == 2");
pic.splice(6, 1, $thumb07);
x.append($thumb07);
return thumbOrder;
} else if (thumbOrder == 1) {
console.log("thumbOrder == 1");
pic.splice(6, 1, $thumb06);
x.append($thumb06);
return thumbOrder;
} else if (thumbOrder == 0) {
console.log("thumbOrder == 0");
pic.splice(6, 1, $thumb05);
x.append($thumb05);
return thumbOrder;
}
}
$($next).on('click', function() {
console.log('next');
console.log("Thumborder is currently at:" + thumbOrder);
if (thumbOrder < 6) {
thumbOrder++;
checkNextOrder(thumbOrder);
} else {
thumbOrder = 0;
checkNextOrder(thumbOrder);
}
})
$($prev).on('click', function() {
console.log('prev');
if (thumbOrder > 0) {
thumbOrder--;
checkPrevOrder(thumbOrder);
} else {
thumbOrder = 6;
checkPrevOrder(thumbOrder);
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#galleryThumbs {
position: absolute;
width: 769px;
height: 90px;
top: 100px;
left: 256px;
/*overflow: hidden;*/
padding-left: 2px;
}
#galleryThumbsWrapper {
position: absolute;
width: 1078px;
height: 90px;
left: -153px;
}
.thumb {
float: left;
width: 100px;
height: 50px;
padding-top: 10px;
padding-right: 2px;
}
.thumb img {
width: 70%;
}
#nextBtn {
position: absolute;
width: 72px;
height: 72px;
left: 800px;
top: 112px;
cursor: pointer;
}
#nextBtn img {
width: 50%;
}
#prevBtn {
position: absolute;
width: 72px;
height: 72px;
left: 52px;
top: 112px;
cursor: pointer;
}
#prevBtn img {
width: 50%;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="galleryThumbs">
<div id="galleryThumbsWrapper">
<div class="thumb" id="t05"><img src="https://i.ytimg.com/vi/UCgERDCYii8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCfo2vTp1vra68dAfNSADkAjA_P1w"></div>
<div class="thumb" id="t06"><img src="https://i.ytimg.com/vi/Fj8G9dGuNkU/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAtZua5DkREddQL16of68eZ-9uM7w"></div>
<div class="thumb" id="t07"><img src="https://i.ytimg.com/vi/9BjvxQnk0qA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAsBtUg6iahpBrriWLcBhVLnaDrYg"></div>
<div class="thumb" id="t01"><img src="https://i.ytimg.com/vi/TCkmKgUp1ak/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAR6VNzvmxfP3Q7Hzuj2721PD4cGg"></div>
<div class="thumb" id="t02"><img src="https://i.ytimg.com/vi/p0t0J_ERzHM/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBAp9YZP9Ktnvf2n0T0kgYgmlvCYg"></div>
<div class="thumb" id="t03"><img src="https://i.ytimg.com/vi/L-s_h5PS7VQ/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2peKpky-S2clFMM2QDepYL1fumw"></div>
<div class="thumb" id="t04"><img src="https://i.ytimg.com/vi/CCb_XbmB_iE/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC2hr7_n6PMmBiqHshY1AotfE4lSg"></div>
</div>
</div>
<div id='nextBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png"></div>
<div id='prevBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_left_alt1-512.png"></div>
I have laid out my issue above for review. If anyone has a more simple/elegant way of solving this, your feedback would be greatly appreciated.

My suggestion would be to pluck off the element using .detach() and reinserting it back into the dom using a combination of .first with .append() &.last() with .prepend() depending on the direction.
// find elements
var $galleryThumbsWrapper = $('#galleryThumbsWrapper');
var $next = $('#nextBtn');
var $prev = $('#prevBtn');
$prev.on('click', function () {
// $('.thumb') grabs all divs with that class
// grab first element using .first
// then detach from dom and append to the end
var $firstItem = $('.thumb').first().detach();
$galleryThumbsWrapper.append($firstItem);
});
$next.on('click', function () {
// grab last element using .last
// then detach from dom and prepend to the front
var $lastItem = $('.thumb').last().detach();
$galleryThumbsWrapper.prepend($lastItem);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#galleryThumbs {
position: absolute;
width: 769px;
height: 90px;
top: 100px;
left: 256px;
/*overflow: hidden;*/
padding-left: 2px;
}
#galleryThumbsWrapper {
position: absolute;
width: 1078px;
height: 90px;
left: -153px;
}
.thumb {
float: left;
width: 100px;
height: 50px;
padding-top: 10px;
padding-right: 2px;
}
.thumb img {
width: 70%;
}
#nextBtn {
position: absolute;
width: 72px;
height: 72px;
left: 800px;
top: 112px;
cursor: pointer;
}
#nextBtn img {
width: 50%;
}
#prevBtn {
position: absolute;
width: 72px;
height: 72px;
left: 52px;
top: 112px;
cursor: pointer;
}
#prevBtn img {
width: 50%;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="galleryThumbs">
<div id="galleryThumbsWrapper">
<div class="thumb" id="t05"><img src="https://i.ytimg.com/vi/UCgERDCYii8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCfo2vTp1vra68dAfNSADkAjA_P1w"></div>
<div class="thumb" id="t06"><img src="https://i.ytimg.com/vi/Fj8G9dGuNkU/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAtZua5DkREddQL16of68eZ-9uM7w"></div>
<div class="thumb" id="t07"><img src="https://i.ytimg.com/vi/9BjvxQnk0qA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAsBtUg6iahpBrriWLcBhVLnaDrYg"></div>
<div class="thumb" id="t01"><img src="https://i.ytimg.com/vi/TCkmKgUp1ak/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAR6VNzvmxfP3Q7Hzuj2721PD4cGg"></div>
<div class="thumb" id="t02"><img src="https://i.ytimg.com/vi/p0t0J_ERzHM/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBAp9YZP9Ktnvf2n0T0kgYgmlvCYg"></div>
<div class="thumb" id="t03"><img src="https://i.ytimg.com/vi/L-s_h5PS7VQ/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2peKpky-S2clFMM2QDepYL1fumw"></div>
<div class="thumb" id="t04"><img src="https://i.ytimg.com/vi/CCb_XbmB_iE/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC2hr7_n6PMmBiqHshY1AotfE4lSg"></div>
</div>
</div>
<div id='nextBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png"></div>
<div id='prevBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_left_alt1-512.png"></div>

It is not necessary to hard code all $thumb.
Here is my simpler solution: https://jsfiddle.net/9bdj5mnx/

Yes, this code can refactoring using objects. Check this out:
var pic = [$('.thumb#t05'), $('.thumb#t06'), $('.thumb#t07'), $('.thumb#t01'), $('.thumb#t02'), $('.thumb#t03'), $('.thumb#t04')];
var x = $('#galleryThumbsWrapper');
var thumbOrder = 0;
var obj = {
0 : pic[6],
1 : pic[0],
2 : pic[1],
3 : pic[2],
4 : pic[3],
5: pic[4],
6 : pic[5]
};
function checkNextOrder(thumbOrder){
pic.splice(0, 1, obj[thumbOrder]);
x.append(obj[thumbOrder]);
return thumbOrder;
}
var obj2 = {
6 : pic[6],
5 : pic[5],
4 : pic[4],
3 : pic[3],
2 : pic[2],
1 : pic[1],
0 : pic[0],
};
function checkPrevOrder(thumbOrder){
x.css('float','right');
pic.splice(6, 1, obj2[thumbOrder]);
x.append(obj2[thumbOrder]);
return thumbOrder;
}
$('#nextBtn').on('click', function() {
if(thumbOrder < 6)
thumbOrder++;
else
thumbOrder = 0;
checkNextOrder(thumbOrder);
});
$('#prevBtn').on('click', function() {
if(thumbOrder > 0)
thumbOrder--;
else
thumbOrder = 6;
checkPrevOrder(thumbOrder);
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#galleryThumbs {
position: absolute;
width: 769px;
height: 90px;
top: 100px;
left: 256px;
/*overflow: hidden;*/
padding-left: 2px;
}
#galleryThumbsWrapper {
position: absolute;
width: 1078px;
height: 90px;
left: -153px;
}
.thumb {
float: left;
width: 100px;
height: 50px;
padding-top: 10px;
padding-right: 2px;
}
.thumb img {
width: 70%;
}
#nextBtn {
position: absolute;
width: 72px;
height: 72px;
left: 800px;
top: 112px;
cursor: pointer;
}
#nextBtn img {
width: 50%;
}
#prevBtn {
position: absolute;
width: 72px;
height: 72px;
left: 52px;
top: 112px;
cursor: pointer;
}
#prevBtn img {
width: 50%;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="galleryThumbs">
<div id="galleryThumbsWrapper">
<div class="thumb" id="t05"><img src="https://i.ytimg.com/vi/UCgERDCYii8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCfo2vTp1vra68dAfNSADkAjA_P1w"></div>
<div class="thumb" id="t06"><img src="https://i.ytimg.com/vi/Fj8G9dGuNkU/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAtZua5DkREddQL16of68eZ-9uM7w"></div>
<div class="thumb" id="t07"><img src="https://i.ytimg.com/vi/9BjvxQnk0qA/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAsBtUg6iahpBrriWLcBhVLnaDrYg"></div>
<div class="thumb" id="t01"><img src="https://i.ytimg.com/vi/TCkmKgUp1ak/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAR6VNzvmxfP3Q7Hzuj2721PD4cGg"></div>
<div class="thumb" id="t02"><img src="https://i.ytimg.com/vi/p0t0J_ERzHM/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBAp9YZP9Ktnvf2n0T0kgYgmlvCYg"></div>
<div class="thumb" id="t03"><img src="https://i.ytimg.com/vi/L-s_h5PS7VQ/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLA2peKpky-S2clFMM2QDepYL1fumw"></div>
<div class="thumb" id="t04"><img src="https://i.ytimg.com/vi/CCb_XbmB_iE/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC2hr7_n6PMmBiqHshY1AotfE4lSg"></div>
</div>
</div>
<div id='nextBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png"></div>
<div id='prevBtn'><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_left_alt1-512.png"></div>

div not retaining CSS attribute on click()

I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). When one hovers over the divs, they highlight (change color). When the user clicks the highlighted div, it changes to black. For some reason, the div that was black reverts back to the original color when I hover over a different div. I'm puzzled as to why that is. Any help or guidance would be greatly appreciated. Here's my jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/79/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).css({
'background-color': '#000000'
});
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});

Once you click on a DIV, you should maintain a flag that tells you hover function to stop changing colors
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).data("clicked", true); //ADDED LINE
$(this).css({
'background-color': '#000000'
});
});

it changed because of hover function.
https://jsfiddle.net/1g9p59bx/82/
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).addClass('active');
$(this).css({
'background-color': '#000000'
});
});

For some reason, the div that was black reverts back to the original color when I hover over a different div
Not quite. It reverts to the original colour when you leave the current div, because that's what you tell it in the second argument to $('.square').hover. You would need to remember that the square was clicked, and build extra logic into the "unhover" function.
Fortunately, there is an easier way: use CSS. Note the very bottom of the CSS definitions.
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.click(function () {
$(this).addClass('clicked');
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
.container {
background-color: #252525;
width: 600px;
height: 700px;
margin: 0 auto;
border-radius: 5px;
}
.inner {
background-color: #C8C8C8;
position: absolute;
width: 580px;
height: 600px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
border-radius: 5px;
}
.knob {
background-color: #575759;
width: 60px;
height: 60px;
border-radius: 60px;
}
#left_b {
position: absolute;
margin-left: 30px;
margin-top: 625px;
margin-bottom: 10px;
}
#button {
position: absolute;
margin-left: 265px;
margin-top: 640px;
margin-bottom: 10px;
}
#right_b {
position: absolute;
margin-left: 510px;
margin-top: 625px;
margin-bottom: 10px;
}
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
border-radius: 5px;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
margin: 0 auto;
}
.highlight {
background-color: #FFFFFF;
outline: #C8C8C8;
outline: 1px;
outline: solid;
margin: 0 auto;
}
.square {
background-color: #C8C8C8;
}
.square:hover {
background-color: #FFFFFF;
}
.square.clicked {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div id="g_area"></div>
</div>
<div class="knob" id="left_b"></div>
<div id="button">
<button>RESET</button>
</div>
<div class="knob" id="right_b"></div>
</div>
</div>
</body>

lightbox with 2 different progress bar inside

I have created a lightbox in javascript and I have placed inside it a progress bar that I have also created it in javascript. My problem is that when I was trying to insert a second progress bar inside my lightbox only the first works. Any idea how to fix this?
this is my jsfiddle :http://jsfiddle.net/QHMKk/3/
and my code is this:
my javascript is:
function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
this is my html:
OPEN
<div id="light" class="white_content_stats">
<div class="prog">
<div id="filler" class="filler"></div>
</div>
</br>
<div class="prog2">
<div id="filler2" class="filler2"></div>
</div>
<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">
</br>CLOSE</a>
and this is my CSS:
.black_overlay_stats{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
z-index:1001;
-moz-opacity: 0.6;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content_stats {
display: none;
position:fixed;
top: 15%;
width: 300px;
padding: 30px;
margin-left:10px;
background-color:#F2F2F2;
border-radius: 0px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);
z-index:1002;
}
.prog {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
.prog2 {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler2 {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}

You define 2 functions with the same name start, so the second will be used and only it will be run, hence you can see only 1 progress bar works. You can modify the function start to make it accept an argument of id like this:
function start(id) {
//...
var filler = document.getElementById(id)
//...
}
Then call both start('filler') and start('filler2'):
OPEN
Updated Demo.
Note that you should not use inline event property.

We Keep Coding

JavaScript is the programming language of the Web.

A javascript slider array issue - javascript

It seems you've got getElementById() when you meant getElementsByClassName()

Related

document.addEventListener blocking highlight in textarea

Simple-slider add class correctly when reversed

JS/jQuery array looping thumbnails using next and previous image arrows for navigation

div not retaining CSS attribute on click()

lightbox with 2 different progress bar inside

Categories

Resources