Develop Reference

How to make autosliding carousel thumbnail change background image when active

my question has 3 parts. Any assistance with any part of this JS problem would be greatly appreciated. I am attempting to learn and comprehend JS by trial and error.
I've created this nice looking travel landing page, https://portfolioprime.github.io/Nature%20carousel/glidejs.html with a thumbnail carousel which uses Glide.js, which is really cool and works well. The carousel moves to the left and has arrow buttons to manually control the slide.
But I've been trying to implement a vanilla JS carousel slider,but I am failing miserably. Been struggling for 2 days and the best I can achieve is getting a single carousel item moving left and right. See https://portfolioprime.github.io/Nature%20carousel/.
What I'd like is to get the carousel sliding left automatically, with arrow buttons to manually control the slider.
I'm targeting all the carousel-items with querySelectorAll('.carousel-items') and adding left:-274px to the carousel container glide__slides.
Here's my JS code.
// var & event-listener buttons
document.querySelector(".left").addEventListener("click", slideLeft);
document.querySelector(".right").addEventListener("click", slideRight);
// Function slide left
function slideLeft(left) {
document.querySelector('.glide__slides').style.left = left;
}
// Function slide left
function slideRight(right) {
document.querySelector('.glide__slides').style.left = right;
}
Secondly, I'd like to have an active carousel-item, which when active automatically changes the background Image.
Right now I have the hero.style.background = var; and I've got it changing onclick with onclick = function('01.jpg') on each carousel item.
Here's the code.
// Change Hero Img
function heroChange(hmmm) {
var hero = document.querySelector('.hero');
hero.style.background = hmmm;
}
So I guess I would add EventListeners to the carousel-items and add an active class to the carousel-item like so,
var slides = document.querySelectorAll('.carousel-items');
function changeBgImg() {
slides.forEach(s => s.classList.remove('active');
this.classList.add('active');
//change the bg image === this
//But I have no idea how to do that
}
Thirdly I've got the content, background and carousel indicators using the same functions above but it seems like really dirty code. The HTML has each .carousel-item, there are ten of them, calling 4 functions each. It looks like this:
<div class="glide hero-carousel">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide carousel-item"
onclick="heroChange('url(images/02.jpg) bottom/cover no-repeat');
number('01');
h4('Destination Shire');
h1('Valley<br> of Dreams');">
<div class="carousel-text">
<p>Destination Shire</p>
<h3>Valley<br> of Dreams</h3>
</div>
</li>
<li class="glide__slide carousel-item"
onclick="heroChange('url(images/03.jpg) bottom/cover no-repeat');
number('02');
h4('Destination Westwood');
h1('Misty<br> Woodlands');">
<div class="carousel-text">
<p>Destination Westwood</p>
<h3>Misty<br> Woodlands</h3>
</div>
</li>
</ul>
</div>
</div>
So it looks pretty yucky. It works though, but I would love to find a more elegant way of achieving this by putting all of these functions into one function that does each part in sequence.
Lastly, I'd want to get transition on-click animations going but that's another kettle of fish entirely.
So that's it. Whew!
Thanks for taking the time guys, I appreciate it. Any help you can provide is going to make me a better designer. There are actually a bunch of projects I have will benefit from the answers.
If you can provide help with at least Part 2 & 3: cleaning up the code into 1 function and getting the bg-image changing on the active class that would be a big big help.
There's just so much that JS can do and I'm not finding the answers on Google and youTube.
Thank you again.
An Update:
I have edited the slider by by using margin-left as shown by this question:
vanilla javascript carousel not sliding
// var & event-listener buttons
document.querySelector(".left").addEventListener("click", slideLeft);
document.querySelector(".right").addEventListener("click", slideRight);
let marginLeft = 0;
const slides = document.querySelector('.glide__slides');
// Function slide left
function slideLeft() {
marginLeft += 264;
slides.style.marginLeft = marginLeft + 'px';
console.log(getComputedStyle(slides).marginLeft);
}
// Function slide Right
function slideRight() {
marginLeft -= 264;
slides.style.marginLeft = marginLeft + 'px';
console.log(getComputedStyle(slides).marginLeft);
}
This has now got the carousel moving manually 1 slide at a time.
Still not fully understanding why my previous code above didn't work. If anyone can explain that to me that would be great.
I'm still left with some issues:
Autosliding and looping at the end of the slides.
Having the active slider change the background automatically. At this point it only changes onclick.
Finding a way to tidy up the function calls and functions.

The question asks for various ideas on how to simplify code and how to use native JavaScript to create a slider that rolls continuously.
The code originally used glider and it may be something simpler would be sufficient to get the desired result, for example using animationend event to change the background when a slide gets to the left hand side. However, eating the elephant slowly I'll tackle the yucky code (part 3) first.
Although the HTML looks rather daunting, 4 calls on a click for every li element for example, it is currently what is required so let's investigate creating it at run time. This gives us more easily maintainable code. For example, if we want to remove a slide, or alter the order of slides or add one we can just alter the slider array defined below and JavaScript will do the rest.
Part 1 of the question asked about sliding. We slide the whole ul element using CSS animation defined something like this, where 33vw is the total width of a slide (inc. margins/padding)
#keyframes sliding0 {
0% { left: 0; }
30% { left: 0; }
100% { left: -33vw; }
}
and we add an event listener to the element to trap animationend events because when the ul has slid one slide's width we want to change the hero image, and we want to put the slide that has just disappeared onto the back of the infinie sliding will work. We then set the animation running again.
See the snippet for details on how this and other events are dealt with. It also shows how the changeHero function can work which was part 2 of the question. Note, the snippet works more or less in the SO environment, though occasionally hover action is partially ignored. Running the code on your own machine it should be fine though.
<!DOCTYPE html>
<html>
<head>
<style>
#keyframes sliding0 {
0% { left: 0; }
30% { left: 0; }
100% { left: -33vw; }
}
#keyframes sliding1 {
0% { left: 0; }
30% { left: 0; }
100% { left: -33vw; }
}
body {
background-repeat: no-repeat no-repeat;
background-size: cover;
background-position: center center;
}
div .glide_track {
position: relative;
width: 100vw;
overflow-x: hidden;
}
ul {
position:relative;
left: 0;
width: 330vw;
height:100vh;
animation-name: sliding0;
animation-duration: 3s;
animation-delay: 0s;
animation-iteration-count: 1;
animation-timing-function: linear;
margin: 0;
padding: 0;
list-style-type: none;
}
li {
position: relative;
left:0;
top:0;
float:left;
width: 32vw;
height:30vw;
display: inline-block;
margin: 0;
margin-right: 1vw;
padding: 0;
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<script>
// we put the two lots of text and the image url for each slide in an array in the order they are to be shown
// this makes it easier to maintain when you want to add or remove a slide or change their order
// we only have one slider at the moment but this makes it more general
// these are the offsets in the array describing a slide. Done as indexes rather than named as easier to set up sliders array
const img = 0;
const text1 = 1;
const text2 = 2;
const sliders = [
[
['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
['https://ahweb.org.uk/boxfordmosaic.jpg','Shire','Valley<br> of Dreams'],
['https://ahweb.org.uk/gear-in-turbine-house-reading.jpg','Westwood','Misty Woodlands'],
['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams'],
['https://ahweb.org.uk/tricycle-in-abbey-ruins.jpg','Shire','Valley<br> of Dreams']
]
];
// go through each slider and create its outer divs and its ul element
sliders.forEach(createSlider);
function createSlider(slider,sliderno) {
const div1 = document.createElement('DIV');
const div2 = document.createElement('DIV');
const ul = document.createElement('UL');
div1.classList.add("glide","hero-carousel");
div2.classList.add("glide_track");
div2.setAttribute("data-glide-el","track");
div1.appendChild(div2);
div2.appendChild(ul);
document.body.appendChild(div1);
ul.classList.add("glide__slides");
ul.addEventListener("animationend", animationEnd);
slider.forEach(createLi);
function createLi(slide,slideNo) {
const li = document.createElement('LI');
li.classList.add("glide__slide","carousel-item");
li.style.backgroundImage='url('+slide[img]+')';
li.addEventListener("click",slideClicked);
li.addEventListener("mouseover",slideHovered);
li.addEventListener("mouseout",slideUnhovered);
li.setAttribute('data-slideno','0' + slideNo);//! needs generalising if you have >10 slides !
ul.appendChild(li);
const div = document.createElement('DIV');
const p = document.createElement('P');
const h3 = document.createElement('H3');
p.innerHTML = slide[text1];
div.appendChild(p);
h3.innerHTML = slide[text2];
div.appendChild(h3);
li.appendChild(div);
}
}
// this is for testing, in real version use whatever required (i.e. whichever element is to have the hero image)
function ahHeroChange(backgroundImage) {
document.body.style.background = backgroundImage + " bottom/cover no-repeat";
}
function slideClicked(event) {
var slide = event.target;
var slideNo = slide.getAttribute('data-slideno');
// make the hero image the same as the slide's
ahHeroChange(slide.style.backgroundImage);
/* I don't know what these functions do - they were executed in the original on a click
number(slideno);
h4(slide.firstElementChild.querySelector('p').innerHTML);// text1 of the slide is passed to h4
h1(slide.firstElementChild.querySelector('h3').innerHTML;// text2 of the slide is passed to h1
*/
}
function slideHovered(event) {
var slide = event.target;
var slider = slide.parentElement;
slider.style.animationPlayState = 'paused';
ahHeroChange(slide.style.backgroundImage);
}
function slideUnhovered(event) {
var slide = event.target;
var slider = slide.parentElement;
//restore the hero image to the first one in the slider
ahHeroChange(slider.firstElementChild.style.backgroundImage);
//get the animation running again
slider.style.animationPlayState = 'running';
}
function animationEnd(event) {
//find the element that was clicked (it will be a ul element representing a slider)
var slider = event.target;
//take the first slide off the list and put it back at the end
slider.append(this.firstElementChild);
//change the hero image to the slide which is now the leftmost - use modified heroChange in the final version
document.body.style.backgroundImage = this.firstElementChild.style.backgroundImage;
// toggle the animationName (to an identical keyframes action) to force the animation to start again
slider.style.animationName='sliding'+(Number(event.animationName.replace('sliding',''))+1)%2;
}
</script>
</body>
</html>

Html5UP Highlights changes. How to change background behaviour?

I'm trying to make a couple of changes to the HTML5UP Highlights site. You can see from the preview here https://html5up.net/highlights that as you scroll down to the next section of the page the background image changes like this:
Then if you resize the window the original background image is displayed and the second image becomes included in the content like this:
I'm trying to work out how the background image changes in the first screen shot. I'm trying to always show the original background as in the second screenshot regardless of screensize and always include the sub images in the content. Basically I'm trying to emulate the second screenshot in all screen sizes.
I can see there are these sections in the CSS for different screen sizes:
#media screen and (max-width: 980px) {
.main .image.primary {
display: block;
margin: 0 0 4em 0;
}
}
So I've changed this for the Main version too and commented out display:none.
.main .image.primary {
/*display: none; */
display: block;
margin: 0 0 4em 0;
}
This seems to add the content images regardless of screenshot but I can't work out what changes the background image on screen resize?

1st part: remove the background transition
To disable the background transition effect, look in your assets/js/main.js file. You'll find a part title with the comment // Main sections. (line 156+). A little lower, You'll find the following:
// Create bg and append it to body.
$bg = $('<div class="main-bg" id="' + $this.attr('id') + '-bg"></div>')
.css('background-image', (
'url("css/images/overlay.png"), url("' + $primaryImg.attr('src') + '")'
))
.appendTo($body);
This creates an element for the background image, that depends on the current element.
And after that, You'll find the code to add/remove this element with or without transition (line 194+):
if (skel.canUse('transition')) {
options.init = function() { $bg.removeClass('active'); };
options.enter = function() { $bg.addClass('active'); };
options.leave = function() { $bg.removeClass('active'); };
}
else {
$bg
.css('opacity', 1)
.hide();
options.init = function() { $bg.fadeOut(0); };
options.enter = function() { $bg.fadeIn(400); };
options.leave = function() { $bg.fadeOut(400); };
}
You can just delete or comment that part, and the transition effect should be gone.
2nd part: always show the content images
Here you already found the correct place in the assets/css/main.css file. Just set
.main .image.primary {
display: block;
}
and remove the min-height property:
.main .container:before {
/*min-height: calc( 100vh - 13em );*/
content: '';
display: inline-block;
vertical-align: middle;
width: 1px;
}
No everything shoud work as your second screenshot.

jQuery append text while maintain height and hiding previous text

I have this div, its contents are from jquery append():
Each time the text length reaches end of div width, the text will keep going and changing the div's height.
But I want to maintain div's height and hiding previous text. Also, I have a PNG with gradient and I want to put the png image to the left when jquery append detected the div has been full with text.
Expected result:
What I've been tried:
https://www.sitepoint.com/community/t/how-do-you-put-a-div-without-causing-a-new-line-break/7398/8
No Line Break With jQuery .append()
My current code (javascript):
$.post(base_url + "ajax/validate_answer", {'quiz': load, 'answer': answer}, function (data) {
/* if incorrect answer */
if (data.answer_details.correct === false)
{
$("." + current_did).css("color", "#D05555");
}
/* append text with a new word */
$(".dictionary-stack").append(' • • • <span class="' + data.next_quiz.display.dictionary.did + '">' + data.next_quiz.display.dictionary.ja_kanji + ' ' + data.next_quiz.display.dictionary.ja_roman + ' [' + data.next_quiz.display.dictionary.en_roman + ']</span>');
}
CSS to the container (.dictionary-stack):
.dictionary-stack
{
position: absolute;
bottom:100px;
width:100%;
display: block;
background:#E6E6E6;
padding: 20px;
color:#333333;
}
How I can do that?
Thanks.

My idea to solve this problem is:
on document ready compute the height and save as attribute
before append set opacity to 0
append text
after 50 milliseconds start checking the new height: while it is greater the
the original start removing (saving) the chars from the beginning of the div
The snippet (for the demo I used a different url):
var txt = $(".dictionary-stack").text();
var interval;
$(".dictionary-stack").text('a').attr('data-height', $(".dictionary-stack").outerHeight()).text(txt);
$('#myBtn').on('click', function (e) {
$.get('https://api.github.com/repositories', {'since': 364}, function (data) {
$(".dictionary-stack").css('opacity', 0);
$(".dictionary-stack").append(' • • • <span class="' +
data[0].archive_url + '">' +
data[0].archive_url + ' ' +
data[0].archive_url + ' [' +
data[0].archive_url + ']</span>');
clearTimeout(interval);
interval = setTimeout(function () {
while ($(this).outerHeight() > +$(this).attr('data-height')) {
this.textContent = this.textContent.substr(1);
}
$(this).css('opacity', 1);
}.bind($(".dictionary-stack").get(0)), 50);
});
});
.dictionary-stack
{
position: absolute;
bottom:100px;
width:100%;
display: block;
background:#E6E6E6;
padding: 20px;
color:#333333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="myBtn">Load Data</button>
<div class="dictionary-stack"></div>

Without seeing your HTML/CSS, it is difficult to deliver a solution for your exact case.
As you know, your text is wrapping and that is causing the div to increase in height.
You can use some of these CSS properties to discover the correct solution for your case:
height:30px (i.e. a fixed height),
width:200% (i.e. a width that will not wrap),
overflow:hidden (to hide overflowed text when used with a fixed height)
/*
In the example below, you need the `#container` div so that you can use `overflow:hidden` on it -- to suppress the horizontal scrollbar. Without this div (and its overflow:hidden css instruction) the horizontal scrollbar will appear on the body - and that is more difficult to suppress.
*/
#container{overflow:hidden;}
#normal{background:wheat;margin-bottom:20px;}
#allowOverflow {position:relative;left:-400%;width:500%;height:25px;overflow:hidden;text-align:right;background:palegreen;}
<div id="container">
<div id="normal">
Once upon a midnight dreary, While I pondered weak and weary, Over many a quaint and curious volume of forgotten lore. While I nodded, nearly napping, suddenly there came a tapping - as of someone gently rapping - rapping on chamber door. 'Tis some visitor, I muttered, rapping on my chamber door. Merely that and nothing more.
</div>
<div id="allowOverflow">
Once upon a midnight dreary, While I pondered weak and weary, Over many a quaint and curious volume of forgotten lore. While I nodded, nearly napping, suddenly there came a tapping - as of someone gently rapping - rapping on chamber door. 'Tis some visitor, I muttered, rapping on my chamber door. Merely that and nothing more.
</div>
</div>

Scrolling select element jumps to top when removing options from DOM in IE

This issue appears to be isolated to Internet Explorer:
I'm moving option tags from one select to another when they're double clicked using Javascript. The select elements can have many items, so I've set the height with overflow: auto; so that they scroll. If you scroll down the list and double click an item to move, the select list will scroll up to the top when the option is removed, instead of staying at the current scrolled-to position as it does in Chrome or Firefox.
I made a basic example to demonstrate this here: https://jsfiddle.net/yk8LeLbw/1/
The Javascript is pretty simple:
$(".listBoxSelectorAvail").dblclick(function() {
$(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned");
});
$(".listBoxSelectorAssigned").dblclick(function() {
$(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail");
});
I haven't been able to find any specific reason why this happens - I'm not sure if it's a bug or if this is expected behavior, but is there anything that can be done?
EDIT: made the title more clear
EDIT 2: I was hoping to stop the scrolling, but the best solution I've come up so far is to rescroll once the item has been moved, as seen here:
https://jsfiddle.net/yk8LeLbw/2/

The issue is that IE behaves differently. So, we have to work around that unwanted behavior. The solution is to wrap the select in a div and use some CSS.
Here's a working jsFiddle.
Note how I wrapped a div around each select and replaced the size="50" attribute with the multiple="true" attribute. This removes the scrollbar on the select elements.
$(document).ready(function() {
var arr1 = [];
var arr2 = [];
arr1.push("<div class='scroll'><select class='listBoxSelectorAvail' multiple='true'>");
arr2.push("<div class='scroll'><select class='listBoxSelectorAssigned' multiple='true'>");
for (var i = 0; i < 20; i++) {
arr1.push("<option value=\"" + i + "\">Option " + i + "</option>");
}
arr1.push("</select></div>");
arr2.push("</select></div>");
$("body").append(arr1.join(""));
$("body").append(arr2.join(""));
$(".listBoxSelectorAvail").dblclick(function(e) {
$(this).find("option:selected").remove().appendTo(".listBoxSelectorAssigned");
});
$(".listBoxSelectorAssigned").dblclick(function(e) {
$(this).find("option:selected").remove().appendTo(".listBoxSelectorAvail");
});
});
Here's the modified CSS.
select {
width: 200px;
height: 200px;
}
.scroll {
overflow: auto;
display: inline-block;
margin-left: 10px;
}

jquery sticky-nav-bar behaving like a css3 animation, how to stop it?

live website is on this address: www.calimousineservice.com
Hi i am making this simple website and the i tried to include a sticky nav on top. everything works as expected so far the only problem is that when i scroll the Jquery acts like a slide-in-animation rather than just sticking to the top of the window right away. also since i attached this my image slider has some kind of lagging when sliding the images. i have all my script and file.js(s) attached at the bottom of the html and here are my javascript for sticky nav in addition to its uploaded js files:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<script>
function makeSticky() {
var myWindow = $(window),
myHeader = $(".navigation");
myWindow.scroll(function() {
if (myWindow.scrollTop() == 0 ) {
myHeader.removeClass("sticky-nav");
} else {
myHeader.addClass("sticky-nav");
}
});
}
$( function() {
makeSticky();
});
</script>
there is another script that will pop up a image on the right of the nav bar when scrolled down:
<script>
function hideImg() {
var myWindow = $(window),
container= $(".nhide");
myWindow.scroll(function() {
if (myWindow.scrollTop() == 0 ) {
container.addClass("nhide");
} else{
container.removeClass("nhide");
}
});
}
$( function() {
hideImg();
});
</script>
please scroll down and up few times to get the glimpse of what i am talking about here. the nav bar, when scrolled, acts like a slide-in-animation(like a css3 animation) i want to remove that. and also the problem with my slider. thank you in advance please let me know if i need to provide more of the codes.

It's fell under the slideshow. To fix it, give your navbar z-index property with value more than the slideshow's z-index.
I guess that z-index:999 can fix it!
UPDATE:
Set your navbar's transition property to 0. Because there seem that there are global selector that is used to set the transition.
Make sure that you are using the most specific selector to prevent other element's rules ruling your navbar.
Example:
#yournavbar_container .navbar {
transition: 0s;
}
Or set all values to default:
#yournavbar_container .navbar {
transition: all 0s ease 0s;
}
You can also use this:
#yournavbar_container .navbar {
transition:none;
transition-delay:0s;
transition-duration:0s;
transition-property:none;
transition-timing-function:ease;
}