I am trying to create my website and input a short animation of text sliding every 0.4 seconds to change to another text. It's like an image gallery, but just text instead. I put this html code together from ws3school hence, some of the code inside might not make sense but it still runs perfectly fine.
I do not know how to code and I am just trying to make sense of what I see, some of the code below may seem a little inappropriate or weird to be there, I'm just trying to make it all work.
The issue I have is that it is not mobile-friendly, so when I open the website on a smaller screen, the font size does not change accordingly. I think I managed to fix the border size but not the font size. Can someone help me?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
max-width: 460px;
height: 170px;
padding: 40px;
border: 1px solid black;
text-align: center;
font-size: 65px;
font-family: courier;
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
max-font-size: 20px
}
}
</style>
</head>
<body>
<div class="div1">
<div class="mySlides w3-container w3-xlarge w3-transparent">
<p>marketer</p>
</div>
<div class="mySlides w3-container w3-xlarge w3-transparent">
<p>creator</p>
</div>
<div class="mySlides w3-container w3-xlarge w3-transparent">
<p>innovator</p>
</div>
<div class="mySlides w3-container w3-xlarge w3-transparent">
<p>collaborator</p>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 400);
}
</script>
</body>
</html>
Try:
#media only screen and (max-width: 300px) {
.div1 {
font-size: 20px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
max-width: 460px;
height: 170px;
padding: 40px;
border: 1px solid black;
text-align: center;
font-size: 65px;
font-family: courier;
}
#media screen and (min-width: 601px) {
div.example {
font-size: 65px;
}
}
#media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="example">
<p>marketer</p>
</div>
<div class="example">
<p>creator</p>
</div>
<div class="example">
<p>innovator</p>
</div>
<div class="example">
<p>collaborator</p>
</div>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("example");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 400);
}
</script>
</body>
</html>
You can use relative size like vw to make it responsive. In combination with calc you can say that minimal font size should be for example 20px and for bigger screens it should be bigger thanks the vw unit.
font-size: calc(20px + 0.4vw);
You can use this outside the media query.
Try this code:
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 400);
}
.div1 {
max-width: 460px;
height: 170px;
padding: 40px;
border: 1px solid black;
text-align: center;
font-size: 65px;
font-family: courier;
}
#media screen and (max-width: 300px) {
.div1 p {
font-size: 20px
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="div1">
<div class="mySlides">
<p>marketer</p>
</div>
<div class="mySlides">
<p>creator</p>
</div>
<div class="mySlides">
<p>innovator</p>
</div>
<div class="mySlides">
<p>collaborator</p>
</div>
</div>
</body>
</html>
Related
.be-ready-list {margin: 0px -24px;}
.be-ready-section{background-color:#eeeff3;padding:80px 0px 24px;}
.be-ready-section.complete-be-ready{background-color:#222222;}
.be-ready-list ul li{color:#FFFFFF;font-family:Poppins;font-size:32px;font-weight:500;letter-spacing:1.6px;line-height:24px;margin-bottom:32px;text-transform:uppercase;}
.be-ready-list ul li span {display: inline-block;vertical-align: top;padding: 16px 24px; background-color: #222222;}
.be-ready-list ul li:last-child{margin-bottom:0px;}
.we-are-hire{background-color:#222222;color:#ffffff;font-size:24px;font-weight:300;padding:40px 0px 96px;}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<section class="be-ready-section">
<div class="wrapper">
<div class="be-ready-list">
<ul>
<li><span>Be ready for change</span></li>
<li><span>Set goals at home & work</span></li>
<li><span>Realize your unique value</span></li>
<li><span>Tame uncertainity</span></li>
<li><span>Lead with confidence</span></li>
<li><span>Addapt your business</span></li>
</ul>
</div>
</div>
</section>
</body>
</html>
Initial position ( This will initial position of elements )
Final position ( What i require when window scroll down)
I want animation on window scroll down. If window scroll down element will shift left side slowly , and when window will more scroll down elements will more move left side slowly. When this section will full on screen animation will done and Final position will appear.
const ul = document.getElementById("list-group");
const items = ul.getElementsByTagName("li");
init();
function init() {
for (var i = 0; i < items.length; ++i) {
animate(i, 100 * i);
}
}
window.addEventListener(
"scroll",
() => {
const size = window.pageYOffset;
if (window.pageYOffset) {
const i = parseInt(size / 75);
if (i === 0) init();
animate(i, 0);
}
},
false
);
function animate(index, margin) {
items[index].style.marginLeft = margin + 'px';
items[index].style.transition = '1s';
items[index].style.left = '0';
}
.be-ready-list {
margin: 250px 0;
}
.be-ready-section {
background-color: #eeeff3;
padding: 80px 0px 24px;
}
.be-ready-section.complete-be-ready {
background-color: #222222;
}
.be-ready-list ul li {
color: #FFFFFF;
font-family: Poppins;
font-size: 32px;
font-weight: 500;
letter-spacing: 1.6px;
line-height: 24px;
margin-bottom: 32px;
transition: 1s;
left: 0;
}
.be-ready-list ul li span {
display: inline-block;
vertical-align: top;
padding: 16px 24px;
background-color: #222222;
}
.be-ready-list ul li:last-child {
margin-bottom: 0px;
}
.we-are-hire {
background-color: #222222;
color: #ffffff;
font-size: 24px;
font-weight: 300;
padding: 40px 0px 96px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation example</title>
</head>
<body>
<section class="be-ready-section">
<div class="wrapper">
<div class="be-ready-list">
<ul id="list-group">
<li><span>Be ready for change</span></li>
<li><span>Set goals at home & work</span></li>
<li><span>Realize your unique value</span></li>
<li><span>Tame uncertainity</span></li>
<li><span>Lead with confidence</span></li>
<li><span>Addapt your business</span></li>
</ul>
</div>
</div>
</section>
</body>
</html>
function isScrolledIntoView(el) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elTop = $(el).offset().top;
var elBottom = elTop + $(el).height();
return (((elTop >= docViewTop) && (elTop <= docViewBottom)) || ((elBottom >= docViewTop) && (elBottom <= docViewBottom)));
}
function onScrollRezizeLoad() {
document.querySelectorAll('.be-ready-list div').forEach(el => {
if (isScrolledIntoView(el) && !el.classList.contains('on-left')) {
el.classList.add('on-left');
el.classList.add('skewed');
setTimeout(() => el.classList.remove('skewed'), 670);
}
});
}
onload = onScrollRezizeLoad;
onresize = onScrollRezizeLoad;
onscroll = onScrollRezizeLoad;
body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
section.be-ready-section {
margin: -8px 0px 0px 0px;
padding: 8px;
width: 100vw;
background-color: #eeeff3;
}
.be-ready-list div {
background-color: #222222;
width: calc(100vw - 52px);
color: white;
font-size: 50px;
height: 300px;
/*remove this later just for demo purposes*/
font-weight: 300;
padding: 9px;
margin: 8px;
margin-left: calc(100vw - 150px);
transition: 1s, transform 0.67s;
}
div.on-left {
margin-left: 8px;
}
.skewed {
transform: skew(6deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="be-ready-section">
<div class="wrapper">
<div class="be-ready-list">
<div>Thing number 1</div>
<div>Thing number 2</div>
<div>Thing number 3</div>
<div>Thing number 4</div>
<div>Thing number 5</div>
<div>Thing number 6</div>
</div>
</div>
</section>
you could do something like this:
Use position relative and center them right in a div.
And use a modified version of this:
let elements = [
document.getElementById("e1"),
document.getElementById("e2"),
document.getElementById("e3")
]
// f(x) = mx
// (element.y;0) (element.y+viewport.height;viewport.width)
let ms = []
for (let i = 0; i < elements.length; i++) {
ms.push((document.documentElement.clientWidth) / (document.documentElement.clientHeight));
}
window.addEventListener('scroll', function (e) {
for (let i = 0; i < elements.length; i++) {
if (isInViewport(elements[i])) { //check that the element is on the screen
let y = elements[i].getBoundingClientRect().y;
elements[i].style.right = ms[i] * (y - document.body.scrollTop) +"px";
}
}
});
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
I'm trying to make an slideshow, but when it moves to the next (or previous) image, there is nothing on the background.
I would like the image you're going to see appearing behind the one you are seeing, something like when you are shuffling cards.
Aditionally, I would like to have different animations when you click on the right or on the left arrow, to match it's movement.
Here is the code I'm using right now:
Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<style>
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
overflow: hidden;
max-width: 300px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides animated slideInLeft">
<img src="https://pruebas20.webcindario.com/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides animated slideInRight">
<img src="https://pruebas20.webcindario.com/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides slideInRight">
<img src="https://pruebas20.webcindario.com/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
Thank you!
The problem is that you are hiding all but the current slide, both with javascript and css.
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
.mySlides {display: none}
You would need to remove this, but change the z-index of the slides instead so that the current slide is on top, and at the same time add the slideInRight/slideInLeft classes. You would also need to absolutely position the slides within the container, so that they occupy the same position.
Yes, Mark Fisher is correct. You need to play around with the z-index of the slides. To be honest it would probably be easier to use a plugin such as Slick Slider if you want to have cool transitions etc.
I have created a codepen based on your code. It is not perfect, but perhaps you can get an idea of how to do this. Your slides need to be positioned absolutely within the slide wrapper in order to be "revealed" behind each other when you move between slides. I have used a CSS transition on the position to animate the slide.
.mySlides {position: absolute; left: 0; z-index: 0;transition: left 1s linear; width: 300px; height: 105px;}
https://codepen.io/moorehannah/pen/eqdXby
kind sir's does anybody know why my navigation bar is not showing when i upload it in a free web host (x10hosting and 000webhost) but when i run it in localhost its perfectly working.
this is when i run it in localhost
and this what happens when i run it online
this is the html code
<?php
error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav class="clearfix">
<ul class="clearfix">
<li><img src="img\home.png" style="margin-bottom:-2px; margin-right:3px; width:16px; height:16px;">Home</li>
<li><img src="img\speakers.png" style="margin-bottom:-1px; margin-right:4px; width:15px; height:13px;">Speakers</li>
<li><img src="img\about.png" style="margin-bottom:-1px; margin-right:3px; width:13px; height:12px;">About</li>
<li><img src="img\contact.png" style="margin-bottom:-2px; margin-right:6px; width:13px; height:14px;">Contact</li>
<li><img src="img\reservation.png" style="margin-bottom:-2px; margin-right:5px; width:14px; height:13px;">Reservation</li>
<li><img src="img\signOut.png" style="margin-bottom:-2px; margin-right:6px; width:14px; height:14px;">Sign Out</li>
<li><img src="img\user.png" style="margin-bottom:-1px; margin-right:6px; width:13px; height:12px;"><?php echo $_SESSION['firstname']; ?></li>
<li><img src="img\signUp.png" style="margin-bottom:-1px; margin-right:6px; width:13px; height:11px;">Sign Up</li>
<li><img src="img\signIn.png" style="margin-bottom:-2px; margin-right:6px; width:14px; height:13px;">Sign In</li>
<li><img src="img\admin.png" style="margin-bottom:-3px; margin-right:6px; width:15px; height:16px;">Admin control</li>
</ul>
Speaker Reservation
</nav>
<div class="slideshow-container">
<div class="mySlides fade">
<img id="img1" src="img/homepage-image1.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img2" src="img/homepage-image2.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img3" src="img/homepage-image3.jpg">
<div class="text"></div>
</div>
<div id="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div id="index-welcome"><p>Welcome to Online Speaker Reservation. We are an organization established in 2005 by Rey Vibal, which engages the skills of performing artists directors and writers for the purpose of tuition in the performing arts, theatrical and film production, corporate training, wellness and sharing methodologies.</p></div>
<div id="footer" >Copyright 2017</div>
<script>
$(function()
{
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e)
{
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function()
{
var w = $(window).width();
if(w > 320 && menu.is(':hidden'))
{
menu.removeAttr('style');
}
});
});
</script>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000);
}
</script>
<script>
function ifAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "block";
}
</script>
<script>
function ifNotAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function ifNotLogin()
{
document.getElementById("user").style.display = "none";
document.getElementById("signOut").style.display = "none";
document.getElementById("adminControl").style.display = "none";
}
</script>
<?php
if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true)
//if login
{
if($_SESSION['type'] == 1)
{
echo "<script type='text/javascript'>ifAdmin();</script>";
}
elseif($_SESSION['type'] == 0)
{
echo "<script type='text/javascript'>ifNotAdmin();</script>";
}
}
//if not login
else
{
echo "<script type='text/javascript'>ifNotLogin();</script>";
}
?>
</body>
</html>
this is the css codes
/*navigation bar*/
nav
{
height: 60px;
width: 100%;
background: #342E2D;
font-size: 10pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
}
nav ul
{
padding: 0;
margin: auto;
width: 100%;
height: 60px;
}
nav li
{
display: inline;
}
nav a
{
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 60px;
text-shadow: 1px 1px 0px #283744;
}
nav li a
{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a
{
border-right: 0;
}
nav a:hover, nav a:active
{
background-color: #1E1D1C;
}
nav a#pull
{
display: none;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
#signIn, #signUp, #signOut, #adminControl, #user
{
float:right;
}
#adminControl
{
width:130px;
}
Your code looks fine to me Make sure to clear cache u can achive this by
Option1:
Try opening the browser in Incognito(chrome) mode.
CTRL + P
private(IE)
CTRL + N
Option2
Just clear the browsers cache.
I had a cache problem few times using webhost00
It appears like the CSS styling isn't loading at all. Check the location of your CSS file on your webhost against the stylesheet link in your HTML file.
Looking for a good JavaScript to help me hide/show multiple divs with a button click not an a href click so I can use it in blogger.
I've been looking for an answer for a while now and have been unable to find a good one that uses JavaScript and/or CSS. I am a bit of a novice so bear with me.
Following is my code that works but I would like to simplify it and make it work so that it will close the div when I click the appropriate button again.
css
<head>
<style>
#myDIV1 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV2 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV3 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
#myDIV4 {
width: 150px;
height: 150px;
background-color: lightblue;
display: none;
}
</style>
</head>
I know there is an easier way but this is the only way that I can find that works for what I want it to do for the most part
html
<body>
<p>Click button to see div.</p>
<button onclick="myFunction1()">One</button>
<button onclick="myFunction2()">Two</button>
<button onclick="myFunction3()">Three</button>
<button onclick="myFunction4()">Four</button>
<div id="myDIV1">
This is the div1 element.
</div>
<div id="myDIV2">
This is the div2 element.
</div>
<div id="myDIV3">
This is the div3 element.
</div>
<div id="myDIV4">
This is the div4 element.
</div>
Javascript
<script>
function myFunction1() {
document.getElementById("myDIV1").style.display = "block";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction2() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "block";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction3() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "block";
document.getElementById("myDIV4").style.display = "none";
}
function myFunction4() {
document.getElementById("myDIV1").style.display = "none";
document.getElementById("myDIV2").style.display = "none";
document.getElementById("myDIV3").style.display = "none";
document.getElementById("myDIV4").style.display = "block";
}
</script>
Any help would be appreciated thanks in advance.
I would suggest to separate your code first - it would be then more clean and reusable - like myStyle.css, myScript.js, index.html
Add the css and js file in the html file like -
<link rel="stylesheet" type="text/css" href="myStyle.css">
<script type="text/javascript" src="myScript.js"></script>
src -> indicates the source path of the file. Here I assume that all our css, js, 'html' file in same place.
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}
<div class="main_div">
<div class="buttons">
Div1 |
Div2 |
Div3 |
Div4
</div>
<div class="inner_div">
<div id="Div1">I'm Div One</div>
<div id="Div2" style="display: none;">I'm Div Two</div>
<div id="Div3" style="display: none;">I'm Div Three</div>
<div id="Div4" style="display: none;">I'm Div Four</div>
</div>
</div>
if you want to hide/show all divs simultaneously than you have to give all divs same class for ex: .toggle and than you can do this:
function myFunction1(){
$(".toggle").slideToggle();
}
if you want to hide/show one div at a time than you can do this with id :
function myFunction1(){
$("#myDIV1").slideToggle();
}
with different buttons :
function myFunction1(id){
$("#"+id).slideToggle();
}
pass id here :
<button onclick="myFunction1('myDIV1')">One</button>
<button onclick="myFunction1('myDIV2')">Two</button>
<button onclick="myFunction1('myDIV3')">Three</button>
<button onclick="myFunction1('myDIV4')">Four</button>
I found the answer to what I wanted with the .toggle function thanks for the help. The answer I found here: radomsnippets.com
We can easily add an unlimited amount of buttons using reusable code.
here is a full example! Enjoy
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.generalclass {
width: 100%;
color: #ffffff;
text-align: center;
background-color: #000000;
margin: 10px;
padding: 10px;
display: none;
}
.button{
background: red;
padding: 10px;
border-radius: 5px;
color: #FFFFFF;
font-size: 16px;
border: none;
}
.button:hover{
background: black;
}
</style>
</head>
<body>
<button class="button" onclick="myFunction('button1')">Button 1</button>
<button class="button" onclick="myFunction('button2')">Button 2</button>
<div id="button1" class="generalclass">
<p>I can show anything here</p>
</div>
<div id="button2" class="generalclass">
<p>I can show anything here too and different from button 1</p>
</div>
<script>
function myFunction(divid) {
var x = document.getElementById(divid);
if (x.style.display == "none")
{
x.style.display = "block";
}
else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle