I want to stretch the sidebar vertically when the dropdown is clicked. The height of the sidebar is 100%, so if I click the link or the a tag, the sidebar should stretch.
However, if I click the sidebar the container and the sidebar stays at 100% height and the dropdown goes past the end of the menu.
In the picture there are 4 links as an example, but in the code below I've only added 1 link.
The first image: This is when the links or the a tag is not been click
The second image: This is when the links are already clicked and the sidebar and container does not stretch.
<body>
<!-- SIDERBAR -->
<div class="container">
<div class="sidebar">
<img src="images/1232.png" class="logo">
<h1 class="h1-1">Pacific Sky</h1>
<h1 class="hr-1">___________________________</h1>
<img src="images/sampleimg.png" class="dp">
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
<div class="links">
<br>
<h5 style="color: white; font-size: 2vh;"> GENERAL</h5><br>
<!-- Links -->
<script type="text/javascript" src="js/showhide.js"></script>
<!-- links palatandaan -->
<div class="dashboard" id="dashboard">
<p class="dashboard-color">
<i class="fa fa-podcast" aria-hidden="true" id="dashboardlogo"></i>
DASHBOARD
<i class="fa fa-caret-down okay" aria-hidden="true" id="downlogo"></i></p>
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Messages
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Pending Reservation
<i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Approved Reservation
</div><br>
</div>
</div>
// showhide
$(document).ready(function(){
$(".dashboard").click(function(){
$("a").slideToggle(400);
});
});
*
{
padding: 0;
margin: 0;
}
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
a
{
color: white;
text-decoration: none;
display: none;
font-family: RobotoT;
}
.container
{
background: linear-gradient(to left bottom, #ccccff 0%, #ffffff 100%);
position: relative;
width: 100%;
height: 100%;
}
.sidebar
{
width: 50vh;
height: 100vh;
position: relative;
background-color: #2A3F54;
}
//and this is the links
.links
{
position: relative;
top: 33%;
color: #e5e6e8;
}
.dashboardlinks
{
font-size: 2.5vh;
line-height: 250%;
text-align: left;
color: #e8eaef;
position: relative;
top: 1vh;
padding-left: 14%;
}
#downlogo
{
position: absolute;
right: 8%;
}
Probably just need to change width to height: (and I'd add html)
body
{
width: 100%;
width: 100%;
font-family: 'Alegreya Sans';
}
to
html, body
{
width: 100%;
height: 100%;
font-family: 'Alegreya Sans';
}
Update .sidebar to this
.sidebar
{
width: 50vh;
min-height: 100vh;
position: relative;
background-color: #2A3F54;
}
https://jsfiddle.net/pmuhnhfo/
I just copy pasted more items in fiddle to make it show the issue
The height 100vh before is restricting it and since you want it to stretch the whole way, just set minimum height
On a side note, you should change
<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>
to
<p class="welcomemessage">Welcome, <span class="adminname">Dave Spencer</span></p>
I think you originally you had a p tag inside of another p tag
Related
Today I have a tab bar that looks like this :
https://codepen.io/cdemez/pen/WNrQpWp
stuffs like width: 400px; etc...
If you look at the code, all the sizes are static :-(
So, I have several sizing issues:
Sometimes I have 4 buttons, sometimes 5
On some mobiles (ie. iPhone 5/SE) the bar is going out of the screen :-(
So, I wish to know if there is a way to fix this.
Mainly the second issue, when the screen is too small for the bar, then everything should by dynamically resized to match the screen size.
Any idea ?
I made a couple of changes to your code pen to get this to work. Mainly setting the width and max-width of each menu item width: 10vw; max-width: 65x;. So when the screen is small it will use the visual width "vw" up to when it hits 65px, then it will use that.
$(".mobilebar-tab-item").click(function () {
$(".mobilebar-tab-item").removeClass("active");
$(this).addClass("active");
$(".mobilebar-tab-overlay").css({
left: $(this).prevAll().length * 65 + "px"
});
});
.mobilebar-container {
position: fixed;
bottom: 15px;
z-index: 12;
left: 50%;
transform: translateX(-50%);
}
.mobilebar-tab {
height: 40px;
width: fit-content;
background-color: #fff;
box-shadow: 0 10px 6px 0 rgba(0, 0, 0, 0.175);
border-radius: 6px;
overflow: hidden;
border: 10px solid #fff;
display: flex;
position: relative;
flex-shrink: 0;
bottom: 0px;
}
.mobilebar-tab-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 5vw;
max-width: 65px;
flex-shrink: 0;
cursor: pointer;
transition: 0.3s;
position: relative;
z-index: 2;
}
.mobilebar-tab-item.active {
width: 10vw;
max-width: 105px;
}
.mobilebar-tab-overlay {
border-radius: 6px;
background-color: #f0f0f0;
height: 100%;
width: 10vw;
max-width: 105px;
position: absolute;
left: 0;
top: 0;
transition: 0.3s;
}
.mobilebar-tab__icon {
display: block;
color: #F96972;
transition-duration: 0.3s;
line-height: 1;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="mobilebar-container mobile-layout">
<nav class="mobilebar-tab">
<div class="mobilebar-tab-item active">
<span class="mobilebar-tab__icon">
<i class="fas fa-home"></i>
</span>
</div>
<div class="mobilebar-tab-item">
<span class="mobilebar-tab__icon">
<i class="fas fa-search"></i>
</span>
</div>
<div class="mobilebar-tab-item">
<span class="mobilebar-tab__icon">
<i class="fab fa-themeco"></i>
</span>
</div>
<div class="mobilebar-tab-item">
<span class="mobilebar-tab__icon">
<i class="fas fa-bell"></i>
</span>
</div>
<div class="mobilebar-tab-item">
<span class="mobilebar-tab__icon">
<i class="fas fa-user"></i>
</span>
</div>
<div class="mobilebar-tab-overlay"></div>
</nav>
</div>
You could use max/min width properties instead, that way it changes size of that entire bar depending on screen. You can also set a media query so that once it hits, say 700px it will change the size of that button. You can then use flexbox in the parent container itself and try setting it to flex-wrap: wrap; so the items drop to a new row.
If none of that works the way you want, then you can set the size of the font/icons using vw instead, while using max/min width on the bar. Experiment with those and see if they help give the results you need.
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Transparent half circle cut out of a div
(8 answers)
Cut out transparent circle with CSS3
(4 answers)
Closed 4 years ago.
I received the design below from a design team and am unsure of what the best way is to create the transparent border/margin between the pink add button and the navigation bar.
Navbar design
My html and css are included below, but instead of using a border with a specific colour, I would like the border to be transparent through the Navbars (if that makes sense). My reason for this is that the Navbars and button will be used on different pages with different background colours, so having a fixed border colour is not ideal.
/* Remove default html margin */
html, body {
margin: 0;
padding: 0;
width: 100%;
background-image: linear-gradient(147deg, #6c318f, #262262);
}
/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
background-color: white;
overflow: hidden;
position: fixed;
box-sizing: border-box;
bottom: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.navbar a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
box-sizing: border-box;
width: 20%;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Remove inherent hover color for link */
.navbar a.active {
color: white;
}
/* Bottom navbar icon */
.bottom-nav-icon {
width: 24px;
height: 24px;
object-fit: contain;
opacity: 0.4;
}
/* Active/Hover bottom navbar icon */
.bottom-nav-icon.active, .bottom-nav-icon:hover {
opacity: 1;
}
/* Circular button */
.buy-button {
position: fixed;
/* fix the button to the bottom centre and show above other elements*/
right: 0;
left: 0;
bottom: 28px;
margin-right: auto;
margin-left: auto;
z-index: 5;
/* style the button */
background-color: #ec008c;
color: white;
text-align: center;
display: inline-block;
width: 56px;
height: 56px;
font-size: 16px;
border-radius: 50%;
/* create border around button - this is where I am stuck */
border: 2px solid #262262;
}
<!DOCTYPE html>
<html>
<head>
<title>emoyeni</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="buy-button">+</button>
<div class="navbar">
<a href="#home" class="active float-left">
<img src="img/baseline-bar-chart-24-px.svg" class="bottom-nav-icon active">
</a>
<a href="#news" class="float-left">
<img src="img/baseline-textsms-24-px.svg" class="bottom-nav-icon">
</a>
<a href="#contact" class="float-right">
<img src="img/baseline-account-balance-wallet-24-px.svg" class="bottom-nav-icon">
</a>
<a href="#contact" class="float-right">
<img src="img/baseline-notifications-24-px.svg" class="bottom-nav-icon">
</a>
</div>
</body>
</html>
Just use the transparent value in the border color:
border: 2px solid transparent;
.navbar {
background-color: white;
overflow: hidden;
position: fixed;
box-sizing: border-box;
bottom: 0;
width: 100%;
}
.buy-button {
position: fixed;
/* fix the button to the bottom centre and show above other elements*/
right: 0;
left: 0;
bottom: 28px;
margin-right: auto;
margin-left: auto;
z-index: 5;
/* style the button */
background-color: #ec008c;
color: white;
text-align: center;
display: inline-block;
width: 56px;
height: 56px;
font-size: 16px;
border-radius: 50%;
/* create border around button - this is where I am stuck */
border: 2px solid transparent;
}
<button class="buy-button">+</button>
<div class="navbar">
<a href="#home" class="active float-left">
<img src="img/baseline-bar-chart-24-px.svg" class="bottom-nav-icon active">
</a>
<a href="#news" class="float-left">
<img src="img/baseline-textsms-24-px.svg" class="bottom-nav-icon">
</a>
<a href="#contact" class="float-right">
<img src="img/baseline-account-balance-wallet-24-px.svg" class="bottom-nav-icon">
</a>
<a href="#contact" class="float-right">
<img src="img/baseline-notifications-24-px.svg" class="bottom-nav-icon">
</a>
</div>
You can use a radial background similar to this or a transparent image:
.navbar {
background:radial-gradient(circle at top, transparent 34px,#fff 34px,#fff 33px);
overflow: hidden;
position: fixed;
box-sizing: border-box;
bottom:0;
height:60px;
width: 100%;
}
.buy-button {
position: fixed;
/* fix the button to the bottom centre and show above other elements*/
left: calc(50% - 20px);
bottom: 30px;
margin-right: auto;
margin-left: auto;
z-index: 5;
/* style the button */
background-color: #ec008c;
color: white;
text-align: center;
display: inline-block;
width: 56px;
height: 56px;
font-size: 16px;
border-radius: 50%;
/* create border around button - this is where I am stuck */
border: 2px solid transparent;
}
img {
height:30px;
width:auto;
}
body {
background:url(https://images.unsplash.com/photo-1520987623799-101883d6585a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=614&q=80) no-repeat center top;
}
<button class="buy-button">+</button>
<div class="navbar">
<a href="#home" class="active float-left">
<img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon active">
</a>
<a href="#news" class="float-left">
<img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon">
</a>
<a href="#contact" class="float-right">
<img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon">
</a>
<a href="#contact" class="float-right">
<img src="https://cdn3.iconfinder.com/data/icons/human-resources-management/512/business_man_office_male-512.png" class="bottom-nav-icon">
</a>
</div>
I have 3 links in my navigation bar and whenever they are pressed I would like a smooth scroll to their area on the page. I have the anchors set up, but I do not have any scripting experience so I would need help with the actual smooth scroll. Can any of you tell me what I would need to do? I have also created a JSFIDDLE here: https://jsfiddle.net/d9oxdxbo/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<title>
</title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
<a href="test_webpage.html#about">ABOUT
</a>
</li>
<li>
<a href="test_webpage.html#coupons">COUPONS
</a>
</li>
<li>
<a href="test_webpage.html#feedback">FEEDBACK
</a>
</li>
</ul>
<img src="https://preview.ibb.co/dr3y7v/vintage.png" height="660px" width="100%">
<h2>
<span style="background-color: rgba(26, 102, 255, 0.75)">BRINGING YOU CONVENIENCE
</span>
</h2>
<h3>
<span style="background-color: rgba(26, 102, 255, 0.75)">SINCE THE 2000's
</span>
</h3>
<div id='about'>
<a id="about" name='about'>
<div id='opaque'>
<img src="https://preview.ibb.co/bS5nja/gas_station_hero_image.jpg" height="680px" width="100%">
</div>
<h4>WHO WE ARE
</h4>
<div id='divp2'>
<p>WE ARE A SMALL CONVENIENCE STORE LOCATED IN THE HEART OF CARY, NORTH CAROLINA. WE SPECIALIZE IN CRAFT BEER AND EXQUISITE WINE. WE HAVE ALL YOUR QUICK GROCERY NEEDS. WE HAVE THE BEST PRICES IN OUR AREA GUARANTEED! COME VISIT US FOR A TRULY ENLIGHTENING EXPERIENCE! WE ARE ON GOOGLE SO IF YOU WANT TO SEE OUR REVIEWS OR GIVE US ONE, YOU CAN!
</p>
</div>
<div id='divp'>
<p>YOU MIGHT BE WONDERING, WHY SHOULD I COME HERE? WHAT MAKES THIS GAS STATION DIFFERENT FROM OTHER GAS STATIONS? WELL, WITH EXCELLENT STAFF, LOW PRICES, AND CLEAN FLOORS, THE BETTER QUESTION SHOULD BE, WHY SHOULDN'T I COME HERE! WE HOPE YOU COME TO OUR STORE AND HAVE A FABULOUS EXPERIENCE. IF YOU DO EXPERIENCE ANY DIFFICULTIES DURING YOUR TIME HERE, PLEASE FEEL FREE TO CONTACT THE MANAGER. HE WILL RESOLVE YOUR COMPLAINTS IN NO TIME!
</p>
</div>
</a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'>
<div style="float:left">
<img id='myImg' src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px">
<div id="myModal" class="modal">
<span class="close">×
</span>
<img class="modal-content" id="img01">
<div id="caption">
</div>
</div>
</div>
<div id='pformat'>
<p>COUPONS FOR YOU!
</p>
</div>
</a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a>
</div>
</body>
</html>
CSS
body {
margin: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
font-family: monospace;
font-size: 15px;
text-align: center;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 75px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
img {
position: relative;
display: block;
}
h2 {
position: absolute;
top: 190px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h3 {
position: absolute;
top: 265px;
text-align: center;
width: 100%;
font-size: 65px;
color: white;
font-family: sans-serif;
font-style: italic;
}
h4 {
position: absolute;
text-align: center;
font-family: sans-serif;
font-style: italic;
width: 100%;
font-size: 60px;
top: 700px;
color: #1A66FF;
}
#divp2{
font-size: 20px;
font-family: 'hind';
position: absolute;
text-align: center;
margin-left: 150px;
margin-right: 150px;
color: #4d4d4d;
top: 900px;
margin-left: 150px;
margin-right: 150px;
font-weight: 0;
}
#font-face {
font-family: 'hind';
src: url('C:/Users/lakes/Desktop/hind2.ttf')
}
#pformat{
text-align: center;
margin-right: 30px;
font-size: 55px;
font-family: sans-serif;
margin-left: 620px;
position: absolute;
top: 1450px;
font-style: italic;
color: #1A66FF;
font-weight: bold;
}
#opaque {
opacity: .2;
}
#divp {
font-size: 20px;
font-family: 'hind';
position: absolute;
text-align: center;
top: 1075px;
margin-left: 150px;
margin-right: 150px;
color: #4d4d4d;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0,0,0);
/* Fallback color */
background-color: rgba(0,0,0,0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)}
to {
-webkit-transform: scale(1)}
}
#keyframes zoom {
from {
transform: scale(0.1)}
to {
transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
JS
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
Try this with your anchor tag
<script type="text/javascript">
$(document).ready(function() {
$('a'). Click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $('the link div').offset().top}, 'slow');
});
});
</script>
I have a div on left and right of the page. Currently the div on the right is being hidden.
I'm trying to use jQuery to fadeout the div that is currently being displayed and replace it by fading in the hidden div.
What am I doing wrong? I followed the example on this similar question.
It should happen when you click the About link in the code snippet:
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255, 80, 70, 1) !important;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255, 80, 70, 1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float: left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255, 80, 70, 1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float: left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top: 2.5%;
}
.feed-show {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
Here is a codepen
Many thanks!
I have maded some modifications to your code:
I have changed position:absolute to keep hidden #feed-show with display:none
I have changed inside click function fadeIn to be executed when fadeOut is finish to avoid strange moving effect
$(document).ready(function(){
$("#feed-show").fadeOut(0);
$("a").on('click', function() {
$(".feed").fadeOut(1000,function(){
$("#feed-show").fadeIn(1000);
});
});
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
#feed-show{
display:none;
}
#feed-show p{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="container">
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK. C-oC aims to contribute to the
necessary exaltation of talented artists within the various
ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
OCULT TEXT
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
</div>
You have some problems on your code.
First, your feed-show div is inside your feed div. So if you fadeOut() your feed div, everything inside will be hidden.
And second, in your CSS you have absolute position and top and left properties set for your feed-show, so even if you fadeIn() that element, you're not gonna be able to see it.
I've made a couple of changes on your code, so you can see how one div is fade out and the other one is fade in.
Cheers!
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
.feed-show {
display: none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
I am a bit new to the whole part of Javascript, CSS and HTML.
I'm trying to attach a div to the bottom and center of a parent div.
There is a background image in the parent div which is responsive. My fa fa-arrow is attached to the bottom, and responsive in the vertical direction, not horizontal and neither centered.
Could any kind soul please explain how to solve this or tell me if I started off wrong!
Thanks in advance.
Here is my code:
HTML:
<div class="content-1">
<div id="to-first">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS:
.content-1 {
position: relative;
}
#to-first {
position: absolute;
margin-right: 50%;
bottom: 10;
color: #000;
font-size: 50px;
text-align: center;
cursor: pointer;
display: none;
}
Javascript:
var main = function() {
$(document).ready(function() {
$('#to-first').show();
});
$('#to-first').click(function() {
$('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});
};
$(document).ready(main);
And here is a jsfiddle:
https://jsfiddle.net/804jeg82/330/
Position your to-first in absolute, at the bottom of the content, and give it a width of 100%;
Give a height to your content, else it is empty with an element in absolute inside.
.content-1 {
position: relative;
height: 500px;
border: 1px solid red;
}
#to-first {
position: absolute;
width: 100%;
bottom: 10px;
color: #000;
font-size: 50px;
text-align: center;
cursor: pointer;
border: 1px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-1">
<div id="to-first">
<i class="fa fa-angle-down"></i>
</div>
</div>