Change page sections on scroll - javascript

I want to change sections on scroll, to kill the overflow of a single page website and change the sections that have 100% height on scroll. I tried using the:
https://github.com/hellsan631/angular-fullpage.js
but cannot make it work. When I follow all the instructions I get the following errors:
Error: [$compile:nonassign] http://errors.angularjs.org/1.6.6/$compile/nonassign?p0=undefined&p1=options&p2=fullPage
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
angular.js:14700 TypeError: Cannot set property 'afterRender' of undefined
I also tried using https://github.com/alvarotrigo/fullPage.js, no errors but nothing happens.
Anyone has a different solution, or a way to fix this one? Thanks.

Here is a Swiper content sliding plugin, similar to fullpage.js:
http://idangero.us/swiper/demos/20-mousewheel-control.html
You can scroll it with mousewheel, mouse (desktop touch emulation), keypad (on desktop) and finger (on touch devices). Plus there is a non-JQuery version available.
Additionally, you can even configure it to change page background colors, like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: transparent;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
body {
transition: background-color .5s ease-in-out;
}
body.red {
background-color: #f40;
}
body.orange {
background-color: #f90;
}
body.yellow {
background-color: #fe0;
}
</style>
</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-bg="red">Slide 1</div>
<div class="swiper-slide" data-bg="orange">Slide 2</div>
<div class="swiper-slide" data-bg="yellow">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<script>
var body = document.body;
body.className = 'red';
var slider = new Swiper ('.swiper-container', {
pagination: '.swiper-pagination',
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 30,
mousewheelControl: true,
onSlideChangeStart: function (swiper) {
var currentSlide = swiper.slides[ swiper.activeIndex ];
body.className = currentSlide.getAttribute( 'data-bg' );
console.log( currentSlide.getAttribute( 'data-bg' ) );
},
});
</script>
</body>
</html>
DEMO

Related

Website mobile Chrome sizing is not correct when source is QR code or hyperlink

This issue only seems to occur in mobile Chrome (iOS, android untested) but not in mobile Safari or mobile Opera.
When going to the website on mobile by typing in the URL directly, the objects correctly scale to the size of the screen:
Portrait and Landscape
When the user is directed to the link from a QR code or a hyperlink though on mobile chrome (iOS, android is still untested), the website vertical scaling looks wrong:
Portrait - vertical scale is too long
It visually looks to me that when coming from a QR code or hyperlink on chrome mobile, the browser is setting the vertical scale without taking into account the navbars.
Here is my html and CSS below. I am happy adding a JavaScript timeout which rescales somehow if necessary a second or two after load?
HTML and CSS
html, body {
height:100%;
}
body {
background-color: black;
margin: 0;
font-family: 'Lato', sans-serif;
text-align: center;
color: white;
}
#borderCtl {
height: calc(100% - 60px);
padding: 30px 50px;
}
.subtitle {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
border: solid white 1px;
font-size: 3.2vw;
}
#rotationRequest {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
height: 100%;
font-size: 3.2vh;
}
#media screen and (orientation: portrait) {
#rotationRequest {
display: flex;
}
div.subtitle, div.borderCtl {
display: none;
}
}
#media screen and (orientation: landscape) {
#rotationRequest {
display: none;
}
div.subtitle {
display: flex;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- removed javascript files for stackoverflow purposes, should not effect anything -->
</head>
<body >
<div id="rotationRequest">
<div>Please rotate your device!</div>
<img id="rotateImage" src="img/mobile-rotate.svg" width="80%">
</div>
<div id="borderCtl">
<div class="subtitle">
<div id="topLine">...</div>
</div>
</div>
</body>
</html>

Error: How to toggle between hiding and showing [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
body {
margin: 0;
}
a{
text-decoration: none;
color: lightseagreen;
}
a:hover {
color: lightgray;
}
/* whole bar*/
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
padding: 9px 12px;
}
/* Menu*/
.navbar_menu {
display: flex;
list-style:none;
padding-left:0;
font-size: 33px;
font-family: initial;
}
.navbar_menu li {
padding: 8px 30px;
display: inline;
}
.navbar_icons {
letter-spacing:30px;
list-style: none;
display: flex;
flex-direction: row;
width: 200px;
color: lightgray;
font-size: 2em;
padding-left:0;
}
/* Icons */
.navbar__icons li {
padding: 8px 12px;
display: none;
}
/* Toggle button */
.navbar_toogleBtn{
position: absolute;
/*화면이 작아졌을때만 나타남*/
display: none;
right: 32px;
font-size: 24px;
}
/*For small screen */
#media screen and (max-width: 768px){
/* Nav container */
.navbar{
flex-direction: column;
align-items: center;
padding: 8px 24px;
}
/* Menu */
.navbar_menu{
display: none;
flex-direction: column;
align-items: center;
padding: 5px 10px;
justify-content: center;
}
.navbar_menu li{
width: 100%;
text-align: center;
display: block;
}
.navbar__menu a {
/* Fill in an entire line so that user can click on any space */
display: block;
}
/* Icons */
.navbar_icons {
justify-content: center;
display: none;
flex-direction: row;
width: 100%;
font-size: 1.5em;
}
/* Toggle button */
.navbar_toogleBtn{
display: block;
}
/* When toggle button is clicked - active state */
.navbar_menu.active,
.navbar_icons.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bar.css" />
<title>first page</title>
<script src="https://kit.fontawesome.com/265fcd9b69.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar_logo">
<img src="logo.png" width="300" height="200">
</div>
<!-- Menu -->
<ul class="navbar_menu">
<!-- info.html, partner.html, free.html를 임의로 적어둠 -->
<li>Home</li>
<li>Information</li>
<li>Partner</li>
<li>Freelencer</li>
<li>Comunity</li>
</ul>
<!-- Icons -->
<ul class="navbar_icons">
<li><a href="login.html"><i class="fas fa-sign-in-alt"></i></li>
<li><a href="register.html"><i class="far fa-registered"></i></li>
</ul>
<!-- Toggle button -->
<a href="#" class="navbar_toogleBtn">
<i class="fas fa-bars"> </i>
</a>
</nav>
<script type="text/javascript" src="bar.js" charset="utf-8" defer></script>
</body>
</html>
const toggleBtn = document.querySelector('.navbar__toggleBtn');
const menu = document.querySelector('.navbar__menu');
const icons = document.querySelector('.navbar__icons');
toggleBtn.addEventListener('click', () => {
menu.classList.toggle('active');
icons.classList.toggle('active');
});
Im learning html/css/js from a Youtube video tutorial. Im learning how to write js code but i can't help to solve a problem. I hope you give me the solution guys.
The problem is about add.EventListener. i saw the code in chrome, in console it shows:
"bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null"
I would like to use toggle hide and show with JS.
You are getting this error ( "bar.js:5 Uncaught TypeError: Cannot read property 'addEventListener' of null" ) because you are specifying invalid element classes in js.
Use this:
const toggleBtn = document.querySelector('.navbar_toogleBtn');
const menu = document.querySelector('.navbar_menu');
const icons = document.querySelector('.navbar_icons');
Since your elements in html are:
<a href="#" class="navbar_toogleBtn">
...
<ul class="navbar_menu">
...
<ul class="navbar_icons">
Without seeing your code, it's hard to be specific as to what your issue is. Null is the absence of a value or object. When we call on a selector that does not exist, we can trigger the same error of null. Check if you are targeting an id that exists or that you are targeting the correct element using it's class.
Cross-reference your code to the following example to see if you may have missed something. This is the most basic of examples.
var box = document.getElementById('box');
document.getElementById('button').addEventListener('click', function(){
if( box.classList.contains('active') ){
box.classList.remove('active');
} else {
box.classList.add('active') ;
}
});
#button {
background-color: orange;
border: 1px solid #000;
color: #000;
padding: 0.5rem 1rem;
cursor: pointer;
}
#box {
margin-top: 2rem;
display: none;
padding: 1rem;
border: 1px solid #000;
}
#box.active {
display: block;
}
<button id="button">CLICK ME</button>
<div id="box">I am a box. Watch me.</div>

