Develop Reference

Rotating icon if clicked on list item with javascript

So for My navbar I want to let my arrow rotate 180 degrees when clicked, although I have tried many things with CSS or JavaScript, I don't know what is the most efficient way to go about this. The icon I chose is imported from font-awesome.
I tried implementing javascript to get it done, didn't figure it out yet. Should CSS do the trick or do am I doing something majorly wrong here?
const acc = document.getElementsByClassName("switch");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
this.classList.toggle("iconUp");
});
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="images/logo_image.svg" alt="logo"> <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>

I added a tiny js script and 2 css class. Also changed the icon to an arrow so you can see it moving.
document.querySelector('#Demobutton').addEventListener("click",
(e)=>{
document.querySelector('header .logo').classList.toggle('rotate');
}, false)
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600;626&display=swap');
body {
display:block;
margin:8px;
}
li, a {
font-family: "Open Sans", sans-serif;
font-size:14px;
text-decoration:none;
font-weight:600px;
color:black;
}
header {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 10%;
}
.Nav_links {
list-style: none;
}
.Nav_links li {
display: inline-block;
padding: 0px 20px;
}
.Nav_links li, a:hover {
transition: 400ms;
color:grey;
}
#Login_nav {
display:flex;
align-items:center;
gap:1rem;
}
.switchIconRotate {
transform-origin: center;
transition: all 0.2s linear;
}
.iconUp .fa-solid {
transform-origin: center;
transform: rotate(180deg);
}
#Demobutton {
cursor:pointer;
background-color: #4EC843;
border-radius:34px;
border:none;
color: white;
width:130px;
height:35px;
font-family:"Open Sans", sans-serif;
font-weight:600px;
font-size:14px;
}
#Demobutton:hover {
background-color: #20D62C;
transition:800ms;
}
#Navbarline {
width:80%;
border-width:1.5px;
opacity:15%;
}
/*my code*/
img.logo {
transition: transform 1s ease-in;
}
img.logo.rotate {
transform: rotate(360deg);
}
<header>
<script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script>
<img class="logo" src="https://uxwing.com/wp-content/themes/uxwing/download/02-arrow-direction/arrow-left.svg" alt="logo"> <!-- Svg needs to work -->
<nav> <!-- Navigation menu -->
<ul class="Nav_links">
<li><a class="switch" href="#">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></li>
<li>Pricing</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="Login_nav">
Login
<button id="Demobutton">Get demo</button>
</div>
</header>

Divs are moving around when resizing/zooming-in/out page

