I'm trying to put go-to-top button in the bottom right angle of the screen. It should appear on scroll function, a disappear when I go back to top.
The button exists, but when I scroll down, it stays with "home page", so as I scroll more, it is not visible anymore. How to fix the problem? You can see my codes down here. Thanks a lot in advance!
window.onscroll = function(){goTop()};
let goTop = function() {
var rocket = document.querySelector(".go-to-top");
var scrollExt = document.body.scrollTop;
if(document.body.scrollTop > 500 || document.documentElement.scrollTop > 500){
rocket.style.display = "block";
} else{
rocket.style.position = "none";
}
};
let rocketClick = function() {
document.documentElement.scrollTop = 0;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<!--the rest of markup-->
<div class="rocket">
<a href="#" class="go-to-top">
<i class="fas fa-rocket"></i>
</a>
</div>
<script src="script.js"></script>
<!--closing markup-->
rocket.style.position:none would give your element the css style of position:none. none is not a valid value for the position property.
You can see the position values here -> CSS position
By the look of your code you would need to use display instead of position.
Also, you make a variable scrollExt and you do not use it. Plus, you make a rocketClick function but you do not call it on your element.
window.onscroll = function() {
goTop();
};
const goTop = function() {
const rocket = document.querySelector('.go-to-top');
const scrollExt = document.body.scrollTop;
if (scrollExt > 500 || document.documentElement.scrollTop > 500) {
rocket.style.display = 'block';
} else {
rocket.style.display = 'none';
}
};
const rocketClick = function() {
document.documentElement.scrollTop = 0;
};
main {
height:1500px;
background:red;
}
.go-to-top{
display: none;
z-index: 10;
position: fixed;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
transform: rotate(-45deg);
color: black;
padding: 10px;
text-decoration: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.go-to-top i{
font-size: 50px;
}
.go-to-top:hover{
cursor: pointer;
text-decoration: none;
}
<main></main>
<div class="rocket" onclick=rocketClick()>
<a href="#" class="go-to-top">
rocket icon
</a>
</div>
Suggestions :
Keep using let and const. Do not use var. Also, use const for your functions. You do not change the content of the functions anywhere so you can use const instead of let.
Add an animation(transition) to the scrollTop.
Related
I have two buttons on an HTML page, and I'm trying to show them once a button is pressed, but only one actually displays.
This is the HTML
<button onclick="testLeft()" class="item-description" id= "left-item-description">.</button>
<button onclick="testRight()" class="item-description" id= "right-image-description">.</button>
This is the CSS
.item-description {
display: none;
box-sizing: border-box;
position: fixed;
z-index: 4;
font-size: 35px;
font-weight: 600;
height: auto;
top: 30%;
padding: 10px 10px;
color:white;
background-color: transparent;
border-radius: 4px;
border: 3px solid black;
transition: all 0.2s ease;
}
#left-item-description {
margin-left: 10%;
margin-right: 60%;
}
#right-image-description {
margin-right: 10%;
margin-left: 60%;
}
And this is the javascript
function newGame(){
score = -1;
increaseScore();
correct = true;
for (let i = 0; i < used.length; i++){
used[i] = false;
}
indexLeft = shuffleIndex();
indexRight = shuffleIndex();
var left = document.getElementById("left-item-description");
var righ = document.getElementById("right-item-description");
left.style.display = "block";
left.innerText = items[indexLeft];
document.getElementById("left-item-image").src=images[indexLeft];
righ.style.display = "block";
righ.innerText = items[indexRight];
document.getElementById("right-item-image").src=images[indexRight];
}
The left button works perfectly how I want it to, but for some reason, the right button doesn't display
The element ID for your right button is "right-image-description" but in your Javascript you are trying to get "right-item-description".
change the id attribute from this:
var righ = document.getElementById("right-item-description");
to
var righ = document.getElementById("right-image-description");
and it should work.
I have a question.
When I click on a specific text button, I want to make the accordion box automatically calculated in height visible.
Now, the accordion box itself works in a way that clicks like a giant button, not a specific text button.
I want to modify the code that the 'active' class will add when the 'text button' is clicked, rather than the 'accordion box' is clicked.
I don't know how. I need your help.
Thank you!
TEST WEBSITE
if (matchMedia("all and (max-width: 812px)").matches) {
} else {
var acc = document.getElementsByClassName("info-box");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this;
if (panel.style.height) {
panel.style.height = null;
} else {
panel.style.height = panel.scrollHeight + "px";
}
});
}
}
.info-box {
display: block;
position: fixed;
bottom: 0;
left: 0;
height: 62px;
width: 100%;
transition: height 0.3s;
background: transparent;
z-index: 99;
}
.shopbtn {
display: inline-block;
position: fixed;
width: auto;
height: auto;
font-size: 12px;
font-weight: 300;
line-height: 12px;
letter-spacing: 1.4px;
z-index: 9999999999;
bottom: 12px;
left: 12px;
cursor: pointer;
text-transform: uppercase;
}
<div class="info-box" style>
<div class="shopbtn">Information</div>
test test test
</div>
So, i am having an issue with a div, when another div is generated (via javascript) below it, it is changing the size of the div.
// for the side nav message list
const chatList = function(list) {
let br = document.createElement("br")
for (let index in list) {
try {
let chat = list[index]
let chatBodyParent = document.createElement("div")
chatBodyParent.onclick = function() {
$("#message-list").empty()
api.listMessages(chat.chat.id)
document.getElementById("message-list").channelId = chat.chat.id
}
chatBodyParent.id = `chat-body-${chat.chat.id}`
let chatBody = document.createElement("div")
chatBody.className = "chat-body"
let chatImg = document.createElement("img")
chatImg.src = chat.chat.cover
if (!chat.chat.cover && chat.chat.type == 1) {
chatImg.src = "/dump/pfp.svg"
}
if (!chat.chat.cover && chat.chat.type == 3) {
chatImg.src = "/dump/public.png"
}
chatImg.className = "chat-img"
chatImg.setAttribute("align", "left")
chatBody.appendChild(chatImg)
let chatInfoContainer = document.createElement("div")
chatInfoContainer.className = "chat-info-container"
let chatName = document.createElement("span")
chatName.className = "chat-name"
chatName.innerText = chat.chat.title
chatInfoContainer.appendChild(chatName)
chatInfoContainer.appendChild(br.cloneNode(true))
let chatMessageContent = document.createElement("span")
chatMessageContent.className = "chat-message-content"
chatMessageContent.id = `chat-message-content-${chat.chat.id}`
let messageContent
if (chat.message) {
let long = false;
if (chat.message.text.length >= 30) {
long = true
}
messageContent = chat.message.text.substring(0, 30)
if (long) {
messageContent += "..."
}
} else if (chat.type == "file") {
messageContent = chat.user.nick + " sent a file"
}
chatMessageContent.innerText = messageContent
chatInfoContainer.appendChild(chatMessageContent)
chatBody.appendChild(chatInfoContainer)
chatBodyParent.appendChild(chatBody)
document.getElementById("chat-list").appendChild(chatBodyParent)
} catch {
console.log(list[index])
}
}
}
.sidenav {
height: 100%;
width: 15%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: var(--lightish-grey);
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 15%;
padding: 0px 10px;
overflow-x: hidden;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
::-webkit-scrollbar {
color: var(--grey);
}
::-webkit-scrollbar-corner {
color: var(--grey);
}
::-webkit-scrollbar-track {
color: var(--grey);
}
.menu {
width: 90%;
min-width: 90%;
height: 200px;
margin-left: 5%;
margin-right: 5%;
background-color: var(--menu-grey);
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-bar {
position: fixed;
bottom: 1%;
width: 50%;
height: 3.5%;
padding: 0px 5px;
margin: 8px 0;
display: inline-block;
border-top: hidden;
border-left: hidden;
border-right: hidden;
border-bottom: solid var(--light-grey);
box-sizing: border-box;
background-color: var(--grey);
color: var(--light-grey);
font-family: "FontRegular";
}
.chat-bar:focus {
outline-width: 0;
}
.chat-body {
width: 90%;
height: 50px;
margin-left: 5%;
border: 3px;
border-top: hidden;
border-left: hidden;
border-right: hidden;
/*border-bottom: solid var(--light-grey);*/
padding-top: 10px;
padding-bottom: 5px;
font-family: "FontRegular";
}
.chat-body:hover {
opacity: 0.8;
cursor:pointer;
}
.chat-body:focus {
opacity: 0.8;
}
.chat-img {
height: 50px;
width: auto;
border-radius: 50%;
}
.chat-info-container {
position:relative;
top: 10%;
}
<!DOCTYPE html>
<html>
<head>
<title>iFChat - Dashboard</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/dashboard.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script type="text/javascript" src="/js/api.js"></script>
<script type="text/javascript" src="/js/dashboard.js"></script>
</head>
<div class="sidenav">
<div id="menu" class="menu">
</div>
<div>
</div> <br><br>
<div id="chat-list">
</div>
</div>
<div class="main" id="main">
<div id="message-list" class="message-list">
</div>
<input type="text" name="chat..." id="chat-bar" class="chat-bar" placeholder="chat..." maxlength="500">
</div>
</html>
Here is an image before the chat list is loaded
Then menu is loaded with the correct size and margin
pre-load
after the chat list loads, it changes the width or margin of the div above some how, and im not sure how or why its doing that, but i cant figure it out, heres an image of after the chat list is loaded post-load
i have tried different margins and positioning settings but cant seem to get it to work, any help is greatly appreciated :)
edit: One possible solution may be to change the css with javascript every time the chat list is loaded, but i would like to avoid that if at all possible.
OK, so i figured out the issue, the issue occurs when enough elements pop up to trigger the scrollbar, so the fix for me was this
::-webkit-scrollbar {
display: none;
}
Because i want a user to beable to scroll, but i dont want there to be a scrollbar, My next plan is to make this static, so that it doesnt move on scroll at all. Still the issue was arising when my (invisible scroll bar, that still had a width) was appearing. Gotta watch out for hidden elements.
I want to make an animation with a button with JS when the button is shown. The user is scrolling and when the screen scroll reaches 20px, the button is shown. While showing, I want the button to glide to a certain part of the screen, where it will be placed until it is hidden. This is the JS and HTML:
var to_top_button = document.getElementById("to-top-button");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
to_top_button.style.display = "block";
to_top_button.style.transition = "all 90s";
}else{
to_top_button.style.display = "none";
}
}
body{
height: 500px;
}
#to-top-button{
display: none;
position: relative;
height: 5vw;
width: 5vw;
background: yellow;
position: fixed;
margin-left: 88%;
bottom: 3vw;
font-size: 3vw;
border-radius: 4vw;
border: none;
cursor: pointer;
z-index: 50;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<button onclick="to_top()" id="to-top-button"><i class="fa fa-arrow-up" aria-hidden="true"></i></button>
</body>
So as you can see, when the page is scrolled, the button is shown. I want to do an animation for when the button is shown, I want it to glide from the right border of the screen every time it is shown, but I don't know how to make animations on JS.
How can I make it? Thanks!
To achieve what you want you first need to position your button out of the screen to the right. You can achieve this by manipulating the right property in css.
right: -5vw;
When you reach the desired scoll position, change the value you want.
right: 5vw;
The full code will be.
<style>
body {
height: 10000px;
}
#to-top-button {
height: 5vw;
width: 5vw;
background: yellow;
position: fixed;
bottom: 3vw;
right: -5vw;
font-size: 3vw;
border-radius: 4vw;
border: none;
cursor: pointer;
z-index: 50;
}
</style>
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
to_top_button.style.right = "5vw";
to_top_button.style.transition = "all 1s";
} else {
to_top_button.style.right = "-5vw";
}
}
I've tried to look for a solution for this but have failed miserably. It's my first ever time using JS (I'm trying to learn) so the possibility of my just not understanding the answers in the search results properly is quite high - sorry about that.
I am wanting a JS carousel, generated from an array, with Prev/Next buttons (ideally responsive etc but that'll come at a later stage), preferably with captions underneath. I can get the carousel to work but I end up getting a text link when I click on either Prev or Next. And I've no idea how to add the caption array underneath (I've taken out the JS for the captions for now because it was messing everything else up even further).
Relevant HTML:
<body onload="changePilt()">
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<img class="karu" name="esislaid">
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 name="esikiri"></h3>
</div>
</body>
CSS, just in case:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
margin-top: -22px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
}
#media (max-width:767px){.karu{max-width: 95%;}}
And finally, the dreaded JS:
var i = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Change Image
function changePilt (){
document.esislaid.src = esileht[i];
if(i < esileht.length -1){
i++;
} else {
i = 0;
}
setTimeout("changePilt()", aeg);
}
document.onload = function() {
}
// Left and Right arrows
//J2rgmine
function jargmine(){
s = s + 1;
s = s % esileht.length;
return esileht [s];
}
//Eelmine
function eelmine(){
if (s === 0) {
s = esileht.length;
}
s = s -1;
return esileht[s];
}
document.getElementById('prev').addEventListener('click', function (e){
document.getElementById('karussell').innerHTML = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.getElementById('karussell').innerHTML = jargmine();
}
);
I'm sure the solution is dreadfully obvious, I just cannot seem to be able to figure it out...
instead of innerHTML change src attribute of image
document.querySelector('#karussell img').src = eelmine();
And
document.querySelector('#karussell img').src = jargmine();