Show <li> dynamically using jQuery hover

Show <li> dynamically using jQuery hover - javascript

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;
}

Related

automatically resizing the menu bar by javascript

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>

Adjust a Div's Style Depending on Another Div's Presence?

In the snippet provided, I have 3 sections: The first contains a single image, the second has two images, and the last one has no images.
I would like for the .image class within the first section to be 100% in width only if there is no other .image div present.
However, once there is another .image div present, (as shown in the second section), I would like it to default back to 50% width.
How should I execute this?
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
overflow: auto;
}
.image {
float: left;
display: block;
width: 50%;
line-height: 0;
}
.image img {
width: 100%;
height: auto;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

You could display the section as a table and the div.image as a table-cell. Then the image would resize according to the number of "cell's" (div.image's) present.
div.container{
display: 100%;
}
div.section{
width: 100%;
display: table;
}
div.section div.image{
display: table-cell;
}
div.section div.image img{
width: 100%;
height: auto;
}
Here's a JSFiddle:
https://jsfiddle.net/ColiniloC/Lnnkpx6L/

Figured out a simpler solution with flexbox:
$(function() {
$('.container > .section').each(function() {
if (!$(this).find(".image").length) {
$(this).before('<div class="noimage">No images to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
margin-bottom: 10px;
}
.container {
box-sizing: border-box;
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
.section {
display: flex;
flex-wrap: wrap;
overflow: hidden;
align-items: center;
margin: 0 -5px;
}
.image {
flex: 1 1 50%;
line-height: 0;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.container .image:nth-of-type(n+3) {
padding-top: 10px;
}
.image img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 1 Image -->
<div class="container">
<h1>Section With 1 Image:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
</div>
</div>
<!-- 2 Images -->
<div class="container">
<h1>Section With 2 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
</div>
</div>
<!-- 4 Images -->
<div class="container">
<h1>Section With 4 Images:</h1>
<div class="section">
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/pear-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/ice-cream-cone-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/orange-flat.png"></div>
<div class="image"><img src="https://freeiconshop.com/wp-content/uploads/edd/burger-flat.png"></div>
</div>
</div>
<!-- No Images -->
<div class="container">
<h1>Section With No Images:</h1>
<div class="section"></div>
</div>

jQuery scrollTo function

I have a problem with jQuery scrollTo function, yesterday it was working :|. Anyway I want to create smooth scroll to div when I click on a button in my navigation bar and it doesn't work :S. Tell me why, how can I make it work.
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(document).ready(function(){
$('.button2').on('click',function(){
$('#s2').ScrollTo();
});
});
$(document).ready(function(){
$('.button3').on('click',function(){
$('#s3').ScrollTo();
});
});
$(document).ready(function(){
$('.button4').on('click',function(){
$('#s4');
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li>Start</li>
<li>O mnie</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>

Here is a working fiddle with much shorter code:
EDIT: You can change the scroll speed by changing the animate duration from 2000ms to whatever you like.
$('.wrap').hide();
$('.wrap').fadeIn(700);
$(function(){
$('li').on('click',function(e){
e.preventDefault();
$('html, body').animate({
scrollTop: $($(e.target).attr("href")).offset().top
}, 2000);
});
});
.wrap, footer, #contact {
background-color: ;
}
body {
font-family: Dosis;
box-sizing: border-box;
}
.fluid-container {
max-width: 1000px;
margin: 0 auto;
}
ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #000000;
position: fixed;
width: 100%;
}
li {
display: inline-block;
font-size: 15px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #222;
text-decoration: none;
}
#foto1 {
display: block;
width: 100%;
margin: 50px auto;
}
h1{
font-family: Montserrat;
padding: 20px;
font-size: 40px;
text-align: center;
margin-top: 30px;
}
#foto2 {
border: #FBF8BB;
display: block;
max-width: 100%;
margin: 0 auto;
}
#foto3 {
display: block;
margin: 0 auto;
max-width: 100%;
}
.icons {
padding: 30px;
display: block;
}
.portfolio{
text-align: center;
}
#contact {
overflow: hidden;
}
.foto4 {
border-radius:100%;
padding : 20px;
max-width: 100%;
display: block;
margin: auto;
}
footer {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div class = "wrap">
<center><ul>
<li>Start</li>
<li>O mnie</li>
<li>Portfolio</li>
<li>Kontakt</li>
</ul></center>
<div id="s1" class="fluid-container">
<br>
<img id="foto1" src="https://s6.postimg.org/8vcsstfld/image.png" />
<div style="text-align:center" class="icons">
<a href="https://www.facebook.com/bartek.cechmann" target="_blank">
<img class="icon1" src="https://s6.postimg.org/ap89zgjw1/rsz_1496700658_facebook.png">
</a>
<a href="https://www.linkedin.com/in/bartosz-cechmann-941921124/" target="_blank">
<img class="icon2" src="https://s6.postimg.org/nuns5kdrl/rsz_1496700662_linkedin.png">
</a>
<a href="https://github.com/cechu11" target="_blank">
<img class="icon3" src="http://s6.postimg.org/b0zdn2w1d/1496775488_github_square_social_media.png">
</a>
</div></div>
<div id="s2">
<br>
<br>
<div class="aboutme">
<img id ="foto2" src="https://s6.postimg.org/ch9fdz775/image.png" />
</div></div>
<div id="s3" class="portfolio">
<br>
<h1><u>Portfolio</u></h1>
<img id="foto3"src="https://s6.postimg.org/b15eahcq9/Placeholder.png">
</div></div></section>
<div id="s4">
<footer>
<img class="foto4"src="https://s6.postimg.org/gz6o8ygxd/image.png">
</footer></>

You can use animate here to move about the page how you want to. Here's a quick reference. Click the second button to see it in action. From here can update your code to use the code posted here. Also, as # Himanshu Upadhyay pointed out you can put all that code into 1 $(document).ready(function(){}).
E.g.
$('.button2').on('click',function() {
$('html, body').animate({
scrollTop: $("#s2").offset().top
}, 2000);
});
Jsfiddle: https://jsfiddle.net/Lzwt2s2a/3/

Adding multiple pages with a single HTML document

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%;
}

Click button expands the div horizontally by closing other two divs

Guys I am new to jQuery...please help me to learn this. I want to expand the div(#center) taking width:100% on click that in turn closes the other 2 divs (#left and #right) in my case.
Please someone help me to solve this. And the most imp thing is that the transition should be swift nd not at once. Reply is appreciated. And its not lyk i dint try it first. I tried using click function to make it happen..bt dint work as desired
body {
width: 100%;
height: auto;
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="abc.css">
<script href="abc.js"></script>
</head>
<body>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>
</body>

You can use this example for "tab2"
$("#tab2").click(function () {
$("#center").css("width", "100%");
$("#left").fadeOut("slow");
$("#right").fadeOut("slow");
});
check my fiddle: http://jsfiddle.net/u87z1m3n/1/
And put id's to the li's in order to be able to select them:
<li id="tab1">Tab 1
</li>
<li id="tab2">Tab 2
</li>
<li id="tab3">Tab 3
</li>
The example is very coarse as the code needs a lot more refining...
But I think that it gives an answer to your question...

Study the example below. Let me know if you have any questions.
$("#head li").click(function () {
$("#center, #left, #right").eq($(this).index()).css("width", "100%");
$("#center, #left, #right").not($(this)).hide();
});
body {
width: 100%;
height: auto;
}
.current {
width: 100%
}
#taskDetails {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width: 900px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
float: left;
width: 900px;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
float: left;
width: 250px;
margin: 0 auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#center {
width: 370px;
float: left;
height: 200px;
border: 2px solid #a1a1a1;
background: red;
margin-left: 9px;
}
#right {
float: right;
width: 250px;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="taskDetails">
<div id="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form">
</div>
</div>
</div>
<div id="description">
<div id="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte">
</div>
<div class="text">
</div>
</div>
</div>
<div id="details">
<div id="left">
<div id="head">
<div class="heading">Projects</div>
</div>
<div class="data">
</div>
</div>
<div id="center">
<div id="head">
<div class="heading">Details</div>
</div>
<div class="data">
</div>
</div>
<div id="right">
<div id="head">
<div class="heading">Tab 3</div>
</div>
<div class="data">
</div>
</div>
</div>
</div>

Here's a CodePen demo showing the final result of everything below. Please read it carefully so you can learn the process and understand everything that's happening.
First of all, your HTML needed a lot of cleanup. You called head as an ID, but used it multiple times throughout your code. If you're going to use a selector more than once, it should be a class instead. I changed it in the HTML and the CSS.
HTML
<div id="main">
<div id="taskDetails">
<div class="head">
<div class="heading">FORM</div>
</div>
<div id="formTab">
<div id="form"></div>
</div>
</div>
<div id="description">
<div class="head">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
</div>
<div id="content">
<div class="rte"></div>
<div class="text"></div>
</div>
</div>
<div id="details">
<div id="left">
<div class="head">
<div class="heading">Projects</div>
</div>
<div class="data"></div>
</div>
<div id="center">
<div class="head">
<div class="heading">Details</div>
</div>
<div class="data"></div>
</div>
<div id="right">
<div class="head">
<div class="heading">Tab 3</div>
</div>
<div class="data"></div>
</div>
</div>
</div>
Next, in your CSS, you hadn't set the widths of your containers correctly, so adding something like width:100% wasn't doing anything because there was no max width to fill. I added that to your styles. Remember, I also updated the markup from changing your head id to a class.
Additionally, I removed the floats from you left,right, and center divs because that removes the blocks from the flow of the document, which can lead to funny behavior. Instead, I changed them to display:inline-block and set their widths relative to the container.
Finally, I added a .wide class at the end which will set the width of the center div.
CSS
body {
margin:0;
padding:0;
width: 100%;
height: auto;
}
#main {
width:100%;
}
#taskDetails {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#description {
width:auto;
height: 200px;
border: 2px solid #a1a1a1;
background: #dddddd;
}
#details {
width:100%;
margin: 0 auto;
height: auto;
border: 2px solid #a1a1a1;
display: inline-block;
}
#left {
display:inline-block;
margin:0;
padding:0;
width:20%;
margin: 0 auto;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
#center {
display:inline-block;
margin:0;
padding:0;
width:50%;
height: 200px;
border: 1px solid #a1a1a1;
background: red;
}
#right {
display:inline-block;
margin:0;
padding:0;
width:20%;
height: 200px;
border: 1px solid #a1a1a1;
background: #dddddd;
}
.head {
top: 0;
width: 100%;
height: 30px;
background: #8CBF26;
border-radius: 2px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
padding: 0 10px;
border-radius: 8px;
display: block;
width: 60px;
height: 25px;
border: 2px solid #a1a1a1;
background-color: #00ABA9;
text-decoration: none;
}
.heading {
padding: 5px;
}
.wide {
width:100% !important;
transition:.5s;
}
Now, this can be done with jQuery, so make sure you add the script in the head of your HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
The jQuery script is pretty simple, and does three things:
1. When you click on any of the tab buttons, it will hide the #left and #right divs.
2. The #center div expands to 100% of the container.
3. When you click on the tab again, it will shrink the #center div and bring the other two back.
jQuery
$(".head ul li").click(function() {
$("#left, #right").animate({width:"toggle"});
$("#center").toggleClass('wide');
})
I used toggle in both of the calls because it gives a fairly nice animation without making you code in specifics. It also handles adding or removing a class, so your script can stay simple if all you want to do is add or remove that class with each click.
If you want something more complex, you'll definitely want to look at JavaScript instead of jQuery as #Katana314 mentioned above. They're for two different things, so make sure you understand the difference between the two.

Develop Reference

JavaScript is the programming language of the Web.

Show <li> dynamically using jQuery hover - javascript

Related

automatically resizing the menu bar by javascript

Adjust a Div's Style Depending on Another Div's Presence?

jQuery scrollTo function

Adding multiple pages with a single HTML document

Click button expands the div horizontally by closing other two divs

Categories

Resources