I have a menu on my website that works as expected and i've seen a tutorial from W3Schools. Here it is: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp .
So i put in the css, javascript but as i scroll down the page it doesn't actually work. It could be that my list/topnav is not a div container but i'm not sure.
Here's my home page:
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
overflow:auto; /* or auto */
}
body {
margin: 0;
background-color: #e5e5e5;
}
.topButton {
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color:#bbb; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
opacity: 0;
}
.topButton:hover {
transition: 0.3s;
opacity: 1;
background-color: #555; /* Add a dark-grey background on hover */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
font-family: 'Bebas Neue', cursive;
background-color: #e5e5e5;
text-align: center;
padding: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e5e5e5;
font-family: 'Titillium Web', sans-serif;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 48px;
text-decoration: none;
}
li a:hover {
background-color: #696969
}
li a.active {
background-color: #696969;
color: black;
font-weight: 900;
}
.sign-in {
border-left:1px solid #bbb
}
<body>
<div class="header" style="background-color: #e5e5e5;">
<a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a>
<hr style="margin: 0;">
<ul style="margin-top: 0;" id="navbar">
<li>Web Hosting</li>
<li>VPS</li>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
<li>Guides</li>
<li style="float:right; border-right:none;">Sign In</li>
<script src="Assets/JS/sticky-nav.js"></script>
</ul>
<hr style="margin: 0;">
</div>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
<button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button>
<script src="Assets/JS/top-button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>
I'm stuck on how to implement their code. Help is appreciated
My code is right, the website works with mobile. I believe it could be the cache that is causing the problem or it could be the sizing of the window.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
* {
overflow:auto; /* or auto */
}
body {
margin: 0;
background-color: #e5e5e5;
}
.topButton {
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color:#bbb; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
opacity: 0;
}
.topButton:hover {
transition: 0.3s;
opacity: 1;
background-color: #555; /* Add a dark-grey background on hover */
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
font-family: 'Bebas Neue', cursive;
background-color: #e5e5e5;
text-align: center;
padding: 0;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e5e5e5;
font-family: 'Titillium Web', sans-serif;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 48px;
text-decoration: none;
}
li a:hover {
background-color: #696969
}
li a.active {
background-color: #696969;
color: black;
font-weight: 900;
}
.sign-in {
border-left:1px solid #bbb
}
<body>
<div class="header" style="background-color: #e5e5e5;">
<a><img src="/Assets/Images/banner-logo.png" height="100" width="300" style="display:block; margin:auto;"></img></a>
<hr style="margin: 0;">
<ul style="margin-top: 0;" id="navbar">
<li>Web Hosting</li>
<li>VPS</li>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
<li>Guides</li>
<li style="float:right; border-right:none;">Sign In</li>
<script src="Assets/JS/sticky-nav.js"></script>
</ul>
<hr style="margin: 0;">
</div>
<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible
<strong>when the user starts to scroll the page</strong>.</div>
<button class="topButton" onclick="topFunction()" id="myBtn" title="Go to top"><img src="Assets/Images/top-of-page-arrow.png" style="align-self: center;" width="47.3" height="31.6"></button>
<script src="Assets/JS/top-button.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</body>
</html>
Related
This question already has answers here:
Click outside div to hide div in pure JavaScript
(10 answers)
Closed 1 year ago.
I'm a noobie at programing. I'm currently making a simple shop website for a project in class. I'm currently struggling with how to make it work.
This is my complete style sheet
<style>
.open{
cursor: pointer;
background-color: black;
text-align: center;
padding: 5px;
font-size: 40px;
}
.open i {
color: white;
height: 50px;
width: 50px;
}
#Sidenav {
height: 100%;
width: 0px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: black;
overflow-x: hidden;
transition: 0.5s;
}
.logo {
margin: 20px 0 0 0; /* top right down left */
width: 75%;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.logo img {
margin: 0;
height: 100px;
width: 100px;
}
.sidenav ul {
margin: 0 0 0 12.5%;/* top right down left */
padding: 0;
width: 75%;
list-style: none;
}
.sidenav ul li a {
text-decoration: none;
color: black;
position: relative;
}
.sidenav ul li{
margin: 10px 0 10px 0; /* top right down left */
background-color: white;
border-radius: 20px;
text-align: center;
line-height: 30px;
font-size: 20px;
}
</style>
All of HTML codes are working fine
<body>
<span class="open" onclick="OpenNav()"><i class="fas fa-bars"></i></span>/* My button */
<nav id="Sidenav" class="sidenav">
<center>
<div class="logo">
<<img src="#" alt="logo"/>
<div>
</center>
<ul>
<li>All Items</li>
<li>Smartphones</li>
<li>Appliances</li>
<li>PC Components</li>
<li>Software</li>
<li>My Cart</li>
<li>Account</li>
<li>Shop Inventory</li>
<li>Login</li>
</ul>
</nav>
<h1>Content
<div id="main">
</div>
The function OpenNav() work fine as well, but when I put the Closenav function I can't click on anything else.
<script>
function OpenNav() {
document.getElementById("Sidenav").style.width = "250px";
}
document.onclick = function(Closenav){
if(Closenav.target.id !== 'Sidenav'){
document.getElementById("Sidenav").style.width = "0px";
};
};
</script>
</body>
the idea is to wrap up your sidebar or the content of it in a div with a fixed position and width / height 100% and then you will listen to this wrapper's click.
This way is similar of how Bootstrap handles modals, and also it will help you if you want to add a blurry effect to the page when the sidebar is open.
I have an issue with a searchbox when looking for questions within the carousel.
The search box is used to find questions in the FAQ list.
When the user clicks on a question from the searchbox, the href brings him to that specific question in the carousel. However, if I select a question which is not in the currently active item of the carousel, nothing happens. E.g. if I search 'Question 3' while being on the first tab of the carousel, I cannot find any 'Question 3' (see example in the code).
How can I solve this?
//LOADER
$(window).on("load",function(){
$(".loader-wrapper").fadeOut("slow");
});
// searchbox
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Hide countries when no input is given
if (input.value.length == 0) {
ul.style.display = "none";
return;
} else {
ul.style.display = "block";
}
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
// FAQs
const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
const itemToggle = this.getAttribute('aria-expanded');
for (i = 0; i < items.length; i++) {
items[i].setAttribute('aria-expanded', 'false');
}
if (itemToggle == 'false') {
this.setAttribute('aria-expanded', 'true');
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion));
body{
background-color: #cddadaff;
}
/* - - - - CAROUSEL - - - - */
.carousel-indicators li {
background-color: #17171cff;
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators {
position: absolute;
bottom: -100px;
}
#FAQlist {
padding: 6% 15% 2%;
}
#FAQs {
padding-bottom: 450px;
}
/* - - - - Searchbar - - - - */
#myInput {
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
font-weight: lighter;
}
#myUL {
/* Remove default list styling */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li {
margin: 0px;
}
#myUL li a {
border: 1px solid #ddd;
/* Add a border to all links */
margin-top: -1px;
/* Prevent double borders */
background-color: #f6f6f6;
/* Grey background color */
padding: 12px;
/* Add some padding */
text-decoration: none;
/* Remove default text underline */
font-size: 18px;
/* Increase the font-size */
color: black;
/* Add a black text color */
display: block;
/* Make it into a block element to fill the whole list */
}
#myUL li a:hover:not(.header) {
background-color: #eee;
/* Add a hover effect to all links, except for headers */
}
/* Style the search field */
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
/* - - - - FAQ - - - - */
#import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.containerFAQ {
margin: 0 auto;
padding: 0;
width: 80%;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
border-bottom: 1px solid #03b5d2;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover, .accordion button:focus {
cursor: pointer;
color: #03b5d2;
}
.accordion button:hover::after, .accordion button:focus::after {
cursor: pointer;
color: #03b5d2;
border: 1px solid #03b5d2;
}
.accordion button .accordion-title {
padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded='true'] {
color: #03b5d2;
}
.accordion button[aria-expanded='true'] .icon::after {
width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
opacity: 1;
max-height: 60em;
transition: all 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p, li {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
color: #8f8f8f;
}
/* dividers */
.heading-1 {
font-family: "PTSerif-Regular", serif;
font-size: 28px;
letter-spacing: 0.08em;
font-weight: 300;
color: #17171cff;
text-shadow: 0 1px 1px #FFFFFF;
}
.divider-1 {
border-bottom: 1px solid #96c5b0ff;
background-color: black;
height: 1px;
margin: 0.5em 0px 1.5em;
}
.divider-1 span {
display: block;
width: 444px;
height: 1px;
background-color: #17171cff;
}
.divider-2 {
border-bottom: 1px solid #96c5b0ff;
background-color: black;
height: 1px;
margin: 0.5em 0px 1.5em;
}
.divider-2 span {
display: block;
width: 486px;
height: 1px;
background-color: #17171cff;
}
.dividerline {
padding: 0 10% 0 10%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title></title>
</head>
<body>
<!-- SearchBar -->
<section id="FAQlist">
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Type a question..">
<ul id="myUL" style="display: none">
<li>Question1?</li>
<li>Question2?</li>
<li>Question3?</li>
<li>Question4?</li>
<li>Question5?</li>
<li>Question6?</li>
</ul>
</section>
<!-- FAQs -->
<section id="FAQs">
<div class="dividerline">
<h1 class="heading-1">Frequently asked questions</h1>
<div class="divider-1"> <span></span>
</div>
</div>
<div id="slider" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#slider" class="active" data-slide-to="0"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="containerFAQ">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Question1?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer1</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Question2?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer2</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="containerFAQ">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Question3?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer3</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Question4?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer4</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="containerFAQ">
<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Question5?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer5</p>
</div>
</div>
<div class="accordion-item">
<button id="accordion-button-6" aria-expanded="false"><span class="accordion-title">Question6?</span><span class="icon" aria-hidden="true"></span></button>
<div class="accordion-content">
<p>Answer6</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="switch.js" charset="utf-8"></script>
</html>
It looks like you'd need to make the relevant 'panel' of the carousel active when selecting a question.
So, if we're on 'panel 1' which contains Question 1 & 2, and you select 'Question 3' from the search bar, you would need to make panel 2 'active' (via the active class) and then do what you're currently doing to focus on Question 3
I'm making a single page style website and after scrolling 1 px has been scrolled (i.e. the homepage has been passed) I want the navigation bar to appear and stay fixed at the top.
I've tried the .scroll() jQuery and I'm having no luck.
HTML:
<div id="navbar">
<div id="nav-container">
<img id="logonavbar" src="#">
<a id="ABTUS" href="#">ABOUT US</a>
<a id="SRVCS" href="#">SERVICES</a>
<a id="PRTFLO" href="#">PORTFOLIO</a>
<a id="CNTCT" href="#">CONTACT</a>
</div>
</div>
CSS:
#navbar {
width: 100%;
background-color: white;
overflow: auto;
position: fixed;
left: 0px;
top: 0px;
border-bottom: solid;
border-width: 1px;
border-color: #afafaf;
overflow: hidden;
z-index: 10;
display: none;
}
#nav-container {
max-width: 1200px;
min-width: 700px;
margin: 0 auto;
}
#logonavbar {
float: left;
margin: 0 auto;
width: 125px;
padding: 10px 0 0 0;
}
#nav-container a {
float: right;
display: block;
padding: 25px 15px;
text-decoration: none;
color: black;
font-family: "calibri light", calibri,sans-serif;
font-size: 20px;
transition: background-color 0.5s ease;
}
#nav-container a:hover {
background-color: #f4f4f4;
transition: background-color 0.5s ease;
}
#nav-container a:active {
background-color: #bfbfbf;
}
#nav-container h1:hover {
color: #aaaaaa;
transition: color 0.3s ease;
}
jQuery:
$(document).scroll(function() {
if ($document.scrollTop() >= 50) {
$('#nav-container').css('display': 'inline', 'position': 'fixed');
}
});
Here I have made a simple example of a element that sticks to the top of the page after you scroll over it. Maybe it can help you as well!
http://corexsystems.net/2017/09/08/simple-sticky-menu-in-jquery-css3/
Here is the source of this example!
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">
<script>
$(function(){
var pos = $("#topMenuX").offset().top,
win = $(window);
win.on("scroll", function() {
win.scrollTop() >= pos ? $("#topMenuX").addClass("fixed") : $("#topMenuX").removeClass("fixed");
});
});
</script>
<style>
body {
padding:0;
margin:0px;
}
#topMenuX {
background: #666;
padding: 20px;
height:45px;
color: #fff;
}
#topMenuX .insideMenu li {
float:left;
list-style:none;
}
</style>
</head>
<body>
<div id="topMenuX">
<ul class="insideMenu">
<li>CoreXDesigns</li>
<li>Simple Sticky Menu Example</li>
</ul>
</div>
</body>
</html>
When I click a button on the sidebar, and if the current tab is the second tab the navigation tab is going to display the first tab as the second tab lost the focus. How can I keep the second tab in display while clicking a button on the sidebar?
the code is in jsfiddle
https://jsfiddle.net/98okrj0f/9/
The AngularJs scripts works at my local. Can anyone also tell me how to make it work in jsfiddle?
HTML Code here
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!-- -->
<body ng-app="App" >
<nav>
<ul> <span>My App</span>
<li class="sub">
Version
<ul>
<li class="sub">
V2
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
</ul>
</li>
<li class="sub">
V3
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside class="side" align="left">
<table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
<tr ng-repeat = "table in tables">
<td><button id = "{{table}}" width = "70">{{table}}</button></td>
</tr>
</table>
</aside>
<article class="tabs">
<section id="erd">
<h2>ERD</h2>
<p>This content appears on tab ERD.</p>
</section>
<section id="col">
<h2>Columns</h2>
<p>This content appears on tab Columns.</p>
</section>
<section id="home">
<h2>Home</h2>
<p>This content appears on tab Home. lfkdgl;k lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj dskfj;kj sdfkj fkdj;lfkjsd;lkfj sdkfj ;slkj sdfj;lskjf skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
</section>
</article>
<footer align="bottom">
<span>"Copyright© 2016 </span></span>
</footer>
<script>
var app = angular.module('App', []);
app.controller('TableCtrl', function($scope) {
$scope.tables = ['category','supplier','customer','dept','empl','orders'];
});
app.controller('V2Ctrl', function($scope) {
$scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
CSS code here.
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
text-align: center;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
aside {
display: block;
position: absolute;
width: 80px;
height: 550px;
padding-right: 0;
margin: 0;
overflow: auto;
background-color: lightblue
}
article {
/* position: relative; */
}
article.tabs
{
position: relative;
display: block;
width: 1100px;
height: 500px;
margin: 2em;
margin-left:80px;
background-color: green;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1100px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
left: 254px;
}*/
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
color: #999;
text-align:center
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
the update jsfiddle.
https://jsfiddle.net/98okrj0f/13/
Since nobody answered you're question I will answer this question like I did the previous ones.
The problem was that you weren't closing you <a> tags with </a>. So the html added extra <a> tags with made the left bar also use a href which is used for your tabs. This way it overrided the open tab.
See the new JSfiddle: https://jsfiddle.net/98okrj0f/19/
Here's the code that was making the error's:
<li ng-repeat = "v2 in V2s">{{v2}}</li>
<li ng-repeat = "v3 in V3s">{{v3}}</li>
I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks
I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/
Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo