Spinning menu button HTML/CSS/JS - javascript

I tried making a spinning menu button for a website. I want it to spin and change its content when clicked, then turn back when it's clicked again
Here is my code :
//Shops
const shopButtons = document.querySelector('.shopButtons')
//Shop animation on click
shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));
.shopButtons {
background-color: blue;
border: 3px solid black;
border-radius: 40px;
position: fixed;
bottom: 15px;
left: 15px;
width: 80px;
height: 80px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
transition: .75s;
transform: rotate(-359deg);
}
.shopButtons.openMenu {
background-color: rgb(0, 0, 120);
}
.shopButtons::after {
content: '\1F6D2';
color: white;
font-size: 3em;
transition: background-color .75s;
margin: auto;
border-radius: inherit;
}
.openMenu {
transition: .75s;
transform: rotate(0deg);
}
.openMenu::after {
background-color: rgb(0, 0, 120);
color: white;
content: '\00D7';
font-size: 50px;
}
<html lang="en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Website</title>
</head>
<body>
<button class="shopButtons" id="mainShop"></button>
<script src="../scripts/script.js"></script>
</body>
</html>
I think it works pretty well (not sure if the code is optimized though), but I am struggling to make it so the shopping cart icon only appears when the button isn't rotating.
As of right now it works when the menu is opened, but on exit, the shopping cart appears before the rotation animation is over
Is there a simple way to do this ?
I have tried delaying the rotation animation, but this only lead to a very slow animation. I also tried delaying the image change using JavaScript, but it wasn't functional.

What is happening is that you are rotating the entire button, rather than the icons. So the shopping cart will always spin.
What I did here is removed the transformation from the .shopButtons button. Then added a 360deg rotation to just the .openMenu button.
Maybe this is an easy solution for you.
//Shops
const shopButtons = document.querySelector('.shopButtons')
//Shop animation on click
shopButtons.addEventListener('click', () => shopButtons.classList.toggle('openMenu'));
.shopButtons {
background-color: blue;
border: 3px solid black;
border-radius: 40px;
position: fixed;
bottom: 15px;
left: 15px;
width: 80px;
height: 80px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.shopButtons.openMenu {
background-color: rgb(0, 0, 120);
}
.shopButtons::after {
content: '\1F6D2';
color: white;
font-size: 3em;
transition: background-color .75s;
margin: auto;
border-radius: inherit;
}
.openMenu {
transition: .75s;
transform: rotate(360deg);
}
.openMenu::after {
background-color: rgb(0, 0, 120);
color: white;
content: '\00D7';
font-size: 50px;
}
<html lang="en">
<head>
<link rel="stylesheet" href="../css/style.css">
<title>Website</title>
</head>
<body>
<button class="shopButtons" id="mainShop"></button>
<script src="../scripts/script.js"></script>
</body>
</html>

Related

Can someone help me get autorotatespeed working in my 3js project?

I know HTML but very little javascript. I created a simple project on https://modelviewer.dev/editor/ and I downloaded my scene that included an html file, js, css, etc. It's a simple autorotating model, that's it. I want to control the speed and the direction of the rotation and for the life of me I cannot figure it out.
In the HTML the editor created there are camera control variables. It includes "auto-rotate" but not autoRotateSpeed. I added that to the html and it won't work. In the 3js docs it says I have to "call .update () in your animation loop." I don't know how to do that (I tried) and I don't know what file in the directory to place that code into.
If anyone is kind enough to help an idiot, would you kindly let me know the code and what document I should put the code into? It would be greatly appreciated.
I zipped up the project files here in case I screwed up what I pasted below. http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_test/3js-test.zip
// Handles loading the events for <model-viewer>'s slotted progress bar
const onProgress = (event) => {
const progressBar = event.target.querySelector('.progress-bar');
const updatingBar = event.target.querySelector('.update-bar');
updatingBar.style.width = `${event.detail.totalProgress * 100}%`;
if (event.detail.totalProgress === 1) {
progressBar.classList.add('hide');
} else {
progressBar.classList.remove('hide');
if (event.detail.totalProgress === 0) {
event.target.querySelector('.center-pre-prompt').classList.add('hide');
}
}
};
document.querySelector('model-viewer').addEventListener('progress', onProgress);
:not(:defined) > * {
display: none;
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
model-viewer {
width: 100%;
height: 90%;
background-color: #ffffff;
}
.progress-bar {
display: block;
width: 33%;
height: 10%;
max-height: 2%;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
border-radius: 25px;
box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(255, 255, 255, 0.9);
background-color: rgba(0, 0, 0, 0.5);
}
.progress-bar.hide {
visibility: hidden;
transition: visibility 0.3s;
}
.update-bar {
background-color: rgba(255, 255, 255, 0.9);
width: 0%;
height: 100%;
border-radius: 25px;
float: left;
transition: width 0.3s;
}
#ar-button {
background-image: url(http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_testar_icon.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: 12px 50%;
background-color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
bottom: 16px;
padding: 0px 16px 0px 40px;
font-family: Roboto Regular, Helvetica Neue, sans-serif;
font-size: 14px;
color:#4285f4;
height: 36px;
line-height: 36px;
border-radius: 18px;
border: 1px solid #DADCE0;
}
#ar-button:active {
background-color: #E8EAED;
}
#ar-button:focus {
outline: none;
}
#ar-button:focus-visible {
outline: 1px solid #4285f4;
}
#keyframes circle {
from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
to { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}
#keyframes elongate {
from { transform: translateX(100px); }
to { transform: translateX(-100px); }
}
model-viewer > #ar-prompt {
position: absolute;
left: 50%;
bottom: 60px;
animation: elongate 2s infinite ease-in-out alternate;
display: none;
}
model-viewer[ar-status="session-started"] > #ar-prompt {
display: block;
}
model-viewer > #ar-prompt > img {
animation: circle 4s linear infinite;
}
<!doctype html>
<html lang="en">
<head>
<title><model-viewer> template</title>
<meta charset="utf-8">
<meta name="description" content="<model-viewer> template">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_test/styles.css" rel="stylesheet"/>
<!-- OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->
<script src="https://unpkg.com/focus-visible#5.0.2/dist/focus-visible.js" defer></script>
</head>
<body>
<!-- <model-viewer> HTML element -->
<model-viewer src="http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_test/final2.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_test/poster.webp" shadow-intensity="2" shadow-softness="1" exposure="0.23" min-camera-orbit="360deg 66deg 141m" max-camera-orbit="150deg 145deg auto" min-field-of-view="30deg" camera-orbit="150deg 91.39deg 741m" field-of-view="30deg" camera-target="-9.416m 62.5m -57m" auto-rotate autorotatespeed="1.0m">
<div class="progress-bar hide" slot="progress-bar">
<div class="update-bar"></div>
</div>
<button slot="ar-button" id="ar-button">
View in your space
</button>
<div id="ar-prompt">
<img src="http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_test/ar_hand_prompt.png">
</div>
</model-viewer>
<script src="http://www.LeskoFolio.com/Work/Freelance/Carnegie_Robotics/3js_test/script.js"></script>
<!-- Loads <model-viewer> for browsers: -->
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
</body>
</html>

