I am attempting to implement a multi-page site with a single HTML document.
I want to display 'home', 'about', 'projects', and 'contact' when a user clicks on a certain link in my sidebar.
I have the following code written:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Home</p>
</div>
<div class="footer">
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>About</p>
</div>
<div class="footer">
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Projects</p>
</div>
<div class="footer">
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Hello, World!
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<p><br><br><br><br>Contact</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
css/main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:relative;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
line-height: 2;
color: white;
display:flex; align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
margin-top: -80px; /* Header height */
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
}
.content h1 {
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position:absolute;
}
.footer a img {
position: relative;
top: -5px;
}
but when I click on an option, it gives an expected problem: the 'page' that should be hidden isn't being hidden and only part of the requested page is being shown.
The jsfiddle found here shows my problem.
Why isn't this working? The javascript in the head is meant to find the difference between all the pages and the page requested, show the requested page and hide the rest.
Thanks in advance,
erip
See the fiddle
Replace
for (hidden in hide_these) {
document.getElementById(hidden).style.display = 'none';
}
with
for (hidden in hide_these) {
document.getElementById(hide_these[hidden]).style.display = 'none';
}
The problem with your code was that document.getElementById() was returning null because the values for the variable hidden was actually 0,1,2 etc.
you actually had to get the ids from the array hide_these
UPDATE
Add this in your CSS
The messing up of the background image is because you are missing the below given css. add them to solve the issue..
#about, #projects, #contact {
width: 100%;
height:100%;
}
Related
I want to resize my navigation bar items, so there will be enough distance between them and the sticky logo. How can I achieve that? I tried to edit the container, but it didn't resize and instead overlapping appeared. I mean, it should be put to the right side and leave enough distance between the logo and the menu bar.
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.testmonial {
background-image: url(images/testimonial-bg.jpg);
position: relative;
background-repeat: no-repeat;
}
.testmonial:after {
content: "";
background: #1baaba;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: .6;
z-index: 1;
}
.owl-wrapper {
padding: 80px 20px;
z-index: 999;
position: relative;
}
.owl-testmonial {
background: #FFF;
/* max-width: 400px; */
margin: 0 auto;
padding: 40px 25px;
position: unset;
}
.owl-testmonial:before {
content: "\f10d";
font-family: "Font Awesome 5 Free";
font-weight: 900;
text-align: center;
display: block;
font-size: 92px;
color: #e7e7e7;
margin-top: -106px;
}
.owl-testmonial .owl-prev {
position: absolute;
left: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
line-height: 17px !important;
color: #FFF;
}
.owl-testmonial .owl-next {
position: absolute;
right: 0;
top: 45%;
font-size: 36px !important;
border: 1px solid #FFF !important;
width: 33px !important;
height: 36px !important;
color: #FFF;
line-height: 17px !important;
}
nav {
overflow: hidden;
background-color: #333;
}
nav.sticky {
position: fixed;
top: 0;
width: 100%;
}
nav ul {
display: flex;
list-style: none;
margin: 0;
}
nav li {
margin: 0 30px;
}
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
nav a:hover {
background-color: #ffeb3b;
color: black;
}
a.active {
background-color: #2196f3;
color: white;
}
.content {
padding: 20px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.sticky ul {
height: 50px;
/* or any other desired height */
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sticky a {
height: 100%;
/* or any other desired height */
line-height: 50px;
padding: 0 20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
background-color: #fff;
width: 30%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
float: left;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #ffeb3b;
color: #2196f3;
border-radius: 10px;
border: 1px solid #2196f3;
margin-top: 20px;
cursor: pointer;
}
.office-map {
margin-top: 50px;
}
/* Responsive styles */
#media screen and (max-width: 992px) {
nav li {
margin: 0 10px;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 80%;
}
}
#media screen and (max-width: 768px) {
header {
height: 60vh;
}
nav {
top: 60vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 90%;
}
}
#media screen and (max-width: 576px) {
header {
height: 40vh;
}
nav {
top: 40vh;
}
.benefit-card,
.product,
.testimony,
.news-item,
.suggestion-box {
width: 95%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Add JS for owl carousel -->
<link rel="stylesheet" href="fontawesome/css/all.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/dist/assets/owl.theme.default.min.css">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>My Homepage</title>
</head>
<body>
<div class="testmonial">
<div class="container">
<div class="owl-wrapper">
<div class="owl-carousel owl-testmonial">
<div class="slide-item">
<img src="testimony/slider1585663811.png" alt="Slide 1">
</div>
<div class="slide-item">
<img src="testimony/slider1589942091.png" alt="Slide 2">
</div>
<div class="slide-item">
<img src="testimony/slider1590030001.png" alt="Slide 3">
</div>
</div>
</div>
</div>
</div>
<!-- 7 items sticky menu bar -->
<nav id="navbar">
<ul id="nav-ul">
<li><a class="active" href="#home">Home</a></li>
<li>About Us</li>
<li>Tabungan</li>
<li>Kredit</li>
<li>Deposito</li>
<li>Berita</li>
<li>Pengajuan Kredit</li>
</ul>
</nav>
<main class="content">
<!-- 3 static benefits -->
<section class="benefits">
<div class="card">
<h3>Benefit 1</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 2</h3>
<p>Description</p>
</div>
<div class="card">
<h3>Benefit 3</h3>
<p>Description</p>
</div>
</section>
<!-- 3 types of product -->
<section class="products">
<h2>Products</h2>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
</section>
<!-- ID tracking -->
<section class="id-tracking">
<h2>ID Tracking</h2>
<p>Description</p>
</section>
<!-- 3 dynamic testimonies -->
<section class="testimonies">
<h2>Testimonies</h2>
<div class="owl-carousel owl-theme">
<div class="testimony-1">Testimony 1</div>
<div class="testimony-2">Testimony 2</div>
<div class="testimony-3">Testimony 3</div>
</div>
</section>
<!-- 4 dynamic slider of news -->
<section class="news">
<h2>News</h2>
<div class="owl-carousel owl-theme">
<div class="news-1">News 1</div>
<div class="news-2">News 2</div>
<div class="news-3">News 3</div>
<div class="news-4">News 4</div>
</div>
</section>
<!-- suggestion box -->
<section class="suggestion-box">
<h2>Suggestion Box</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="phone-number">Phone Number:</label>
<input type="text" id="phone-number" name="phone-number">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit">Submit</button>
</form>
</section>
<!-- static map to the office -->
<section class="map">
<h2>Map to the Office</h2>
<img src="map.jpg" alt="Map to the Office">
</section>
</main>
<script src="owlcarousel/jquery.min.js"></script>
<script src="owlcarousel/dist/owl.carousel.min.js"></script>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var logo = document.createElement("img");
logo.src = "http://www.google.com/intl/en_com/images/logo_plain.png";
logo.style.height = "50px";
logo.style.marginLeft = "40px";
logo.style.float = "left";
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
if (!navbar.classList.contains("logo")) {
navbar.classList.add("logo");
navbar.insertBefore(logo, navbar.firstChild);
navbar.style.height = "50px";
}
} else {
navbar.classList.remove("sticky");
navbar.classList.remove("logo");
navbar.removeChild(logo);
navbar.style.height = "auto";
}
}
window.onscroll = function() {
myFunction();
};
</script>
</body>
</html>
Currently I have a javascript search bar on my site to search images based on a div classed text which acts as their name.
However I plan on having several hundred images which would not be suitable for one page, which is why I added pages to my site, which brings me to my question.
How would I allow for a user regardless of what page they are on to use the search bar to search images from other pages and have that data displayed on their current page
I would like to try and do this without setting up a back end database which is where I feel this is headed, if anyone has any solutions please shoot them my way.
Below will be the html and css of my index as the second page is identical to the first other than the images. All my images are locally hosted, so if you want a running example on codepen, just comment and I will set that up.
<script>
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
</script>
/* Website Title */
h1 {
color: red;
}
/* Website desciption */
h2 {
color:red;
}
/* Text */
p {
font-family: Arial;
}
/* Website body */
body {
background-color: grey;
}
/*Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: black;
}
li {
float: left;
border-right: 1px solid white;
padding: 10px;
}
li a {
display: block;
color: white;
text-align: center;
padding-right: 10px;
padding-bottom: 5px;
text-decoration: none;
text-transform: upercase;
font-size: 30px;
}
li:last-child {
border-right: none;
}
ul li:hover:not(.active) {
background-color: #555;
color: white;
}
.active {
background-color: red;
}
/* Search Bar */
input[type=text] {
width: 200px;
height: 50px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
font-size: 30px;
}
/* Cool code but not needed atm
input[type=text]:focus {
width: 100%;
float: left;
}
*/
/* Keeps images inline */
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
/*Puts overlay on images */
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
/* For links for the pages */
.pagination a {
color: black;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* Styling current page buttons */
.pagination a.active {
background-color: #4CAF50;
color: white;
}
/* Styling on mouse-over background color for page buttons */
.pagination a:hover:not(.active) {background-color: #ddd;}
/*Forcing footer to the bottom*/
html, body, #wrap { height: 100%; }
body > #wrap { height: auto; min-height: 100%;}
#main { padding-bottom: 10px; } /* Must equal the height of the footer */
#footer {
position: relative;
margin-top: -10px; /*Must equal negative value of the footer height */
height: 10px;
clear: both;
padding-top: 20px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* End of forcing footer to the bottom*/
<html>
<title>Cryptos Explained</title>
<head>
<!-- Links to my CSS document -->
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- My main heading -->
<h1 align=center>Cryptos Explained</h1>
<!-- My Sub-heading -->
<h2 align=center>Explainations, Prices, WhitePapers and more</h2>
<!-- Allows me to have jquery code at the bottom of the page -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Kind of makes it mobile friendly -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<header>
<!-- Navigation bar -->
<ul>
<li class="active">Home</li>
<li>Vocabulary</li>
<input type="text" id="myinput" name="search" placeholder="Search..." style="border-radius: 4px;">
</ul>
</header><br>
<body>
<!--Lots of Div classes so I can seperate the main and the footer -->
<div id="wrap">
<div id="main" class="clearfix">
<!-- All my images -->
<div class="image123">
<div class="imgContainer">
<img src="img/btc.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="img/ripple.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
</div>
<!-- Pages -->
<div id="footer">
<div class="pagination" align="center">
«
<a class="active" href="#">1</a>
2
3
4
»
</div>
</div>
</div>
</body>
</html>
I am trying to create a dynamic <ul> such that when I hover of a <li> (the class details), it dynamically creates another <li> (homework for that class) underneath it. I have this working.
However, when I leave the <li> I want the list of homework items to disappear. To accomplish this I decided to remove the <li> of homework items when I leave that <li>. The problem is that if I never hover into that homework list and simply just hover in and out of the class item details, it will not disappear. I am new to jQuery and so I may be missing something simple.
Before any hover
Hover into first class item
When I move the mouse out of the item, I want the items to disappear
But I want to maintain the functionality that when I hover into the homework list, it doesn't disappear:
And when I hover out of the homework list, it disappears (currently does this)
Here is my code:
jQuery.js
$(document).ready(function() {
$(".item").hover(
function(){
$(this).find('.class-item').find('.top').css("background", "#D0D0D0");
$(this).find('.class-item ').find('.bottom').css("background", "#B8B8B8");
$(this).css("border-color", "white");
$(this).css("margin-bottom", "0");
$('#classes li:eq(' + $( "li" ).index(this) + ')').after('<li class="hw"><ul><li class="hw-item">Homework 1</li><li class="hw-item">Homework 2</li></ul></li>');
var parent = $(this);
$(".hw").hover(
function(){
},
function(){
parent.css("margin-bottom", "2%");
$('#classes li:eq(' + ($( "li" ).index(parent) + 1) + ')').remove();
}
);
},
function(){
$(this).find(' .class-item ').find(' .top ').css("background", "#B8B8B8");
$(this).find(' .class-item ').find(' .bottom ').css("background", "#D0D0D0");
$(this).css("border-color", "#888888");
}
);
});
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Courier New", monospace;
font-size: 24px;
}
body {
}
#left {
float: left;
height: 100%;
width: 60%;
background: black;
}
#right {
float: left;
height: 100%;
width: 40%;
padding: 1%;
background: black;
}
#classes {
height: 100%;
overflow-y: scroll
}
#classes::-webkit-scrollbar {
display: none;
}
img {
width: 100%;
height: 100%;
max-height: 100%;
max-width: 100%;
}
.item {
height: 150px;
margin-bottom: 2%;
border: 5px solid #888888;
}
.class-item {
height: 100%;
width: 100%;
display: inline-block;
}
.top {
width: 100%;
height: 50%;
text-align: center;
background: #B8B8B8;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom {
width: 100%;
height: 50%;
text-align: center;
background: #D0D0D0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.hw {
margin-bottom: 2%;
padding: 1%;
width: 100%;
display: inline-block;
}
.hw-item{
margin-bottom: 1%;
padding: 0.25%;
background: #D0D0D0;
border: 3px solid white;
}
h3 {
text-align: center;
}
index.html
<html>
<head>
<title>Homework</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<div id="left">
<img src="me.jpg"/>
</div>
<div id="right">
<ul id="classes">
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Algorithm Analysis</h3>
</div>
<div class="bottom">
COMPSCI 704
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Programming Language Concepts</h3>
</div>
<div class="bottom">
COMPSCI 431
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Physics 1 with Calculus</h3>
</div>
<div class="bottom">
PHYSICS 209
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Ethics</h3>
</div>
<div class="bottom">
COMPSCI 395
</div>
</div>
</li>
<li class = "item">
<div class="class-item">
<div class="top">
<h3>Computer Architecture</h3>
</div>
<div class="bottom">
COMPSCI 458
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Thanks to the comments on my post, I was able to avoid the javascript and do it solely through css using:
.class-item {
height: 150px;
width: 100%;
display: inline-block;
border: 5px solid #888888;
}
.homework {
padding: 1%;
display: none;
}
.class-item:hover + .homework {
display: block;
}
.homework:hover {
display: block;
}
I was wondering if there was a way to add a scroll to the nav bar when the user has a zoomed in browser.
Currently, I have my nav bar set to:
position: fixed;
left: 0;
top: 0;
Along with a javascript code that makes it stick to the side when the user scrolls on the page.
However, say the user has a browser that is zoomed in 150% or more, half of the nav bar gets cut off and the user is not able to see the other options in the nav bar. Is there a way to add a scroll when the user has a zoomed in browser?
Here is my code,
HTML:
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png"/>
</a>
</div><!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact</li>
</div>
</div>
</ul>
</nav><!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
</ul><!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div><!-- end rights -->
</div ><!-- end footer -->
</header><!-- end header -->
CSS:
/* Header */
#media (min-width:1100px) {
header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header .logo {
margin-top: 50px;
margin-left: -50px;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
margin-top: 30%;
}
header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .7s ease; /* Transition for Webkit browsers */
}
header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
header .rights p {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
header .rights a {
font-family: "raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
Here is the jsfiddle:
https://jsfiddle.net/n2zb3pnz/
Even on the js fiddle it doesn't show the full nav bar because it is too zoomed in.
Fiddle: https://jsfiddle.net/n2zb3pnz/5/
header {
overflow: auto;
bottom:0;
}
A few issues here..
The <header> html tag is normally used as a container element for "navigational aids" for some containing element (in your case <body>). From the docs:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
.. So, it's not semantically incorrect, but think of it's typically usage as being the top portion of a "frame" or box on your page (not the sidebar nav)
Your navbar overflow property is set to hidden - which prevents the scrolling that you are looking for. It also has no parent element aside from the doc body, so unless you want the scrolling on the navbar itself, you'll need to add a parent with overflow: auto;.
Example:
html, body{
height: 1000px;
width: 1000px;
}
.content{
height: 100%;
width: 100%;
overflow: auto;
background-color: pink;
}
.header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
.header .logo {
margin-top: 50px;
margin-left: -50px;
}
.header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
.header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
.header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
.header nav ul li a:hover {
color: #8AE6B8;
}
.header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
.header .footer {
margin-top: 30%;
}
.header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .7s ease;
/* Transition for Webkit browsers */
}
.header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
.header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
.header .rights p {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
.header .rights a {
font-family:"raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="header">
<div class="logo"> <a href="index.html">
<img src="img/logo.png"/>
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png">
</li>
<li><img src="img/linkedin.png">
</li>
<li><img src="img/twitter.png">
</li>
<li><img src="img/facebook.png">
</li>
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</div>
<!-- end header -->
</div>
Ok so I have a function that slideshow a background in the background of the site . I want the Navigation Links to be transparent and the body to be transparent. Not transparent as in no color , transparent as in you can see the slideshows in the background.
<script>
$(document).ready(function() {
function test() {
var count = $("img").size();
$("#background_images img").each(function(index) {
$(this).hide();
if (!--count)
$(this).delay(10000 * index).fadeIn(3000).delay(10000).fadeOut(1000, function() { test(); });
else
$(this).delay(10000 * index).fadeIn(3000).delay(10000).fadeOut(1000);
});
}
test();
});
-->
</script>
<style>
body, html{
margin:0;
padding: 0;
background: #000;
filter: alpha (opacity=50);
background-attachment: fixed;
width: 100%;
height: 100%;
}
html { overflow: hidden; filter: alpha (opacity=50); }
body { overflow: auto; filter: alpha (opacity=50);}
#background_images img{
position: absolute;
top:0;
display:none;
width: 99%;
z-index: 1;
}
#container { width: 1000px; background: #fff; margin: 0 auto; border-left: 1px solid #000; border-right: 1px solid #000; position: relative; z-index: 2; }
#header { width: inherit; height: 0px; background: url(../images/header.png) no-repeat; }
#navbar { width: inherit; height: 35px; background: url(../images/navbar.png) repeat-x; border-top: 1px solid; border-bottom: 1px solid; }
/* navbar ul content */
#navbar ul { list-style-type: none; padding: 0; margin: 0; }
#navbar li { display: inline; float: left; padding-left: 15px; margin: 0; }
#navbar li a { display: block; width: 50px; height: 26px; padding: 5px; color: #000; text-decoration: none; text-align: center; }
#navbar li a:hover { background: #fff; color: #666; }
#content { width: inherit; background: url(../images/shadow.png) repeat-x top #fff; }
/* content div's "cont" class */
#content .cont { padding: 50px; }
#footer { width: inherit; height: 150px; filter: alpha(opacity=100); -moz-opacity:.40;
opacity:.40;
text-align: center; padding-top: 100% }
/* footer div's "cont" class */
#footer .cont { padding: 5px; }
#footer .footlinks a { color: #fff; text-decoration: none; }
</style>
</head>
<body>
<div id='background_images'><img src='ocean.jpg' /><img src='sky.jpg' /></div>
<div id="container">
<div id="header">
</div><!-- #header -->
<div id="navbar">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic2.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Collections</span>
<span class="sdt_descr">Our work</span>
</span>
</a>
<div class="sdt_box">
Formal
Indigenous
Vintage
Retro
Modern
</div>
</li>
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic3.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Entice Ur Match</span>
<span class="sdt_descr">Customize Your Own.</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic4.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Be A Designer</span>
<span class="sdt_descr">Up For A Challenge</span>
</span>
</a>
</li>
<li>
<div id="center">
<a href="#" id="popUpAbout">
<script>
</script>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Who Are We</span>
<span class="sdt_descr">Matt & Na'il</span>
</span>
</a>
</div>
</li>
</ul>
</div><!-- #navbar -->
<div id="content">
<div class="cont">
</div><!-- #content .cont -->
</div><!-- #content -->
<div id="footer">
<div class="cont">
<p>© 2012. All Rights Reserved. Designed by Matthew Harding. ©</p>
<p class="footlinks">Home | Test | Test | Test | Test</p>
</div><!-- #footer .cont -->
</div><!-- #footer -->
</div><!-- #container -->
If i understood your question, have you tried rgba, Look Here example:
div {
background: rgba(200, 54, 54, 0.5);
}
the last parameter is the opacity value.
I can't try all your code but look at this test, you can start with this base and do all the other changes you need, its working for the base of your html and with opacity working, you only have to see why in the rest of your code is making it change.
body, html{
background-color:#ffaadd;
width:100%;
height:100%;
}
#background_images
{
width:100%;
height:100%;
border:1px solid green;
background-color:#aaffdd;
position:absolute;
}
#content
{ top:0px;
position:absolute;
border:1px solid red;
}
#navbar{
border:1px solid blue;
position:relative;
background: rgba(200, 54, 54, 0.3);
}
#footer { width: inherit; height: 150px; filter: alpha(opacity=100); -moz-opacity:.40;
opacity:.40;
text-align: center; padding-top: 100% }
/* footer div's "cont" class */
#footer .cont { padding: 5px; }
#footer .footlinks a { color: #fff; text-decoration: none; }
Look how its working HERE