We Keep Coding

How do I change the background image on the push of a button between 100 different images? HTML/CSS/JS

I want to change the background image of my div "title" on the push of a button and also have that image stay as the background until the button is pressed again using cookies. I have 100 images labeled IMG_1.jpg - IMG_100.jpg.
I tried to change the background to just one image first but this didn't work.
function changeBackground() {
document.title.style.background = 'url(../img/bc/IMG_10.jpg) no-repeat';
}
<nav>
<ul class="nav__list">
<li class="nav__list-item">
<a onclick="changeBackground()" class="nav__link nav__link--btn">
Change Theme
</a>
</li>
</ul>
</nav>
<div class="title">
</div>

try that
let count = 1;
document.querySelector('#change-image').addEventListener('click', evt => {
count += 1;
let url = 'url("https://picsum.photos/id/' + count + '/300/200")';
document.querySelector('.title').style.backgroundImage = url;
})
.title {
width: 300px;
height: 200px;
background-image: url("https://picsum.photos/id/1/300/200");
background-size: contain;
background-repeat: no-repeat;
border: 1px solid black;
}
<button id="change-image">Change Image</button>
<div class="title">
</div>
CSS and HTML, just for the example.
The important for you is the way the background image is changed and the format of the url to change.
To change it's:
element.style.backgroundImage = ???
Format for the url is:
url("myBkgImage")
so to put in the previous style:
element.style.backgroundImage = 'url("+ myVariabeImage +");
you can also notation ${myvar}

How to change fixed button to change BG color if its scrolled over sections that has same color?

Basically, i have fixed button on bottom that scrolls over the page on mobile. The color of button is yellow and i want when the button scrolls over sections that are same color as button, to get additional class or change style directly inline and set BG color to white.
Is it possible with Observer or something similar?
Thanks!

The trouble with trying to use the Intersection Observer API in this case is twofold:
The yellow sections are not ancestors of the button, they're likely siblings.
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element...
The button is position: fixed, which doesn't play nicely with the internals of the API: Intersection observer does not work with target with position: fixed.
The old-school way of doing this would be to check the bounding box of the button against the bounding boxes of the yellow sections each time the page is scrolled.
That means calling Element.getBoundingClientRect() once for the button (it's bounding box should never change because it's position: fixed relative to the viewport) and once for each yellow section each time the scroll event is raised.
Here's a sample showing this approach:
const button = document.getElementById('some-action');
const buttonRect = button.getBoundingClientRect();
const yellowDivs = document.querySelectorAll('div.yellow');
const areIntersecting = (bounds1, bounds2) =>
bounds1.top < bounds2.bottom && bounds1.bottom > bounds2.top;
document.addEventListener('scroll', () => {
/* Use for...of, not .forEach so we can
return early. */
for (let item of yellowDivs) {
const itemRect = item.getBoundingClientRect();
if (areIntersecting(itemRect, buttonRect)) {
button.classList.add('white');
button.classList.remove('yellow');
/* We don't care how many yellow divs the button
is intersecting. Once we've found one, we can
return so we're not computing the rectangles
of the rest. */
return;
}
/* If none of the yellow divs were interecting,
reset the color of the button. */
button.classList.add('yellow');
button.classList.remove('white');
}
});
div.blue, div.white, div.yellow { height: 250px; }
.blue { background-color: blue; }
.white { background-color: white; }
.yellow { background-color: yellow; }
#some-action {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
}
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<div class="blue"></div>
<div class="yellow"></div>
<div class="white"></div>
<button id="some-action" class="yellow">Some Action</button>

Can i get help understanding a changing div section with a background image and gradient filter and using click function javascript to change it?

