How to move scroll on div move

How to move scroll on div move - javascript

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>

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>

prevent fixed element from moving on smartphone

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>

How to fix the jQuery so the bubbles in my code get disappear when user click on it?

I think my jQuery code is not working. When I click on the bubbles it should disappear but nothing is happening. I tried pasting this one codepen and it works over there but it does not work when I do it on sublime text or any other editor. Any help would be appreciated, thanks.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background-color: #ffccff;
}
.circle {
width: 30%;
background: #e6ffff;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 90px;
box-shadow: 5px 5px 10px #ffffff;
}
#container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
</style>
<script>
$(".circle").click(function() {
$(this).removeClass("visible").addClass("hidden");
});
$(".restart").click(function() {
$(".circle").removeClass("hidden").addClass("visible");
});
</script>
</head>
<body>
<div id="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<button class="restart">Restart</button>
</div>
</body>
</html>

When I copy your code to jsFiddle here: https://jsfiddle.net/r9zda0cv/
Everything works.
Try to wrap up your javascript in ready
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background-color: #ffccff;
}
.circle {
width: 30%;
background: #e6ffff;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 90px;
box-shadow: 5px 5px 10px #ffffff;
}
#container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
</style>
<script>
$(document).on("ready", function(){
$(".circle").click(function() {
$(this).removeClass("visible").addClass("hidden");
});
$(".restart").click(function() {
$(".circle").removeClass("hidden").addClass("visible");
});
});
</script>
</head>
<body>
<div id="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<button class="restart">Restart</button>
</div>
</body>
</html>

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>

CSS modal images

I need some help when showing an image in a modal, I want the image to scale up and down maintaining its ratio.
If the image is smaller than the window then show it all
If the image is larger than the window enlarge it as much as possible to fill the window maintaining scale (no scrolling)
Also I'd like to have the body of the website darker and unable to scroll when a modal is opened, but I can't figure how to do so. Here's my HTML and CSS code (I know it doesn't work well when on small resolutions but it's not my requirement for now):
html, body {
width: 100%;
height: 100%;
margin: 0;
}
h1, h4{
color:#0B486B;
}
#container {
margin: 0;
padding: 0 3% 0 3%;
width: 100%;
height: 100%;
background-color: #E0E4CC;
}
#footer {
text-align: center;
padding: 10px;
width: 100%;
height: 100px;
background-color: #E0E4CC;
}
#sidebar {
padding-top: 10%;
height: 100%;
background-color: #69D2E7;
text-align: center;
}
#btngroup {
padding-top: 20%;
}
#grid {
padding: 0 2% 2% 2%;
height: 100%;
background-color: #A7DBD8;
}
#gridrow {
padding: 3% 0 0 0;
height:50%;
}
#gridcol {
height:100%;
position: relative;
}
img {
opacity: 1;
cursor: pointer;
max-width: 92%;
max-height: 92%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img:hover {
opacity: 0.8;
}
#myModal {
display: none;
}
#modalDialog {
margin: auto;
}
#modalContent {
height: 100%;
width: 100%;
}
#modalBody {
padding:3px;
}
#imgModal {
max-width: 100%;
max-height: 100%;
cursor: default;
opacity: 1;
position: relative;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyBootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="container" class="row">
<div id="sidebar" class="col-md-3 sidenav">
<h1>HELLO<br>WORLD</h1>
<ul id="btngroup" class="nav nav-stacked">
<li><h4>Pictures</h4></li>
<li><h4>Music</h4></li>
<li><h4>About me</h4></li>
</ul><br>
</div>
<div id="grid" class="col-md-9">
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://www.avionslegendaires.net/wp-content/uploads/images/dossier/F-15-leurre-thermique.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://www.w3schools.com/css/img_fjords.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
<div id="gridrow" class="row">
<div id="gridcol" class="col-md-4">
<img src="http://img.171u.com/image/1609/2607005498770.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="https://photos.smugmug.com/Landscapes/i-mjXhFCT/0/c99cf534/XL/IMG_7608-Edit-XL.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
<div id="gridcol" class="col-md-4">
<img src="http://www.tappingforabundance.com/wp-content/uploads/slider1.jpg" class="img-rounded" onclick="onClick(this)"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal" onclick="this.style.display='none'">
<div id="modalDialog" class="modal-dialog">
<!-- Modal content-->
<div id="modalContent" class="modal-content" style="background-color:#000000">
<div id="modalBody" class="modal-body">
<img id="imgModal" class="img-rounded" />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("imgModal").src = element.src;
document.getElementById("myModal").style.display = "flex";
}
</script>
</body>
</html>

.doNotScroll{
overflow: hidden;
height: 100%;
}
....
$(document).on('click', '.img-rounded', function(){
$('BODY, HTML').addClass('doNotScroll');
})
...
$(document).on('click', '#myModal', function(){
$('BODY, HTML').removeClass('doNotScroll');
})

disable scrolling Body:
BODY,HTML{
overflow: hidden;
height: 100%;
}
For dark Background place a div directly in body:
DIV.cover.inactiv{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10 // play with it
}
DIV.cover.activ{
display: block;
}

Develop Reference

JavaScript is the programming language of the Web.

How to move scroll on div move - javascript

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 :)

Related

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

prevent fixed element from moving on smartphone

How to fix the jQuery so the bubbles in my code get disappear when user click on it?

JQuery/CSS Animate Sprite

CSS modal images

Categories

Resources