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.
Related
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;
}
How can I hide a <div> section with JS and
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug
</div>
</div>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
</style>
So I am looking to include a button with:
<span id="a33"><button>×</button></span>
</div>
</div>
How can I get the <span> to hide the <div> tag?
Thanks,
Ring Games
Use onclick attribute;
More info: DOM onevent handlers
.sticky {
position: -webkit-sticky;
position: sticky;
}
.alertB1 {
width: 100%;
height: 125px;
background: lightgreen;
}
<div class="alertB1">
<div class="sticky">
<h1> This site is still being built</h1>
<p> Please remember this site is still being built. Click here to report a bug </p>
<span onclick="document.getElementsByClassName('alertB1')[0].style.display = 'none'" id="a33"><button>×</button></span>
</div>
</div>
function onToggle() {
const ele = document.querySelector(".toggle-div");
ele.classList.toggle("toggle");
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.button {
position: relative;
background-color: #4caf50;
border: none;
font-size: 28px;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.toggle-div.toggle {
visibility: hidden;
}
<body>
<button onclick="onToggle()" class="button">Click here to toggle</button>
<div class="toggle-div">
<h1>Toggle Div on click</h1>
</div>
</body>
For this personal sight I'm building I want it to be fairly simple. I have a big title in the middle of the screen, just one word, and when you hover over it I want it to be replaced with a menu -- basically a white box the size of the title with links on it.
The problem with other solutions I've seen is mostly people want to replace one word with just one word, I could do that. But I want to change the contents drastically, and I can't quite figure it out. I'm having trouble getting it to be positioned correctly, as well as there is a LOT of flickering happening.
Confused about how I'd add a whole list of links into the css "content" or js "data" fields.
Here is a jsfiddle of what i'm working with so far as well as my code.
<div class = "container">
<div class = "main">
<span class = "maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class = "menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
and my CSS:
body{
background-color: #ED0349;
font-family:Arial;
color:#DBFA05;
}
h1{
text-align: center;
font-size:200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
#titre{
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.container{
}
.main{
display: inline-block;
padding-left: 50%;
}
.container .menu { display: none; }
.container:hover .maintit {display:none;}
.container:hover .menu {display: inline-block;}
Put the "word" and the menu inside a parent, centered (displayed one on top of the other.
When the parent is not hovered, display the word and hide the menu.
When the parent is hovered, display the menu and hide the word.
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: white;
}
.main > * {
display: block;
width: 100%;
height: auto;
overflow: visible;
text-align: center;
transition: opacity .3s cubic-bezier(.5,0,.3,1);
position: relative;
}
.main:hover .maintit,.main .menu {
opacity: 0;
}
.main:hover .menu {
opacity: 1;
}
body {background-color: gray;}
.main > .menu {
position: absolute;
max-width: 100%;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
The main trouble while hovering is the sizing of .container, which is monitored, changes.
Solution: Give .container a height and width and the flickering stops.
body {
background-color: #ED0349;
font-family: Arial;
color: #DBFA05;
}
h1 {
text-align: center;
font-size: 200px;
text-shadow: 5px 5px #FFFFFF;
margin-top: 0px;
}
.container {
width: 100%;
height: 100vh;
}
#titre {
padding-top: .9em;
background-color: #ED0349;
}
.menu {
text-align: justify;
background-color: #FFFFFF;
}
.main {
display: inline-block;
padding-left: 50%;
}
.container .menu {
display: none;
}
.container:hover .maintit {
display: none;
}
.container:hover .menu {
display: inline-block;
}
<div class="container">
<div class="main">
<span class="maintit"><h1 id = "titre"><em>KIN</em></h1></span>
<span class="menu"><p>
HARRY - CHARLIE - JORDAN
- JESSICA - RYAN - HANNA -
SUPERFRUIT - MISC
</p></span>
</div>
</div>
All i want to do is to make a footer, that stretches across the whole page. And is split in 3 sections/buttons (with the width of each button 33.333%).
I've tried so many combinations of code trying to get it to work, however failed every time. So the code below is not very necessary, just how I tried to go by making this footer. (which failed miserably)
.footerMain {
width: 100%;
background-color: green;
clear: both;
padding: 20px 0px;
border: solid 2px;
display: block;
}
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
}
.footerMain div a{
display: inline-block;
background-color: red;
text-align: center;
height:100%;
}
footer p {
text-align: center;
clear: both;
background-color: darkgreen;
}
Html:
<footer>
<div class="footerMain">
<div id="facebook-div">
Facebook
</div>
<div id="youtube-div">
Youtube
</div>
<div id="instagram-div">
Instagram
</div>
</div>
<p>©Example.com</p>
</div>
</footer>
PLEASE HELP! This is driving me insane.
Thanks in advance :)
You just need to set the width of the inner DIVs:
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
width: 33.33%;
}
DEMO
The html given by you is not valid
</div>
</footer>
(the second last line: the div is not needed/invalid).
I made a fiddle, with 33% width for divs. Does this do what you want?
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
width: 33%;
}
http://jsfiddle.net/4u6rftrL/
.footerMain > div {
width: 33%;
float: left;
}
That would be the most basic way, based on the markup you provided.
UPDATED
Make it like this http://jsfiddle.net/detezp42/2/
The CSS
*{
margin: 0px;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.footerMain {
width: 100%;
background-color: green;
clear: both;
border: solid 2px;
display: block;
overflow: hidden;
}
#facebook-div, #youtube-div, #instagram-div {
float: left;
margin: 0px;
width: 33.33%;
}
.footerMain div a {
display: inline-block;
background-color: red;
text-align: center;
width:100%;
padding: 20px 0px;
}
footer p {
text-align: center;
clear: both;
background-color: darkgreen;
}
Okay so here is my code:
HTML
<div id="wrap_all">
<header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
<div id="overlay-2"></div>
<div id="main">
</div>
CSS:
#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;
z-index: 10;
visibility: hidden;
}
JS
$('.custom_class_1').click(function() {
$('#overlay-2').fadeIn(300);
});
I want to toggle the visibility of #overlay-2 when I click on my button ".custom_class_1"
How can I do this?
Not sure if visibility: hiddenis the route to go in the css. But I do want it hidden on page load as it would cover the entire screen with a dark overlay.
Any help would be much appreciated!
Thanks
If you are using JQuery then use the .hide() method:
$("#overlay-2").hide();
http://api.jquery.com/hide/
This should work:
$('.custom_class_1').click(function() {
$('#overlay-2').toggle();
});
And in your main css, as others have suggested you should use Display: none in place of Visibility: hidden
Use display: none; instead of visibility: hidden;
Here is a pure CSS solution - FIDDLE
HTML
<input type='checkbox' id='inputstyle'></input>
<div class='centerme'>
<label for="inputstyle"><span>Click Me</span></label>
</div>
<div class='hideme'></div>
CSS
.centerme {
width: 80px;
margin: 0px auto;
}
.hideme {
width: 100px;
height: 100px;
background-color: red;
margin: 10px auto;
}
.clickme:active > .hideme {
display: none;
}
input[type=checkbox]:checked ~ .hideme {
display: none;
}
input[type=checkbox] {
display: none;
}
input[type="checkbox"] + div label span {
display:inline-block;
width:80px;
height:30px;
background-color: gray;
border-right: 2px solid black;
border-bottom: 2px solid black;
line-height: 30px;
color: white;
text-align: center;
}
From THIS excellent page.