I'm trying to make an entire flexbox item clickable, which is pointing at some javascript. As i'm using javascript to pull in content below the flexbox container there are multiple IDs within the structure to consider.
At the moment i'm only able to make the text clickable rather than the entire .div and if I move the link it breaks the flexbox from scaling.
There are some other similar questions on here, but because of the javascript none of the answers seem to be work.
I've added the code that i'm using here https://jsfiddle.net/xv3emywb/, and also pasted it below. Any help would be really appreciated.
Thank you!
HTML Structure:
<div class="offer-flex-container";>
<div id="solutions-anchor-div" class="offer-flex-item">
<a id="solutions-anchor" href="javascript:;">Solutions</a>
</div>
<div id = "services-anchor-div" class="offer-flex-item">
<a id="services-anchor" href="javascript:;">Services</a>
</div>
<div id="lifecycle-anchor-div" class="offer-flex-item">
<a id="lifecycle-anchor" href="javascript:;">Lifecycle</a>
</div>
</div>
CSS:
.offer-flex-container{
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.offer-flex-item{
background: #150f2a;
margin-right: 2px;
width: 500px;
height: 200px;
line-height: 100px;
color: white;
font-weight: 400;
font-size: 30px;
text-align: center;
padding-top: 60px;
}
And the javascript that i'm using to load content below the .div once the link has been selected.
$(document).ready(function(){
$("#solutions-content").show();
$("#services-content").hide();
$("#lifecycle-content").hide();
$("#solutions-anchor-div").css("background","#2fb4c8");
$("#solutions-anchor").click(function(){
$("#services-content").hide();
$("#solutions-content").show();
$("#lifecycle-content").hide();
$("#solutions-anchor-div").css("background","#2fb4c8");
$("#services-anchor-div").css("background","#150f2a");
$("#lifecycle-anchor-div").css("background","#150f2a");
});
$("#services-anchor").click(function(){
$("#services-content").show();
$("#solutions-content").hide();
$("#lifecycle-content").hide();
$("#services-anchor-div").css("background","#2fb4c8");
$("#solutions-anchor-div").css("background","#150f2a");
$("#lifecycle-anchor-div").css("background","#150f2a");
});
$("#lifecycle-anchor").click(function(){
$("#services-content").hide();
$("#solutions-content").hide();
$("#lifecycle-content").show();
$("#services-anchor-div").css("background","#150f2a");
$("#solutions-anchor-div").css("background","#150f2a");
$("#lifecycle-anchor-div").css("background","#2fb4c8");
});
});
It's because anchor tag is inline. So add below css code in css file and remove padding from ".offer-flex-item" class and it will work as expected.
.offer-flex-item a{
display:block;
}
.offer-flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.offer-flex-item {
background: #150f2a;
margin-right: 2px;
width: 500px;
height: 200px;
line-height: 100px;
color: white;
font-weight: 400;
font-size: 30px;
text-align: center;
padding-top: 60px;
}
.full-width-link a{
display: block;
height: 100%;
}
a:hover{
background-color: white;
}
<div class="offer-flex-container">
<div id="solutions-anchor-div" class="offer-flex-item">
<a id="solutions-anchor" href="javascript:;">Solutions</a>
</div>
<div id="services-anchor-div" class="full-width-link offer-flex-item">
<a id="services-anchor" href="javascript:;">Services</a>
</div>
<div id="lifecycle-anchor-div" class="offer-flex-item">
<a id="lifecycle-anchor" href="javascript:;">Lifecycle</a>
</div>
</div>
I added an onhover class so you can see in this example what the surface of your link is. I also made the second element full size. However, still the padding of the parent element will be present.
Thanks to #CBroe for input.
The simple fix was to remove any padding from the div containers and add some styling to the link.
.offer-flex-item a{
display:block;
height: 100%
}
Related
This is how it's looking
i need to make the icon and the text on the same line and close to each other, i tried usingdisplay: inline-block; but it didn't work, here's my code.
HTML:
<div className="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
CSS:
.Student_Icon {
height: 1vw;
width: 1vw;
display: inline-block;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
Use flex in this case as shown below
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
.Comment_Icon {
display: flex;
flex-direction: row;
align-items: center;
}
.Student_Icon {
margin-right: 3px;
}
<div class="Comment_Icon">
<img src={StudentIcon} alt="StudentIcon" class="Student_Icon"></img>
<div class="Comments">5 Class Comments</div>
</div>
.Student_Icon {
float: left;
padding-right: 10px;
}
.IconText {
padding-top: 0.8vw;
font-size: 1.5vw;
}
.Comments {
font-size: 2.5vw;
display: inline-block;
}
<div className="Comment_Icon">
<img src=https://via.placeholder.com/20 class="Student_Icon"></img>
<div className="Comments">5 Class Comments</div>
</div>
I made use of float: left;
So the icon/image comes left and the text next to it.
You can achieve this with flexbox styling. Note that I am changing your React structure a bit and also adding a fake image. And did you mean to use 1vw? that means 1% of the viewport width and is pretty small - esp on small screens.
Using and referencing REM units is more reliable ( REM is set in the root element and is usually 16px but can be changed. But the advantage of using rems is that it is a common size that all elements can access.
.Comment_Icon {
display: flex;
align-items: center;
}
.Student_Icon {
height: 1.5rem;
width: 1.5rem;
}
.Comments {
font-size: 1rem;
margin-left: 8px;
}
<div class="Comment_Icon">
<img src="https://hipsiti.com/uploads/default-profile.png" alt="StudentIcon" class="Student_Icon"/>
<span class="Comments">5 Class Comments</span>
</div>
So i get this above mentioned error when i click my hamburger. And after clicking the hamburger my whole page turns white and when i right click nothing appears at all. Where is the issue here?I searched a lot of similar problems on the internet. Theres only talks about putting the script tag at the bottom and writing the window.onload function. I have put the script tag at the bottom of the body still this is happening.
ERROR MESSAGE:
Error in event handler: TypeError: Cannot read property 'dataset' of null
at Jr (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:103527)
at Xr.updateState (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105004)
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105819
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:73161
at chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110691
at Array.forEach ()
at wi.fire (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110679)
at _onBgPortMessage (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:115134)
HTML
<header>
<nav class="wrapper2">
<div class="logo">
<h1>LO</h1>
</div>
<div class="navbar">
<ul>
<li><a>ABOUT</a></li>
<li>ARTICLES</li>
<li>SUBSCRIBE</li>
</ul>
</div>
</nav>
<div class="hamburger" onclick="open()">
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="hero">
<h1>LOMBOK</h1>
<h2>HOLISTIC HEALTH & MORE</h2>
<div class="bigbar"></div>
</div>
</header>
SASS
header{
background-image: url(../images/heroimg.jpg);
background-size: cover;
background-position: 65%;
height: 100vh;
margin: 10px;
nav{
display: none;
justify-content:space-between;
.logo{
font-size: 1.5rem;
position: relative;
top: -10px;
}
.navbar ul{
display: flex;
width: 480px;
justify-content: space-between;
li{
list-style: none;
cursor: pointer;
letter-spacing: 0.2rem;
a{
text-decoration: none;
color: black;
}
}
li:last-child{
border: 2px solid black;
padding: 15px 20px;
position: relative;
top:-16px;
}
}
}
.hamburger{
position: absolute;
top: 2rem;
right: 1.8rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 20px;
cursor: pointer;
.bar{
height: 5px;
width: 100%;
background-color:$primary-color;
border-radius: 10px;
}
}
.hero{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.7;
h1{
font-size: $primary-size;
font-weight: 600;
}
h2{
font-size: $secondary-size;
font-weight: 500;
}
.bigbar{
display: inline-block;
height: 7px;
width: 45px;
background-color: $secondary-color;
margin-top: 20px;
}
}
}
.active{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.bgdark{
background-position: left bottom;
opacity: 0.4;
}
.inactive{
display: none;
}
JS
window.onload = function() {
const open = ()=> {
const nav = document.querySelector("nav");
const header=document.querySelector("header");
const hero=document.querySelector(".hero");
nav.classList.toggle(".active");
header.classList.toggle(".bgdark");
hero.classList.toggle(".inactive");
};
};
Ok so the issue here is that the open() function is a reserved method on the window object https://developer.mozilla.org/en-US/docs/Web/API/Window/open
So when you add open() on the onclick argument it will fire the window.open() method, which whenever executed without any arguments just opens a black page (hence no DOM to be inspected)
So one of the easy fixes is just to rename the function to anything that is not already a standard method of the window object. Or just add an anonymous function as a callback to the click event in the js file
document.querySelector('.hamburger').addEventListener('click', function(e) {
const nav = document.querySelector("nav");
const header=document.querySelector("header");
const hero=document.querySelector(".hero");
nav.classList.toggle("active");
header.classList.toggle("bgdark");
hero.classList.toggle("inactive");
});
and here's some simple fiddle
https://jsfiddle.net/5hdk1op4/
I've got some text that is positioned center of the container and I would like to have some other text that starts where the text positioned in center starts (these divs are not having the same length so here is the problem) I tried by adding jquery to get the X position but no success, and I have no clue how to solve it only with css.
Here's my code:
<div class="graphic-icons-page">
<div class="container icons-container">
<div class="icons-software-title-left">Wide</div>
<div class="icons-software-title-center text-center"><span>Text in center</span></div>
</div>
</div>
.icons-container{
height:80vh;
background-color: black;
color:white;
}
.graphic-icons-page{
display: flex;
justify-content: center;
align-items: center}
///test
.icons-software-title-center{
width: 100%;
}
.icons-software-title-left{ font-size: 50px;}
.icons-software-title-center{
font-size:50px
}
Here's how I want to look:
I added one div and move the icons-container inside the other container. Would this work?
In this fiddle, I added bootstrap css to test https://jsfiddle.net/1aywg3Lm/
body {
background-color: black;
}
.container-center {
text-align: center;
}
.icons-container{
height:80vh;
background-color: black;
color:white;
display: inline-block;
text-align: left;
}
.graphic-icons-page{
display: flex;
justify-content: center;
align-items: center}
///test
.icons-software-title-center{
width: 100%;
}
.icons-software-title-left{ font-size: 20px;}
.icons-software-title-center{
font-size:20px
}
<div class="graphic-icons-page">
<div class="container">
<div class="icons-container">
<div class="icons-software-title-left">Wide</div>
<div class="icons-software-title-center text-center"><span>Text in center of the page</span></div>
</div>
</div>
</div>
I solved my issues using width:max-content
.container-center {
text-align: center;
width: 100%;
background-color: black;
}
.icons-container{
height:80vh;
background-color: black;
color:white;
display: inline-block;
text-align: left;
width: max-content;
}
I want to display Latest chat person 1st position(active) with firebase but firebase have not date field. so i am tring date number of milliseconds with flexbox column-reverse that will start from top but not from bottom. I have tried with position but not working.
Would you please give me a good way to do this.
.container {
display: flex;
flex-direction: column-reverse;
/*flex-flow: flex-start;*/
justify-content: flex-end;
align-items: flex-start;
height: 700px;
width: 100%;
background: blue;
position: absolute;
overflow:auto;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;
background-color: red;
top:0px;
}
.active{
order:1;
}
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box active">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
Change justify-content property to flex-end - see demo below:
.container {
display: flex;
flex-direction: column-reverse;
/*flex-flow: flex-start;*/
justify-content: flex-end; /* CHANGED */
align-items: flex-start;
height: 700px;
width: 100%;
background: blue;
position: absolute;
overflow:auto;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;
background-color: red;
top:0px;
}
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
I was in the same situation, how I hacked it is by having the flex property - order saved in firebase for every post. Flex has an order property which you can set. It makes the ordering of elements very easy.
Just set order property and value fetched from firebase to your every post.
Here is the link of the page, I have used it on: https://hackinbits.com/blog
Here is the link to the MDN docs: Set https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property
So my p tag starts as hidden and on hover shows visible. But can anyone help me use animate.css to use the slide in effect on the p tag when I hover?
#div:hover{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.4);
justify-content: center;
}
h2{
margin-top: 150px;
color: #fff;
display: block;
}
p{
visibility: visible;
color: #fff;
padding: 20px;
display: block;
}
<div id="div">
<div class="div">
<h2>Header</h2>
<p></p>
</div>
</div>
You can use animation-name of slideInUp (predefined in animate.css) on your <p> tag like:
#div:hover p {
animation-name: slideInUp; // Predefined in animate.css
}
You don't even need to use javascript also. Have a look at the snippet below:
#div {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
#div:hover {
background-color: rgba(0,0,0,0.4);
}
#div:hover p {
animation-name: slideInUp;
}
h2{
color: #fff;
display: block;
}
p{
visibility: visible;
color: #fff;
padding: 20px;
display: block;
}
body {
margin: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div id="div" class="animated">
<div class="div">
<h2>Header</h2>
<p class="animated">Para</p>
</div>
</div>
Hope this helps!
Here you go with a solution https://jsfiddle.net/g19ej4bd/
$('#div').hover(function(){
$(this).find('p').slideDown();
}).mouseleave(function(){
$(this).find('p').slideUp();
});
#div:hover{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.4);
justify-content: center;
}
h2{
margin-top: 150px;
color: #fff;
display: block;
}
p{
visibility: visible;
color: #fff;
padding: 20px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="div">
<div class="div">
<h2>Header</h2>
<p>dasdas</p>
</div>
</div>
Please check the jsfiddle as the code isn't working in stackoverflow snippet.
I've used jQuery methods such as hover, mouseleave, slideDown & slideUp.
You can control the speed of slideDown & slideUp by passing parameters.
Reference Document:
slideDown: http://api.jquery.com/slidedown/
slideUp : http://api.jquery.com/slideup/
Hope this will help you.
you don't need to use any javascript fot this. https://codepen.io/anon/pen/oeKMRq
see how easy it is to apply effects with css. just apply any value like height to you element and a transtion for height.
then let the height change on hovering over the parent container.
nicer and smoother.