prevent fixed element from moving on smartphone - javascript

I have the following snippet working except when you scroll to the bottom of the #section-container the fixed element at the top moves. How can I prevent that from happening on a smart phone?
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: orange;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
position: -webkit-sticky;
position:sticky;
height: 80%;
width: 100%;
top: 20%;
background-color: purple;
}
#fixed {
position: -webkit-sticky;
position:sticky;
top: 0;
height: 20%;
width: 100%;
background-color: lightblue;
}
#section-container {
height: 100%;
overflow: scroll;
}
.sections {
height: 100%;
}
#section1,
#section3 {
background-color: blue;
}
#section2 {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>scroll</title>
</head>
<body>
<div id='fixed'>
</div>
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>

I found a js library called bodyScrollLock that works. Seems like a lot of overhead to do something this simple. Does anyone have a more native solution?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" >
<title>scroll</title>
<script src="https://www.sustainablewestonma.org/swag/public/js/bodyScrollLock.min.js?test0=xxx"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
width:100%;
background-color:orange;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
}
#container{
position: -webkit-sticky;
position:sticky;
height:80%;
width:100%;
top:20%;
background-color:purple;
}
#fixed{
position: -webkit-sticky;
position:sticky;
top:0;
height:20%;
width:100%;
background-color:lightblue;
}
#section-container{
height:100%;
overflow:scroll;
}
.sections{
height:100%;
}
#section1,#section3{
background-color:blue;
}
#section2{
background-color:red;
}
</style>
</head>
<body id='myBody'>
<div id='fixed'>
</div>
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
<script>
const scrollElement = document.getElementById('section-container');
bodyScrollLock.disableBodyScroll(scrollElement);
</script>
</body>
</html>

Related

HTML+CSS+JS item.classList.toggle() doesn't work

