Hello everybody I want to make a homepage with a fullscreen image on the background with a border all around.
I have been able to do it as you can see from this jsfiddle
https://jsfiddle.net/dforce/3j5uo5qo/1/
but I would like that the border shrinks when the resolution is smaller or desappear on resolution is smaller than 979px.
I use this script to make the border:
<script>
$theBorder=35; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");
$bgimg=$("#bg #bgimg");
$preloader=$("#preloader");
//]]>
$(window).load(function() {
FullScreenBackground($bgimg,$bg);
$(window).resize(function() {
FullScreenBackground($bgimg,$bg);
});
});
$bgimg.load(function() {
var $this=$(this);
FullScreenBackground($this,$bg);
$preloader.fadeOut("fast");
$this.delay(200).fadeIn("slow");
});
function FullScreenBackground(theItem,theContainer){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
$(theContainer).css("width",winWidth-($theBorder*2));
$(theContainer).css("height",winHeight-($theBorder*2));
$(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
$(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
</script>
Thank you for your help!
hope this will help to you.try this
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding: 0;
}
.maindiv{
width: 100%;
height: 100%;
background-color:black;
position: absolute;
background-image: url(http://3.bp.blogspot.com/-dwPiL6_mLUo/UzPrdohyk0I/AAAAAAAADds/LNvY6Hyp4Tc/s1600/Programmer+HD+Wallpaper+by+PCbots.png);
background-position: center;
display: none;
}
</style>
<body>
<div class="maindiv"></div>
<script type="text/javascript">
$(document).ready(function(){
$(".maindiv").fadeIn(4000)
});
</script>
</body>
</html>
Note if you want to put a responsive image without using bootstrap,
set it as div background-image with width and height in % value.or
give your div
width:anyvalue%;
height:anyvalue%;
then put your image inside this div and for your image,set
width:100%;
height:100%;
What about responsive css?
Something like
<div id="mainimage">
<div class="img"></div>
</div>
and the css:
body{
margin:0;
padding:0;
background:#fff;
}
#mainimage {
box-sizing: border-box;
width: 100%;
height: 300px;
padding: 20px;
}
#media(max-width: 1300px) {
#mainimage{
padding: 10px;
}
}
#media(max-width: 979px) {
#mainimage{
padding: 0px;
}
}
.img{
height:100%;
width: 100%;
background: url(http://www.piedicosta.com/jnuovo/images/big.jpg) no-repeat center center;
background-size: cover;
}
You can add transitions to make the change smoother, something like
#mainimage {
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
-o-transition: all 0.50s ease-in-out;
}
Related
This question is related to one that i have already created transition-in-div . I didnot get answer for my next issue there so i decided to create new question.
I have four boxes and i want the transition effect in all four boxes.
What i want is whenever i click on any box, the width of that box must increase from its side to the left and right to fit the full width. Right now it only fills some portion of width.
My Code is
<html>
<head>
<title>Transition</title>
<style type="text/css">
.container {
display: flex;
justify-content: space-between;
}
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 25% 75%;
}
#third {
background-color: aqua;
transform-origin: center center;
}
#fourth {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
transform: scaleX(4);
}
</style>
</head>
<body>
<div class="container">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
<div id="fourth" class="box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).addClass('scale');
});
});
</script>
Jsfiddle
There's a small mathematical error, you are scaling each div to 4x when their size is 20% so their new size is now 80% instead of the full 100% width.
Please consider the following fiddle: https://jsfiddle.net/m157u2yw/7/
For previewing purposes I've made it so if you click on an expanded box it resets back so you can quickly play with it.
I'm using width instead of scale as it will be useful in case these squares actually have some content inside (scaling would distort it).
I'm also adding another class .scale-down to the not-clicked divs to make sure they also animate out leaving the full space to the expanded one.
Just tweak around your CSS a lil bit:
Since your .box width is 20%, your scaleX() is 5,
Then just go ahead and fix your Transform-origins so it covers out correctly:
https://jsfiddle.net/m157u2yw/8/
.box {
width:20%;
height: 200px;
transition: transform .5s;
transform-origin: 0 0;
}
#first {
background-color: red;
}
#second {
background-color: green;
transform-origin: 33.33%;
}
#third {
background-color: aqua;
transform-origin: 66.66%;
}
#fourth {
background-color: blue;
transform-origin: 100%;
}
.scale {
transform: scaleX(5);
}
Why not put the boxes in containers and animate the width, something like this:
https://jsfiddle.net/pt1vk0c1/
<div class="container">
<div id="first" class="box-container">
<div class="box"> </div>
</div>
<div id="second" class="box-container">
<div class="box"> </div>
</div>
<div id="third" class="box-container">
<div class="box"> </div>
</div>
<div id="fourth" class="box-container">
<div class="box"> </div>
</div>
</div>
.container {
display: flex;
justify-content: space-between;
}
.box-container {
width:25%;
height: 200px;
}
.box {
width:80%;
height: 200px;
transition: width .5s;
transform-origin: 0 0;
}
#first .box {
background-color: red;
}
#second .box {
background-color: green;
transform-origin: 25% 75%;
}
#third .box {
background-color: aqua;
transform-origin: center center;
}
#fourth .box {
background-color: blue;
transform-origin: 100% 0;
}
.scale {
width:100%;
}
Here's a solution that will work regardless of the number of boxes or their width. Better to avoid any magic numbers if possible.
Transition width instead of transform. You won't need any transform origins and it will work with any number of boxes regardless of the box size.
To make the width of the other boxes 0. You can add a class to the container.
Than use
.container.open .box:not(.scale) {
width: 0;
}
to set the width of any box without the class .scale to 0
http://codepen.io/flurrd/pen/xqmwLN
CSS
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 20%;
height: 200px;
transition: width .5s;
background-color: tomato;
}
.box:nth-child(odd) {
background-color: aquamarine;
}
.scale {
width: 100%;
}
.container.open .box:not(.scale) {
width: 0;
}
JS
var containerWidth = $(".container").width();
$(".box").click(function() {
var id = $(this).attr("id");
$(this).toggleClass('scale');
$(".container").toggleClass('open')
});
I am creating a portfolio for the freecodecamp course. I want my portfolio page to have a slide out navigation menu, that slides out once you click on the menu button. I also want to have an image covering the body completely and when the menu slides into the page the picture would move with the body. I already have the slide out menu and the body moves along with the menu as it slides into the viewport, now I just need to figure out a way to add an image to the body that also responds to the slide out menu. Any help would be greatly appreciated!
This is my HTML and JS code that I have written so far.
<!DOCTYTPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="menu menu-open">
<header>
Menu
<nav class="menu-side">
This is a side menu
</nav>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
(function() {
var body = $('body');
$('.menu-toggle') .bind('click', function(){
body.toggleClass('menu-open');
return false;
});
})();
$(document).ready(function(){
$(".menu").css({"height":$(window).height() + "px"});
});
</script>
</body>
</html>
This is my CSS.
.menu{
overflow-x: hidden;
position: relative;
left:0;
}
.menu-open{
left:231px;
}
.menu-open .menu-side{
left: 0;
}
.menu-side,
.menu{
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left:-231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-toggle{
z-index: 1;
}
I think all you need to do is add a background image to the class you add to the body when the menu is open if I understand the question correctly.
.menu-open {
background-image: url('your-image.jpg');
}
You can simply add a div into a body (so you can have more flexibility to manipulate with the content):
<body>
<nav></nav>
<div>
<p>Menu</p>
</div>
</body>
Then use CSS to fill the window with the background and set style of your navigation:
html,
body {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100vh; /* Relative to 100% of the height of the viewport (browser
automatically recognizes height of the window) */
box-sizing: border-box;
}
/* Adjust body size to the html */
body {
width: 100%;
height: 100%;
display: flex;
}
nav {
width: 200px;
height: 100%;
}
div {
width: 100%;
height: 100%;
/* Background resizes automatically when menu appears */
background-image: url('yourimage.jpg');
background-size: cover;
background-repeat: no-repeat;
}
And animate navigation with jQuery:
$("p").click(function() {
$("nav").animate({width:'toggle'}, 350);
});
I have a very simple loading icon, the div is full screen and the image is just a gif:
<div id="loading" class="a">
<img id="loading-gif" src="img/general/712.gif" width="50px" height="50px" class="b" />
</div>
Here are the styles:
.a {
display: none;
position: absolute;
z-index: 9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.3);
}
.b {
display: block;
position: absolute;
margin: 0 auto;
}
When I want to display it, I do so like this:
var hCenter = (Math.floor(window.innerWidth/2)) - 25;
var vTop = window.pageYOffset || document.documentElement.scrollTop;
var vCenter = (Math.floor(window.innerHeight/2)) - 25;
$("#loading-gif").css({top: vTop + vCenter, left: hCenter});
$("#loading").show();
And to hide:
$("#loading").hide();
This works fine in firefox but doesn't seem to work in Chrome or on my iPhone. I can't see an error anywhere - any idea why some browsers don't like it?
Thanks
You should do something like this:
.hidden {
display:none;
}
Then you can add and remove the class to show and hide it.
To hide:
$("#loading").addClass("hidden");
To show:
$("#loading").removeClass("hidden");
Try this one
JavaScript
$(window).load(function() {
$('#status').delay(100).fadeOut('slow');
$('#preloader').delay(200).fadeOut('slow');
$('body').delay(200).css({'overflow':'visible'});
});
CSS
/* cover complete screen */
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:#FFF;
z-index:9999; /* makes sure it stays on top */
-webkit-transition:none;
transition:none;}
/* preloader container at the middle */
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
text-align:center;
}
HTML
<body>
<div id="preloader">
<div id="status">
<h4>Loading...</h4> <!-- include your loading img here -->
</div>
</div>
<h3>This is a body text</h3>
</body>
I am trying to add transition to a growing div.
Here is a jsfiddle: http://jsfiddle.net/fL5rLr2y/
This jsfiddle represent my real world problem.
I have the following markup:
<div class="container">
<div class="inner">
</div>
</div>
And the following css:
html, body {
height: 100%; } .container {
position: relative;
height: 80%;
background-color: blue; }
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red; }
.inner.open {
height: initial;
bottom: 20px; }
Here is my js:
$('.inner').click(function() {
$(this).toggleClass('open');
});
I am trying to add the transition using pure css. How can I do it?
If pure css solution is not possible, how can I use js in order to solve it?
UPDATE
After a lot of investigations, it seems that using calc is the only option to do it in pure css.
Unfortunately I have bed experience with calc, especially with safari and mobile (browser crashes and other surprises). I prefer to avoid using calc for now and use javascript solution to simulate that.
Any idea how?
Edit your .inner and .inner.open classes as demonstrated below ... you need to set a predetermined height to .open
If you're going to use CSS3 transitions you can opt to use calc() to determine your .open height without compromising browser compatibility.
Check demo
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
transition: height 1s;
-webkit-transition: height 1s;
-moz-transition: height 1s;
-ms-transition: height 1s;
-o-transition: height 1s;
}
.inner.open {
height: calc(100%-50px);
bottom: 20px;
}
You can use the dynamic height by updating the style below. Demo at http://jsfiddle.net/fL5rLr2y/8/
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
-webkit-transition: height 1s;
transition:height 1s;
}
.inner.open {
height: calc(100% - 50px); /* top 30px + bottom 20px */
}
Or you can use jQuery animation. See the output at http://jsfiddle.net/8mn90ueb/3/ and code below
Remove the open class and the toggle type
$('.inner').click(function() {
var currentHeight = $(this).height();
if(currentHeight > 50){
currentHeight = 50;
}
else{
currentHeight = $('.container').height() - 50;
}
$(this).animate({
height:currentHeight
},1000,function(){});
});
The CSS transition property is what you need. The height calculation of .inner is now made with jQuery.
Demo with jQuery calculation
$('.inner').click(function() {
var parentHeight = $(this).parent().outerHeight() - 50; // Get parent height - 50px
var innerHeight = $(this).outerHeight(); // Get inner height
// if the inner height = 50px then change height to the parent height calculation
// otherwise return to 50 height
if (innerHeight === 50) {
$(this).height(parentHeight);
} else {
$(this).height(50);
}
});
html,
body {
height: 100%;
}
.container {
position: relative;
height: 80%;
background-color: blue;
}
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
transition: height 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
<div class="inner"></div>
</div>
If you change your mind about calc()
The CSS transition property is what you need along with height: calc(100% - 50px) on the open class. The calc gets you a 30px gap at the top and 20px gap at the bottom when open. The bottom property has been removed.
Compatibility:
The transition property is unlikely to need browser prefixes. Have a look here for its browser support.
calc() enjoys widespread support including, importantly, IE9 + support. More information here. To provide a fallback height for IE 8 and below, provide a normal height percentage property before the calc height for older browsers to use. Something like height: 70%
Demo with CSS only
$('.inner').click(function() {
$(this).toggleClass('open');
});
html,
body {
height: 100%;
}
.container {
position: relative;
height: 80%;
background-color: blue;
}
.inner {
position: absolute;
top: 30px;
left: 0;
right: 0;
height: 50px;
background-color: red;
transition: height 0.5s;
}
.inner.open {
height: 70%; /* pick a percentage height for IE 8 and below */
height: calc(100% - 50px); /* 100% height minus 30px at the top + 20px at the bottom */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="container">
<div class="inner"></div>
</div>
I want to place a heart image in the center of the user's screen. And every time I click it should be resized and grown .
The main problem is that i want to do that with no margin.
Can you help me please?
Edit 1 -
This is my code so far, but it is really messy and uses margin
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<style>
#container {
width: 100px;
height: 100px;
position:absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
#Msg1 {
width: 200px;
height: 100px;
display:none;
position:absolute;
margin-right:55%;
margin-top: 45%;
}
body {
overflow:hidden;
background-color:#ffd6d6;
}
</style>
<script>
var size=100;
var i=0;
var heartImage = document.getElementById('container');
$(document).ready(function(){
$(function() {
$("#Msg1").fadeIn("slow");
});
$(function() {
$("#container")
.mouseover(function() {
if(i==0){
var src = $(this).attr("src").match(/[^\.]+/) + "over.png";
$(this).animation
$(this).attr("src", src);}
})
.mouseout(function() {
var src = $(this).attr("src").replace("over.png", ".png");
$(this).attr("src", src);
});
});
$("#container").click(function(){
i++;
if(i==1)
{
$("#Msg1").fadeOut("fast");
}
if(i==6)
{
$("body").css("background-color","#9d1b1b");
$("#container").hide();
}
size=size*2;
$("#container").animate({
height:size,
width:size,
margin:-size/2,
});
});
});
</script>
</head>
<body dir="rtl">
<img id="container" src="heart.png" alt="null"/>
<div id="Msg1">
</div>
</body>
Here is the code in a JSFiddle.
This is a simple code that doesn't uses margins it uses display:table , display:table-cell and vertical-align:middle, the problem with this solution is that you need to know the height of the view (you can always get it via JavaScript/jQuery but I fixed it in 400px just for the example).
Here is the jsFiddle with the working example.
This is the simple HTML:
<div class="content">
<div class="wrapper">
<div class="inner">
<div class="heart"></div>
</div>
</div
</div>
The jQuery 'click' bind: (it toggles the event now, just for showing purpose)
$(document).ready(function(e) {
$(".heart").click(function () {
$(this).toggleClass("bigger");
})
});
And the CSS (I use the CSS3 transition here (with the vendor prefixes) but you can animate it via jQuery to make ir cross-browser
body{
height:400px;
}
.content{
display:table;
height:100%;
width:100%;
}
.wrapper{
display:table-cell;
vertical-align:middle;
height:100%;
}
.inner{
text-align:center
}
.heart{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
display:inline-block;
background: transparent url('http://wbom.files.wordpress.com/2012/02/red-heart.png') center center no-repeat;
background-size: 250px;
width:250px;
height:250px;
}
.bigger{
background-size: 350px;
width:350px;
height:350px;
}
Hope it helps, sorry if it is too long.
Cheers.