Develop Reference

Changing the size of the image in the sticky header when scrolling down

On the website (please don't share), in WordPress, I set a sticky header using CSS
header#masthead {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 10000;
}
This works correctly. However, the image in the header is too big, that's why I resized it with an animation when scrolling down
jQuery(document).ready(function() {
jQuery(function() {
var $nav = jQuery('#masthead .custom-logo');
var height_original = jQuery('#masthead .custom-logo').css("height").replace("px","");
var height_small = height_original * 0.666;
var width_original = jQuery('#masthead .custom-logo').css("width").replace("px","");
var width_small = width_original * 0.666;
jQuery(document).scroll( function() {
var value = jQuery(this).scrollTop();
if ( value > 0 ){
$nav.stop().animate({height:height_small,width:width_small},100);
} else if (value == 0 ) {
$nav.stop().animate({height:height_original,width:width_original},100);
}
});
});
});
But, it doesn't work properly.
I primarily use Opera GX, where it behaves like this - when scrolling down, the animation is slowed down. Also, if you just scroll down a little, the animation doesn't run all the way and the image goes back to its original size, scrolling up works without a problem.
The strange thing is that I've also tried it in Firefox, Chrome and Edge. It behaves differently in everyone, but nowhere does it work 100% correctly.
What is wrong with the code please?
Thank you

I think instead of that long jquery code you can use this simple javascript code with some css to get the results you want:
I hope this helps you to reach what you looking for :)
JS
// Add a class to the header when scrolling
let header = document.querySelector('header');
window.addEventListener('scroll' , function () {
let window_top = this.scrollY;
if (window_top == 0) {
header.classList.remove('resize');
}else {
header.classList.add('resize');
}
});
CSS
/* these are the default styles (when the user doesnt scroll down yet) */
header#masthead {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 10000;
transition: .3s;
}
header#masthead img{
transition: .3s; /*here i added transition to give the image a smooth animation*/
}
/* these are the styles when the user scrolls */
header#masthead.resize img{
height: 50px; /* <=== here i gived the image a smaller size */
}

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.

How do I minimize a div and hide containing divs?

So currently, I have jQuery in a function that reduces a div to 20px when a certain toggle button is clicked. I want all the divs inside of that div to hide as well, but I don't want to resort to recursive functions/loops if at all possible. Currently, my toggle button kind of works, but when I hide a div all of its children (if it has any) remain where they were before. Can I simply force the height to 20px and make all the containing divs disappear as well? A good example of what I need would be like hiding a comment chain on a board (such as reddit). Thanks.
Sure, code:
function toggleComment(child)
{
if (child.innerHTML.includes("–"))
{
//Minimizing
child.innerHTML = "[+]";
$(child).parent().addClass("minimized");
hideChildren($(child).parent());
}
else
{
//Maximizing
child.innerHTML = "[–]";
$(child).parent().removeClass("minimized");
showChildren($(child).parent());
}
}
function hideChildren(parent)
{
for (var i = 0; i < parent.children().length; i++)
{
var child = parent.children().eq(i);
if (!child.hasClass('ignoreOnHide'))
{
parent.children().eq(i).hide();
}
if (child.has("div"))
{
hideChildren(child);
}
}
}
function showChildren(parent)
{
for (var i = 0; i < parent.children().length; i++)
{
var child = parent.children().eq(i);
parent.children().eq(i).show();
}
}
This code partially works. It visually functions as intended, but there become more complicated problems. I would like to not use recursive functions and loops, because, again, it doesn't work exactly as intended. The exact problems are difficult to explain and not pertinent to this question. Is there any other way to go about this problem, to minimize a div and completely hide its content, without loops & such?

Try adding
overflow: hidden;
to your parent div to hide the elements positioned outside its width/height.

You can use the CSS property 'overflow' such that the content of the div will be clipped.
.my_div { overflow: hidden; }
Playing with transitions, you may also hide the content using the 'opacity' style:
.my_div > * { opacity: 1; transition: opacity 2s ease; }
.my_div.reduced > * { opacity: 0; }
This will fade the content smoothly.

Use jQuery to hide the children of your container:
$('div.container div').fadeOut();

Responsive Design - how to toggle a menu's visibility

Update
I have a new post here with jsfiddles and a clearer question.
I am attempting to use principles of responsive design to adapt to changing screen size. I have CSS which will hide a vertical menu contained in a div (main-nav-vert) and display a "Menu" button contained in a div (div_menu_toggle) when the browser width drops into a range. There is other div resizing happening, but this code is simplified.
When clicking on the Menu button, js code runs to toggle the menu div (main-nav-vert) by changing its display property.
All works great with the button appearing and the menu being hidden when the browser width shrinks.
Then when clicking on the Toggle Button, the menu is briefly made visible... and then spontaneously disappears again. I have verified that the code to hide the div is not being run (.display = 'none'). Is the menu getting hidden again because the CSS code is always active? If so, how can I accomplish this task? I am looking for a pure js answer, please no jQuery. Thanks.
CSS
/* When screen shrinks to this range, hide Menu, display Menu button */
#media (max-width: 697px) and (min-width: 320px) {
.div_menu_toggle{
display: block;
}
.main-nav-vert{
display: none;
}
}
JS
<script type="text/javascript">
function showmenu() {
var mainnavvert = getElementsByClassName('main-nav-vert');
var i, s, len = mainnavvert.length;
for (i = 0; i < len; ++i) {
if (i in mainnavvert) {
// toggle the menu
mainnavvert[i].style.display = 'block';
} else {
mainnavvert[i].style.display = 'none';
}
}
}
function getElementsByClassName(className) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else {
return document.querySelectorAll('.' + className);
}
}
</script>

*not tested but I'm guessing you just need a separate class for display:none and display:block;
then change the class, not the style. something like
if (i in mainnavvert) {
// toggle the menu
mainnavvert[i].className = "show-me";
} else {
mainnavvert[i].className = "hide-me";
}
}

Toggle the display depending of the current state of it.
Something like this might work.
for (i = 0; i < len; ++i) {
var menu = mainnavvert[i];
if (menu.style.display === 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
}

you need to take new class to set active/inactive toggle menu.
css
/* When screen shrinks to this range, hide Menu, display Menu button */
#media (max-width: 697px) and (min-width: 320px) {
.div_menu_toggle{
display: block;
}
.main-nav-vert{
display: none;
}
.main-nav-vert.active{
display: block;
}
}
js
<script type="text/javascript">
function showmenu() {
var mainnavvert = getElementsByClassName('main-nav-vert');
var i, s, len = mainnavvert.length;
for (i = 0; i < len; ++i) {
if (i in mainnavvert) {
// toggle the menu
if(mainnavvert[i].style.display == "block")
removeClass(mainnavvert[i]);
}
else {
addClass(mainnavvert[i]);
}
}
}
}
function getElementsByClassName(className) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else {
return document.querySelectorAll('.' + className);
}
}
function addClass(ele) {
var classString = ele.className;
var newClass = classString.concat(" active");
ele.className = newClass;
}
function removeClass(ele)
{
[].forEach.call(ele, function(el) {
el.classList.remove("active");
});
}
});
As you want pure javascript,here it is but code is going very smooth and optimze if you do it with jquery and I don't know why you use for loop if there is only 1 element then you can ignore the loop.