I am writing a program aiming to flip the card while it is clicked. The javascript code looks like this:
/* card flipping onclick */
import "./Stylesheets/FlipCardStyle.css"
var cards = document.querySelectorAll('.card');
[...cards].forEach((card)=>{
card.addEventListener( 'click', function() {
card.classList.toggle('flipped');
});
});
And the CSS code works like this:
#import "GridLayouts.css";
.card {
background: transparent;
width: 117px;
height: 200px;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
position: relative;
cursor: pointer;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.wrapper-horizontal .card {
float: left;
margin-right: -47px;
margin-bottom: 20px;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.card:hover {
transform: rotateY(180deg) translate(0, 40px);
}
/* Position the front and back side */
.card-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.card-face-front {
background: url("...") -234px 0px;
}
/* Style the back side */
.card-face-back {
background: url("...");
background-size: 100% 100%;
transform: rotateY(180deg);
}
The HTML looks like this:
<!DOCTYPE html>
<link rel="stylesheet" href="Stylesheets/FlipCardStyle.css">
<link rel="stylesheet" href="Stylesheets/GridLayouts.css">
<link rel="stylesheet" href="Stylesheets/Buttons.css">
<html>
<div class="wrapper-horizontal">
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<script src="./FlipCard.js"></script>
</div>
<button class="btn">Shuffle</button>
</html>
Theoretically, when I clicked the card, js script will invoke the .card.flipped, which would rotate the card over. But it doesn't work... My logic of the code comes from https://codepen.io/mondal10/pen/WNNEvjV, it workds on codepen but it doesn't seem to work for me.
Could anyone help me? Thanks a lot!!!
The current included HTML is invalid, and you have a CSS selector that turns the cards around when hovered, I changed .card:hover to be .flipped because there was no flipped class to be toggled by the JavaScript. And I removed the invalid HTML, also replaced the background images that linked to nothing to colors, so it shows the cards in the following snippet.
var cards = document.querySelectorAll('.card');
[...cards].forEach((card) => {
card.addEventListener('click', function() {
card.classList.toggle('flipped');
});
});
.card {
background: transparent;
width: 117px;
height: 200px;
perspective: 1000px;
position: relative;
cursor: pointer;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.wrapper-horizontal .card {
float: left;
margin: 10px;
margin-bottom: 20px;
}
/* changed .card:hover to .flipped because there was no class to be toggled. */
.flipped {
transform: rotateY(180deg) translate(0, 40px);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
.card-face-front {
background: red;
}
.card-face-back {
background: blue;
transform: rotateY(180deg);
}
<div class="wrapper-horizontal">
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<div class="card">
<div class="card-face card-face-front"></div>
<div class="card-face card-face-back"></div>
</div>
<script src="./FlipCard.js"></script>
</div>
<button class="btn">Shuffle</button>
Maybe you copy all the source code from codepen without knowing the code format and structure
var cards = document.querySelectorAll('.card');
[...cards].forEach((card) => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
});
body {
font-family: sans-serif;
}
.scene {
display: inline-block;
width: 200px;
height: 260px;
/* border: 1px solid #CCC; */
margin: 40px 0;
perspective: 600px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: crimson;
}
.card__face--back {
background: slateblue;
transform: rotateY(180deg);
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!-- Add your site or application content here -->
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
</div>
<p>Click card to flip.</p>
<script src="js/main.js"></script>
</body>
</html>

wrong modal popup on click (html, css, js)

i'm having trouble figuring out how to have each example have a modal with it's own content. currently, if i click EXAMPLE2, the content from EXAMPLE1 still pops up. i also am not sure why the icons or the modals don't work on here, but i'm hoping someone can at least give pointers based on the code here. i tried changing the IDs to be unique, but i don't think i'm doing it correctly? thank you in advance
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
function togglePopup(){
document.getElementById("popup-2").classList.toggle("active");
}
.icon-inner {
width: 120px;
/*height: 40vh;*/
float: left;
padding-right: 20px;
text-align: center;
/*position: relative;*/
border-radius: 50%;
position: relative;
display: inline-block;
}
/*.icon-inner span {
float: left;
padding-left: 20px;
text-align: center;
position: relative;
border-radius: 50%;
display: inline-block;
}*/
.icon-inner span:before {
margin-left: 0;
font-size: 40px;
}
.icon-inner span:hover {
margin-left: 0;
font-size: 40px;
color: #4FC1E9;
cursor: pointer;
}
.icon-inner-info span:before {
height: 15px;
width: 20px;
margin-left: 0;
padding-left: 2px;
padding-right: 5px;
font-size: 12px;
/*float: flex;*/
position: relative;
}
.icon-inner-info span:hover {
margin-left: 0;
cursor: help;
position: relative;
padding-right: 5px;
}
.icon-inner-info .tooltiptext {
visibility: hidden;
width: 400px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 110%;
}
.icon-inner-info .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.icon-inner-info:hover .tooltiptext {
visibility: visible;
}
.popup .overlay {
position:fixed;
top:0px;
left:0px;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.7);
z-index:1;
display:none;
}
.popup .content-pop {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
background:#fff;
width:500px;
height:250px;
z-index:2;
text-align:center;
padding:20px;
box-sizing:border-box;
font-family:"Open Sans",sans-serif;
}
.popup .close-btn {
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:30px;
height:30px;
background:#222;
color:#fff;
font-size:25px;
font-weight:600;
line-height:30px;
text-align:center;
border-radius:50%;
}
.popup.active .overlay {
display:block;
}
.popup.active .content-pop {
transition:all 300ms ease-in-out;
transform:translate(50%,-50%) scale(1);
}
#media(max-width: 750px) {
.popup.active .content-pop {
transform:translate(-10%,-50%) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=devide-width, initialpscale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link for back to top button -->
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> -->
<link rel="stylesheet" href="font/flaticon.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- -->
</head>
<body>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup()"></span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>
Initially your problem was duplicate IDs. However, after changing them the problem became having the same name for two different functions.
The simplest solution is to pass to the function the ID that you want to open:
For testing purposes, I removed all of your CSS because the popup wasn't aligning correctly.
The word OPEN in my example is your open icon. It works the same, just doesn't have the icon.
function togglePopup(id){
document.getElementById(id).classList.toggle("active");
}
.popup{display:none;}
.active{display:block;}
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-1')">OPEN</span>
<p>TITLE1</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-1')">×</div>
<h1>Title1</h1>
<p>example1</p>
</div>
</div>
</div>
<div class="icon-inner">
<span class="flaticon-statistics" onclick="togglePopup('popup-2')">OPEN</span>
<p>TITLE2</p>
<!-- <p class="tooltiptext">Interviewing, notetaking, storytelling</p> -->
<div class="popup" id="popup-2">
<div class="overlay"></div>
<div class="content-pop">
<div class="close-btn" onclick="togglePopup('popup-2')">×</div>
<h1>Title2</h1>
<p>example2</p>
</div>
</div>
</div>

JQuery/CSS Animate Sprite

I have a sprite image containing 4 different pictures. They are 520px in height. I would like to animate through them when either the left or right arrows are clicked. I'm unsure why it's not working.
Edited with changes and added css. still not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","600px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-600px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
Something like this should work but i don't know what is in your css files, i mean how you define your arrows
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"></button>
<button id="rightArrow" class="fbtnLast"></button>
</div>
</div>
<div id="startApp">
<ul>
<li>
Start here!
</li>
</ul>
</div>
The bigger issue is on the button element, you have onclick="move('left');" but the move function is never defined. You can take that out and let the even listener handle it instead.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts/my_script.js"></script>
<script>
$(document).ready(function(){
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
});
});
</script>
</body>
</html>

How to move scroll on div move

I have problem.
I have one div. On click I wont to move that div. But I want the div always to be in the center namely when I move the DIV for 10px, for example, and the overflow moves with div (for 10px).
Help please :)
$(document).ready(function() {
$("#welcome").hide();
$("#welcome").fadeIn(1000, function() {
$("#welcome").delay(1000).fadeOut(1000);
});
});
body{
margin: 0;
padding: 0;
overflow: hidden;
}
#welcome {
background: rgba(0, 0, 0, 0.5);
margin: 0;
height: 100vh;
position: absolute;
overflow: hidden;
width: 100%;
text-align: center;
padding-top: 47vh;
}
#monopol{
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
#welcome h1 {
margin: 0;
}
#radnja {
height: 19vh;
width: 19%;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="welcome">
<h1>Welcome to Monopoly</h1>
</div>
<center>
<div id="monopol">
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
<div id="radnja">
</div>
</div>
</center>
</body>
</html>

