Here is an example with a standard theme.
.hotpink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.pink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.deeppink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 hotpink">
<div class="row">
<div class="left-side pink col-md-10"></div>
<div class="right-side deeppink col-md-2">
отправить
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
duplicate on codepen where the result is displayed on the entire width of the display.
And here is an example with the subject material-design.
.hotpink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.pink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
.deeppink {
width: 100%;
height: 100vh;
border: 1px solid #999;
}
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/ripples.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/ripples.js"></script>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 hotpink">
<div class="row">
<div class="left-side pink col-md-10"></div>
<div class="right-side deeppink col-md-2">
отправить
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
duplicate on codepen. Why and how to fix it?
Well the stylesheets you added for ripples.css and bootstrap-material-design.css are causing unwanted behaviour for you.
Removing both of these stylesheets from the second sample( the one with issue ), you can see there will be no differnce between the samples you provided.
Layout and style issues can arise when you are refering to different stylesheets.
Related
i am using this jquery plugin popbox plugin: https://gristmill.github.io/jquery-popbox/. problem is that when we open this in div having horizontal scroll. its open within parent div. Is there any solution that popbox open out of parent div. Actually we need scroll in parent div to insert more contents.
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link rel='stylesheet' href='https://gristmill.github.io/jquery-popbox/stylesheets/popbox.css' type='text/css' media='screen' charset='utf-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type='text/javascript' charset='utf-8' src='https://gristmill.github.io/jquery-popbox/javascripts/popbox.js'></script>
<style type='text/css' media='screen'>
body {
background: #f7f7f7;
font-family: georgia;
font-size: 22px;
text-shadow: 1px 1px 1px #FFF;
}
a {
color: #999;
text-decoration: none;
}
.container {
width: 300px;
position: relative;
margin: auto;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
height: 66px;
}
label {
display: block;
}
form {
margin: 25px;
text-align: left
}
form input[type=text] {
padding: 5px;
width: 90%;
border: solid 1px #CCC;
}
form textarea {
padding: 5px;
width: 90%;
border: solid 1px #CCC;
height: 100px;
}
.box {
width: 350px;
z-index:1000;
}
footer {
font-size: 12px;
}
form a,
footer a {
color: #40738d;
}
</style>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function() {
$('.popbox').popbox();
});
</script>
</head>
<body>
<div class="container">
<!-- popbox #1 -->
<div class='popbox'>
<a class='open' href='#'>Click Here!</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form action="http://gristmill.createsend.com/t/j/s/nklki/" method="post" id="subForm">
<p>
<small>
Please complete the form to sign up for the
Gristmill.io
mailing list!
</small>
</p>
<div class="input">
<input type="text" name="cm-name" id="name" placeholder="Name" />
</div>
<div class="input">
<input type="text" name="cm-nklki-nklki" id="nklki-nklki" placeholder="Email" />
</div>
<div class="input">
<textarea name="cm-f-tlhll" id="Message" placeholder="Comments"></textarea>
</div>
<input type="submit" value="Get In Touch" /> Cancel
</form>
</div>
</div>
</div>
<!-- closing container -->
</div>
</body>
I'm trying to learn JavaScript + html + css and Python by myself and I'm practicing with a tab layout using divs with p elements inside working as a tab (I know that I can do it with buttons, but I'm proving myself that it can be done with p)
I made JavaScript code to when is clicked the div of every tab in the layout came upfront a div with content related to that tab, but when I click it, lost every style that I made in an external CSS stylesheet and I don't know the reason for that.
This is the html
function toggleMe(e, contenedor) {
var a = document.getElementsByClassName("cont");
var i;
for(i=0;i<a.length;i++) {
a[i].style.display = "none";
}
document.getElementById(contenedor).style.display = "block";
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>
It looks like initially your cont class DIVs are set as display: flex but when making them visible again in JavaScript you set them as display: block.
You should change the JavaScript to something like this:
document.getElementById(contenedor).style.display = "flex";
Avoid manipulating styles in JS. Toggle a class and leave the styles to the CSS:
function toggleMe(e, contenedor) {
for (let item of document.querySelectorAll(".cont")) {
item.classList.toggle("active", item.id === contenedor);
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#contenedor {
width: 800px;
height: 400px;
margin: 0 auto;
}
#tabs {
width: 100%;
display: flex;
border: 1px solid #ddd;
padding: 2px;
}
.tab {
padding: 15px;
cursor: pointer;
}
.tab:hover {
background: #ddd;
}
.cont {
width: 100%;
height: 200px;
border: 1px solid black;
justify-content: center;
align-items: center;
text-transform: uppercase;
border: 1px solid #ddd;
display: none;
}
.cont.active {
display: flex;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./css/estilo-intento1.css">
<script src="intento1.js"></script>
</head>
<body>
<div id="contenedor">
<div id="tabs">
<div class="tab" onclick="toggleMe(this, 'cont1')"><p>TAB 1</p></div>
<div class="tab" onclick="toggleMe(this, 'cont2')"><p>TAB 2</p></div>
<div class="tab" onclick="toggleMe(this, 'cont3')"><p>TAB 3</p></div>
</div>
<div id="cont1" class="cont"><p>Contenido 1</p></div>
<div id="cont2" class="cont"><p>Contenido 2</p></div>
<div id="cont3" class="cont"><p>Contenido 3</p></div>
</div>
</div>
<script src="intento1.js"></script>
</body>
I have a fiddle: https://jsfiddle.net/vbuf0gwL/62/
Basically dealing with three rows
img {
max-width: 100%;
max-height:100%;
}
html,
body {
height: 100%;
overflow: hidden;
}
.modal-lg {
max-width: 80% !important;
}
.my-container {
display: flex;
flex-direction: column;
height: 100%;
}
.my-container>.top [class^="col-"],
.my-container>.bottom [class^="col-"] {
background-color: #929292;
color: white;
text-align: center;
}
.my-container>.middle {
flex-grow: 1;
padding: 30px;
background-size: cover;
}
.my-container>.middle>* {}
#clock {
/*background-color:#333;*/
font-family: sans-serif;
font-size: 40px;
text-shadow: 0px 0px 1px #fff;
color: #fff;
}
#clock span {
color: #fff;
font-size: 40px;
position: relative;
}
#date {
margin-top: -10px;
letter-spacing: 3px;
font-size: 20px;
font-family: arial, sans-serif;
color: #fff;
}
.buttonContainer {
display: flex;
flex-direction: column;
justify-content: center;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gijgo#1.9.6/js/gijgo.min.js" type="text/javascript"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
</head>
<body>
<div class="container-fluid my-container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
<div class="row middle">
<div class="col-lg-6 leftFifty" id="leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; border: dotted 1px black;">
<img src="https://via.placeholder.com/1024x942" />
<!-- This is the div that is clicked in to select an image -->
</div>
</div>
<div class="col-lg-6 rightFifty" id="rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; border: dotted 1px black; ">
<!-- This is the div that is clicked in to select an image -->
</div>
</div>
</div>
</div>
<div class="row">
</div>
</body>
</html>
My problem is, I made a CMS where users can add images and text and when they save it it displays on large television displays.
I added max height and width of 100% to the images which is fine with just an image in one of the middle row columns, but with multiple images or an image with text, it pushes the image out of the container, past the footer row.
I want to make it so that when these are displayed, if the text spans more of the column then the images scale down so it fits in the column, since the middle row should always be between the header and footer with space between them.
This image shows what happens with just images and then what happens if text is added, but the third portion is what I want
How can I make this so that anything in the column will scale to always fit since this is a fixed static display with no interaction or scrolling?
I have a sprite image containing 4 different pictures. They are 520px in height. I would like to animate through them when either the left or right arrows are clicked. I'm unsure why it's not working.
Edited with changes and added css. still not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","600px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-600px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;
Something like this should work but i don't know what is in your css files, i mean how you define your arrows
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"></button>
<button id="rightArrow" class="fbtnLast"></button>
</div>
</div>
<div id="startApp">
<ul>
<li>
Start here!
</li>
</ul>
</div>
The bigger issue is on the button element, you have onclick="move('left');" but the move function is never defined. You can take that out and let the even listener handle it instead.
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<button id="leftArrow" class="fbtnFirst"/button>
<button id="rightArrow" class="fbtnLast"/button>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="scripts/my_script.js"></script>
<script>
$(document).ready(function(){
$("#leftArrow").click(function(){
$("#slider").css("backgroundPostionX","400px");
});
$("#rightArrow").click(function(){
$("#slider").css("backgroundPostionX","-400px");
});
});
});
</script>
</body>
</html>
I'm new to Jquery and am trying to implement it into my website. I am trying to fadein (upwards) my first row of pictures when scrolling. But for some reason they will not scroll. Can't seem to find the solution, any help?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
</head>
<body>
<!-- HEADER -->
<section id="header">
<h1 class="name">Jessica Shae</h1>
<div class="container heading">
<div class="row">
<div class="col-md-4">
<img src="img/7.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/2.jpg" class="display">
</div>
<div class="col-md-4">
<img src="img/9.jpg" class="display">
</div>
<div class="row">
<div class="col-md-12 text-xs-center">
</i>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery">
<h2 class="title">The Dark Room</h2>
<div class="container photo-collection">
<div class="row js--wp-1">
<div class="col-md-4 affect">
<img src="img/1.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/10.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/4.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/18.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/6.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/8.jpg" class="work">
</div>
</div>
<div class="row">
<div class="col-md-4 affect">
<img src="img/12.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/11.jpg" class="work">
</div>
<div class="col-md-4 affect">
<img src="img/14.jpg" class="work">
</div>
</div>
</div>
</section>
<section class="contact-me">
<div class="contact">
<h3><span class="white">Conta</span><span class="black">ct Me</span></h3>
</div>
<form method="post" action="#" class="contact-form">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" name="name" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" name="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label>Drop me a line</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Send it!">
</div>
</div>
</div>
</form>
</section>
<section class="copywrite">
<h6>Copywrite © 2016 built by Temple Cerulean Naylor</h6>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS:
body {
/*background-color: rgb(0, 0, 0);*/
background: #070606;
}
/* HEADER */
.display {
height: auto;
width: 500px;
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
max-width: 100%;
border: 4px solid white;
border-radius: 6%;
}
.heading {
max-width: 100%;
}
.name {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
font-size: 500%;
font-weight: 100;
text-align: center;
color: whitesmoke;
width: 100%;
margin-bottom: 20px;
margin-top: 15px;
}
h1:after {
display: block;
height: 2px;
background-color: #e62222; /*Great way to give single line color */
content: " ";
width: 100px;
margin: 0 auto;
margin-top: 20px;
}
.fa {
margin-top: 18px;
}
.fa:link, /*Prevents color change when clicked */
.fa:visited {
text-decoration: none;
color: #bdc3c7;
}
.fa:hover,
.fa:active {
color: #ebedee;
}
/* GALLERY */
.work {
width: 300px;
height: 100%;
margin-top: 60px;
margin-bottom: 60px;
border: 3px solid white;
}
.title {
font-family: 'Prociono', serif;
font-size: 350%;
color: whitesmoke;
text-align: center;
padding-top:40px;
}
.affect img {
opacity: 0.2;
background-color: #070606;
transition: opacity .35s, transform .35s;
transform: scale(1.0);
}
.affect:hover img {
opacity: 1;
transform: scale(1.15);
}
/* CONTACT */
.contact-me {
background: linear-gradient(to right, black 50%, white 50%);
overflow-x: hidden;
}
h3 {
color: white;
text-align: center;
}
.white {
color: white;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.black {
color: black;
font-family: 'Oswald', sans-serif;
font-size: 240%;
}
.contact-form {
width: 40%;
margin: 0 auto;
float: left;
padding-left: 8%;
padding-top: 4%;
padding-bottom: 4%;
}
input[type=text],
input[type=email],
select,textarea {
width: 100%;
padding: 7px;
border-radius: 3px;
border: 1px solid #e62222;
}
textarea {
height: 100px;
}
input[type=submit] {
background-color: #e62222;
border: 1px solid #e62222;
color: #fff;
margin-right: 15px;
border-radius: 5px;
}
input[type=submit]:hover,
input[type=submit]:active {
background-color: #e94141;
}
/* *:focus {outline: none;} */
/* ------Copywrite----- */
.copywrite {
margin-top: 25px;
margin-bottom: 25px;
}
.copywrite h6 {
text-align: center;
font-size: 150%;
}
/* -----ANIMATIONS-----*/
.js--wp-1 {
opacity: 0;
}
.js--wp-1.animated {
opacity: 1;
}
JavaScript:
$(document).ready(function() {
// SCROLL ------------------------
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
// GALLERY FADEIN ----------------
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn');
}, {
offset: '50%'
});
});
Try this:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>
or
$('#message').hide().html("You clicked on a checkbox.").fadeIn('slow');
link:-Why doesn't jquery fadeIn() work with .html()?