I have problem with caption "TEST CAPTION", because after move a scroll, the caption flees to top. I need to synchronize caption with near image.
[https://jsfiddle.net/ohamdcaL][1]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PARALLAX</title>
<style type="text/css">
body {
margin: 0px;
background: url(http://th09.deviantart.net/fs70/PRE/i/2013/215/a/3/bubble_background_by_diversekitty-d6giw39.png) fixed;
min-height: 2000px;
}
#content_layer {
position: absolute;
/*min-height: 100%;*/
}
#paralax_div1 {
position:fixed;
background: url(http://www.agencjaface.com/wp-content/uploads/marek_wlodarczyk_icon.jpg) no-repeat 600px 400px;
width:100%;
height:800px;
}
#caption {
position: fixed;
top: 500px;
left: 300px;
font-size: 20px;
width:100%;
}
</style>
<script>
function parallax() {
var paralax_div1 = document.getElementById("paralax_div1");
var caption = document.getElementById("caption");
paralax_div1.style.top = -(window.pageYOffset / 80)+'px';
caption.style.top = -(window.pageYOffset / 80)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>
</head>
<body>
<div id="paralax_div1"></div>
<div id="caption"> TEST CAPTION </div>
<div id="content_layer">
<script>
for( i =0; i < 100; ++i) {
document.write('HEHEHEHEHEH <BR/>');
}
</script>
</div>
</body>
</html>
Related
Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it. I did that but the thing is that it's being glitchy. It returns to the original state one time and the other time follows the cursor. I don't want it to do that.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
slider.style.left += e.offsetX + "px";
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
slider.style.left = e.offsetX + "px"
console.log("Cursor is " + e.offsetX)
console.log("Element is" + slider.style.left)
}
})
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!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="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
As you can see, as you drag the element, it works but it isn't smooth. It returns to its original coordinates sometimes and then follows the cursor the other time.
.offsetX is the mouse position relative to the element, so that makes the slider jump. .clientX is the mouse position relative to the document.
In order to use clientX, however, you need to subtract the original x position of the slider. I'm going to assume that .Container will always be the container for the slider. By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said container.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
updateSliderPosition(e.clientX);
console.clear();
console.log("Cursor is " + e.clientX);
console.log("Element is" + slider.style.left);
}
})
function updateSliderPosition(value) {
let box = container.getBoundingClientRect();
slider.style.left = value - box.left + "px";
}
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!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="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.
I'm also using pointer events over mouse events. These work the same as mouse events but also will work for touch devices. They also allow the use of setPointerCapture, which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler). You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.
let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;
let lastX = 0;
let thisX = 0;
let leftEdge = 0;
function mouseDownHandler(e) {
lastX = e.clientX;
slider.addEventListener('pointermove', mouseMoveHandler);
slider.setPointerCapture(e.pointerId);
}
function mouseMoveHandler(e) {
thisX = e.clientX;
xDiff = thisX - lastX;
leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
slider.style.transform = `translate(${leftEdge}px)`;
lastX = thisX;
}
function mouseUpHandler(e) {
slider.removeEventListener('pointermove', mouseMoveHandler);
slider.releasePointerCapture(e.pointerId);
}
slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone,
.conttwo {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.contone {
z-index: -11;
}
.conttwo {
z-index: -11111;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: red;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<div id="container" class="Container">
<div class="contone">
<img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
</div>
<div id="slider" class="Slider"></div>
<div class="conttwo">
<img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
</div>
</div>
to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
I'm trying to get a setup where clicking on a div plays audio (this is working), and changes the background image of another div (not working). The audio also pauses if the button is clicked again during playing, and the background image needs to keep up, as it's similar to a pause/play visual.
What've I got wrong here that it isn't working?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Janice's Button</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#button {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
background-size: contain;
}
#clicker {
z-index: 1000;
position: absolute;
left: 30%;
top: 10%;
width: 40%;
border: 1px solid red;
border-radius: 100%;
}
.unpressed {
background: url("ButtonImgUnpressed.jpg") no-repeat center top;
}
.pressed {
background: url("ButtonImgPressed.jpg") no-repeat center top;
}
#clicker:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.new
</style>
</head>
<body>
<div id="button" class="unpressed">
</div>
<div id="clicker" onClick="play()"></div>
<audio id="audio" src="Rocky.mp3"></audio>
<script>
function play() {
var audio = document.getElementById('audio');
var button = document.getElementById('button')
if (audio.paused) {
audio.play();
$('#button').removeClass('unpressed');
$('#button').addClass('pressed');
}else{
audio.pause();
audio.currentTime = 0
$('#button').removeClass('pressed');
$('#button').addClass('unpressed');
}
}
</script>
</body>
Thank you so much! I'm sure it's a silly mistake/simple fix - I'm very new to js...
I'm trying to get a simple mobile navigation to work, but nothing happens when I click the trigger button. Any help would be much appreciated! My first steps in JS, so I apologise if I made a really stupid mistake...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
<script>
// When trigger is clicked, check if menu is currently hidden or shown
// Choose what action to perform
$('#trigger').click( function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
}
else {
hideMenu();
}
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
</script>
<style>
#menu {
position: fixed;
top: 0px;
left: -200px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
Thanks
Andreas
First, the main code had to be inside ready function in order to trigger:
"$(document).ready(function(){}"
And secondly for the CSS to work you have to move the left style to menu-hide
Working example:
$(document).ready(function() {
$('#trigger').click(function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
} else {
hideMenu();
}
});
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
#menu {
position: fixed;
top: 0px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
.menu-hide {
left: -200px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
</html>
courtesy N0ME on this site, I have been able to get the HTML, CSS, and Javascript below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
When I click the buttons, the overlay appears and disappears in one quick flash. I would like it to take for example 500ms so that a fade in/fade out effect is created.
I've tried adding the following script without any luck:
<script>
$(document).ready(function(){
$(".x").click(function(){
$("p").toggleOverlay(500)
});
$(".btn").click(function(){
$("p").toggleOverlay(500);
});
});
</script>
Could anyone please guide me as to what I'm doing wrong and how I could solve the issue?
Thank you so much in advance.
James
Try giving the transition-duration style to your button like this:
button .x{transition-duration:0.5s}
That should do the trick.
Try adding delay(500) before toggleoverlay()
<script>
$(document).ready(function(){
$(".x").click(function(){
$("p").delay(500).toggleOverlay();
});
$(".btn").click(function(){
$("p").delay(500).toggleOverlay();
});
});
</script>
If you are in fact using jquery, this is what you want:
function toggleOverlay(){
$('#overlay, #specialBox').fadeToggle(500);
}
get rid of the extra jquery you added, and just replace your toggleOverlay function with the above.
http://api.jquery.com/fadetoggle/