How to position text inside an image in css

How do I add text in the left border of the image?
css:
.container {
position: relative;
width: 100%;
}
.summary-screen .thumbnail {
height: 100%;
width: 100%;
margin: auto;
border: 1px solid #cbcbcb;
display: block;
margin-top: 109px;
position: relative;
}
.summary-screen .primary-text {
background:lightblue;
height: 5%;
opacity: 0.5;
position: absolute;
top: 85%;
/* width: 80%; */
text-align: left;
font-size: 20px;
color: black;
}
html:
<div class="summary-screen">
<div class="container">
<div layout="row" layout-align="center">
<md-content>
<img ng-show="$ctrl.package.image" flex="85" class="thumbnail" ng-src="{{ $ctrl.package.image }}" />
</md-content>
</div>
<div layout="row" layout-align="left">
<h4 class="primary-text" flex style="text-align: left;">{{ $ctrl.package.name }}</h4>
</div>
</div>
</div>
this is how it works now ( its too much left as u can see, i want it exactly at the right place and i want that the background will be along all the pic to the right
When you wrap your text and image you're able to "stick" the text to the bottom.
HTML/CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container_relative {
position: relative;
width: 100%;
max-width: 500px;
}
.container_relative .text {
position: absolute;
bottom: 0;
background-color: rgba(0,0,255,0.5);
width: 100%;
}
.container_relative img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container_relative">
<img src="https://dummyimage.com/500x400/c9c9c9/00000">
<div class="text">
<p>Lorem Ipsum</p>
</div>
</div>
</body>
</html>

Categories

Resources