Stuck with evenly resizing an image animation - javascript

I'm trying to recreate this effect:
http://www.eginstill.com/
I tired everything, I got it to resize but can't get that effect where image is fixed and its being resized from all sides.
Here is my code:
<!DOCTYPE html>
<html>
<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">
</head>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<body>
<div id="menu" style="float: left; width: 200px; height: 1000px; background: black; display: inline-block;">
</div>
<div id="img-01" style="z-index: 100; width: 100%; position: absolute;">
<img src="https://s-media-cache-ak0.pinimg.com/236x/95/c3/70/95c3708a97e9a7e56d4e13166dd5dd24.jpg" id="photograph" style="width: 100%; height: 100%;">
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$("#img-01").click(function () {
$("#img-01").animate({
height: '400px',
width: '400px',
left: '300px'
}, 1500);
});
});
</script>
<script>
$(document).ready(function() {
$('#photograph').hide();
$('#photograph').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
});
</script>
</body>
</html>
Not sure what to do. Thanks.


Please see the snippet in this code.
I changed your IDs by class (it's more convenient, we prefer use class instead of ids.)
updated the css of .img-01 element
$(document).ready(function() {
$(".img-01").click(function() {
$(this).animate({
top: '20px',
right: '100px',
left: '30px',
bottom: '20px'
}, 1500);
});
});
$(document).ready(function() {
$('.photograph').hide();
$('.photograph').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
});
body {
padding: 0;
margin: 0;
}
.menu {
float: left;
width: 200px;
height: 1000px;
background: black;
display: inline-block;
}
.img-01 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://s-media-cache-ak0.pinimg.com/236x/95/c3/70/95c3708a97e9a7e56d4e13166dd5dd24.jpg);
}
<!DOCTYPE html>
<html>
<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">
</head>
<body>
<div id="menu"></div>
<div class="img-01">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</body>
</html>

Related

jquery scoll page hide div and stop scroll page show div and close, open button

The div closes when I press the close button. but when I keep scrolling the div appears again. I don't want it to appear when I press close and it starts to slide again. I just want it to appear when I press the close button again. but I couldn't, no matter what I tried.
body {
left: 0;
padding: 0;
margin: 0;
top: 0;
}
.middlesection {
height: 500vh;
background-color: red;
width: 100%;
}
.rightsidestyle {
height: 200px;
width: 300px;
background-color: bisque;
right: 10px;
position: fixed;
bottom: 10px;
display: block;
}
.onclk {
position: fixed;
bottom: 11rem;
right: 17rem;
z-index: 9999;
}
<!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">
<link rel="stylesheet" href="css/style.css">
<script src="js/custome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>test HTML</title>
</head>
<body>
<div class="middlesection"></div>
<button class="onclk" onclick="myFunction()"><i class="fa-solid fa-xmark"></i></button>
<div class="rightsidestyle" id="rightside">
</div>
<script>
$(window).scroll(function() {
$('#rightside').stop(true, true).hide().fadeIn('slow');
});
function myFunction() {
var x = document.getElementById("rightside");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>

Just remove this script if you don't want to show it on scroll.
$(window).scroll(function(){
$('#rightside').stop(true, true).hide().fadeIn('slow');
});

i did it by myself !!!!! thanks
body{
left: 0;
padding: 0;
margin: 0;
top: 0;
}
.middlesection{
height: 500vh;
background-color: red;
width: 100%;
}
.rightsidestyle{
height: 200px;
width: 300px;
background-color: bisque;
right: 10px;
position: fixed;
bottom: 10px;
display: block;
}
.onclk{
position: fixed;
bottom: 11rem;
right: 17rem;
z-index: 9999;
}
.openclk{
position: fixed;
bottom: 55px;
right: 0;
z-index: 9999;
height: 100px;
display: none;
}
<!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">
<link rel="stylesheet" href="css/style.css">
<script src="js/custome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>test HTML</title>
</head>
<body>
<div class="middlesection"></div>
<button class="openclk" id="openclick"><i class="fa-solid fa-angle-left"></i></button>
<div class="sagtaraf">
<div class="rightsidestyle" id="rightside">
<button class="onclk" id="clickbutton"><i class="fa-solid fa-xmark"></i></button>
</div>
</div>
<script>
$(window).scroll(function(){
$("#rightside").stop(true, true).hide().fadeIn('slow');
});
$('#clickbutton').click(function (){
$('.onclk').css('display', 'none');
($('.sagtaraf').hide('slow'));
$('.openclk').css('display', 'block').show('slow');
});
$('#openclick').click(function (){
$('.openclk').css('display', 'none');
($('.sagtaraf').show('slow'));
$('.onclk').css('display', 'block').show('slow');
});
</script>
</body>
</html>

Click to hide and show the division

I have a sticky Ads at the footer with a HIDE button, I want when I click HIDE .stickyads content should be hidden by sliding down, but HIDE but should be appearing so as when I clcik again, the .stickyads content should appear by sliding up.
CSS:
#media (max-width: 800px) {
.stickyads {
position: fixed;
bottom: 0px;
left: 0;
}
.stickyadsHide {
width: 30px;
height: 30px;
display: flex;
position: absolute;
right: 0px;
top: -30px;
}
.stickyads .stickyadsContent {
overflow: hidden;
display: block;
position: relative;
width: 100%;
}
}
HTML Part:
<div class='stickyads'>
<div class='stickyadsHide' >
<span>HIDE</span>
</div>
<div class='stickyadsContent'>
Content Here...
</div>
</div>

