I am trying to make AOS flip-up animations start when the page is initially loaded.
I am refering to the animations applied to img items in <div class="social-media"> , i am using the data-aos="flip-up" animation on these items.
Noob question: can i use multiple animation libraries in the same html file (on different elements ofc)?
Perhaps i should be using a different animation library other than AOS since that one is specifically meant for on-scroll animation, i was wondering if it was possible to do with AOS though. thanks
Currently the animations only start when i scroll down the page or when i refresh the page when already scrolled down. when i scroll up to the top of the page the animation for these images is played in reverse (the images flip down and they become invisible after the animation has finished). I tried finding how to make the animation start when page is loaded, i've seen suggestions to use javascript to animate a scrolling animation as such:
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
$(document).ready(function(){
$("body,html").animate({
scrollTop: 10
}, 1000);
$("body,html").animate({
scrollTop: 0
}, 1);
});
</script>
But adding this script snippet to my code doesnt seem to do anything (animations still behave the same). My current code:
<!Doctype HTML>
<head>
<title>Troos Bouw</title>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <!-- Font -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet"> <!-- On scroll animations -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script> <!-- On scroll animations -->
</head>
<style type="text/css">
*{margin:0;}
html {
scroll-behavior: smooth;
}
/* Footer styles */
footer {
background-color: rgb(0, 0, 0);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 1vh;
color: #fff;
/* padding: 1em; */
display: flex;
justify-content: space-between;
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.5);
z-index:1002;
}
footer .social-media ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .social-media ul a{
text-decoration: none; /* remove underline from social-links */
}
ul.footerlist li {
display:inline;
list-style: none;
}
.socials-img{ /* social icons; image size, background */
height: 2.5vh;
background-color: red;
opacity: 1
}
#filler{
background-color: aqua;
height: 1000vh;
}
.header{
position: fixed;
width:100%;
padding-bottom: 15px;
height: 80px;
background-color: rgba(2, 2, 2, 0.7);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
z-index: 1000;
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
padding-top: 9px;
background-color: red;
}
.header ul li a{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font: size 20px;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
font-weight: 1000;
padding: 25px ;
color: rgb(252, 252, 252);
transition: all ease 0.5s;
border-radius: 20px;
}
.header ul li a:hover{
background-color: rgba(160, 159, 159, 0.5);
}
.logoText{
width:200px;
margin-left: 1vw;
margin-top:2.5vh;
position: fixed;
z-index: 1001;
background-color: red;
}
.logoIcon{
margin-top: 10px ;
height:100px;
margin-left: 90vw;
position: fixed;
z-index: 1001;
background-color: red;
}
</style>
<body>
<header id="theHeader">
<!-- WEBSITE NAME TOP LEFT -->
<img class="logoText" data-aos="flip-down" data-aos-duration="1000" data-aos-delay="100" src="img/troosText.png" >
<img class="logoIcon" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500" src="img/TROOS geen achtergrond 1.png" >
<!-- TOP NAV. MENU -->
<div class="header">
<ul>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#theHeader">home</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#about">about</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">service</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">gallery</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">home</a></li>
</ul>
</div> <!-- end of header -->
<!-- <div id="transparentDiv" class="down-arrow">
<div id="arrowText" style="display: flex; align-items: center; justify-content: center; font-size: 200%;">ARROWTEXT</div>
<img style="display: flex; align-items: center; justify-content: center;" src="img/UI/arrow.png" background-color="red ">
</div> Arrow button which when clicked scrolls down -->
<div id="transparentDiv" style="display: flex; flex-direction:column; align-items: center; justify-content: center;">
<img src="img/UI/troos text banner.png" background-color="red">
<img src="img/UI/view more button purple.png" >
<!-- <button class="grey-button">Our Projects
<img src="img/UI/arrow.png" class="arrow">
</button> -->
</div>
<!-- <img src="your-image-url.jpg" class="bg-img" alt="Background Image"> -->
<img src="img/Troos BG lowres_auto_x2.jpg" class="bg-img" alt="Background Image" >
</header>
</header>
<div id="filler">filler</div>
</body>
</section>
<footer>
<div class="social-media">
<h3>Connect with us</h3>
<ul class="footerlist">
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="100" data-aos-once="false" class="socials-img" src="img/socials/Socials_Insta.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="false" class="socials-img" src="img/socials/socials_FB.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="false" class="socials-img" src="img/socials/socials_WA.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="false" class="socials-img" src="img/socials/socials_TW.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="false" class="socials-img" src="img/socials/Socials_G+.png" > </li>
</ul>
</div>
</footer>
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
</script>
</html>
NOTE: I have added a red background color to the animated elements such that they are easily visible (theyre placed in the bottom left corner). Also added a big div "filler" to the body such that scrolling is possible.
What is strange to me is that in the header i've added some animated elements as well (same AOS animation) which for some reason do load immediately when the page loads even when scrolled all the way up. I've added the code for these header element
Thank you!
To stop the animation while scrolling back you can use attribute to element
data-aos-once="true"
https://github.com/michalsnik/aos#-advanced-settings
Related
I'm fairly new to PHP / HTML / CSS. I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
font-family: Sans-serif;
line-height: 1.5em;
}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
overflow: hidden;
/* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */
background: #4B84CF;
background-image: url(./images/headerbackground.jpg);
background-position: right top;
background-size: 30%;
background-repeat: no-repeat;
}
#nav {
position: absolute;
top: 150px;
/* Set this to the height of the header */
left: 0;
bottom: 0;
width: 230px;
overflow: auto;
/* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */
background: rgb(75, 132, 207);
background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%);
}
#logo {
padding: 10px;
}
main {
position: fixed;
top: 150px;
/* Set this to the height of the header */
left: 230px;
right: 0;
bottom: 0;
overflow: auto;
background: #ffffff;
}
.innertube {
margin: 15px;
/* Provides padding for the content */
}
p {
color: #555;
}
nav h1 {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
nav ul {
list-style-type: none;
margin: 5;
padding: 5px;
border: 4px solid#C33C54;
border-radius: 10px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
nav ul a {
list-style-type: none;
margin: 5;
padding: 5px;
color: white;
font-size: 100%;
text-shadow: 4px 4px 4px #c33c54;
text-align: center;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
text-decoration: none;
}
/*IE6 fix*/
* html body {
padding: 100px 0 0 230px;
/* Set the first value to the height of the header and last value to the width of the nav */
}
* html main {
height: 100%;
width: 100%;
}
/* This hides all pages */
.page {
display: none;
}
/* This displays the first page */
.default {
display: block;
}
/* This displays the page corresponding to the one you clicked on */
:target {
display: block;
}
/* This hides the default page when another page is clicked */
:target~.default {
display: none;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index_style.css">
<head>
<title>Test index-pagina</title>
</head>
<body>
<header id="header">
<div id="clock">
<?php include ('clock.php');?>
</div>
</header>
<main>
<div class="innertube">
<div id="navtest" class="page">
<?php include ('navtest.php');?>
</div>
<div id="welkom" class="page">
<?php include ('welkom.php');?>
</div>
<div id="about" class="page">
<?php include ('about.html');?>
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation bar 1</h1>
<ul>
<li>Navtest</li>
<li>Welkom</li>
<li>About</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<h1>Navigation bar 2</h1>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</nav>
</body>
</html>
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a");
links.forEach( function(e) {
e.addEventListener("click", function() {
let goToPage = e.dataset.page;
$("#page").load(goToPage + ".php");
});
})
<main>
<div class="innertube">
<div id="page">
<!-- Content will be shown here -->
</div>
</div>
</main>
<nav id="nav">
<div class="innertube">
<h1>Navigation</h1>
<ul>
<li><a data-page="navtest">Navtest</a></li>
<li><a data-page="welkom">Welkom</a></li>
<li><a data-page="about">About</a></li>
<li><a data-page="somePage1">Link 4</a></li>
<li><a data-page="somePage2">Link 5</a></li>
</ul>
</div>
</nav>
I am learning HTML and CSS and I am trying to replicate Apple website as my first real project. I am having trouble with the images, the first image is overblown out of proportion, it is way too big than it actually is. The other two images proportions are fine, however, they are pushed to the right of the screen even though I have the parents div width set to 100%, and these child elements set accordingly to the page. Please have a look and tell me what I am doing wrong. Thank you.
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>Apple</title>
<link rel="stylesheet" href="./apple2.css" type="text/css">
</head>
<div id="wrapper">
<body>
<nav> <!--Main navigation of the site-->
<ul>
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
</ul>
</nav>
<div id="content">
<div class="airpodspro"> <!--div class 1 of main content-->
<h1>Airpods Pro</h1>
<h4>Magic like you've never heard</h4>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11pro"> <!--div class 2 of main content-->
<h1>iPhone 11 Pro</h1>
<h4>Pro cameras. Pro display. Pro performance</h4>
<h6>From $24.95/mo. or $599 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11"> <!--div class 3 of main content-->
<h1>iPhone 11</h1>
<h4>Just the right amount of everything</h4>
<h6>From $16.62/mo. or $399 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
</div>
</body>
</div>
.html {
font-size: 22px;
}
body {
font-family: Helvetica;
}
html body{
margin:0;
padding:0;
}
img {
max-width: 100%;
}
#wrapper {
margin: auto;
position: relative;
}
nav {
position: relative;
background-color: #3d3d3d;
font-size: 0.9em;
word-spacing: 4em;
padding: 0.04%;
width: 100%;
}
ul{
list-style-type: none;
}
li{
display: inline;
color: white;
}
nav ul {
text-align: center;
}
nav a {
color: white;
}
#content {
width: 100%;
position: relative;
}
.airpodspro {
background-color: #5aa8cc;
height: 800px;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/airpods-pro-
takeover/airpods_pro__fok8ao5xkga6_large.jpg");
}
.iphone11pro {
background-color: #6fffd4;
margin-top: 53%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-11-
pro/hero__dvsxv8smkkgi_large.jpg");
}
.iphone11 {
background-color: #dc84ff;
margin-top: 89%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-
11/hero__dvsxv8smkkgi_large.jpg");
}
.airpodspro, .iphone11pro {
color: #ececec;
}
.iphone11pro, .iphone11 {
height: 500px;
}
.airpodspro, .iphone11pro, .iphone11 {
font-size: 1.5em;
line-height: 1em;
position: absolute;
padding: 5% 40%;
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
You are using image in CSS As background image properties.
Its better download the respective image from apple website and then use them
in img tag in your HTML. This way you will have better control over image.
Also when you are using the image the way you are already using because of the apple link, its also downloading js codes and controlling the behavior of website. So check out for it.
Thanks, me later.
So i'm working in this bootstrap carousel, now i have this code working, but i need to fix some issues.
1) make the menu responsive.
2) make the button selected taller than the others.
i tried a lot of thigs but i haven't found the solution yet, so i came here, maybe someone can help me, thank you so much!
This is the image as an example
the code is in the snippet.
$(document).ready(function(ev){
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
/*margin: auto;*/
/*border: 2px solid green;*/
}
.carrusel {
width: 100%;
height: 40px;
/*margin: auto;*/
border: 3px solid red;
float:right;
margin: 0px 0px 00px 0px;
/*background-color: black;*/
}
.slide{
/*border: 2px solid #093845;*/
width: auto;
}
/*nav slider*/
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: 50px;
}
.navi li {
float: left;
border: 1px solid red;
width: 210px;
}
.navi li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navi li a:hover:not(.active) {
background-color: #ddd;
}
.navi li a.active {
color: white;
background-color: #4CAF50;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Tabbed Slider Carousel (inspired by sevenx.de) - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Chania" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
<div class="item">
<img src="http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg" alt="Flower" width="460" height="345">
</div>
</div>
</div>
<!-- Indicators -->
<div class="navi">
<ul class="">
<li data-target="#myCarousel" data-slide-to="0" class="boton active">Button 1</li>
<li data-target="#myCarousel" data-slide-to="1" class="boton ">Button 1</li>
<li data-target="#myCarousel" data-slide-to="2" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="3" class="boton">Button 1</li>
<li data-target="#myCarousel" data-slide-to="4" class="boton">Button 1</li>
</ul>
</div>
</div>
</body>
</html>
Ok so I know this is probably a little more than you asked for but I figured I would help out and make this fully responsive for you. I left in the carousel captions and headings just in case you wanted to use them for future use but if not you can just take them out. So what I like to do with the bootstrap carousels is give the carousel item a padding-bottom of a percentage and then mess with this percentage until you get your desired height. Then I like to just give each item a background image of the image that you want to put in your carousel because not all images have the same aspect ratio and you will run into problems with images being skewed otherwise. If you don't want to use the background image method you can just use your method but I figured I would throw this in there because it works best for responsive design. So i give each carousel item a class eg. first-item, second item, third-item and so on and then give then all a backgorund image of whatever your slide image was. Then we will just put your nav underneath the carousel and your all set. Also you will want to add data-interval="false" to your #myCarousel div because when you click on one of the slides it will start to cycle though the slides and your active tabs will still be on the one that you clicked on. Removing active classes while the carousel is in auto interval is a whole different set of jquery markup. Also I have set your carousel nav buttons to 20% because there are 5 of them. If you want them to be a different percentages then add a media query to make them a bigger size like and you will also have to change the carousel-nav height and maybe not have the active button apear bigger as well:
#media screen and (max-width: 767px){
.carousel-nav li{width: 100%;)
}
Here is a working Fiddle demo Fiddle
So here is the markup:
Html:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="item active first-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 1</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item second-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 2</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item third-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 3</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fourth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 4</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
<div class="item fifth-item">
<div class="container">
<div class="carousel-caption">
<p class="carousel-heading">Example Heading 5</p>
<p class="carousel-description">Example of a Carousel Description</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Carousel Button</a></p>
</div>
</div>
</div>
</div>
</div><!-- /.carousel -->
<ul class="carousel-nav">
<li class="active" data-target="#myCarousel" data-slide-to="0"><button>Button 1</button></li>
<li data-target="#myCarousel" data-slide-to="1"><button>Button 2</button></li>
<li data-target="#myCarousel" data-slide-to="2"><button>Button 3</button></li>
<li data-target="#myCarousel" data-slide-to="3"><button>Button 4</button></li>
<li data-target="#myCarousel" data-slide-to="4"><button>Button 5</button></li>
</ul>
The Css:
#myCarousel .item{
padding-bottom: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 250px;
}
#myCarousel .first-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .second-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .third-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fourth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .fifth-item{
background-image: url('http://4.bp.blogspot.com/-5GEmJ3I7yUU/UdOLNokyFYI/AAAAAAAAABw/RJJLVs9O02I/s1600/carros+de+lujo+%282%29.jpg');
}
#myCarousel .carousel-heading{font-size: 40px;}
.carousel-nav{
list-style-type: none;
padding: 0;
margin: 0;
height: 50px;
}
.carousel-nav li{
height: 100%;
width: 20%;
float: left;
}
.carousel-nav li button,.carousel-nav li button:focus{
height: 100%;
border: 1px solid red;
width: 100%;
position: relative;
z-index: 2;
outline: 0;
}
.carousel-nav li.active button, .carousel-nav.active li button:focus{
height: 60px;
margin-top: -10px;
outline: 0;
}
/*Responsive Styles*/
#media screen and (max-width: 767px){
#myCarousel .carousel-heading{font-size: 18px;}
#myCarousel .carousel-description{font-size: 12px;}
#myCarousel .btn-primary{font-size: 14px;}
}
And your jquery:
Note: this may require you to use a newer version of jquery so you may want to add this instead of 1.11 in you head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
then the jquery code:
$(document).on('click', '.carousel-nav button', function() {
$('.carousel-nav li').removeClass('active');
$(this).parent().addClass('active');
});
Change height to auto in the class ".navi ul" so it will be like
.navi ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
border: 1px solid red;
height: auto;
}
Change width of buttons to 20% in ".navi li" class so it will be like
.navi li {
float: left;
border: 1px solid red;
width: 20%;
}
and add one more class for selected button
.navi li.active a {
background-color: white;
border: 1px solid green;
height: 11%;
margin: -15px 0 0 -2px;
position: absolute;
width: 19%;
}
First important thing to note is that, the JavaScript you mentioned doesn't work as per your markup. Specifically, your active classes are not dynamically changing when the slides move. I have modified the JS code to make it work.
$(document).ready(function(ev){
$('#myCarousel').on('slide.bs.carousel', function (evt) {
$('.navi li.active').removeClass('active');
$('.navi li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
});
Also there is a small mistake on your CSS. The active class is applied on the <li> tag and not the <a>, so the active code should be changed to
.navi li.active {
background: blue;
color: white;
}
and NOT .navi li a.active.
And to scale the buttons when active, you can make use of the transform: scale(). Like so
.navi li.active {
background: blue;
color: white;
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari */
transform: scale(1.1);
}
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Fisrt, I want to make Home contents is active when I open the website.
other contents should be hidden, Second each content should be link with the navigation element. So when I click the element it should swap the contents with the matched content. If I need to use javascript please let me know.
welcome critics :) and Thank You.
#font-face {
font-family: font1;
src: url('fonts/CaviarDreams.woff');
}
#wrapper {
margin:0 auto;
background: white;
border:1px solid black;
max-width: 1060px;
}
header {
max-width: 1060px;
width: 100%;
height: 76px;
top: 0;
left: 0;
border:1px solid black;
}
#logo {
margin-top: 37px;
margin-left: 10px;
float: left;
width: 160px;
height: 30px;
background: url(logo6.png) no-repeat center;
display: block;
}
nav {
float: right;
margin-top: 27px;
margin-right: 10px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
font-family: font1;
font-size: 15px;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
nav ul li:hover {
color: #6F6F6F;
}
#menu {
display: hidden;
width: 40px;
height: 40px;
background: url(menu-icon.png) center;
}
#menu:hover {
background-color: #CBCBCB;
border-radius: 3px 3px 0 0;
}
/* MEDIA QUERY */
#media all and (max-width:640px) {
#menu {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #fff;
border: 3px solid #CBCBCB;
right: 18px;
top: 57px;
width: 30%;
border-radius: 3px 0 3px 3px;
z-index: 200;
}
nav ul li {
text-align: center;
width: 100%;
margin: 0 auto;
}
nav:hover ul {
display: block;
}
}
#swap{
margin: 40px auto 40px;
max-width: 980px;
position: relative;
padding: 20px;
border: 1px solid black;
z-index:100;
overflow: hidden;
}
#sns {
text-align: center;
}
#sns li{
display: inline-block;
margin-right: 10px;
}
#copyright li{
font-family: inherit;
font-size: 13px;
text-align: center;
list-style: none;
}
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="GalleryResStyle.css">
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li>
Home
</li>
<li>
Profile
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents">Home contents</div>
<div id="Profile_contents">Profile contents</div>
<div id="Gallery_contents">Gallery Contents</div>
<div id="Contact_contents">Contact contents</div>
</div>
<footer>
<div id="sns">
<li>
<a class="Facebook-icon" href=""><img src="FACEBOOK.png"></a>
</li>
<li>
<a class="instagram-icon" href=""><img src="INSTAGRAM.png"></a>
</li>
</div>
<div id="copyright">
<li> COPYRIGHT © 2015 INKYU PARK.<br>ALL RIGHTS RESERVED. </li>
</div>
</footer>
</div>
</body>
</html>
Yes you need JavaScript (other languages could do it, but it is the simplest I know)
for example, you can change HTML to (slightly simplified for the sake of clarity):
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="./test.css">
<!-- Must have this line first, to enable functions in test.js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Here you get the hide/show functions -->
<script type="text/javascript" src="./test.js"></script>
</head>
<body>
<div id="wrapper">
<header class="header-site" role="banner">
<nav>
<ul>
<li class=showhome>Home</li>
<li class=showProfile>Profile</li>
<li class=showGallery>Gallery</li>
<li class=showContact>Contact</li>
</ul>
</nav>
</header>
<div id="swap">
<div id="Home_contents" class=home >Home contents</div>
<div id="Profile_contents" class=Profile >Profile contents</div>
<div id="Gallery_contents" class=Gallery >Gallery Contents</div>
<div id="Contact_contents" class=Contact >Contact contents</div>
</div>
</div>
</body>
</html>
so you can use class to define which area you click and which area hide/show
then use a js file with a .ready function (in my example, save as test.js in same folder as HTML:
$(document).ready(function(){
$(".showhome").click(function(){
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showProfile").click(function(){
$(".home").hide();
$(".Profile").show();
$(".Gallery").hide();
$(".Contact").hide();
});
$(".showGallery").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").show();
$(".Contact").hide();
});
$(".showContact").click(function(){
$(".home").hide();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").show();
});
// Hide all and show home on page loading
$(".home").show();
$(".Profile").hide();
$(".Gallery").hide();
$(".Contact").hide();
});
for a cleaner function, you can also use things like $(".home").toggle();, it would switch the state (if it was shown it would hide and vice versa). but I don't see how right now :)
You will need to use some kind of scripting for this (alternatively just 4 raw html pages).
I'd suggest using bootstrap, it's simple if you're a javascript novice.
<div class="container">
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Gallery</li>
<li role="presentation">Contact</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Home</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="gallery">Gallery</div>
<div role="tabpanel" class="tab-pane" id="contact">Contact</div>
</div>
</div>
Above is pulled from getbootstrap.com, fiddle here.