So im trying to create a zoomable image using css transform: scale and and overflow on the container div. However when the scale is put on the image, i am unable to scroll up or left.
Ive included my test 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, minimal-ui">
<!-- CSS INCLUDES-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS INCLUDES -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TITLE -->
<title>test</title>
</head>
<style>
#zoom-wrapper {
overflow: auto;
height: 90vw;
width: 90vw;
border: 1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
.zoom {
transform: scale(2);
transition: transform ease .2s;
}
</style>
<script>
$(document).ready(function() {
$('#zoom').click(function() {
$(this).addClass('zoom')
});
});
</script>
<body id="gallery-wrapper" style="background-color: #efefef">
<br><br>
<div id="zoom-wrapper">
<img id="zoom" class="img-responsive center-block" alt="zoom" src="https://i.ytimg.com/vi/7ecYoSvGO60/maxresdefault.jpg">
</div>
</body>
</html>
Related
I'd like to have this hover animation run once when the page loads, preferably without JS.Border must remain there after the animation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
width: 0%;
border-bottom: 5px dotted black;
transition: .5s;
}
.border-bottom-animate:hover:after {
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
I want to animate this without hover
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
That is all there is to the problem. No further details worthy of adding.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
transition: .5s;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
I want to animate this without hover
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
I have in image centered on the page through a container which I'm not really sure is the correct way to do it but it worked until I found out the problem I have which is it doesn't get resized!! i tried the img-fluid as bootstrap documentation says but i think the issue might be with the container?
.center-logo {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: absolute;
top: auto;
left: 50%;
transform: translate(-50%, -15%);
width: 100%;
height: auto;
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link type="text/css" rel="stylesheet" href="static/style1.css" media="screen"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class = "center-logo">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle" alt="...">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The image is small and it is resizing correctly but the max width and height is 250px; you should use a bigger image to resize correctly in larger screens.
I need to add the thumbnail before the video using Jquery. I have added the image but when I change the page size the thumbnail is should be centered of the place As per the below image,
But, My image is responsive as below,
My Jquery,
$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
can any one please help me to resolve the issue?
To position the image container in the middle of the page use following style (note that you need to remove position: fixed; from image).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
In the snippet (view in full screen) I added a <div style="height:100vh;">to emulate a larger page, which you should probably remove for your own page. Also you should keep the styles in a css file and HTML in html file, since it is hard to maintain a big blob in javascript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
i have been doing this website but i got stuck at the point where the blusih grey blank space at the bottom of the screen refused to go.
i have moved the of the page. Any ideas on how to fix that blank area ?
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
body {
background: #08121A;
background-image: url('../img3.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;
}
.stretch {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/** element defaults **/
table {
width: 100%;
text-align: left;
}
th,
td {
padding: 10px 10px;
}
th {
color: #666;
background: #141517 none repeat-x scroll left top;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
</html>
Body css is wrong. Try this:
background-size:cover;
try to put img {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
and move the img as last element in body tag
in your case body will take height from all the elements in it. so if u put img - background always will take the height of body( this is calculate form all the elements in the body) ,so if you put as a tag <img src='myimg'/> will take space and don't forget to put img tag low z-index
Please correct your html code.
You must end your tag before start before tag. not end of tag. so your html code will be like this:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
Put here your body content
</body>
</html>
Then follow the css.
.yourcssClass {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
I developp with phonegap and I have got a problem with the style.
I just want to place a footer at the bottom.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body id="page">
<div id="bottom">
<p>Bonjour</p>
</div>
</body>
</html>
This is my css
#bottom {
position:fixed;
width: 100%;
bottom: 0px;
background-color: #f00;
}
body {
min-height: 533px;
height : 100%;
padding: 0;
margin: 0;
}
And I've got this
Result on the phone
How can I solve this, or anyone meet the same problem?
Thanks !
Check the styles, make sure there aren't any other styles that are being automatically added. The one thing to check in particular is the style for the <p> Try setting the margin and padding both to 0.
First thing, is that to position fixed does not work on IE.
To fix this, I add to include jquery on my project and change the position to absolute
#bottom {
position:absolute;
width: 100%;
bottom: 0px;
background-color: #f00;
margin: 0px;
padding: 0px;
left: 0px;
}
and my index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="bottom">
<p>Bonjour</p>
</div>
</body>
</html>
And now it's working