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.
Related
I am trying to make the search results for list items in search bar hyperlinked and clickable. Looking at the coding I can't see why... This is the coding as I have figured out thus far:
<!DOCTYPE html>
<html>
<style>
.filterDiv {
float: left;
background-color: #e42625;
color: #ffffff;
width: 200px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: #050505;
cursor: pointer;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
<body>
<h2>Ideas for A Fair Deal for Housing</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('A')"> A</button>
<button class="btn" onclick="filterSelection('B')"> B</button>
<button class="btn" onclick="filterSelection('C')"> C</button>
<button class="btn" onclick="filterSelection('E')"> E</button>
<button class="btn" onclick="filterSelection('G')"> G</button>
<button class="btn" onclick="filterSelection('H')"> H</button>
<button class="btn" onclick="filterSelection('L')"> L</button>
<button class="btn" onclick="filterSelection('N')"> N</button>
<button class="btn" onclick="filterSelection('O')"> O</button>
<button class="btn" onclick="filterSelection('P')"> P</button>
<button class="btn" onclick="filterSelection('T')"> T</button>
<button class="btn" onclick="filterSelection('V')"> V</button>
<button class="btn" onclick="filterSelection('W')"> W</button>
<button <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for organisation.." title="Type in a name">
<ul id="myUL">
<li>A2 Dominion</li>
<li>Google</li>
<li>Bing</li>
</ul>
<script>
var UL = document.getElementById("myUL");
// hide the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");
// show the list when the input receive focus
searchBox.addEventListener("focus", function(){
// UL.style.display = "block";
});
// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
ul = document.getElementById("myUL");
filter = input.value.toUpperCase();
// if the input is empty hide the list
if(filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
// This is when you want to find words that contain the search string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
// This is when you want to find words that start the search string
/*if (a.innerHTML.toUpperCase().startsWith(filter)) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}*/
}
}
</script>
</body>
</html>
</button>
</div>
<div class="container">
<div class="filterDiv A">A2 Dominion</div>
<div class="filterDiv B">BPHA</div>
<div class="filterDiv W">WHG</div>
<div class="filterDiv N">Notting Hill Genesis</div>
<div class="filterDiv A">Accent</div>
<div class="filterDiv H">Housing 21</div>
<div class="filterDiv E">EMH Group</div>
<div class="filterDiv A">Anchor</div>
<div class="filterDiv G">Great Places</div>
<div class="filterDiv P">Paradigm</div>
<div class="filterDiv B">Bromford</div>
<div class="filterDiv L">Livewest</div>
<div class="filterDiv T">Thirteen</div>
<div class="filterDiv C">Citizen</div>
<div class="filterDiv H">Hyde</div>
<div class="filterDiv O">Optivo</div>
<div class="filterDiv V">Vivid</div>
</div>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
While trying to resolve this the only searchable terms are A2 Dominion, Google and Bing!
Any guidance would be very helpful. I have also made it so that the list is hidden unless the term is searched for
Thank you in advance!
epascarello answered this in a comment:
because you find the options as soon as blur is called. So when you click the blur is triggered, the options hide, you click nothing.
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>
i write these code, but in output, when i click on a, this will not work.
what should i do so that this works properly.
actually, initially i want to hide filter list and when i type some keywords in input box it will show that possible lists.
till this, it is working properly but when i click on 'a' there is no response.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('logo.png');
background-size: 25px;
background-position: 10px 12px;
background-repeat: no-repeat;
width: 98%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
img {
width: 50px;
justify-content: center;
align-item: center;
position: relative;
left: 50%;
transform: translatex(-50%);
}
span {
display: none;
}
</style>
</head>
<body>
<div id="search">
<img src="logo.png"></img>
<div id="input">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
</div>
<div id="ul">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
</div>
</div>
<script>
var UL = document.getElementById("myUL");
// hilde the list by default
UL.style.display = "none";
var searchBox = document.getElementById("myInput");
// show the list when the input receive focus
searchBox.addEventListener("focus", function() {
// UL.style.display = "block";
});
// hide the list when the input receive focus
searchBox.addEventListener("blur", function() {
UL.style.display = "none";
});
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
ul = document.getElementById("myUL");
filter = input.value.toUpperCase();
// if the input is empty hide the list
if (filter.trim().length < 1) {
ul.style.display = "none";
return false;
} else {
ul.style.display = "block";
}
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
// This is when you want to find words that contain the search string
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
// This is when you want to find words that start the search string
/*if (a.innerHTML.toUpperCase().startsWith(filter)) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}*/
}
}
</script>
</body>
</html>
but href is not working.
I don't believe "ghib" is a valid href. Either use # for a placeholder or include a URL.
If you were trying to link to another section on your page you'd need to href="#id".
Hope the above helps!
// hide the list when the input receive focus
searchBox.addEventListener("blur", function(){
UL.style.display = "none";
});
You are blurring the unordered list whenever you leave the input field, which hides your <li></li> whenever you click anywhere outside of the input field (hence why the a href isn't registering).
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