The IE8 do weird on :before and background
I use :before and background to simulate a radio input, the code below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Foundation</title>
<script src="javascripts/modernizr.foundation.js"></script>
<link rel="stylesheet" href="stylesheets/docs.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<style>
#aaa:before {
width:16px;
height:16px;
content:"";
display:block;
background: transparent url('img/7.png') -2px -2px no-repeat;
}
#aaa.checked:before {
background-position: -38px -2px;
}
</style>
</head>
<body>
<div id="aaa" onclick='$("#aaa").toggleClass("checked")'></div>
</body>
</html>
On the chrome, click on the image, the effect works well, on IE8, there is no effect of first click on image, and second time, it works weird.
Related
i wanted to ask why my picture is not getting inside the first container when i set it as background image.
did i made the path wrong?
this is so far the code i have
<!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="style.css" />
<title>Document</title>
</head>
<body>
<div class="first-image">
<h1>Delije</h1>
</div>
</body>
</html>
.first-image {
background-image: url(./images\pattern.jpeg);
border: 2px solid red;
}
The image url needs to be a string:
background-image: url('./images/pattern.jpeg');
The CSS should be like this:
.first-image {
background-image: url(images/pattern.jpeg);
border: 2px solid red;
}
The forward slash is the correct form of the addressing.
Your path is incorrect
url(./images\pattern.jpeg)
You have one / and then \
The path is incorrect, your code should be this instead.
.first-image {
background-image: url('images/pattern.jpeg');
border: 2px solid red;
}
Why is my text not being centered when i am using the margin to center it(IT WORKS WHEN I USE - text-align : center) :
here is the code and the screenshot :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Angad's website</title>
<link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<h1>I'm Angad</h1>
<p>a student </p>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/mountain.png" alt="mountain-image">
</body>
</html>
CSS TO THIS :
h1{
background-color: #ffe3fe;
margin: 0 auto;
}
RESULT :
You need to set a width as well. In the browser's mind, this is already centered. Here is an example:
h1{
background-color: #ffe3fe;
margin: auto;
width: 8em;
}
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>
Below is the html code.
<html>
<head>
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
You can see the 414 pixel div is there
I know the devicePixelRatio is 3, so the actual pixel of width is about 414 * 3 pixel. But when I set width to 414 pixel in css, why it occupy about 2/5 of the width? How does the css pixel map to the actual pixel?
Another attached.
Why I need to set 960px to fill the width of iphone 6plus?
You have to use viewport metatag to control the layout on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For more help on viewport read this Using the viewport meta tag to control layout on mobile browsers
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
As far as I understood you need to use viewport meta tag,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I doubt you are missing this metatag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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>