Swiper.js: cannot get textarea value in loop mode

I cannot get the value of an textarea in a looped swiper of Swiper.js.
Here's what I did.
I defined a swiper with a single slide and put a textarea in it. (id="aaa", one and only textarea)
I defined a function "getValue()" that shows the value of the textarea. (using getElementById(), console.log())
function getValue(id){
var element = document.getElementById(id);
var value = element.value;
console.log(value);
}
I enabled the loop mode of the swiper.
// Swiper Setting
var swiper = new Swiper('.swiper-container', {
allowTouchMove: false,
loop: true,
I executed the function with a button, and it returns "" (empty string)
Here's the results of my experiments
When the loop is disabled, the function returns the proper text in the textarea.
When the swiper has multiple slides, the function returns "" only for textareas in the last slide.
Here's the full code that replicates the problem.
https://jsfiddle.net/mjn7d385/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="page1">
<textarea name="aaa" id="aaa" cols="40" rows="5"></textarea>
<button onclick="getValue('aaa');">Check Values</button>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
// Swiper Setting
var swiper = new Swiper('.swiper-container', {
allowTouchMove: false,
loop: true,
pagination: {
el: '.swiper-pagination',
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
function getValue(id){
var element = document.getElementById(id);
var value = element.value;
console.log(value);
}
</script>
</body>
</html>
How can I get the value of the textarea in a looped swiper? Please let me know if you have any solutions for this.
Thank you in advance.
The problem here is that Id's can't be duplicated in the same document, and this control duplicates the Template Slide and its contents, so "aaa" is declared multiple times. One solution could be this one:
Modify Slide Template to be like this:
<div class="swiper-slide" id="page1">
<textarea cols="40" rows="5"></textarea>
<button onclick="getValue(this);">Check Values</button>
</div>
Here, getValue() is called using the Caller object (Button) as argument.
Now, getValue function is modified to this:
function getValue(obj){
var element = obj.parentElement.getElementsByTagName("textarea")[0];
var value = element.value;
console.log(value);
}
In this function, we locate the parent object of the button, which is the DIV, and then we get the first textarea object that contains. That's it!
Have a look to the proposed solution in JSFiddle:
https://jsfiddle.net/s0Lw2yeg/1/
I hope this will be useful.

dropdown hides even when mouse is over it

I am trying to make a dropdown. So when i hover over the button, the list should pop up, and when i leave the button as well as the list (i.e listcontainer), the list should disappear. Everything works except the latter part. The list disappears as soon as i leave the button (even though i am over the list container). Issue I don't understand why. You may ignore the CSS code and html code. Semantics: Please note button is a div with class button
If you've read the code: The hideul function runs multiple times when it enters the listcontainer from the button (please check console). I don't get this part as well.
Please also let me know if there is a better way to do this logic.
Please visit to see the error
var button = document.querySelector(".button")
var list = document.querySelector("ul")
var listcontainer = document.querySelector(".listcontainer")
var mouseleftlistcontainer = true
var mouseleftbutton = true
function hideul(e, text) {
console.log(text)
if (mouseleftlistcontainer && mouseleftbutton) {
list.classList.remove("effectt")
}
}
button.addEventListener("mouseover", e => {
list.classList.add("effectt")
mouseleftbutton = false
hideul(e, "mouse entered button")
})
button.addEventListener("mouseleave", e => {
mouseleftbutton = true
hideul(e, " mouse left button")
})
listcontainer.addEventListener("mouseover", e => {
mouseleftlistcontainer = false
hideul(e, "mouse entered listcontainer")
})
listcontainer.addEventListener("mouseleave", e => {
mouseleftlistcontainer = true
hideul(e, "mouse left listcontainer")
})
.button{
background-color: lightgreen;
width:200px;
height:50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-top:30px;
font-size: 25px;
}
.container{
display: flex;
margin:auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul{
font-size: 20px;
list-style: none;
transform: translateY(-200px);
transition: 0.2s all;
}
li{
margin:2px;
background-color: lightgreen;
border-radius:5px;
width:200px;
display: flex;
justify-content: center;
align-items: center;
}
.listcontainer{
height:170px;
overflow: hidden;
background-color: red;
}
.effectt{
transform: translateY(00px);
}
ul{
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="container">
<div class="button">ONE</div>
<div class="listcontainer">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html>
You should put all the objects, affected by the hover effect inside a container and trigger the effect on that one, like so:
var container = document.querySelector(".btn-container")
var list = document.querySelector("ul")
var mouseincontainer = true
function hideul(show, text) {
console.log(text);
if (mouseincontainer) {
list.classList.add("effectt")
}
else {
list.classList.remove("effectt")
}
}
container.addEventListener("mouseover", e => {
hideul(true, "mouse entered button")
})
container.addEventListener("mouseleave", e => {
hideul(false, " mouse left button")
})
.button{
background-color: lightgreen;
width:200px;
height:50px;
margin:auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-top:30px;
font-size: 25px;
}
.container{
display: flex;
margin:auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul{
font-size: 20px;
list-style: none;
transform: translateY(-200px);
transition: 0.2s all;
}
li{
margin:2px;
background-color: lightgreen;
border-radius:5px;
width:200px;
display: flex;
justify-content: center;
align-items: center;
}
.listcontainer{
height:170px;
overflow: hidden;
background-color: red;
}
.effectt{
transform: translateY(00px);
}
ul{
background-color: bisque;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<div class="container">
<div class="btn-container">
<div class="button">ONE</div>
<div class="listcontainer">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is the problem in your code
if (mouseleftlistcontainer && mouseleftbutton) {
list.classList.remove("effectt")
}
When you leave the button, this condition is met and your class is removed, but once you enter the list container, you need to add back the 'effectt' class.

How can I make my splitscreen responsive?

I created this split screen view using split.js. Two divs are shown next to each other. You can drag the middle to make one bigger of smaller.
Now it would be nice to let the two divs automatically fall below each other if the screen is smaller than lets say 768 px, but offcourse keeping the split screen functionality.
Even better apart from automatically changing the view when scaling the browser it would be nice to give the user the option to choose for horizontal/vertical themselves as well. So this way they can overrule the standard behavior.
I already tried working with bootstrap 4, cfr. https://www.youtube.com/watch?v=bh3UAetYkUI&feature=youtu.be, but they don't seem to work together well.
My code: https://jsfiddle.net/rjtpvhn1/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="content">
<div class="split a">text left</div>
<div class="split b">text right</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
font-size: 20px;
}
.content {
width: 100%;
height: 100%;
display: flex;
justify-items: center;
align-items: center;
}
.split {
width: 100%;
height: 100%;
padding: 30px;
border: 1px solid;
overflow: auto;
}
.gutter {
cursor: e-resize;
height: 100%;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #ccc;
}
JAVASCRIPT: (include https://unpkg.com/split.js/dist/split.min.js)
Split(['.a', '.b'], {
gutterSize: 9,
sizes: [50, 50]
});

Categories