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);
});
Related
Hey guys i am trying to make transition when the scroll it pass the first div( that is with the class name "one") height it will resize it width to 20% and the second div ( with the class name "two") will take the remaining width of the "one" class. <== when this happened it will turn the "two" class to a display as a block rather than inline-block. the problem that i have right now is that when the ".one" class it got resize to 20% the ".two" class disappear same as the below class and when the ".two" class disappear when i scroll up it only resize the ".one" class div halfway . can anyone help me how to achieve this? here's my code and some image that i made of a transition that i want to make in case still confused of what i want to achieve. thanks for the help.
in here it shown from this image to the left shown display of the page before scroll and from the right image shown when the user scroll the page that will reduce the size of the div class ".
in this section of image from the left shown when the width of the div class ".one" is have width of 20% it will not resize it again and for the right image shown when the div class ".one" have width of 20% it will change the css of div class ".two" from inline block to display block and when it scroll it will show the third div.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
height: 2000px;
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
}
.content-wrapper {
width: 100vw;
white-space: nowrap;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
display: inline-block;
}
.section label {
font-size: 100px;
color: white;
text-align: center;
transform: translateX(-50%) translateY(-50%);
}
.one {
background-color: red;
top: 0;
z-index: -999;
}
.two {
background-color: yellow;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content-wrapper">
<div class="section one">
<label>one</label>
</div>
<div class="section two">
<label>two</label>
</div>
</div>
<div class="revelation" style="width: 100vw; height: 100vh; background-color: black;">
<label>Tree</label>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<script type="text/javascript">
$(window).scroll(function() {
var winScrollTop = $(window).scrollTop() + 0,
zeroSizeHeight = $(document).height() - $(window).height(),
newSize = 1400 * (1 - (winScrollTop / zeroSizeHeight));
let box = document.querySelector('.one');
let width = box.clientWidth;
console.log(newSize)
if(newSize > 331.13772455089827 ){
$(".one").css({
"width":newSize
})
}else if(newSize <= 331.13772455089827){
$(".section").css({
"display":"block"
})
}
});
</script>
</body>
</html>
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;
}
I'm trying to create a Side menu for my responsive website. I'm not that good with JavaScript but it is working! (so far)
My problem is that, I'm toggling the <nav> class to make it appear and dissapear from the left side. The button to click is outside the <nav> content and the button to close is a simple text inside the <nav> content.
So, my HTML looks like this:
<nav id="nav-slide" class="nav-slide">
Side Content <br>
Close
</nav>
That's the nav that I'm trying to Toggle. The button to open should be this image:
<img id="menu-icon" src="images/menu-icon.svg"/>
CSS:
.nav-slide {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
background-color: #3f3f3f;
z-index: 99;
box-sizing: border-box;
padding: 20px;
color:#fff;
margin-left: -100%;
transition: margin 200ms ease-in-out;
}
.nav-open {
margin-left: 0px;
transition: margin 200ms ease-in-out;
}
and my JAVASCRIPT:
$("#menu-icon").click(function(){
$("#nav-slide").toggleClass("nav-open");
});
$("#close-button").click(function(){
$("#nav-slide").toggleClass("nav-slide");
});
Is working so far! But when I click on Close text, and after closing the <nav> it keeps displaying <nav> content like this image:
Image with example of problem
Any way to solve this?
JQuerys toggleClass does add a new class to an item. If it already has that class, it will remove it from that item. So while your nav's base class is nav-slide, toggle nav-open only (not both). Here's a slightly different, basic example of an animated side-nav:
$('button').on('click', function (e) {
$('.menu').toggleClass('open');
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 20%;
background-color: tomato;
transform: translate(-100%, 0);
transition: transform 1s;
}
.menu.open {
transform: translate(0, 0);
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<button>menu</button>
<div class="menu">
<button>close</button>
</div>
Edit: Here is a pen of your example:
http://codepen.io/wilmaknattern/pen/xZXMaW
I'm trying to update a background-image on the body element of a page, when I hover links with data-* attributes. It works like a charm but I can't find a way to create a smooth fade between the images when a link is hovered. Here is my code :
$(document).ready(function(){
$('.link').hover(
function() {
var bg = $(this).data('fond');
// alert(bg);
$('body').css("backgroundImage", 'url(' + bg + ')');
},
function () {
$('body').css("backgroundImage", 'url(http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg)');
}
);
});
body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
header {
width: 50%;
margin: 50px auto;
}
h1 {
text-align: center;
}
nav {
position: absolute;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
nav ul {
padding: 50px;
background-color: rgba(0, 0, 0, 0.95);
}
nav ul li {
display: inline-block;
padding: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
}
<header>
<h1>Hover a link, bro</h1>
</header>
<!-- Main -->
<main>
<nav class="main-nav">
<ul>
<li data-fond ="img/belharra.jpg" class="link">Belharra</li>
<li data-fond ="img/jaws.jpg" class="link">Jaws</li>
<li data-fond ="img/mavericks.jpg" class="link">Mavericks</li>
<li data-fond ="img/nazare.jpg" class="link">Nazare</li>
<li data-fond ="img/teahupoo.jpg" class="link">Teahuppo</li>
</ul>
</nav>
</main>
Bonus: Someone can explain to me why I had to use a second function when the mouse leave a link to give the body the original background image? I thought the .hover() method automatically put a toggle on the targeted element...
The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.
Thanks a lot for the help !
I don't think this can be done with a smooth fade effect.
A better way to achieve this is to put all your images in a div container in your html. All your images need to have a css opacity property to 0. In this way, you can easily change the opacity property beetween your images and have your smooth fade effect.
body {
margin:0;
background-image: url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
background-repeat: no-repeat;
background-size: cover;
transition: all 1s;
}
please change your url link url("http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg");
it is not correct
you can try your jquery like this.
$('body').fadeOut(1000).css("your code").fadeIn(1000);
following html,I have created to get an idea.think this may help to you.just copy and try it.
<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">
.myimage{
width:500px;
height: 500px;
overflow: hidden;
}
.myimage img{
width: 100%;
height: 100%;
}
</style>
<body>
<div class="myimage">
<img id="one" src="http://www.estero.co.nz/new/wp-content/uploads/2014/03/45901_new-zealand.jpg"/>
<img id="two" src="http://www.timeforkids.com/files/styles/tfk_rect_large/public/2011-07/nz_ss5.jpg?itok=0m-TtEYy"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#one").mouseenter(function(){
$(this).fadeOut(1000);
});
});
</script>
</body>
</html>
I'm using videobox to embed streams into my site, and I just discovered that when videobox is "on"- i.e. I clicked on a link that brings it up and dims everything around it- I can still scroll down and see the rest of my (non-dimmed) site. This breaks immersion, and I'd like to disable the scrolling, but only for when the videobox is on.
I have no idea where to start though.
You can't do this just with JavaScript, as far as I know, as the onscroll event is not cancelable.
You can achieve this by positioning everything in a container div with a height and width of 100% and disabling overflow on html and body elements, so you actually get the scrollbars on the container div. When your videobox is on, you can turn on an overlay that hides everything behind it (including the scrollbars on the container) and display the videobox on top of it.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Prevent scrolling</title>
<style>
* { padding: 0; margin: 0; border: 0 }
html, body {
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: auto;
}
#large-div {
background: #aaa;
height: 5000px;
width: 5000px;
}
#overlay {
position: absolute;
background: #fff;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
height: 100%;
width: 100%;
z-index: 1000;
display: none;
}
#videobox-container {
position: absolute;
background: #dd8;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
margin: -300px 0 0 -200px;
z-index: 1001;
display: none;
}
</style>
</head>
<body>
<div id="container">
<div id="large-div"></div>
</div>
<div id="overlay"></div>
<div id="videobox-container"></div>
<script>
function showVideoBox() {
// show both overlay and videobox-container
document.getElementById("overlay").style.display = "block";
document.getElementById("videobox-container").style.display = "block";
}
showVideoBox();
</script>
</body>
</html>
(You'll have to fiddle a bit with the positions of your elements, but you get the idea.)
The easy solution is to add the css body{overflow:hidden;} when the video starts playing and after that remove it. Also, can you not put the video box in a div tag and set its position to fixed?
in videobox.js
replace line 80
this.overlay.setStyles({'top': window.getScrollTop()+'px', 'height': window.getHeight()+'px'});
with this:
this.overlay.setStyles({top:-$(window).getScroll().y,height:$(window).getScrollSize().y+$(window).getScroll().y});
Essentially this gets the height of the 'y' scroll and rather than just what the screen is showing.