I have a div section with a background image with a gradient cover and some text on. I want to control changing this with a java script button. When its clicked it should remove the gradient and show a new div section with different background image no gradient and text. The JQuery underneath is supposed to check whether the first div is showing. and when clicked it should hide the original div and replace it with the new one. I cannot seem to get it working. any help would be appreciated.
/*
jQuery event that triggers when the button is pressed
# is an ID jQuery selector, usage:#anyElementId
*/
$('btnClick').on('click',function(){
/*
In CSS, you can check if an element is visible by checking if the property display value is different from none, because if it's value is none, it will not be visible
*/
if($('call-to-section').css('display')!='none'){
/*
So, if div call-to-section is visible, the condition will be true
*/
$('call-to-section2').show().siblings('div').hide();
}else if($('#call-to-section2').css('display')!='none'){
/*
Condition to check if call-to-section2 is visible
*/
$('call-to-section').show().siblings('div').hide();
/*
If it is, it will show call-to-section and right after that will search for it siblings and hide them with .siblings('div').hide();
*/
}
});
<!-- Call To Action Section
================================================== -->
<section id="call-to" class="call-to-section">
<div class="call-to-layer main-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Global Reach & <span>Demographics.</span></h3>
<p class="wow fadeIn animated">With 3 billion searches per month, YouTubes search
volume is bigger than Bing, AOL, Yahoo and Ask.com combined. If YouTube's user base were a
country,
it would be the third largest in the world. It is the worlds largest site for traffic.
</p>
<button id="btnClick" class="btn btn-default wow fadeInRight hvr-sweep-to-right
button-gradient animated " >Have a look</button>
</div>
</div>
</div>
</section>
<section id="call-to" class="call-to-section2" style= "display:none;">
<div class="call-to-layer main-gradient"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="wow fadeIn animated">Test & <span>Testing</span></h3>
<p class="wow fadeIn animated">This is a new text and total differnt background
picture"
</p>
<button class="btn btn-default wow fadeInRight hvr-sweep-to-right button-gradient
` `animated " id="btnClick" >Have a look</button>
</div>
</div>
</div>
</section>
<!-- /.call-to-section -->
* 9. Call To Action Section
--------------------------------- */
.call-to-section {
height: auto;
width: 100%;
background: url(../images/low-poly.jpg) no-repeat;
background-size: cover;
text-align: center;
position: relative;
padding-top: 146px;
padding-bottom: 146px;
}
.call-to-section2 {
height: auto;
width: 100%;
background-color:#FFF
background-size: cover;
text-align: center;
position: relative;
padding-top: 146px;
padding-bottom: 146px;

I had corrected and obtained the desired result, There was following error in codes written.
1) Both Div element has the same id #call-to, which is actually not required if required for some other purpose please have a separate id for all Div.
2)both Button element also have the same ID #btnClick, change it as #btnClick and #btnClick1
I think id can not be the same for two elements. Read the MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
Complete Code is available in my Codepen https://codepen.io/sanjayism/full/ExVdKpv
$(document).ready(function () {
$("#btnClick").on("click", function () {
if ($(".call-to-section").css("display") == "block") {
$(".call-to-section").css("display", "none");
$(".call-to-section2").css("display", "block");
}
});
$("#btnClick1").on("click", function () {
if ($(".call-to-section2").css("display") == "block") {
$(".call-to-section").css("display", "block");
$(".call-to-section2").css("display", "none");
}
});
});

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture

add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link

The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

Change single color of linear gradient

How can I change the first color only in CSS linear gradient using Javascript?
div {
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
as you can see I want to change the color "#F6F6F6" only.
the script must be in Javascript not jquery.

Just remove the class from the div and add a new class with the new attributes.
Fiddle : https://jsfiddle.net/reko91/suuwe4wc/4/
I would add another class that applies to all divs, in this case 'divs' and the linearGradient class too.
<div class='divs linearOne'>
</div>
Only added JQuery for button click
var divs = document.getElementsByClassName('divs');
var toggle = false; //used to toggle between
document.getElementById('clickme').addEventListener("click", function (event) {
if(!toggle){
divs[0].classList.remove('linearOne')
divs[0].classList.add('linearTwo');
toggle = true;
} else {
divs[0].classList.add('linearOne')
divs[0].classList.remove('linearTwo');
toggle=false;
}
})
.linearOne {
width:100px;
height:100px;
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
.linearTwo {
width:100px;
height:100px;
background: -webkit-linear-gradient(top, #000000, #F6F6F6)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='divs linearOne'>
</div>
<button id='clickme'>
Toggle Gradient
</button>

If your <div> has an id, using JavaScript to change the background to (1) another gradient, (2) some color, or (3) no background at all is really as simple as this :
document.getElementById('anotherGradient').style.background = "-webkit-linear-gradient(top, #00E9E9, #F6F600)";
document.getElementById('greyBackground').style.background = "#E9E9E9";
document.getElementById('noBackground').style.background = "none";
div {
background: -webkit-linear-gradient(top, #F6F6F6, #E9E9E9)
}
<div id="anotherGradient">
This DIV should have a different gradient
</div>
<div id="greyBackground">
This DIV should have a grey background but no gradient
</div>
<div id="noBackground">
This DIV should not have any background at all
</div>
<div>
This DIV should have the original gradient
</div>
<div>
This DIV should have the original gradient
</div>
(see also this Fiddle)