button = document.querySelector('.stickyadsHide');
adCont = document.querySelector('.stickyadsContent');
hide = document.querySelector('.hide');
show = document.querySelector('.show');
button.addEventListener("click", () => {
adCont.classList.toggle('visbility');
hide.classList.toggle('visbility');
show.classList.toggle('visbility');
});
.stickyadsHide {
width: 50px;
height: 50px;
}
.btn {
position: absolute;
}
.stickyadsContent,
.btn {
opacity: 0;
transition: opacity 0.5s;
}
.visbility {
opacity: 1;
transition: opacity 0.5s;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class='stickyads' id='removeads'>
<div class='stickyadsHide'>
<span class="btn hide visbility">HIDE</span>
<span class="btn show">SHOW</span>
</div>
<div class='stickyadsContent visbility'>
Content Here...
</div>
</div>
<script src="script.js"></script>
</body>
</html>

I think this is what you are looking for. slideToggle
HTML
<div class='stickyads'>
<div class='stickyadsHide' >
<span>HIDE</span>
</div>
<div class='stickyadsContent'>
Content Here...
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
CSS
.stickyads {
position: fixed;
bottom: 0px;
left: 0;
}
.stickyadsHide {
width: 30px;
height: 30px;
}
.stickyads .stickyadsContent {
overflow: hidden;
display: block;
position: relative;
width: 100%;
}
jQuery
$('.stickyadsHide').click(function() {
$('.stickyadsContent').slideToggle();
});
Check this link

I can't understand why my div won't act resizable?

Can someone please look at this code and explain why this div is not resizable. I have stripped the code down to bare bones, looking for the error. There must be something obvious that I'm unaware of.
Desired Functionality:
The <div> needs to be resizable. It needs to be something a user can drag with a mouse to increase the width and height of the object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<style>
.Work{
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object{
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>>
<script>
$(document).ready(function(){
$(function(){
$(".object").resizable();
});
});
</script>
</body>
</html>

In order to make this work, you need to include jquery-ui.css as well. Also, there is no need to include two different versions of jQuery at the same time, so I will just include v3.5.1.
So your final code should be something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<style>
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
</style>
<div class="Work">
<div class="object"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$(function() {
$(".object").resizable();
});
});
</script>
</body>
</html>

Consider the following code.
$(function() {
$(".object").resizable();
});
.Work {
position: relative;
width: 100%;
height: 10%;
top: calc(12.5% + 1vh);
}
.object {
position: absolute;
height: 3.7vh;
width: 12.75625vh;
border: 3px solid #4286f41a;
background-color: #ccc;
box-sizing: border-box;
margin-left: 1.5vh;
flex-shrink: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="Work">
<div class="object"> </div>
</div>
You had a number of syntax errors and were missing the jQuery UI CSS. Once corrected, the code works as expected.

How to make a picture float over particles-js script?

sorry for this dumb question but i can't figure it out, can someone help me to make the picture float over the particle effect?
If a link can be added to this image it will be nicer.
Here is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Particles.js Example Page</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 { position:absolute; top:30px; left:100px; color:#fff;}
.jquery-script-ads { position:absolute; top:150px; left:100px;}
canvas {
position: absolute;
}
.background {
background-image: url('1.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body class="background">
<h1>jQuery Particles.js Example Page</h1>
<canvas class="canvas"></canvas>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="dist/jquery.particles.js"></script>
<script>
$(document).ready(function() {
$('.canvas').particles({
connectParticles: true,
color: '#ffffff',
size: 3,
maxParticles: 80,
speed: 1.8
});
});
</script>
<IMG class="displayed" src="image.png" height="400" width="400">
</body>
</html>

I find a way by adding :
IMG.displayed {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}

Adding content to div like the weather or my email or twitter

Sorry to ask but I have searched but coming up with nothing.
I have some divs ( I know everyone has a 'div' ) and I want to add feeds\content
See my code below, in these 'widgets' can I add things like twitter and my email and a news feed?
also not to be too picky, can I just get text only ?
How do I go about it ? Is their something
here is the html, jquery and css code...
<!doctype html>
<html lang="en">
<head>
<title>snap to grid</title>
<meta charset="utf-8">
<meta name="description" content="nothing yet">
<meta name="author" content="Pavle Stojanovic">
<link rel="stylesheet" href="snap.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( ".widgets" ).draggable({ grid: [ 10, 10 ] });
$( ".widgets" ).draggable({
containment: "#draggable-container",
drag: function(event){
if($('.widgets').position().left + $('.widgets').width() == $('.body-container').width()){
event.preventDefault(); //cancel the drag.
console.log('d');
}
}
});
});
</script>
</head>
<body>
<div class="body-container">
<div id="draggable-container">
<div id="widget-1" class="widgets"><p>Twitter</p></div>
<div id="widget-2" class="widgets"><p>Weather</p></div>
<div id="widget-3" class="widgets"><p>News</p></div>
<div id="widget-4" class="widgets"><p>Email</p></div>
</div>
</div>
</body>
</html>
html, body{
background-color: #2196F3;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#widget-1{
background-color: blue;
}
#widget-2{
background-color: purple;
}
#widget-3{
background-color: orange;
}
#widget-4{
background-color: green;
}
.widgets{
border-radius: 25px;
padding: 20px;
width: 150px;
height: 200px;
}
#draggable-container{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid black;
width:90%;
height:90%;
}

Categories

Resources