If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code And screenshot:Screenshot
<style>
/* KEYFRAMES */
/* IDS */
#changepos{
position:relative;
top:-250px;
}
#readmore{
position:relative;
top:-260px;
right:380px;
text-decoration-line:none;
border-radius:20px;
}
#movetext{
position:relative;
right:395px;
}
#wholepage{
width:500px;
margin-left:auto;
margin-right:auto;
}
#hello{
position:relative;
left:20px;
}
#hellos{
position:relative;
left:100px;
}
/* Body Visual */
input{
width:50%;
overflow:hidden;
}
main{
background-color:lightgray;
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-x:hidden;
}
body{
background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80');
min-height: 100%;
min-width:100%;
background-size:1550px 800px;
background-repeat: no-repeat;
overflow-wrap:hidden;
overflow-x:hidden;
}
/* Classes */
.typewriter {
font-family: Courier, monospace;
display: inline-block;
}
.typewriter-text {
display: inline-block;
overflow: hidden;
letter-spacing: 2px;
animation: typing 5s steps(30, end), blink .75s step-end infinite;
white-space: nowrap;
font-size: 30px;
font-weight: 700;
border-right: 4px solid orange;
box-sizing: border-box;
}
#keyframes typing {
from {
width: 0%
}
to {
width: 100%
}
}
#keyframes blink {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}
}
.forms{
position:relative;
left:50px;
}
.lineh{
border-bottom: 4px solid lightgray;
width:1400px;
height:3px;
cursor:default;
position:relative;
border-radius:100px;
top:-11px;
}
.lines{
border-bottom: 2px solid none;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
top:-195px;
right:400px;
}
.line{
 border-bottom: 2px solid pink;
width:1000px;
height:3px;
background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
cursor:default;
position:relative;
border-radius:100px;
}
.movepic{
position:relative;
left:270px;
top: -200px;
right:0px;
bottom:0px;
cursor:default;
opacity:1;
transition:1s;
}
.movepic:hover{
transform:translateX(20px);
}
.joint{
font-family:monospace;
font-size:10px;
text-decoration-line:none;
text-decoration-color:none;
text-decoration:none;
color:white;
}
.transp{
position:relative;
border-style:solid;
border-radius:50px;
background-color:none;
opacity:0.6;
cursor:pointer;
border:none;
overflow:hidden;
transition:1s;
border-image-width: 5px;
}
.transp:hover{
transform:translate(30px);
opacity:1;
transform-style: preserve-3d;
}
.container{
text-align: center;
margin-top: 360px;
}
.btn{
border: 1px solid #3498db;
background: none;
padding: 10px 20px;
font-size: 20px;
font-family:monospace;
cursor: pointer;
margin: 10px;
transition: 0.8s;
position: relative;
overflow: hidden;
}
.btn1,.btn2{
color: #3498db;
}
.btn3,.btn4{
color: #fff;
}
.btn1:hover,.btn2:hover{
color: #fff;
}
.btn3:hover,.btn4:hover{
color: #3498db;
}
.btn::before{
content: "";
position: absolute;
left: 0;
width: 100%;
height: 0%;
background: #3498db;
z-index: -1;
transition: 0.8s;
}
.btn1::before,.btn3::before{
top: 0;
border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
bottom: 0;
border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
height: 0%;
}
</style>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roma's Portfolio</title>
<link rel="stylesheet" href="../sait/css/main.css">
<link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="350">
<style>
.putebi{
width: 100%;
border-radius:4px;
padding:12px;
border:1px solid #d9a7c9;
box-sizing: border-box;
margin-top:6px;
margin-bottom:16px;
resize:vertical;
}
.med{
position:relative;
outline:none;
border-style:none;
opacity:0.6;
}
.med:hover{
opacity:1;
}
.soc{
animation:socebi 3s;
outline:none;
border-style:none;
}
#keyframes socebi{
from{
opacity:0;
transform:translateX(-600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
.kont{
animation: animacia 3s;
}
#keyframes animacia{
from{
opacity:0;
transform:translateX(600px);
}
to{
opacity:1;
transform:translateX(0px);
}
}
</style>
</head>
<body>
<div>
<div style="overflow-x:hidden;"id="hello" class="transp"> <h1> Roma's Portfolio</h1> </div>
</div>
<div class="lineh"></div>
<div class="wholepage">
<div style="text-align:center; text-decoration:none">
<a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a>
<a style="text-decoration-line:none" class="btn btn1 container">Contact</a>
<a style="text-decoration-line:none" class="btn btn1 container">Projects</a>
<a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br>
<div class="typewriter">
<q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q>
</div><br><br>
<div style="cursor:default;"class="soc">
<a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br>
<a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br>
</div>
<br><br><br>
</div>
</div>
</div>
<div id="wholepage">
<div id="movetext" style="color:white; font-family:monospace; font-size:large">
<h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br>
<h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3>
</div>
<div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div>
<div class="changepos lines kont">
</div>
<button id="readmore" class="btn btn3 kont">Read More</button><br><br>
</div>
<div style="position:relative; top:-180px">
<form action=""style="text-align:center">
<h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1>
<div class="typewriter">
<h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1>
</div><br>
<label style="font-family:;"for="saxeli">Enter Username</label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br>
<label id="email">Enter Email </label>
<input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br>
<label for="free">Enter Text </label>
<textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br>
<button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button>
</form>
<img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg">
</div>
</div>
<footer>
<p style="color:black; ">All Rights Reserved</p> -->
</footer>
</body>
</html>

It seems like, there is a problem with the background image, please try background-size: cover, if this also won't work then please share some more code using any online editor

The website is not responsive, add Media Queries to make your website look nice (the way you want) on any device screen size.

jQuery scroll down buttons won't work

I'm new to jQuery and I'm wondering why my scroll down button won't work. I have been looking at several forum feeds but I can't seem to figure out how to make it work. Here I'd like for the link-button with id="this_button" to make a smooth jump to id="group2".
The script to make the smooth scroll is pretty basic and has already been seen multiple times, so I can't figure out what I did wrong. If any of you has an idea of how to solve this, it'd be grateful (Does the parallax layers influence badly ?). Also, if something is not clear, don't hesitate to ask.
div = document.getElementById("div1").clientHeight;
list = document.getElementsByClassName("else");
for (var i = 0; i < list.length; i++) {
list[i].style.lineHeight=div-14+"px";
}
$(document).ready(function(){
$("a").on('click', function(event){
if (this.hash !== ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 800, function(){
window.location.hash = hash;
});
}
});
});
body{
font-family: 'Dosis';font-size: 19px;
margin: 0;
padding: 0;
}
header{
background-color: white;
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
}
header div{
margin:auto;
width:100%;
overflow: auto;
/*border:1px solid black;*/
}
header div ul{
list-style-type: none;
margin:auto;
width:100%;
}
header div ul li{
float:left;
/*border: .5px solid red;*/
}
header div ul li a{
display:block;
text-decoration: none;
color:black;
text-align:center;
transition: color .3s;
}
header div ul li a.first{
margin-left:100px;
margin-right:30px;
}
header div ul li a.else{
margin-left:20px;
margin-right:20px;
}
header div ul li a.active{
color:tomato;
}
#h2title{
margin-bottom:0px;
padding-bottom:0px;
margin-top: 0;
padding-top: 0;
}
header div ul li a:hover:not(.active){
color:tomato;
}
/*===========================================================================*/
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 150vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 50vh 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
border:1px solid black;
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
/* centre the content in the parallax layers */
.title {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
color:white;
}
.huge{
font-size: 400%;
}
#group1{
z-index: 2;
}
#group1 .parallax__layer--back{
background-color:black;
}
#group2{
z-index: 5;
}
#group2 .parallax__layer--base{
background-color: white;
}
.button{
background-color: white;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: none;
padding: 11px 25px;
position:absolute;
left: 50%;
top: 72%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
outline:2px solid black;
transition: .4s;
}
.button:hover{
background-color: rgb(255,99,71,0.3);
outline: 2px solid white;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="div1">
<ul>
<li style="position:relative; top:10px;">
<a class="first" href="sthenos.html">
<h2 id=h2title>STHENOS MOVEMENT</h2>
<p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
</a>
</li>
<li><p>Accueil</p></li>
<li><p>Toi dans tout ça</p></li>
<li><p>Services entreprises/autorités</p></li>
<li><p>À propos</p></li>
<li><p>Contact</p></li>
</ul>
</div>
</header>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
<div class="parallax__layer parallax__layer--base">
<div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
<div class="huge title">STHENOS MOVEMENT</div>
<div>
Découvrir l'association
</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BIEN</div>
</div>
</div>
</div>
</body>

It's just about hash property you use it's not functional with query, so instead you can do something like that
// I have commented that part because it's not related to the question
/*var div = document.getElementById("div1").clientHeight;
list = document.getElementsByClassName("else");
for (var i = 0; i < list.length; i++) {
list[i].style.lineHeight=div-14+"px";
}*/
$(document).ready(function(){
$("a").on('click', function(event){
if ($(this).attr('href') != ""){
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(this).offset().top}, 800, function(){
window.location.hash = hash;
});
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Animation</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="div1">
<ul>
<li style="position:relative; top:10px;">
<a class="first" href="sthenos.html">
<h2 id=h2title>STHENOS MOVEMENT</h2>
<p style="margin-top:0px; padding-top:0px; margin-bottom:0; padding-bottom:0;">Lausanne</p>
</a>
</li>
<li><p>Accueil</p></li>
<li><p>Toi dans tout ça</p></li>
<li><p>Services entreprises/autorités</p></li>
<li><p>À propos</p></li>
<li><p>Contact</p></li>
</ul>
</div>
</header>
<body>
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--back"></div>
<div class="parallax__layer parallax__layer--base">
<div class="title">MASTER YOUR <span style="color:tomato">BODY</span>.</div>
<div class="huge title">STHENOS MOVEMENT</div>
<div>
Découvrir l'association
</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">BIEN</div>
</div>
</div>
</div>
</body>
</html>

Try this, it is working.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function() {
scrollToAnchor(this.name);
});
});
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('.parallax').animate({scrollTop: aTag.offset().top},5000);
}
</script>

