So I'm trying to make an accordion of sorts for my projects section of my website and I've run into a very strange issue (or maybe I'm just really tired). The first click to expand a selection works fine, but when the header is clicked again to return to the original state the contents of the previously expanded header become hidden. Furthermore, upon clicking the same header again to expand any time after the first the containing border disappears.
To see my problem in action just go to my website:
http://cole.quinnchrzan.com/cc2
and see for yourself by clicking on the projects section.
If you just want to take a look at the code here it is:
$(document).ready(function() {
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
});
and the HTML:
<section id="projects">
<div class="header">Websites</div>
<div>Saia LTL, Inc.
<div></div>
</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
I added some extra css 'height': '29px' 'z-index': '2' to try and make the affected heading show again but it just creates an empty div. Without this css the div has no height.
try this.
live demo here
HTML
<section id="projects">PROJECTS
<div class="header">Websites</div>
<div>Saia LTL, Inc.</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
JavaScript
var sign = 1;
$('#projects > div:not(.header)').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).css('border-bottom', '1px solid black');
$(this).siblings().slideDown(400);
$(!$(this).children(":first")).slideUp(400);
}
sign = sign*-1;
});
------------------------------------------------------------------------------------------------------------------------------------
ALTERNATE SOLUTION
live demo here
HTML
<section id="projects">PROJECTS
<div class="header">Websites</div>
<div>Saia LTL, Inc.</div>
<div>Insurance House</div>
<div>Scandinavian Collectors Club</div>
<div>Casey Sills Photography</div>
<div class="header">Personal Projects</div>
<div>cTV</div>
<div>PoE DPS calculator</div>
<div>tSlide</div>
</section>
JavaScript
var sign = 1;
$('#projects > div:not(.header) > .ShowThis').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).parent().siblings().slideUp(400);
}
else {
$(this).parent().css('border-bottom', '1px solid black');
$(this).parent().siblings().slideDown(400);
$(this).children().slideUp(400);
}
sign = sign*-1;
});
It was a silly mistake. I simply forgot to select only div children when hiding/showing so the a children were remaining hidden or something. In other words I changed this:
$(this).children()
to this:
$(this).children('div')
Thanks to pfried for the indication!
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
<script>
$(document).ready(function() {
$('div.header div.slide').css('display','none');
$('div.header').toggle(
function(){$('div.header').hide('fast'); $(this).show('slow'); $('div.slide').css('display','block');},
function(){$('div.slide').css('display','none'); $('div.header').show('fast');});
});
$(document).ready(function(){
var text = $('div.cont');
$('div.slide').toggle(
function(){$('div.slide').hide('fast'); $(this).show('slow'); $('div.cont').css('display','block');},
function(){ $('div.cont').css('display','none'); $('div.slide').show('fast');});
})
</script>
<style>
.off{display: none;}
.on{ display: block;}
div.cont{ display: none;}
.slide{ display:none;}
</style>
</head>
<body>
<div id="projects">
<div class="header">Websites
<div class='slide'>Saia LTL, Inc.
<div class='cont'>a;dasndiasfhnip</div>
</div>
<div class='slide'>Insurance House<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>Scandinavian Collectors Club<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>Casey Sills Photography<div class='cont'>dasndiasfhnip</div></div></div>
<div class="header">Personal Projects
<div class='slide'>cTV<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>PoE DPS calculator<div class='cont'>dasndiasfhnip</div></div>
<div class='slide'>tSlide<div class='cont'>dasndiasfhnip</div></div></div>
</div>
</body>
i would prefer this one just try it
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>$(document).ready(function() {
var sign = 1;
$('#projects > div.header').on('click', function() {
if (sign == 1) {
$(this).css('border-bottom', 'none');
$(this).children().slideDown(400);
$(this).siblings().slideUp(400);
}
else {
$(this).children().slideUp(400);
$(this).siblings().slideDown(400);
$(this).css({
'height': '29px',
'z-index': '2'
});
}
sign = sign*-1;
});
$('div.slide').click(function(){
$('div.cont').slideToggle('slow');
});
});
</script>
<style>
div.cont{ display: none;}
</style>
</head>
<body>
<div id="projects">
<div class="header">Websites</div>
<div class='slide'>Saia LTL, Inc.
<div class='cont'></div>
</div>
<div class='slide'>Insurance House<div class='cont'></div></div>
<div class='slide'>Scandinavian Collectors Club<div class='cont'></div></div>
<div class='slide'>Casey Sills Photography<div class='cont'></div></div>
<div class="header">Personal Projects</div>
<div class='slide'>cTV<div class='cont'></div></div>
<div class='slide'>PoE DPS calculator<div class='cont'></div></div>
<div class='slide'>tSlide<div class='cont'></div></div>
</div>
</body>
i just tried adding a class to siblings to denote them specifically ---- is it u are looking I'm happy or anything else in particular please comment me ----- thankyou
Related
This question already has answers here:
How to hide/show a fixed element when scrolling some sections into view vertically?
(2 answers)
Closed 5 months ago.
I want that fixed element #logoimode3 show/hide on some sections.
Example: Show #logoimode3 on #section2 and #section3 Hide #logoimode3 on #section1 and #section4
And need to hide also in small screen.
So fixed element have to disapear on blue section. And than show again on green section. I want my logo to disapear while scrolling trought section 2.
<!DOCTYPE html>
<html>
<head>
<style></style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(document).ready(function() {
var sec2 = document.getElementById("section2");
var pos = sec2.getBoundingClientRect();
var height1 = pos.height * -1;
if (pos.top < 1 && pos.top > height1) {
jQuery('#logoimode3').hide();
}
else if(pos.top < height1 || pos.top > 1) {
jQuery('#logoimode3').show();
}
});
jQuery(window).scroll(function() {
var sec2 = document.getElementById("section2");
var pos = sec2.getBoundingClientRect();
var height1 = pos.height * -1;
if (pos.top < 1 && pos.top > height1) {
jQuery('#logoimode3').hide();
}
else if(pos.top < height1 || pos.top > 1) {
jQuery('#logoimode3').show();
}
});
</script>
</head>
<body>
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
<section id="section4" style="background: pink; height:100vh;"></section>
</body>
<footer></footer>
</html>
here i have added code for
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide(1000);
});
$("#show").click(function(){
$("div").show(1000);
});
});
div{
width:100px;
height:100px;
border-radius:50%;
background-color:#9081c6;
display:flex;
align-self:center;
align-items: center;
justify-content: center;
font-size:14px;
margin-bottom:15px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>jquery</div>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
showing and hiding div on click with animation effect
Please try below code :
<html>
<head>
<style></style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#logoimode3').hide();
});
$(document).scroll(function () {
$('section').each(function () {
if($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
if($(this).attr('id') == "section1" || $(this).attr('id') == "section4")
{
jQuery('#logoimode3').hide();
}
else
{
jQuery('#logoimode3').show();
}
}
});
});
</script>
</head>
<body>
<img id="logoimode3" class="logo3" style="position:fixed;top:0px;left:0px;" src="https://imode.info/imode/slike/ikone/IMODE_znak-01.svg" alt="logo" height="" width="30px">
<section id="section1" style="background: red; height:100vh;"></section>
<section id="section2" style="background: blue; height:100vh;"></section>
<section id="section3" style="background: green; height:100vh;"></section>
<section id="section4" style="background: pink; height:100vh;"></section>
</body>
<footer></footer>
</html>
For Demo : https://jsfiddle.net/fxjL7gmw/1/
For example, i have <div id="titlebar"></div> inside html, and also i have <div class="name">Content-text</div> inside same html. Now i want pass Content-text of div class name (<div class="name">Content-text</div>) to another my id <div id="titlebar"></div> through css or js. i tried several ways, but no effect
And when i scroll up the html the id titlebar will show the text of class name
My html:
<html>
<body>
<div id="titlebar"></div>
<div class="name">Content-text</div>
</body>
</html>
Css:
#titlebar{
text-align:center;
width: 101%;
position: fixed;
top:0px;
margin-left:-10px;
padding-right:1px;
font-family: Times New Roman;
font-size: 16pt;
font-weight: normal;
color: white;
display:none;
border: none;
}
Javascript:
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("titlebar").style.display = "block";
} else {
document.getElementById("titlebar").style.display = "none";
}
}
Working Sample, jsFiddle
Please find it here.
<style>
#titlebar{
border: 1px solid black;
}
.name{
border: 1px solid red;
}
</style>
<div>
<div id="titlebar"></div>
<br/>
<div class="name">Content-text</div>
<button id='btn'>
Click to cpoy and put text inside titlebar
</button>
</div>
<script>
document.getElementById('btn').addEventListener('click', function() {
// Find your required code hre
let textInsideDivelementWithclass = document.getElementsByClassName('name')[0].innerText,
titlebarEle = document.getElementById('titlebar');
titlebarEle.innerText = textInsideDivelementWithclass;
});
</script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var Content_text = $(".name").text();
$("#titlebar").text(Content_text);
});
});
</script>
</head>
<body>
<button>Copy</button>
<div class="name">Content-text</div>
<div id="titlebar">copy here</div>
</body>
</html>
First you get the text of your .name element:
let nameElement = document.querySelector(".name").textContent;
then you get the target element and assign the .name text to it :
document.querySelector("#titlebar").textContent = nameElement;
First of all you should determin an id for your div like this:
<div id="name">Content-text</div>
then use this code:
<script type="text/javascript">
var DivName = document.getElementById('name');
var DivTitlebar = document.getElementById('titlebar');
DivTitlebar.innerHTML = DivName.innerHTML;
</script>
Please try this..
You have to get the content from the div1 and div2 to two seperate variables div1Data and div2Data
Then from the HTML DOM innerHTML Property you can assign the content to your preferred div
function copyContent() {
var div1Data= document.getElementById('div1');
var div2Data= document.getElementById('div2');
div2Data.innerHTML = div1Data.innerHTML;
}
<div id="div1">
Content in div 1
</div>
<div id="div2">
</div>
<button onClick="copyContent()">Click to copy</button>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script>
$(document).ready(function(){
var Content_text = $(".name").text();
//alert(Content_text);
$(function() {
$(window).mousewheel(function(turn, scroll) {
if (scroll > 0) $('#titlebar').text('Content_text');
else $('#titlebar').text('Copy here');
return false;
});
});
//$("#titlebar").text(Content_text);
});
</script>
</head>
<body>
<div class="name" style="margin-top:50px;">Content-text</div>
<div id="titlebar" style="margin-top:50px;">Copy here</div>
</body>
</html>
I added on my site a div, which sometimes displays 1 child div and sometimes more than 1 and I want add a class to Body tag if the childs div are 1 if not give to body another class.
I tried this code, but it did not work :
JavaScript
setInterval(function(){
if(jQuery('div#program-days .row').length > 1)
jQuery('body').addClass('bodyclass1');
else
jQuery('body').removeClass('bodyclass2');
}, 1000);
HTML
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
You should removeClass and addClass like this
setInterval(function(){
if(jQuery('div#program-days .row').length > 1){
jQuery('body').addClass('bodyclass1');
jQuery('body').removeClass('bodyclass2');
}
else{
jQuery('body').removeClass('bodyclass1');
jQuery('body').addClass('bodyclass2');
}
}, 1000);
setInterval(function(){
if(jQuery('div#program-days .row').length > 1){
jQuery('body').addClass('bodyclass1');
jQuery('body').removeClass('bodyclass2');
}
else{
jQuery('body').removeClass('bodyclass1');
jQuery('body').addClass('bodyclass2');
}
}, 1000);
.bodyclass1{
background-color:red;
}
.bodyclass2{
background-color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
You can try this code, up on click on try now the class will be added to the body if childs are more than one
<!DOCTYPE html>
<html>
<body>
<!-- This is a comment node! -->
<button onclick="myFunction()">Try it</button>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
<script>
function myFunction() {
var parent = document.getElementById("program-days");
if (parent.childNodes.length > 1) {
document.body.classList.add('myclass');
}
}
</script>
</body>
</html>
You dont remove the other class when you add the class:
Here is an example using non-jQuery:
Javascript:
setInterval(function(){
var els = document.querySelectorAll("#program-days .row");
var body = document.querySelector("body");
if (els.length > 1) {
body.classList.add("red-border");
body.classList.remove("blue-border");
} else {
body.classList.add("blue-border");
body.classList.remove("red-border");
}
}, 1000);
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="program-days">
<div class="row">program 1</div>
<div class="row">program 2</div>
<div class="row">program 3</div>
</div>
</body>
</html>
CSS:
.red-border {
border: 1px solid red;
}
.blue-border {
border: 1px solid blue;
}
Working plunker: http://plnkr.co/edit/ATP63ZWXASTwFaG2jM3y?p=preview
It can be done with jQuery aswell, using your syntax.
I have a div which contains a h2 tag and a p tag.
i wan a case where if the div is hovered (moverenter), the background colors of the h2 tag and the p tag get exchanged and when move leave it resets.
I am looking at this solution because i have many of the panels with different h2 tag and p tags. my approve so far:
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
on the jQuery i tried
$(document).ready(function(){
$(".panel").mouseenter(function(){
exchange($(this));
}).mouseleave(function(){
exchange($(this));
});
function exchange(e){
var x = e.children(".title"),
y = e.children(".desc");
x.css("background", "y.css('background')");
}
});
I am sorry, just learning JS
NB: since i have not gotten it working, i was also looking for a smooth transition effect on the exchange
Do you mean something like
$(".panel").mouseenter(function () {
var $this = $(this),
$h2 = $this.children('h2'),
$p = $this.children('p'),
h2c = $h2.css('background-color'),
pc = $p.css('background-color');
$h2.css('background-color', pc);
$p.css('background-color', h2c);
}).mouseleave(function () {
$(this).children('h2, p').css('background-color', '');
})
.panel h2 {
background-color: lightgrey;
}
.panel p {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
<div class="panel">
<h2 class="title">This is the title</h2>
<p class="desc">This is a decription</p>
</div>
I didn't check everything but that won't work :
x.css("background", "y.css('background')");
Try something like :
var bgY = y.css('background');
x.css("background", bgY);
I made minor changes to your code
Hope it solves your problem.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="Content/jquery-ui-1.10.4.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$(".panel").mouseenter(function () {
$(".panel").toggle();
}).mouseleave(function () {
$(".panel").toggle();
});
})
</script>
</head>
<body>
<div class="panel" style="display:none" >
<h2 class="title" style="background-color:gray">This is the title</h2>
<p class="desc" style="background-color:lightgray">This is a decription</p>
</div>
<div class="panel" style="display:block" >
<h2 class="title" style="background-color:lightgray">This is the title</h2>
<p class="desc" style="background-color:gray">This is a decription</p>
</div>
</body>
</html>
For only exchanging CSS of p and h2 elements :-
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').css('background-color','green');
$(this).find('.desc').css('background-color','blue');
});
Now suppose , Lets say you set some background-color to your p and h2 elements .
CSS
.title{
background-color: green;
}
.desc{
background-color: blue;
}
SCRIPT
$('div.panel').on('hover',function(){
$(this).find('.title').css('background-color','blue');
$(this).find('.desc').css('background-color','green');
},function(){
$(this).find('.title').removeAttr('style');
$(this).find('.desc').removeAttr('style');
});
You can find all the children of the panel and change their backgroundcolor.
You can do this on mouseEnter:
$(".panel").children().css("background-color","red");
And on mouseLeave take another backgroundcolor.
And for the animation part, if you're working with simple background colors you could use animate().
...
function exchange(e)
{
var x = e.children(".title"),
y = e.children(".desc");
bg1 = x.css('background-color'),
bg2 = y.css('background-color');
x.animate({ "background-color": bg2 }, 1500);
y.animate({ "background-color": bg1 }, 1500);
}
...
Here you are a working example http://jsfiddle.net/9a1qe9q9/2/
jQuery
$(".panel").mouseenter(function () {
exchange($(this));
}).mouseleave(function () {
exchange($(this));
});
function exchange(e) {
var x = e.children(".title"),
y = e.children(".desc"),
xColor = x.css('background'),
yColor = y.css('background');
x.css("background", yColor);
y.css("background", xColor);
}
I would like to change an image on a certain scroll position. For example:
Scroll 100px show img1.jpg
Scroll 200px show img2.jpg
Scroll 300px show img3.jpg
Here I found an example what I mean.
Any ideas?
You can use the onScroll event to listen for scrolling, check at what position the scrollbar is and make the image change or whatever your heart desires. You can read more about onScroll event here. A basic code will be something like this:
var onScrollHandler = function() {
var newImageUrl = yourImageElement.src;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 100) {
newImageUrl = "img1.jpg"
}
if (scrollTop > 200) {
newImageUrl = "img2.jpg"
}
if (scrollTop > 300) {
newImageUrl = "img3.jpg"
}
yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);
Of course yourImageElement should be replaced with the image element you want to change.
If you have jQuery availble you can use the .scroll() method instead of the event listener and the .scrollTop() to get the scrollbar position.
Also, you might want to look at some scroll/paralex libraries like skrollr.
$(window).on("scroll touchmove", function()
{
if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top )
{
$('body').css('background-image', 'url(https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg)')
};
if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
{
$('body').css('background-image', 'url(https://i1.wp.com/cdn.catawiki.net/assets/marketing/uploads-files/45485-8bdcc8479f93d5a247ab844321b8b9d5e53c49a9-story_inline_image.jpg)')
};
if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top )
{
$('body').css('background-image', 'url(https://s-media-cache-ak0.pinimg.com/originals/e1/7a/03/e17a0385726db90de1854177d4af2b4f.jpg)')
};
if ($(document).scrollTop() >= $("#four").position().top)
{
$('body').css('background-image', 'url(https://www.wallpaperup.com/uploads/wallpapers/2015/02/13/621414/6fc33c3ae65a58f9bb137f5cf011aebc.jpg)')
};
});
*{
margin:0;
padding:0;
}
.main{
width:100%;
height:100vh;
background-image:url('https://4.bp.blogspot.com/-Ivk46EkgQfk/WWjbo4TdJbI/AAAAAAAAFUo/gUD7JABklsIA1gWIr5LS1slyY4QuTMkEwCLcBGAs/s1600/gambar%2Bwallpaper%2Bmobil.jpg');
background-size:100% 100%;
background-attachment:fixed;
transition: 1000ms;
}
section{
width: 100%;
min-height: 1px;
}
.content{
width:50%;
min-height:1px;margin-top:10%;
margin-left:10%;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class='main'>
<section id="one">
<div class='content'>
<h1 style='font-size:5vw;'>first heading</h1>
<p style='font-size:3vw;' >description</p>
</div>
</section>
<section id="two" style='margin-top:100vh'>
<div class='content'>
<h1 style='font-size:5vw;'>second heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="three" style='margin-top:100vh' >
<div class='content'>
<h1 style='font-size:5vw;'>third heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="four" style='margin-top:100vh' >
<div class='content' style='margin-bottom:10%;'>
<h1 style='font-size:5vw;'>fourth heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
</body>
</html>
documentation
create a web folder first.
create a img sub folder // place all images into this folder
now create three files // in web folder
index.html
css.css
js.js
copy code given bellow and paste it.
save the program.
finally run the program
click on this link to see the video :https://www.youtube.com/watch?v=V97wCVY_SrQ
visit our website for full documentation :https://nozzons.blogspot.com/
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='css.css' rel='stylesheet' type='text/css'/>
<script src='js.js'></script>
</head>
<body class='main'>
<section id="one">
<div class='content'>
<h1 style='font-size:5vw;'>first heading</h1>
<p style='font-size:3vw;' >description</p>
</div>
</section>
<section id="two" style='margin-top:100vh'>
<div class='content'>
<h1 style='font-size:5vw;'>second heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="three" style='margin-top:100vh' >
<div class='content'>
<h1 style='font-size:5vw;'>third heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
<section id="four" style='margin-top:100vh' >
<div class='content' style='margin-bottom:10%;'>
<h1 style='font-size:5vw;'>fourth heading</h1>
<p style='font-size:3vw;'>description</p>
</div>
</section>
</body>
</html>
css.css
*{
margin:0;
padding:0;
}
.main{
width:100%;
height:100vh;
background-image:url('img/img_one.jpg');
background-size:100% 100%;
background-attachment:fixed;
transition: 1000ms;
}
section{
width: 100%;
min-height: 1px;
}
.content{
width:50%;
min-height:1px;margin-top:10%;
margin-left:10%;
color:white;
}
js.js
$(window).on("scroll touchmove", function()
{
if ($(document).scrollTop() >= $("#one").position().top && $(document).scrollTop() < $("#two").position().top )
{
$('body').css('background-image', 'url(img/img_one.jpg)')
};
if ($(document).scrollTop() >= $("#two").position().top && $(document).scrollTop() < $("#three").position().top)
{
$('body').css('background-image', 'url(img/img_two.jpg)')
};
if ($(document).scrollTop() >= $("#three").position().top && $(document).scrollTop() < $("#four").position().top )
{
$('body').css('background-image', 'url(img/img_three.jpg)')
};
if ($(document).scrollTop() >= $("#four").position().top)
{
$('body').css('background-image', 'url(img/img_four.jpg)')
};
});
So i am just answering this old thread because I was trying to implement the same thing on my website but i found it a bit difficult to implement it so I made a function of my own , its a bit easier to implement and understand but a bit buggy, For instance: if the user use the scroll bar instead of scroll wheel of the mouse the image will not change , hope it helps you :
<html>
<head>
<script>
function f() {
t1.src = "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg"
t1.height = "319"
t1.width = "330"
}
function f2() {
t1.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG"
t1.height = "319"
t1.width = "330"
}
function f3() {
t1.src = "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg"
t1.height = "244"
t1.width = "330"
}
function f4() {
t1.src = "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg"
t1.height = "244"
t1.width = "350"
}
function f5() {
t1.src = "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg"
t1.height = "319"
t1.width = "350"
}
</script>
</head>
<body>
<div align="center" style="position: fixed; z-index: 20; left:38.5%; top:200">
<img src="no.png" height="319" width="330" name="t1">
</div>
</div>
<div class="container" onmouseover="f3()" style="padding:0; margin:0; width:100%;">
<img src="https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f4()" style="padding:0; margin:0; width:100%;">
<img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f5()" style="padding:0; margin:0; width:100%;">
<img src="https://image.freepik.com/free-photo/lens-flare-abstract-backgound_21276999.jpg" width="100%">
</div>
<br>
<br>
<div class="container" onmouseover="f()" style="padding:0; margin:0; width:100%;"></div>
</body></html>
Cheers!!
Ha[ppy] Coding.