JQuery issue with a back to top function

JQuery issue with a back to top function - javascript

I've created a Back to Top function with jQuery.
The scroll back to top works but I can't seem to figure out how to hide it and only appear when say scrollTop() > 300. I created a function to take care of that but unfortunately no luck.
Here's a link to a jsfiddle https://jsfiddle.net/pvan_ren1/st3mdp6a/10/
//This is the function that's supposed to take care of the hide and reveal of toTop button.
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});

You should edit your CSS to hide your "Back to Top" button by default, and then show it when the show class is added.
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
jQuery(document).ready(function() {
var btn = $('#toTop');
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: 0
}, 700);
});
});
.sectionA {
width: 100%;
height: 600px;
background-color: pink;
}
.sectionB {
width: 100%;
height: 600px;
background-color: green;
}
.sectionC {
width: 100%;
height: 600px;
background-color: purple;
}
.sectionD {
width: 100%;
height: 600px;
background-color: orange;
}
#toTop {
display: none;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#toTop.show {
display: inline-block;
}
#toTop:hover {
cursor: pointer;
background-color: #333;
}
#toTop:active {
background-color: #555;
}
#toTop::after {
content: "\f077";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<p style="position:fixed">Scroll Down and use the toTop button</p>
<br>
<p style="position:fixed">
At the top, the "Back to Top" button does not show.
<b>It works!</b>
</p>
<section class="sectionA">
</section>
<section class="sectionB">
</section>
<section class="sectionC">
</section>
<section class="sectionD">
</section>
</body>
<a id="toTop"></a>

Before anything, set the style of the button to display: none then the code below should do it for you:
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#toTop').css('display','inline-block');
} else {
$('#toTop').css('display','none');
}
});

Related

Smoothly navigation bar with javascript/ css

I created a navigation bar with java script and the problem is that my first scrolling make the
navigation bar to disappear with out the nice animation.
The nice animation fade up just after the first scrolling.
CSS:
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
javaScript:
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
You can watch it "live" here: https://jsfiddle.net/Benjamn89/rgxtb7en/345/
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div>
<!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div>
<!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div>
<!-- second_section -->
<div class='third_section'>
</div>
<!-- third_section -->
<div class='four_section'>
</div>
<!-- four_section -->
Thanks:)

Because of your default top value not defined. Adding after top:0 to .nav it will be fixed.
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
top:0
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<title>
My portFolio
</title>
</head>
<body>
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div> <!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div> <!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div> <!-- second_section -->
<div class='third_section'>
</div> <!-- third_section -->
<div class='four_section'>
</div><!-- four_section -->
</body>

How to move text up when scrolling down?

I'm new at jQuery and I need help. I want to make the text move up and static box slowly disappear when you scroll website down.
Something like this: http://eliastinchon.com/
p,
body {
margin: 0;
padding: 0;
}
body {
height: 3000px;
font-family: sans-serif;
background-color: #282828;
}
#slide {
color: #ffffff;
font-weight: 600;
font-size: 80px;
position: absolute;
top: 180px;
left: 40px;
z-index: 10;
}
#static {
width: 400px;
height: 200px;
background-color: orange;
float: right;
margin-top: 150px;
margin-right: 80px;
color: #ffffff;
text-align: right;
font-size: 12px;
}
<div id="box">
<p id="slide">Some text</p>
<!-- This slideUp when scrolling down -->
<div id="static">This box is static</div>

How about this approach:
$(document).on('scroll', function() {
$("#slide").css("top", Math.max(180 - 0.2*window.scrollY, 0) + "px");
$("#static").css("opacity", Math.max(1 - 0.004*window.scrollY, 0));
})
Here is the updated Fiddle.
I would of course recommend changing the functions if you dont like the linear transitions.

jQuery delay() to start when you scroll to a specific div

I have delays in place within my div gray. I don't want those delays or animation to start until the user would scroll to that specific div. What I have tried doing is not working. The delays and animation still work, but they begin once the page loads.
Does anyone see what I am doing wrong?
$(function() {
var oTop = $('.gray').offset().top - window.innerHeight;
$(window).scroll(function(){
var pTop = $('body').scrollTop();
console.log( pTop + ' - ' + oTop );
if( pTop > oTop ){
textdelays();
}
});
});
$(function textdelays(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(1000).fadeIn(2200);
$('#text-button').animate({'top': '60%'}, 1000);
});
.green {
background-color: green;
width: 100%;
height: 500px;
}
.yellow {
background-color: yellow;
width: 100%;
height: 500px;
}
.gray {
background-color: #CCC;
width: 100%;
height: 300px;
}
#text {
color: blue;
display: none;
text-align: center;
position: relative;
margin: 0 25%;
top: 35%;
font-size: 1.3em;
}
#text-button {
position: relative;
wdith: 100%;
text-align: center;
top: 70%;
display: none;
cursor: pointer;
}
.border-span {
border: 2px solid #FFF;
padding: 15px 10px;
color: #FFF;
font-weight: bold;
}
.border-span:hover {
background-color: #FFF;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="green"></div>
<div class="yellow"></div>
<div class="gray">
<div id="text">text.</div>
<div id="text-button"><span class="border-span">text animation</span></div>
</div>

How Do I Toggle Tabs in JQuery

I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.

You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});

Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});

Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ

jQuery toggle fade: Can't get div to fade out/in on toggle

When I click on the black button, the red div fades out and the blue div fades in. However, when I click the black button a second time to switch it back, there is no fade out/in. How can I make it so that the blue div fades out and the red div fades back in?
Fiddle: http://jsfiddle.net/ddac5391/1/
HTML
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>
CSS
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
JS
var c = 0;
$('#contact-button').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500).show();
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500).hide();
}
});

Remove the .show() and .hide(); and to let the fadeIn/fadeOut animation complete(before stopping the animation) use .finish() before .stop().
If you don't use .finish(), the divs will sometimes stuck at a point where their opacity is not 1. Demo(try clicking rapidly) demonstrating this.
$('#contact-keebs').finish().stop().fadeIn(500);
and
$('#contact-keebs').finish().stop().fadeOut(500);
Updated Fiddle
Complete Demo:
var c = 0;
$('#contact-button').click(function(e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').finish().stop().fadeIn(500);
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').finish().stop().fadeOut(500);
}
});
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>

I fix it. You don't need to add show and hide after the fadeOut, fadeIn : http://jsfiddle.net/ddac5391/6/
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500);
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500);
}

It should be $('#contact-keebs').stop().fadeOut(500).show();

We Keep Coding

JavaScript is the programming language of the Web.

JQuery issue with a back to top function - javascript

Before anything, set the style of the button to display: none then the code below should do it for you: $(window).scroll(function() { if ($(window).scrollTop() > 300) { $('#toTop').css('display','inline-block'); } else { $('#toTop').css('display','none'); } });

Related

Smoothly navigation bar with javascript/ css

How to move text up when scrolling down?

jQuery delay() to start when you scroll to a specific div

How Do I Toggle Tabs in JQuery

jQuery toggle fade: Can't get div to fade out/in on toggle

Categories

Resources