Disable input when no item got specific class name

I got a little codepen where you can select multiple tabs (with jQuery selectable widget). I wanna do the following: If no item got the class name .ui-selected the input #plannername gets disabled.
I thought something like this should work:
if ($('.ui-selected').length === 0){
$('#plannername').prop('disabled', true);
}
else{
$('#plannername').prop('disabled', false);
}
But that doesn't work. I created the following:
var count = $('.ui-selected').length;
console.log(count);
That's giving me the correct amount of tabs selected.
$(function() {
// define one function, to be used for both select/unselect
function selectionChange(event, ui) {
// Get indexes of selected items in an array
var items = $('.ui-selected', this).map(function () {
return $(this).index();
}).get();
// Show or hide sections according to the corresponding option's selection
$("section").each(function () {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
console.log(items);
var count = $('.ui-selected').length;
console.log(count);
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
*{
font-family: 'Josefin Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#selectable .ui-selecting {
background: #9eefbc;
transition:.8s ease-in-out;
-webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
transition: transform 0.8s, background-color 0.8s;
-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
transform: perspective(300px) rotate3d(1,0,0,-180deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-perspective-origin: 50% 100%;
perspective-origin: 50% 100%;
}
#selectable .ui-selected {
background: #6dce91;
transition:all 0.8s;
}
#selectable {
list-style-type: none;
position:absolute;
width: 60%;
margin-left:20%;
display:flex;
transition:.3s ease-in-out;
z-index:1;
margin-top:3px;
}
#selectable li {
background:#ddffea;
padding: 0.6em;
font-size: 1.4em;
flex-grow:1;
transition:.3s ease-in-out;
border:none;
text-align:center;
line-height:0.8em;
}
#selectable .ui-selected:after,
#selectable .ui-selected::after {
position: absolute;
top: 44px;
margin-left:-50px;
transition: .2s ease-in-out;
content: '';
width: 0;
height: 0;
opacity:1;
animation:dreieckFade 1s forwards;
border-top: solid 15px #6dce91;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
}
#keyframes dreieckFade{
0%{opacity:0;border-top: solid 0px #6dce91;}
100%{opacity:1;border-top: solid 15px #6dce91;}
}
.ui-selectable-helper {
visibility: hidden;
}
#content{
width:60%;
background-color:#9eefbc;
margin-left:20%;
padding-top:70px;
margin-top:3px;
padding-bottom:30px;
}
.tabcontent{
top:44px;
background-color:transparent;
z-index:0;
transition:.3s ease-in-out;
font-size:2em;
display:none;
padding-left:100px;
}
#plannername{
width:40%;
background-color:#9eefbc;
margin-left:20%;
border:0;
font-size:2em;
padding:20px;
}
#plannername:focus{
outline:0;
}
#plannersubmit{
width:20%;
background-color:#6dce91;
border:0;
font-size:2em;
padding:20px;
transition:.2s ease-in-out;
}
#plannersubmit:hover{
transition:.2s ease-in-out;
padding-left:40px;
cursor:pointer;
}
#plannersubmit:focus{
outline:0;
}
#plannersubmit:active{
color:white;
}
.plannerlist{
list-style-type:none;
}
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
<input id="plannername" placeholder="insert name" type="text" autocomplete="off"></input><!--
--><input id="plannersubmit" type="submit" value="sign up"></input>
</form>
<ol id="selectable">
<li class="ui-widget-content">FR PM</li>
<li class="ui-widget-content">SA AM</li>
<li class="ui-widget-content">SA PM</li>
<li class="ui-widget-content">SO AM</li>
<li class="ui-widget-content">SO PM</li>
<li class="ui-widget-content">MO AM</li>
</ol>
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>

