I have two boxes, Now When the user clicks on LeftToRight then I have to slide content from left to right with LeftToRight box. if the user clicks on RightToLeft the I have to slide the div from right to left.
I tried below code but it's not displaying properly when clicking on the button. I want like a drawer.
Can anyone help me out with this issue?
$(document).ready(function() {
$("#clickLeft").click(function() {
$(".leftoRightbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidesecondbox")) {
$('.innerWrapper').addClass('hidesecondbox');
} else {
$('.innerWrapper').removeClass('hidesecondbox');
}
});
$("#clickRight").click(function() {
$(".righttoLeftbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidefirstbox")) {
$('.innerWrapper').addClass('hidefirstbox');
} else {
$('.innerWrapper').removeClass('hidefirstbox');
}
});
});
.innerWrapper {
text-align: center;
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: #f8f8f8;
border: 1px solid #ccc;
}
.displayflex {
display: flex;
overflow: hidden;
}
.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
display: none;
}
.leftoRightbox,
.righttoLeftbox {
height: 400px;
}
<div class="mainWrapper">
<div class="innerWrapper">
<div class="displayflex one">
<div class="leftoRightbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="leftoRight box" id="clickLeft">
<h2>This is slide left to right</h2>
<p class="goback">Go Back</p>
</div>
</div>
<div class="displayflex two">
<div class="righttoLeft box" id="clickRight">
<h2>This is slide right to left</h2>
<p class="goback">Go Back</p>
</div>
<div class="righttoLeftbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Add flex-shrink:0; to box element and define a fixed width for the p element to avoid the bad effect when doing the animation:
$(document).ready(function() {
$("#clickLeft").click(function() {
$(".leftoRightbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidesecondbox")) {
$('.innerWrapper').addClass('hidesecondbox');
} else {
$('.innerWrapper').removeClass('hidesecondbox');
}
});
$("#clickRight").click(function() {
$(".righttoLeftbox").animate({
width: "toggle"
});
if (!$('.innerWrapper').hasClass("hidefirstbox")) {
$('.innerWrapper').addClass('hidefirstbox');
} else {
$('.innerWrapper').removeClass('hidefirstbox');
}
});
});
.innerWrapper {
text-align: center;
display: flex;
justify-content: center;
}
.box {
width: 200px;
height: 200px;
background-color: #f8f8f8;
border: 1px solid #ccc;
flex-shrink:0;
}
.displayflex {
display: flex;
overflow: hidden;
}
.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
display: none;
}
.leftoRightbox p,
.righttoLeftbox p{
width:calc(100vw - 280px);
}
<div class="mainWrapper">
<div class="innerWrapper">
<div class="displayflex one">
<div class="leftoRightbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="leftoRight box" id="clickLeft">
<h2>This is slide left to right</h2>
<p class="goback">Go Back</p>
</div>
</div>
<div class="displayflex two">
<div class="righttoLeft box" id="clickRight">
<h2>This is slide right to left</h2>
<p class="goback">Go Back</p>
</div>
<div class="righttoLeftbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Related
I am a neewbie in Javascript: I made a mute/unmute button in a fixed position which mute a video in autoplay (no controls) while scrolling the page.
Considered that when you enter the site or refresh the page my video starts only when you scroll till that specific section, is there a way to let the mute/unmute button appear only in 'video section' but then, once is appeared, to let it remain also in the previous sections? (from the top till the bottom of the page).
I can not find a solution rather than let the button appear only from that section, but I want it to remain also in the previous sections.
Here how it looks now:
var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"
function myFunction() {
// toggle the muted property of the video element
video.muted = !video.muted;
// if the video is muted, set the img.src to unmuteImg
// otherwise, set it to the muteImg
if (video.muted) {
img.src = unmuteImg;
} else {
img.src = muteImg;
}
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto 80px;
}
.video-description , .sct{
text-align: center;
max-width: 66%;
margin: 0 auto 24px;
font: inherit;
letter-spacing: 4px;
}
#myVideo {
border-radius: 5px;
max-width: 46%;
object-fit: cover;
margin-bottom: 20px;
}
#myImg {
top: 10%;
right: 3%;
position: fixed;
z-index: 50;
cursor: pointer;
padding: 10px 20px;
background: #D3D3D3;
color: #000;
border-radius: 5px;
display: inline-block;
}
<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="video-container">
<div class="video-description">
VIDEO SECTION <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="content">
<img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
<section class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
If I understand correctly this is what you're looking for:
var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"
function myFunction() {
// toggle the muted property of the video element
video.muted = !video.muted;
// if the video is muted, set the img.src to unmuteImg
// otherwise, set it to the muteImg
if (video.muted) {
img.src = unmuteImg;
} else {
img.src = muteImg;
}
}
const observer = new IntersectionObserver(
(entries) => {
if (!entries[0].isIntersecting) {
img.style.display = "none";
} else {
img.style.display = "block";
observer.unobserve(video);
}
},
{ threshold: [0] });
observer.observe(video);
section:first-of-type {
margin-top: 400px;
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto 80px;
}
.video-description , .sct{
text-align: center;
max-width: 66%;
margin: 0 auto 24px;
font: inherit;
letter-spacing: 4px;
}
#myVideo {
border-radius: 5px;
max-width: 46%;
object-fit: cover;
margin-bottom: 20px;
}
#myImg {
top: 10%;
right: 3%;
position: fixed;
z-index: 50;
cursor: pointer;
padding: 10px 20px;
background: #D3D3D3;
color: #000;
border-radius: 5px;
display: inline-block;
}
<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="video-container">
<div class="video-description">
VIDEO SECTION <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="content">
<img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
</div>
<section class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
Use an IntersectionObserver
var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
const videoContainer = document.querySelector('.video-description')
//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"
const observer = new IntersectionObserver(entries => {
for (const { isIntersecting } of entries) {
if (isIntersecting) {
img.hidden = false
observer.disconnect()
}
}
}, { threshold: 0.1 });
observer.observe(videoContainer)
function myFunction() {
// toggle the muted property of the video element
video.muted = !video.muted;
// if the video is muted, set the img.src to unmuteImg
// otherwise, set it to the muteImg
if (video.muted) {
img.src = unmuteImg;
} else {
img.src = muteImg;
}
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto 80px;
}
.video-description , .sct{
text-align: center;
max-width: 66%;
margin: 0 auto 24px;
font: inherit;
letter-spacing: 4px;
}
#myVideo {
border-radius: 5px;
max-width: 46%;
object-fit: cover;
margin-bottom: 20px;
}
.button {
top: 10%;
right: 3%;
position: fixed;
z-index: 50;
cursor: pointer;
padding: 10px 20px;
background: #D3D3D3;
color: #000;
border-radius: 5px;
display: inline-block;
}
[hidden] {
display: none;
}
<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="video-container">
<div class="video-description">
VIDEO SECTION <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="content">
<img id="myImg" class="button" onclick="myFunction()" hidden src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
<section class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
Looks like you are missing some closing tags for one. You might review that and make sure all the divs and sections are closed.
Also, I got the code duplicated on my screen and it seems to functionally work. If I understand the issue, you literally want to move where the img is.
This will be a CSS change. You want to position the img relative to the wrapper, not the whole page, so you have to change tell it.
Something similar like this:
<div class="video-wrapper">
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<img id="myImg" onclick="toggleMute()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
</div>
Set the CSS as something like this. The "position: relative;" is the key, any child in this div will now be relative to this element
.video-wrapper {
text-align: center;
position: relative;
}
// change from fixed to absolute. and then it will be relative to the wrapper
#myImg {
position: absolute;
}
This will get the img close to where you want it - the challenge will be getting the wrapper to hug the video element or the video element to expand to fit the wrapper
My screen looks like this:
Currently, the text comes at the top while the red section (VideoComponent) comes at the bottom. I want the VideoComponent to appear on the left side while all the text should move towards the right. Like a flexbox maybe?
return (
<div>
<main className="content">
In this section.....TEXT
<div className="video">
<VideoComponent />
</div>
</main>
</div>
);
The VideoComponent:
return (
<div>
<Sketch className="sketch" />
</div>
</div>)
css for video
.sketch{
padding-top: 30px;
}
.button{
padding-left: 0px;
padding-top: 20px;
}
.secondbutton{
padding-left: 0px;
padding-top: 70px;
}
I think that flex is better than float.
return (
<div>
<main className="content">
<div className="video">
<VideoComponent />
</div>
<div className="text">
In this section.....TEXT
</div>
</main>
</div>
);
CSS
.context {
display: flex;
justify-content: space-between;
}
If you want the text to wrap around the video, use float. In the example below, I have a paragraph of text that I want to wrap around two images, so I insert the images in the p tag where I want them to be vertically, and use float: left.
img {
width: 100px;
height: 100px;
background: blue;
margin: 10px;
}
#left {
float: left;
}
#right {
float: right;
}
<p>
<img id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<img id="right"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
I have a single page. I have min four sections on my page. I have to add the active class to the li tag on the menu when scrolling at the bottom with the respective section. For example, If about us section is on the screen then add class active to the li tag. If the gallery section is on the screen then add active class and remove the active class from the previous li.
I have to change the color and adding the bottom border to the active menu list. I don't want to use any plugin.
This is an example. It's adding the class active and changing the color of nav list
https://blackrockdigital.github.io/startbootstrap-scrolling-nav/
Is it possible to use jQuery?
$(function() {
$('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
body {
margin: 0;
padding: 0;
}
.headerMenu {
position: fixed;
top: 0;
width: 100%;
background-color: #d9a6a6;
}
.anchorLinks ul {
list-style: none;
}
.anchorLinks ul li {
display: inline-block;
margin: 15px;
}
.anchorLinks ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.anchorLinks ul li.active a {
color: #ffef00;
border-bottom: 1px solid #000;
}
.WrapperInner {
margin-top: 80px;
margin-bottom: 80px;
}
section {
height: 400px;
padding: 40px;
}
section p {
color: #fff;
}
.aboutus {
background-color: #ec7063;
}
.service {
background-color: #a569bd;
}
.gallery {
background-color: #5dade2;
}
.contactus {
background-color: #2ecc71;
}
<div class="Wrapper">
<div class="mainInner bg_white">
<div class="linkWrappers">
<header class="headerMenu">
<div class="anchorLinks smothscrollclass">
<ul>
<li>Home</li>
<li>About</li>
<li>Service</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</header>
</div>
<div class="WrapperInner ">
<section class="aboutus" id="aboutus">
<h2>About us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="service" id="service">
<h2>Service</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="gallery" id="gallery">
<h2>Gallery</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="contactus" id="contactus">
<h2>Contact us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
hi follow up the below snippet what I do here is made an one function called activateLink and I gave ID to links and clicking the link I add an active class to that particular li with the help of jquery
$(function() {
$('.smothscrollclass a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
function activateLink (link,section) {
if(section){
$('html, body').animate({
'scrollTop' : $("#"+section).position().top
},function(){
$( ".active" ).removeClass( "active" )
$("#"+link).addClass("active");
});
}else{
$( ".active" ).removeClass( "active" )
$("#"+link).addClass("active")
}
}
function checkSectionExistance (sectionId,linkId) {
var element = document.querySelector('#'+sectionId);
var position = element.getBoundingClientRect();
// checking for partial visibility
if(position.top < window.innerHeight && position.bottom >= 0) {
$( ".active" ).removeClass( "active" )
$("#"+linkId).addClass("active")
}
}
window.addEventListener('scroll', function() {
checkSectionExistance('aboutus','about-link')
checkSectionExistance('service','service-link')
checkSectionExistance('gallery','gallery-link')
checkSectionExistance('contactus','contact-link')
});
body {
margin: 0;
padding: 0;
}
.headerMenu {
position: fixed;
top: 0;
width: 100%;
background-color: #d9a6a6;
}
.anchorLinks ul {
list-style: none;
}
.anchorLinks ul li {
display: inline-block;
margin: 15px;
}
.anchorLinks ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.anchorLinks ul li.active a {
color: #ffef00;
border-bottom: 1px solid #000;
}
.WrapperInner {
margin-top: 80px;
margin-bottom: 80px;
}
section {
height: 400px;
padding: 40px;
}
section p {
color: #fff;
}
.aboutus {
background-color: #ec7063;
}
.service {
background-color: #a569bd;
}
.gallery {
background-color: #5dade2;
}
.contactus {
background-color: #2ecc71;
}
a{
cursor:pointer
}
.active {
border-bottom:1px solid white
}
<div class="Wrapper">
<div class="mainInner bg_white">
<div class="linkWrappers">
<header class="headerMenu">
<div class="anchorLinks smothscrollclass">
<ul>
<li><a id='home-link' onclick="activateLink('home-link')">Home</a></li>
<li><a id='about-link' onclick="activateLink('about-link','aboutus')" >About</a></li>
<li><a id='service-link' onclick="activateLink('service-link','service')" >Service</a></li>
<li><a id='gallery-link' onclick="activateLink('gallery-link','gallery')" >Gallery</a></li>
<li><a id='contact-link' onclick="activateLink('contact-link','contactus')" >Contact</a></li>
</ul>
</div>
</header>
</div>
<div class="WrapperInner ">
<section class="aboutus" id="aboutus">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="service" id="service">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="gallery" id="gallery">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="contactus" id="contactus">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
let me know if it's helpful
with pure js you need to use document.body.scrollTop; to define how much was scrolled then remove style active from all li-s and add to the current or just manually for each remove the previous for(let i = 0;i<liClass.length;i++){liClass[i].classList.remove("active")} then add to the current targetting it by ID or unique class, works fine for me for jQuery is the same just $("body").scrollTop()
I upgraded a bit now everything is crystal clear ;)
For scrolls I used pure html just add ID to the element where you want to scroll and add <a href="#theIdOfElement">
the classes I did with jQuery as you asked
2nd EDIT:
let x=0;
$(document).ready(()=>{
$("a").click((e)=>{
//Removes class active from all a-s and all divs
$("a").removeClass("active");
$("div").removeClass("active");
//Adds only to clicked one
$(e.target).addClass("active");
//Adds class active to divs that contain the text on which you clicked
$("div:contains("+ $(e.target).text() +")").addClass("active");
});
$(document).scroll(()=>{
$("p").text( $(document).scrollTop());
if($(document).scrollTop() >= 970){
//If you want to get style permenent remove line below
$("div").removeClass("active");
$("#contacts").addClass("active");
}
else if($(document).scrollTop() >= 508){
//If you want to get style permenent remove line below
$("div").removeClass("active");
$("#about").addClass("active");
}
else if($(document).scrollTop() >= 8){
//If you want to get style permenent remove line below
$("div").removeClass("active");
$("#home").addClass("active");
}
});
})
/*This is for smooth scrolling*/
html {
scroll-behavior: smooth;
}
.big {
height: 500px;
width: 100%;
border: solid black 1px;
}
.active {
color:red;
}
<div id="main">
<div style="position:fixed;display:flex;justify-content:flex-end;width:100%">
<p id="demo">0</p>
Home
About Us
Contacts
</div>
<div class="big" id ="home">Home</div>
<div class="big" id ="about">About Us</div>
<div class="big" id ="contacts">Contacts</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have 3 rollover image that i want to use it as a trigger to show text box under each images. Whenever I try to click it disappears and does not works. I'm trying to make the first one work at least.
here's my code and webpage.
http://yunjinkimdesign.com/question/practice_div.html?
the image showed on snippet is just sample I brought from google...snippet and my actual sample is different
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});
img{
width: 200px;
border-radius: 50%;
}
div{
margin: 20px;
}
.container .box .top {
padding: 12px;}
.container .box .bottom {
padding: 12px;
background-color: red;
color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="top">
<img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" onmouseover="this.src='https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'" onmouseout="this.src='http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg'">
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
You have given href=? in the anchor, Just replace the ? to # or remove href attribute from anchor and your code will run as you want.
<img src="lib/2.png" onmouseover="this.src='lib/papa.jpg'" onmouseout="this.src='lib/2.png'">
$('.top').on('click', function() {
$parent_box = $(this).closest('.box');
$parent_box.siblings().find('.bottom').hide();
$parent_box.find('.bottom').toggle();
});
img {
width: 200px;
border-radius: 50%;
}
div {
margin: 20px;
}
.container .box .top {
padding: 12px;
}
.container .box .bottom {
padding: 12px;
background-color: red;
color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="top">
<a href="#">
<img src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg" onmouseover="this.src='https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg'" onmouseout="this.src='http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg'">
</a>
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
This is my css
<style type="text/css" media="screen">
body {
margin: 0;
}
#wrap1{
width:600px;
margin:0 auto;
overflow:hidden;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
#body1{
width: 8000px;
}
.panel {
width: 600px;
float: left;
left:0px;
top:0px;
margin-top: 45px;
background: #eee;
}
#banner {
position: fixed;
}
#banner ul {
line-height: 45px;
margin: 0 30px;
padding: 0;
}
#banner ul li {
display: inline;
margin-right: 30px;
}
</style>
This is what I have in my body
<div id="wrap1">
<div id="body1">
<div id="banner">
<ul>
<li>
Home
</li>
<li>
Newsletter
</li>
<li>
Directions & Opening Hours
</li>
<li>
Contact us
</li>
</ul>
</div>
<div id="home" class="panel">
<h2>
Home
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="newsletter" class="panel">
<h2>
Newsletter
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="directions" class="panel">
<h2>
Directions
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="contact" class="panel">
<h2>
Contact
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
and this is the javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $($(this).attr("href"));
$("html, #wrap1").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
I want to have something like this. So, when I clicked the navigation contact, the page inside the wrap1 will scroll smoothly to the where the anchor #contact is
However, what i get right now is the smooth scroll is working fine, however, it doesn't seem stop at where it is supposed to stop. For instance, when I click Newsletter link, the scroll will stop in the half part of Newsletter. So when click Newsletter link, it will show me half part of Newsletter and half part of Directions.
Please jQuery guru out there help me fix this issue. This has been bugging me for days.
Thanks and sorry for the lack of jQuery knowledge I have.
*EDITED:
This is my page looks like right now. Please help
http://testhscroll.tumblr.com/
Your problem is that offset() returns values relative to the document, whereas scrollLeft will be relative to the parent.
You need to adjust by the position of the parent (div#banner or the UL).