Chrome Extension; Adding a CSS styled button into page

I am trying to make a floating 'Scroll down' button. For the first part, I am trying to add the button to a page. This is what I did:
ContentScript.js
document.body.onload = addElement;
function addElement () {
var stb = document.createElement("button");
stb.className = "stb";
document.body.appendChild(stb);
}
scrolldownbutton.css
.stb {
position: fixed;
display: block;
bottom: 50px;
right: 20px;
z-index: 10001;
width: 37px;
height: 37px;
padding: 0;
font-size: 24px;
text-align: center;
line-height: 1;
cursor: pointer;
border-radius: 19px;
text-decoration: none;
transition: opacity 0.7s ease-out;
opacity: 0;
background: url(tobottom.png) rgba(1, 96, 121, 1) no-repeat 50% 50%;
color: rgba(255, 255, 255, 1.00);
box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);
}
However, I can't see any button added. Can someone tell me what is wrong with my code? I am still new to javascript and css, so any help will be welcome!
On the .stb css class, remove the opacity: 0;

How will the page scroll to the next section if the arrow is clicked?

I want that when I click on the arrow, the website will scroll down to the next section, called rest in my code. So it will move 100vh. I don't know how I must do this, I think there must be some JS in it. Does anyone know how I can get what I want? See image below, so it will be clear. Thanks in advance!
HTML:
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<button class="button">
<div class="button__arrow button__arrow--down"></div>
</button>
</div>
<div class="rest">
</div>
</body>
</html>
CSS:
.bg{
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom:8%;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest{
width: 100%;
height: 100vh;
background-color: aliceblue;
}
Image:
Simple approach using scroll-behavior: smooth; and a tag instead of button.
window.onscroll = function () {
var height = $(window).height();
var scrollTop = $(window).scrollTop();
var obj = $('#scroll');
var pos = obj.position();
if (height + scrollTop < pos.top) {
$('.button').fadeIn();
}
else {
$('.button').fadeOut();
}
}
html {
scroll-behavior: smooth;
}
.bg {
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom: 8%;
background: #ccc;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest {
width: 100%;
height: 100vh;
background-color: aliceblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<a href="#scroll" class="button">
<div class="button__arrow button__arrow--down"></div>
</a>
</div>
<div id="scroll" class="rest"></div>
</body>
</html>
I think you can do it by simply putting arrow in tag and in href give the id of rest.
CSS:
.bg{
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom:8%;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest{
width: 100%;
height: 100vh;
background-color: aliceblue;
}
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<button class="button">
<div class="button__arrow button__arrow--down"></div>
</button>
</div>
<div class="rest" id="rest">
</div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-
scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="bg">
<button class="button">
<div class="button__arrow button__arrow--down" id="button__arrow
button__arrow--down" onClick="topFunction()"></div>
</button>
</div>
<div class="rest">
</div>
<script>
var mybutton = document.getElementById("button__arrow button__arrow--
down");
var close = document.getElementsByClassName("button")[0];
function topFunction() {
document.body.scrollTop = 1000;
document.documentElement.scrollTop = 1000;
}
var close = document.getElementsByClassName("button")[0];
close.onclick = function() {
close .style.display = "none";
}
</script>
<style>
.bg{
width: 100%;
height: 100vh;
background-color: black;
}
.button {
border-radius: 20px;
padding: 8px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
position: fixed;
bottom:8%;
}
.button__arrow {
background-color: transparent;
height: 12px;
width: 12px;
}
.button__arrow--down {
border-bottom: 3px solid rgba(0, 0, 0, 0.3);
border-right: 3px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.rest{
width: 100%;
height: 100vh;
background-color: aliceblue;
}
</style>
</body>
</html>
see this https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollBy
window.scrollBy(0, window.innerHeight);

Why is some of my CSS formating lost when using Ajax to call a URL that also passes variables

The link below works perfectly when I copy and paste it directly in to the browser.
https://my_web_site.com/leads_2020_card.php?State_Code_table=ID&category=gas&longitude=-117.400&latitude=46.500
But when I use the following function to call the same page, I loose by background color in leads_2020_card.php, and the starting container is shifted down about an inch. But everything else works and displays properly in the remaining script. FYI, the script below is in a file called php_loader.php" The loader displays until "leads_2020_card.php" finishes a large database search
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">.</script>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Montserrat';
background: black;
color: #fff;
}
.center {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.ring {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
animation: ring 2s linear infinite;
}
#keyframes ring {
0% {
transform: rotate(0deg);
box-shadow: 1px 5px 2px #e65c00;
}
50% {
transform: rotate(180deg);
box-shadow: 1px 5px 2px #18b201;
}
100% {
transform: rotate(0360deg);
box-shadow: 1px 5px 2px #0456c8;
}
}
.ring::before {
position: absolute;
left: 0;
content: "";
top: 0;
height: 100%;
width: 100%;
border-radius: 50%;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}
span {
color: #737373;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 200px;
animation: text 3s ease-in-out infinite;
}
#keyframes text {
50% {
color: black;
}
}
</style>
<script>
function loadingAjax(div_id)
{
$("#"+div_id).html('<div class="center"><div class="ring"></div><br><br><font color="white" face="arial" size="4"><b>Searching<br><?php echo $total_table_rows ?> records<div onload="myTimer();" style="color:white" id="demo"></div> <br>Please Wait ...</b></font></div>');
$.ajax({
type: "POST",
url: "leads_2020_card.php?",
data: "State_Code_table="+State_Code_table + "&category="+category+"&longitude="+zip_geo_longitude+"&latitude="+zip_geo_latitude,
success: function(msg){
$("#"+div_id).html(msg);
}
});
}
</script>

How to show div on page load?

I am referring to following link:
http://netdna.webdesignerdepot.com/uploads7/creating-a-modal-window-with-html5-and-css3/demo.html
Here, the div ( modal window ) is loaded after clicking on the link.
I am trying to get rid of that link and open that modal on page load.
My code is as follows:
Everything is same except I have added scripts and removed the link
<!DOCTYPE html>
<html>
<head>
<title>Modal Window</title>
<style type="text/css">
.modalDialog
{
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target
{
opacity: 1;
pointer-events: auto;
}
.modalDialog > div
{
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close
{
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover
{
background: #00d9ff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#openModal").show();
});
</script>
</head>
<body>
<div id="openModal" class="modalDialog">
<div>
X
<h2>
Modal Box</h2>
<p>
This is a sample modal box that can be created using the powers of CSS3.</p>
<p>
You could do a lot of things here like have a pop-up ad that shows when your website
loads, or create a login/register form for users.</p>
</div>
</div>
</body>
</html>
Similar question is asked here: How to Auto Popup a CSS3 Modal Window When Page Loads?
But its not helping.
I have also tried following scripts without any luck:
$(document).ready(function() {
$("#openModal").click();
});
$(document).ready(function() {
$(".modalDialog").show();
});
I must be doing something wrong here.
Any ideas?
The problem is that .show() is not changing the opacity of $("#openModal")
do
$(document).ready(function() {
// the first arg is duration of the effect, second is the opacity to end at
$("#openModal").fadeTo(500, 1);
});
Check out the Fiddle
As the OP pointed out the "dismiss Model Button" was not working
Updated Fiddle Demostrating a working dismiss button
as #Charaf jra suggested,
you should trigger the click with:
$(document).ready(function() { $("#openModal").trigger('click'); });
on the other hand,
most of the chances are you can trigger it onload with:
$(document).ready(function() { $(".modalDialog").modal() }
$(window).load(function(event){
$(".modalDialog").show();
})
To trigger click event , use trigger() :
$(document).ready(function() {
$("#openModal").trigger('click');
});
You have opacity: 0; for .modalDialog. In this case you need to use fadeTo instead of show.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".modalDialog").fadeTo(1,1);
});
</script>

Categories