i have a image ,i want whenever cursor try to touch the image it moves away randomly from the cursor i tried using jquery but it not working , see this link http://jsfiddle.net/emreerkan/atNva/
my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://images.pexels.com/photos/569986/pexels-photo-569986.jpeg?auto=compress&cs=tinysrgb&w=600" width="100" height="100" alt="Grey Square" class="som" />
</body>
<!-- <script src="jquery-3.6.1.min.js"></script> -->
<script>
alert('hi')
jQuery(function($) {
$('.som').mouseover(function() {
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});
</script>
</html>
my style.css
body { position: relative; }
#img { position: relative; }
in css
use the pointer .som instead of #img
because in your jQuey code you used top and left,these properties will not work unless the position property is set first, in this case its position:relative;
(static is the default value of position )
everything else looks good
Related
Hi i tried to make the div smaller wqhen scrolling. however i found some article that the div is small then when scroll it make bigger. i wanted the opposite. when run the image is 100% then when scroll it will be smaller. can someone help me please? i am new to this
This is the code:
https://codesandbox.io/s/sharp-lewin-to1o2b?file=/index.html
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
min-width: 20%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
var scrollSlow = scrollVal / 4;
//Changing CSS Width
aDiv.style.width = Math.min(Math.max(scrollSlow, 20), 100) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
I did it with my math logic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
<style>
#animatedDiv {
background: #dc143c;
min-height: 9000px;
width: 100%;
position: absolute;
}
</style>
<script>
var aDiv = document.getElementById("animatedDiv");
function changeWidth() {
var scrollVal = window.pageYOffset;
//Changing CSS Width
/* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%";
I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
//NOTE this line checks if PERCENT <= 10 then sets width to 10%
( (100 - (scrollVal*100/1500)) ) <= 10 ? aDiv.style.width = "10%" : aDiv.style.width = (100 - (scrollVal*100/1500)) + "%";
}
window.addEventListener(
"scroll",
function () {
requestAnimationFrame(changeWidth);
},
false
);
</script>
Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px
I'm trying to add culling to my Pixi.js application, so I'm following the Installation part of this tutorial, https://github.com/davidfig/pixi-cull, and now I'm getting a
index.js:2 Uncaught TypeError: Cannot read property 'Cull' of undefined at window.onload (index.js:2)
I've been on this issue for the entire day, and there is absolutely nothing I've found helpful online.
Any ideas on what I'm doing wrong?
I'm using Pixi.js version PixiJS 6.0.1 - ✰ WebGL 2
All files along with their .map files are in order
HTML
<!DOCTYPE html>
<html>
<head>
<title>Application</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="preload" href="fonts/Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="stylesheet"
href="css/styles.css">
<script src="/socket.io/socket.io.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/pixi.min.js"></script>
<script src="js/pixi-cull.min.js"></script>
<script src="js/viewport.js"></script>
<script type="module" src="js/index.js"></script>
</head>
<body>
<div style="position: absolute; right: 15px; top: 0;">
<span id="fps" style="color:black;">0</span>
</div>
</body>
</html>
JS
window.onload = () => {
var SimpleCull = new PIXI.extras.Cull.Simple();
var app = new PIXI.Application();
document.body.appendChild(app.view);
// create viewport
var viewport = new Viewport.Viewport({
screenWidth: app.view.offsetWidth,
screenHeight: app.view.offsetHeight,
worldWidth: 10000,
worldHeight: 10000
});
app.stage.addChild(viewport);
viewport.drag().pinch().wheel().decelerate().moveCenter(5000, 5000);
// add red boxes
for (var i = 0; i < 500; i++)
{
var sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
sprite.tint = 0xff0000;
sprite.width = sprite.height = 100
sprite.position.set(Math.random() * 10000, Math.random() * 10000);
}
var cull = new Cull.Simple();
cull.addList(viewport.children);
cull.cull(viewport.getVisibleBounds());
// cull whenever the viewport moves
PIXI.ticker.shared.add(() =>
{
if (viewport.dirty)
{
cull.cull(viewport.getVisibleBounds());
viewport.dirty = false;
}
});
}
I am building some test split screen layouts and would like to show / hide content based on scroll position. As I have built layouts in VH set scroll position in VH too? (although im switching text I would like to learn how to show and hide by class/id so I can switch other content in the future.
Here is the codepen
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y < 0) {
$(".test1").hide();
} else {
$(".test1").show();
}
});
$(function() {
var element =$("#it");
var element1 =$("#it1");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
element.hide();
element1.show();
} else {
element.show();
element1.hide();
}
});
})
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<body style="height :2000px;">
<div id="it" style="background-color:red;height :1000px;">TEST</div>
<div id="it" style="background-color:yellow;height :1000px;">TEST2</div>
</body>
</html>
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX