I have a back to top link however it shows even when the page is at the top
<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>
I would like it to be hidden until the user starts to scroll the page - is this possible? If so, how?
The other thing that I have tried and tried to do is make the link change on hover with opacity but it doesn't seem to be working - can anyone see where I have gone wrong.
CSS
.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
opacity: 0;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}
.w-toplink:hover {
opacity: 0.7;
}
jQuery:
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
$toplink = $('.w-toplink');
if(scrollTop > 0){
$toplink.addClass('active');
} else{
$toplink.removeClass('active');
}
});
CSS:
.w-toplink{opacity:0; transition: opacity 200ms ease-in;}
.w-toplink.active{opacity:0.7;}
.w-toplink:hover{opacity:1;}
Edit I've added some extra code for you.
.w-toplink is hidden by default
When the user scrolls it becomes 0.7opacity (through the class .active)
When the users hovers the link, it becomes fully visible (opacity:1)
Do this :
$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
$('.w-toplink').fadeIn(250);
} else {
$('.w-toplink').fadeOut(250);
}
});
And add this to your CSS file :
.w-toplink {
display: none;
}
Sounds like fun...
It is possible you have to simply put an eventListener for Scroll.
which is possible in either vanillaJS or jQuery...
see this for more about scroll: https://api.jquery.com/scroll/
<a class="w-toplink active" href="#"><i class="fa fa-chevron-up"></i></a>
(Assuming you are already using the jQuery CDN.
<script type="text/javascript">
$("a.w-toplink").hide();
$( window ).scroll(function() {
$( "a.w-toplink" ).css( "display", "visible" ).fadeIn( "slow" );
});
$("a.w-toplink").hide();
$(window).scroll(function() {
$("a.w-toplink").show();
});
.w-toplink {
display: block;
position: fixed;
bottom: 0;
right: 30px;
text-align: center;
font-size: 14px;
padding-top:15px;
line-height: 50px;
height: 30px;
width: 50px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
}
Back to to top
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
<ul>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample
<p>Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...Lorem Ipsum and stuff...Lorem
Ipsum and stuff...Lorem Ipsum and stuff... Lorem Ipsum and stuff... Lorem Ipsum and stuff...
</p>
</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
<li>Sample</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>
Related
I'm trying to create a sticky navigation bar that animates(gets smaller) when scrolling. I followed a video on youtube on creating it but it doesn't seem to be working for me every time I try to input the javascript.
$(window).on('scroll', function() {
if (window).scrollTop(); {
$('nav').addClass('black');
} else {
$('nav').removeClass('black');
}
})
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', Helvetica, sans-serif;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: 0.6s;
}
nav.black {
background: rgba (0, 0, 0, 8);
}
nav .logo {
float: left;
}
nav .logo img {
height: 80px;
transition: 0.6s;
}
nav .logo a {
position: fixed;
padding-top: 25px;
font-family: 'Montserrat', Helvetica, sans-serif;
font-weight: 600;
color: #fff;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.6s;
}
nav ul {
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
font-weight: 550;
}
nav ul li a {
line-height: 80px;
color: #fff;
padding: 5px 20px;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
text-transform: uppercase;
transition: 0.6s;
}
nav ul li a:hover {
color: #000;
background: #fff;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(./traffic.jpg);
background-size: cover;
}
section.sec2 {
width: 100%;
height: 100vh;
background: url(./traffic.jpg);
background-size: cover;
}
section.content {
padding: 100px;
}
section.content h1 {
margin: 0;
padding: 0;
font-size: 2em;
}
section.content p {
margin: 20px 0 0;
padding: 0;
font-size: 1.1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Website</title>
<link rel="stylesheet" href="maint.css">
</head>
<body>
<nav>
<div class="logo">
<img src="trafficlight.png" style="width: 80px;">
WebSite Name
</div>
<ul>
<li>First</li>
<li>Packages</li>
<li>Classses</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
<section class="sec1"></section>
<section class="content">
<h1>LoremIpsumLorem<br></h1>
<p>LoremIpsumLoremIpsumLoremIpsum <b>LoremIpsum</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
</section>
</body>
</html>
Ok. So. A couple of things to note:
The js line with if(window).scrollTop();{ has two syntax issues:
Parenthesis should wrap around the WHOLE statement that you are concerned with verifying.
You are terminating the statement BEFORE you open your if statements body.
It is generally a best practice to wait until the html document has loaded, before attempting to set up any listeners.
Here's the JS that I propose for your case (filler css added to highlight):
$(document).ready(function() {
$(window).on("scroll", function() {
console.log("scroll position: ", $(document).scrollTop());
if ($(document).scrollTop() > 0) {
$("nav").addClass("black");
} else {
$("nav").removeClass("black");
}
});
});
.black {
background-color: green;
}
body,
section {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<div class="logo">
<img src="trafficlight.png" style="width: 80px;">
WebSite Name
</div>
<ul>
<li>First</li>
<li>Packages</li>
<li>Classses</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
<section class="sec1"></section>
<section class="content">
<h1>LoremIpsumLorem<br></h1>
<p>LoremIpsumLoremIpsumLoremIpsum <b>LoremIpsum</b></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
<p>Lorem Ipsum is simply dummy <u>Lorem Ipsum</u> and <u>Lorem Ipsum</u>.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
<b>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</b></p>
</section>
How do I make actual dots on the slideshow as I currently just get buttons with numbers on them. I have no idea how to do this, or where to put it. Can anyone help? The code on my site is exactly what I was told to do on a site, but it doesn't work. This is a brand new site that has not yet been published anywhere.
#slideshow .slick-slide { min-height: 1180px;
}
#slideshow .slick-dots {
transform: translateY(-50);
position: relative;
z-index: 10;
bottom: 50px;
display: flex;
justify-content: center;
margin: 0;
padding: 1rem 0;
list-style-type: none;
li {
margin: 0 0.25rem;
}
button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
border: none;
border-radius: 100%;
background-color: blue;
text-indent: -9999px;
}
li.slick-active button {
background-color: red;
}
}
<div id="slideshow">
<div style="background:url(CSS/Images/SunnyBistro-7%20edited.jpg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 1</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
<div style="background:url(CSS/Images/Gaming-3.jpeg) center no-repeat; background-size:cover;">
<div class="slider-content">
<h2> Slider Title 2</h2>
<p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/stickynavbar.js/1.3.4/jquery.stickyNavbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.header ').stickyNavbar();
$('#slideshow').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
autoplay:true,
autoplayspeed: 2000,
});
})
</script>
you need to add:
slick.css
slick-theme.css
I have a list:
<ol class="list" id="drag-list">
<li data-itemid="01" draggable="true">
<span class="dragger"></span>
<span>01 - Lorem ipsum dolor sit amet.</span>
</li>
<li data-itemid="02" draggable="true">
<span class="dragger"></span>
<span>02 - Lorem ipsum dolor.</span>
</li>
<li data-itemid="03" draggable="true">
<span class="dragger"></span>
<span>03 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</li>
<li data-itemid="04" draggable="true">
<span class="dragger"></span>
<span>04 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aliquam dolore totam, labore, voluptate delectus?</span>
</li>
<li data-itemid="05" draggable="true">
<span class="dragger"></span>
<span>05 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, soluta.</span>
</li>
</ol>
Now I need to reorder the LI's members using the HTML5 drag 'n drop.
My issue is that releasing in the new position never happens. I even tried to use this example but it did not work for me:
https://html.spec.whatwg.org/multipage/dnd.html#event-drag
Here I leave you a jsfiddle with my full working (and wrong) code. May you help me please.
https://jsfiddle.net/junihh/vrg7oj2w/
you can try this
var dragSrcEl = null;
function handleDragStart(e) {
// Target (this) element is the source node.
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.outerHTML);
this.classList.add('dragElem');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault(); // Necessary. Allows us to drop.
}
this.classList.add('over');
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
}
function handleDragEnter(e) {
// this / e.target is the current hover target.
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
this.parentNode.removeChild(dragSrcEl);
var dropHTML = e.dataTransfer.getData('text/html');
this.insertAdjacentHTML('beforebegin',dropHTML);
var dropElem = this.previousSibling;
addDnDHandlers(dropElem);
}
this.classList.remove('over');
return false;
}
function handleDragEnd(e) {
this.classList.remove('over');
}
function addDnDHandlers(elem) {
elem.addEventListener('dragstart', handleDragStart, false);
elem.addEventListener('dragenter', handleDragEnter, false)
elem.addEventListener('dragover', handleDragOver, false);
elem.addEventListener('dragleave', handleDragLeave, false);
elem.addEventListener('drop', handleDrop, false);
elem.addEventListener('dragend', handleDragEnd, false);
}
var cols = document.querySelectorAll('#drag-list li');
[].forEach.call(cols, addDnDHandlers);
* {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
-webkit-tap-highlight-color: rgba(0,0,0,0);
list-style: none;
outline: 0;
}
html {
position: relative;
width: 100%;
height: 100%;
background-color: #FFF;
font: normal 18px/100% Helvetica,Arial,sans-serif;
color: #666;
}
.transitions, a, .page {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
a {
color: #000;
text-decoration: underline;
}
a:hover { text-decoration: none; }
.page {
max-width: 750px;
min-width: 230px;
margin: 25px auto;
padding: 0 25px;
}
.list li {
position: relative;
overflow: hidden;
margin-bottom: 5px;
border: 1px solid #DDD;
cursor: move; //effect drag and drop
}
.list span {
display: block;
}
.list span:nth-child(1) {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 25px;
background-color: #EEE;
}
.list span:nth-child(2) {
padding: 10px 10px 10px 40px;
line-height: 120%;
}
<ol class="list" id="drag-list">
<li draggable="true">
<span class="dragger"></span>
<span>01 - Lorem ipsum dolor sit amet.</span>
</li>
<li draggable="true">
<span class="dragger"></span>
<span>02 - Lorem ipsum dolor.</span>
</li>
<li draggable="true">
<span class="dragger"></span>
<span>03 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</li>
<li draggable="true">
<span class="dragger"></span>
<span>04 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aliquam dolore totam, labore, voluptate delectus?</span>
</li>
<li draggable="true">
<span class="dragger"></span>
<span>05 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, soluta.</span>
</li>
</ol>
Add the dragover and drop events to the list.
Reference:
https://developer.mozilla.org/en-US/docs/Web/Events/drop
So what I want to do first is to set a variable for the parent using the id of it. Then I want to use this variable to find the css class of the parent and set a new variable again. It's important use the variable for the parent's id because later I want to change HTML style of this class with the specific id. My JS works fine without "var parent = parentid.find('.parent');"... I don't know what's wrong.
var parentid = document.getElementById('1');
var parent = parentid.find('.parent');
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
jQuery's .find() doesn't include the selector itself into it's search, you have to use .closest() (begins with the current element) instead:
var parentid = $('#1');
var parent = parentid.closest('.parent');
$(parent).css('background-color', 'gold');
.parent {
width: 150px;
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" id="1">
The CSS 'background-color' property is PINK.
</div>
In your example, as long as the element only has a single class, you can just reference className
var parentid = document.getElementById('1');
var parent = document.getElementsByClassName(parentid.className)[0];
parent.style.background = "yellow";
.parent {
width: 150px;
line-height: 2.5ex;
max-height: 12.5ex;
border: 1px solid red;
background: white;
margin: 10px;
padding: 10px;
overflow: hidden;
}
<div class="parent" id="1">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</div>
hi there i'm trying to show a hidden div when scrolling down from the top of the browser page, like the Accordion function. What i'm using here is this Code:
HTML:-
// Visible DIV
<div class="firstBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Hiddden DIV
<div class="textBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
// Visible DIV
<div class="secondBlock">
<p>Lorem ipsum dolor sit Amet, consectetuer adipiscing.</p>
</div>
CSS:-
.textBlock {
text-align: center;
height: 104px;
width: 100%;
float: left;
display: none;
}
.textBlock p {
font-size: 16px;
font-family: arial,helvetica,sans-serif;
padding: 10% 5%;
line-height: 20px;
}
jQuery:-
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 600) {
$(".textBlock").fadeIn();
} else {
$(".textBlock").stop().fadeOut();
}
});
});
but it needs some modification in order to work like Accordion-Function.
If you want the accordion effect you should use the slideDown and slideUp functions (docs here), like so:
http://jsfiddle.net/b7yomjd0/3/