What you need to do is remove the disabled flag once the action of clicking one of the options has taken place. Essentially, what you should do is set the field to disabled by default, then enable it once a selection has been made:
$(function() {
$('#plannername').prop('disabled', true);
function selectionChange(event, ui) {
('#plannername').prop('disabled', false);
}
}
I've created an updated CodePen showcasing this here.
Hope this helps! :)

web page displays abnormally on google-chrome

The photo slideshow can't display on google-chrome, but it looks perfect on firefox. The code is here:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<meta name="keywords" content="xxxxxxxxx" />
<meta name="description" content="xxxxxxx, New York" />
<link rel="shortcut icon" href="css/favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/tn3e/tn3e.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tn3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.mygallery').tn3({
skinDir:"css",
autoplay:true,
width:768,
delay:5000,
skin:"tn3e",
imageClick:"url",
image:{
crop:true,
transitions:[{
type:"blinds",
duration:300
},
{
type:"grid",
duration:160,
gridX:9,
gridY:7,
easing:"easeInCubic",
sort:"circle"
},{
type:"slide",
duration:430,
easing:"easeInOutExpo"
}]
}
});
});
</script>
</head>
<body>
<figure class="logo">
<img src="css/vbccr.jpg" alt="logo" />
</figure>'
<div class="nav_example">
<div class="menu">
<span>'
<ul id="nav">
<li>主页<br />Home
<div class="subs">
<div>
<ul>
<li><h3>关于我们<br />About Us</h3>
<ul>'
<li>陈述</li>
<li>历史沿革</li>
<li>联系我们</li>
</ul>
</li>
<li><h3>冯师<br />Feng</h3>
<ul>'
<li>简介</li>
<li>寄语</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>主拜<br />Sunday
<div class="subs">
<div class="wrp2">
<ul>'
<li><h3>时间地点<br />Time & Location</h3></li>
<li><h3>师道<br />Sermons</h3>
<ul>'
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>人学<br />School</h3>
<ul>'
<li>新班</li>
<li>门班</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
<!-- This is gallery setting -->
<div class="mygallery">
<div class="tn3 album">
<h4>Large Images</h4>
<div class="tn3 description">Large Images</div>
<div class="tn3 thumb">images/114x72/3.jpg</div>
<ol>
<li>
<h4>Hdfae</h4>
<div class="tn3 description">daa</div>
<img src="images/114x72/1.jpg" alt="demo" />
</li>
<li>
<h4>Isolated</h4>
<div class="tn3 description">island</div>
<img src="images/114x72/2.jpg" alt="demo" />
</li>
<li>
<h4>Town</h4>
<div class="tn3 description">Herceg</div>
<img src="images/114x72/3.jpg" alt="demo" />
</li>
</ol>
</div>
<div class="tn3 album">
<h4>Fixed</h4>
<div class="tn3 description">Images</div>
<div class="tn3 thumb">images/114x72/1.jpg</div>
<ol>
<li>
<h4>Wall</h4>
<div class="tn3 description">Jai</div>
<img src="images/114x72/6.jpg" alt="demo" />
</li>
<li>
<h4>City</h4>
<div class="tn3 description">Ne</div>
<img src="images/114x72/7.jpg" alt="demo" />
</li>
</ol>
</div>
</div>
</body>
</html>
tn3e.css:
#charset "utf-8";
.tn3e-gallery {
position:relative;
width: 960px;
height: 550px;
background-color:#c5c5c5;
background-image: url('grad.jpg');
background-position:center center;
background-repeat:no-repeat;
line-height: normal;
}
.tn3e-image {
position:absolute;
left: 20px;
top: 20px;
width: 920px;
height: 360px;
background-color: #000000;
}
/*
.tn3e-full-image {
box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-webkit-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-moz-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
}
*/
.tn3e-control-bar {
position:absolute;
background: url('bg.png') repeat;
width:243px;
height:80px;
}
.tn3e-thumbs ul, .tn3e-thumbs li {
margin: 0;
}
.tn3e-thumbs {
position:absolute;
width:920px;
height:80px;
bottom:20px;
left:20px;
background-image: url('thumb_bg.png');
background-repeat:repeat-x;
padding-top:2px;
}
.tn3e-thumb {
padding: 2px;
cursor:pointer;
}
.tn3e-thumb-selected {
cursor:default;
}
.tn3e-thumb img {
width: 114px;
height:72px;
}
.tn3e-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-20px -3px;
width: 13px;
height: 17px;
right:33px;
bottom:126px;
cursor:pointer;
}
.tn3e-next:hover {
background-position:-20px -23px;
}
.tn3e-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -3px;
width: 13px;
height: 17px;
left:30px;
bottom:126px;
cursor:pointer;
}
.tn3e-prev:hover {
background-position:-2px -23px;
}
.tn3e-preloader {
position:absolute;
width: 22px;
height: 8px;
right:5px;
top:5px;
}
.tn3e-text {
position: absolute;
left: 64px;
bottom: 110px;
width: 832px;
height: 40px;
vertical-align:middle;
overflow: hidden;
}
.tn3e-image-title {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
font-size:12px;
width:100%;
text-align:center;
font-weight:bold;
}
.tn3e-image-description {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
width:100%;
text-align:center;
font-size:10px;
}
.tn3e-timer {
position:absolute;
width: 100%;
height: 4px;
bottom: 0px;
background: url('bg.png') repeat;
background: rgba(0, 0, 0, 0.3);
}
.tn3e-play {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -80px;
left:94px;
top:12px;
width:57px;
height:57px;
cursor:pointer;
}
.tn3e-play:hover {
background-position:-64px -80px;
}
.tn3e-play-active {
background-position:-2px -139px;
}
.tn3e-play-active:hover {
background-position:-64px -139px;
}
.tn3e-show-albums {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -39px;
top:22px;
left:23px;
width:37px;
height:36px;
padding:0;
margin:0;
cursor:pointer;
}
.tn3e-show-albums:hover {
background-position:-76px -39px;
}
.tn3e-fullscreen {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -1px;
top:22px;
right:23px;
width:37px;
height:36px;
cursor:pointer;
}
.tn3e-fullscreen:hover {
background-position:-76px -1px;
}
.tn3e-albums {
position:absolute;
width: 920px;
height: 510px;
left:20px;
top:20px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
background-image:url('bg.png');
background: rgba(0, 0, 0, 0.8);
}
.tn3e-albums h4 {
position: absolute;
margin-top: 1.33em;
font-weight: bold;
left: 34px;
top: 10px;
font-size: 18px;
color: #c7c8c9;
}
.tn3e-inalbums {
position:absolute;
top: 80px;
width: 920px;
height: 350px;
padding: 20px;
}
.tn3e-album {
position:absolute;
width: 420px;
height: 66px;
background-color:#111111;
overflow: hidden;
cursor:pointer;
font-size: medium;
}
.tn3e-album-over {
background-color:#222;
}
.tn3e-album-selected {
background-color:#cdcdcd;
color:#111214;
cursor:default;
}
.tn3e-album-image {
height: 100%;
margin-right: 1em;
overflow:hidden;
float: left;
}
.tn3e-album-title {
font-size:13px;
font-weight:bold;
margin-top: 1em;
}
.tn3e-album-description {
font-size:0.6em;
height: 3em;
line-height: 1.6em;
overflow: hidden;
}
.tn3e-albums-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-217px -1px;
width: 97px;
height: 37px;
right:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-next-over {
background-position:-217px -40px;
cursor:pointer;
}
.tn3e-albums-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-117px -1px;
width: 97px;
height: 37px;
left:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-prev-over {
background-position:-117px -40px;
cursor:pointer;
}
.tn3e-albums-close {
position:absolute;
background-image:url('tn3e.png');
background-position:-125px -80px;
width: 27px;
height: 27px;
right:31px;
top:30px;
cursor:pointer;
}
.tn3e-albums-close:hover {
background-position:-155px -80px;
}
/* when javascript is disabled */
.tn3.album, .tn3.album li {
float:left;
list-style-type: none;
margin:4px;
}
.tn3.album div, .tn3.album li h4, .tn3.album li div{
display:none;
}
style.css:
body {
background:white;
margin:0px auto;
padding:0;
width: 768px;
color:#eee;
font-size:medium;
font-family:Tahoma,Arial,Verdana,sans-serif;
}
.logo {
padding:inherit;
margin:inherit;
}
.logo > img {
width: 768px;
display:block;
}
.nav_example {
background:url(navigation_bar.gif) no-repeat;
width:100%;
height:60px;
margin:inherit;
/* border:1px #000 solid; */
/* border-radius:3px; */
/* -moz-border-radius:3px; */
/* -webkit-border-radius:3px; */
}
/* main menu styles */
.menu {
padding-top:9px;
text-align:center;
width:100%;
}
.menu > span {
display:inline-block;
margin:10 auto;
}
#nav {
display:inline;
text-align:center;
/* text-align:left; */
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
/* border:1px solid transparent; */
color:#eee;
display:block;
font-size:1.05em;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
color:#fefefe;
background-color:#d10e15;
/* border-color:#999 */
}
#nav > li.selected > a {
background-color:#d10e15;
color:#fefefe;
z-index:0;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color:#1a1a1a;
display:none;
font-size:1em;
margin:0;
padding:0;
position:absolute;
top:5px;
z-index:1;
width:200px;
}
#nav li div div.wrp2 {
width:400px;
}
#nav .sep {
left:200px;
border-left:1px solid #2a2a2a;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:5px;
padding-right:5px;
position:relative;
width:190px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom:1px solid #3a3a3a;
color:#1da0ff;
font-weight:bold;
font-size:0.95em;
margin:8px 0px;
padding:3px 0px;
}
#nav li div ul li h3 a {
color:#1da0ff;
display:block;
text-decoration:none;
}
#nav li div ul li h3 a:hover{
background-color:#d10e15;
color:#fefefe;
}
#nav li ul ul {
padding:0 0 8px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
color:#eee;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
font-size:0.95em;
}
#nav li ul ul li a:hover{
background-color:#d10e15;
color:#fefefe;
}
The jquery.min.js is the latest from google. And jquery.tn3.min.js is from:
/*!
* tn3 v1.1.0.28
* http://tn3gallery.com/
*
* License
* http://tn3gallery.com/license
*
* Date: 29 Jul, 2011 16:21:54 +0300
*/
And by the way, the favicon can't show in google-chrome either, but successfully in firefox. Does anyone have any idea?

try using a css reset http://meyerweb.com/eric/tools/css/reset/, if you provide more information on how the page is behaving would be better