On the desktop view the "ul .item-description" should be visible, but on the mobile view it should be collapsed. I did it but it seems to me that this is a terrible decision. How can I improve this? Also, the arrow does not work the first time. How to fix it? I tried to fix this with js, but when I refresh the page I see how the arrow is twitching.
Sorry, my english is very bad.
jsfiddle - http://jsfiddle.net/p6t3brob/13/
html
<div class="collapsed-item">
<div class="collapse-element-title visible-xs" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>
css
.collapsed-item {
display: block;
outline: 1px solid red;
margin-top: 20px;
padding: 10px;
}
.collapse-element-title {
display: block;
outline: 1px solid orange;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
}
.collapse-element-title:after {
display: block;
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 10px;
border: 2px solid red;
border-top: none;
border-left: none;
transform: rotate(225deg);
content: "";
}
.collapse-element-title.collapsed:after {
top: 10px;
transform: rotate(45deg);
}
ul li {
margin-bottom: 10px;
}
.collapse-element-title {
cursor: pointer;
}
.collapse-element-title {
margin-bottom: 20px;
}
#media(max-width: 767px) {
#items.in,
#items.collapsing {
display: block!important;
}
}
#media(min-width: 768px) {
#crownDesc.collapse {
display: block !important;
height: auto !important;
}
}
Try to do like this http://jsfiddle.net/p6t3brob/15/
<div class="collapsed-item">
<div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs collapse" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>
Related
So I have a vertical navbar on my project and I think it's almost finalized but when I click on the "hamburger" menu (three lines) the text inside the navbar move in a weird way during the transition from close to open navbar. I would like it to stay still while the navbar opens.
Also I'm using Bootstrap and I would appreciate any help but even more if it can fit any device (responsive) !
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
.nav div {
height: 4px; /*4px*/
background-color: white;
margin : 5px 0;/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;/*30px*/
display: block;
margin : 1em 0 0 1em;
}
.one {
width: 30px;/*30px*/
}
.two {
width: 25px;/*25px*/
}
.three {
width: 20px;/*20px*/
}
.nav:hover div{
width: 30px;/*30px*/
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition : 0.1s;/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul{
display: block;
}
.scroll {
overflow: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class ="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;" >
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable ="false">
<div class="one" style="background-color: black;" draggable ="false"></div>
<div class="two" style="background-color: black;" draggable ="false"></div>
<div class="three" style="background-color: black;" draggable ="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class = "mainNav">
<li>Home</li>
<div >
<li>Catalog
<div class="scroll">
<div class ="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
</body>
</html>
change it like this:
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
<script>
function openNav() {
document.getElementById("mySidenav").style.left ="0";
}
function closeNav() {
document.getElementById("mySidenav").style.left ="-250";
}
</script>
you are changing the width while your text font is set to a static number. so while you are changing the width the html is trying to set the text of same length to a different width, and there is nothing to do with it. So instead of changing the width. just create a static "box", put it to the left so it wouldn't be seen, and bring it right after clicking on a button.
It looks like the issue you're having is because the width is gradually increased.
This means that as it grows, the text goes broken over 2 lines on your longer link names. See example in the image below:
There would be a few ways to fix this but I think the simplest would be to add a min-width: 200px; to your .sidenav a selector like so:
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
min-width: 200px;
}
See this JS Fiddle for an example
Instead of width you need to set the left position to remove the flickering text issue.
Please refer to the below demo.
Working Demo Code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title></title>
</head>
<style>
/* Code du Navbar à 3 lignes*/
.nav div {
height: 4px;
/*4px*/
background-color: white;
margin: 5px 0;
/*5px 0*/
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30px;
/*30px*/
display: block;
margin: 1em 0 0 1em;
}
.one {
width: 30px;
/*30px*/
}
.two {
width: 25px;
/*25px*/
}
.three {
width: 20px;
/*20px*/
}
.nav:hover div {
width: 30px;
/*30px*/
}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: -250px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.1s;
/*0.3s*/
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.dropdown-toggle::after {
position: relative;
left: 36%;
}
.dropdown-menu {
border: 0;
border-radius: 0;
}
ul {
padding: 8px 0px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
padding-left: 0px;
left: 0px;
margin-left: 0px;
}
.mainNav li:hover ul {
display: block;
}
.scroll {
overflow: auto;
}
</style>
<body style="background-color: white;">
<!-- Code du Navbar vertical -->
<div class="container-fluid" style="background-color: white; margin-top: 0px; margin-bottom: 0px;padding-bottom: 0px;padding-top:0px;overflow-y: auto;">
<a href="javascript:void(0)" class="nav" onclick="openNav()" draggable="false">
<div class="one" style="background-color: black;" draggable="false"></div>
<div class="two" style="background-color: black;" draggable="false"></div>
<div class="three" style="background-color: black;" draggable="false"></div>
</a>
<div id="mySidenav" class="sidenav" style="z-index: 3;">
×
<ul class="mainNav">
<li>Home</li>
<div>
<li>Catalog
<div class="scroll">
<div class="tops">
<ul>Tops
<li>Tees + Tanks</li>
<li>Graphic Tees</li>
<li>Shirts</li>
<li>Polos</li>
<li>Hoodies + Sweatshirts</li>
<li>Sweaters + Cardigans</li>
</ul>
</div>
<div class="bottoms">
<ul>Bottoms
<li>Jeans</li>
<li>Shorts</li>
<li>Pants</li>
<li>Joggers</li>
<li>Overrall</li>
</ul>
</div>
<div class="S&A">
<ul>Shoes and accessories
<li>Shoes</li>
<li>Sunglasses & Readers</li>
<li>Jewelry</li>
<li>Watches</li>
<li>Socks & Underwear</li>
<li>Hats & Beanies</li>
<li>Bags & Backpacks</li>
</ul>
</div>
<ul>Sales</ul>
</div>
</li>
</div>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.left = "0px";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}
</script>
</body>
</html>
I have a header and I need a small menu box below it, I'm trying to make sure I won't need to use top in css, and I can just add a line break in HTML. I have the following code for the header, the global_tools_menu is the menu I'm trying to add. For some reason, it starts from the top of the page? How would I make it start from just below the header? Here's the codeHTML:
<div class="global_header">
<b><p>ex</p></b>
<header>
<ul class="nav-bar">
<li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
<?php
if(isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
}
if(!isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
}
?>
<li class="nav-item" onclick="redirect('');"><a>Home</a></li>
<li class="nav-item" onclick="redirect('all');"><a>All</a></li>
<li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
</ul>
</header>
</div><br>
<div id="global_tools_menu">
<div id="global_tools_true">
</div>
<div id="global_tools_false">
</div>
</div>
CSS:
.tools {
background-image: url('assets/tools.png');
}
a {
color: #009AFF;
text-decoration: none;
}
body {
font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009AFF;
height: 30px;
border: 1px solid;
}
.nav-item {
display: block;
color: #fff;
text-align: center;
padding: 6px 8px;
width: calc(2px + 13%);
text-decoration: none;
float: left;
border-right: 1px solid #000;
cursor: pointer;
background-color: #0050FF;
}
.nav-item a {
color: white;
}
.nav-item:hover {
background-color: #0039B5;
}
.right-3826 {
float: right;
border-right: 0px solid;
border-left: 1px solid #000;
}
input:focus {
outline: none;
}
.global_header p {
position: relative;
font-size: 70px;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
vertical-align: middle;
top: -20px;
color: white;
}
.global_header {
background-color: #009AFF;
word-wrap: break-word;
position: absolute;
top: 0px;
width: 100%;
left: 0;
}
.global_tools {
background-color: white;
}
.global_tools:hover {
background-color: #EAEAEA;
}
#global_tools_menu {
position: relative;
width: 400px;
height: 700px;
background-color: #080808;
Here is a JSFiddle for that. I need to make that black box start from below the header?
https://jsfiddle.net/qypm88dm/
I don't know if this is the answer you were looking for but I would do this,
add
<div class="blank"></div>
just below
<div class="global_header">
...
</div>
so it would be
<div class="global_header">
...
</div>
<div class="blank"></div>
and css would be
.blank {
height: 190px;
width: 100%;
}
https://jsfiddle.net/qypm88dm/2/
Set the position of global_tools_menu to inline instead of absolute or relative because those are in reference to the top left of the page, which is why it is up at the top. If you set it to inline it will pop down right below your header.
Edit: My mistake, that will set it behind it, but if you do that and then give it margin-top: 200px that will get it below it. But that may not be the exact fix you want.
I'm trying to make a small jQuery function to hide & show content when a radio button is checked. The script works but when the radio button is checked the content is not showing right. It's possible to make effect to slide out then slide in the other content?
HTML:
<!-- Section class pricing -->
<section class="pricing">
<div class="container">
<hr class="hr">
<!-- Price table switcher -->
<div class="table-switcher" id="btn">
<p class="fieldset">
<input type="radio" checked="checked" name="duration" value="account-1" id="account-1">
<label for="account-1">1</label>
<input type="radio" name="duration" value="account-2" id="account-2">
<label for="account-2">2</label>
<span class="btn-switch"></span>
</p>
</div>
<!-- Price table switcher end -->
<div class="clearfix"></div>
<!-- Info box -->
<div class="clearfix"></div>
<div class="accounts container">
<div class="price-table">
<!-- Account Plus -->
<div class="col-md-12">
<!-- Table -->
<div class="account-1 account-box">
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99k</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
<!-- Table -->
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
</div>
</div>
<!-- Account Plus end -->
<!-- Account O€ -->
<div class="account-2 account-box">
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
</div>
<!-- Account 0€ -->
</div>
</div>
</div>
</section>
CSS:
// Prebuild colors
#white : #ffffff;
#dark : #4a4a4a;
#blue : #4e94c9;
#blue-dark : #2279bc;
#blue-font : #276db3;
#purple : #805ca2;
#purple-dark: #5b308d;
#gray-light : #a8a8a8;
#gray-font : #797979;
#pink : #bf4194;
#pink-light : #F04;
// Other
#letter-spacing:(2px);
.bold { font-weight: 700}
.hr {
max-width: 100px;
height: 4px;
background: url("../images/hr.gif") no-repeat center;
margin: 20px auto;
}
// Pricing section -3
.pricing {
padding: 100px 0;
h2 {
letter-spacing: #letter-spacing;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: #blue-font;
.bold {
color: #purple-dark;
}
}
// Price table switcher
.table-switcher {
text-align: center;
input[type="radio"]:checked + label + .btn-switch,
input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch{
/* Safary bug fix selector */
-webkit-transform: translateX(120px);
-moz-transform: translateX(120px);
-ms-transform: translateX(120px);
-o-transform: translateX(120px);
transform: translateX(120px);
background: #blue-font;
}
.fieldset {
margin-top: 15px;
margin-bottom: 30px;
display: inline-block;
position: relative;
padding: 0px 2px;
border-radius: 50em;
border: 1px solid #gray-light;
input[type="radio"]:checked + label {
color: #white;
transition: all 0.5s;
}
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 120px;
height: 39px;
line-height: 45px;
cursor: pointer;
font-size: 1.4rem;
}
.btn-switch {
position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 120px;
background-color: #purple-dark;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
}
.no-js .table-switcher {
display: none;
}
// Table info
// Popover box
.arrow_box {
position: relative;
background: #purple;
border: 3px solid #purple-dark;
padding: 15px;
color: #white;
}
.arrow_box{
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
}
.arrow_box {
&:before{
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
}
// Accounts
.accounts {
position: relative;
transition: all 0.5s;
}
.top-tooltip{
background-color: #26c07d;
font-size: 12px;
font-weight: 400;
margin:-87px auto 68px;
padding: 6px;
color:#fff;
width:80px;
}
.price-table {
width: 100%;
.account-1 {
.col-md-6 {
padding: 0;
left: 0;
}
}
}
.best-value{
padding: 87px 0 72px !important;
}
.small-boxes {
margin-top: 40px;
padding-top: 72px;
padding-bottom: 68px;
text-transform: uppercase;
text-align: center;
background-color: #fff;
width: 100%;
}
.plan {
font-size: 24px;
color: #79a5b3;
line-height:30px;
border: none !important;
}
.plan-cost {
font-size:60px !important;
color:#000 !important;
line-height:90px !important;
border: none !important;
}
.plan-duration {
line-height: 30px !important;
margin-bottom:35px;
border: none !important;
}
.plan-button {
border: none !important;
margin-top: 30px;
}
.plan-button-big {
border: none !important;
margin-top: 45px;
}
.price-table ul li {
color: #a2a4a6;
font-size: 16px;
border-bottom: #f2f4f5 1px solid;
border-top: #f2f4f5 1px solid;
line-height: 47px;
}
.price-table ul li a{
background-color:#FFF;
border: #d4d7d9 1px solid;
padding: 15px 30px;
font-size: 20px;
color:#27b0d8;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a:hover{
background-color:#44bbdd;
border: #44bbdd 1px solid;
color:#fff;
}
.price-table ul li a.big{
background-color:#ec4f4f;
border: #ec4f4f 1px solid;
padding: 15px 30px;
font-size: 24px;
color:#fff;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a.big:hover{
background-color:#293340;
border: #293340 1px solid;
color:#fff;
}
}
JS:
$('.account-2').hide();
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
});
$('input[name="duration"]').click(function () {
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
});
});
Demo
Try this script... codepen
$('.account-2').hide();
$(document).ready(function () {
var flagcheck= false;
$('input[name="duration"]').click(function () {
if(flagcheck==false){
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
flagcheck=true;
}else{
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
flagcheck= false;
}
});
});
It is not working as you are using same trigger to do the same thing. Use
this.val()
to target your content that you want to display.
UPDATED:
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$objToHide = "";
$('.account-box').each(function(){//find out which obj is visible here
if ($(this).css("display") == "block"){
$objToHide = $(this);
}
});
var content = $(this).val()
$objToHide.fadeOut('slow', function(){
$("."+content).fadeIn('slow')
});
});
});
Try above now, with this one you will find the visible element first and fade it out, when the fadeOut event will be done the other element will fade in.
I was make a Jquery function to make the navigation bar stick to the top of the page when scrolled past the header.
To make it look smooth I had to add padding-top:110px to the content div and margin-bottom: -80px to the nav div. Now my links do not work.
Any guesses to why? And how can I fix this to get everything in order?
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
height: 40%;
border: 1px dotted blue;
margin: auto;
}
.nav {
margin-bottom: -80px;
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
position: -webkit-sticky;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: 20%;
display: inline-block;
float: left;
border: 1px dotted green;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
z-index: 100;
border-top: 0;
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
position: relative;
padding-top: 110px;
padding-bottom: 100px;
display: block;
width: 100%;
max-height: 100%;
margin: none;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>
You have overlapping (invisible) elements from your content that covers your links.
The following CSS:
#content{
padding-top: 110px;
}
forces your content to sit on top of your navigation links blocking them from being clicked.
There are several solutions to this. One way to confirm that this is the case is to remove
#content{
padding-top: 110px;
}
and replace it with
#content{
position:relative;
top:110px;
}
A better way to debug the issue is to open Chrome DevTools and inspecting the #content div to see where the box model overlaps your links and adjust accordingly.
I removed the negative margins applied to the main element, to your nav bar, and removed the height of your header. And also some little other things.
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
/* height: 40%; => that makes your header overlapping with your nav bar*/
border: 1px dotted blue;
margin: auto;
}
.nav {
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
/*
the support of position:sticky is bad: http://caniuse.com/#feat=css-sticky
position: -webkit-sticky;
*/
background: rgba( 255,255,255,0.9);
transition: width 0.5s;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: calc(20% - 1px );;
display: inline-block;
float: left;
border: 1px dotted green;
border-right-width: 0;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
border-top: 0;
}
.sticky + #content{
margin-top:80px
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
padding-top:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab <br/><br/><br/><br/><br/><br/>
lhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>
What im trying to do is when I hover over a anchor tag link on the same page, it also needs to affect the corresponding link.
It might be possible in CSS but I think JQuery would handle this better.
Im new to jquery
Heres my code:
<script>
$('.js-tooltip').on('click', function () {
$(this).toggleClass('js-tooltip-active')
})
</script>
Heres my CSS:
.tooltip {
position: relative;
display: inline-block;
height: 18px;
width: 18px;
line-height: 26px;
padding: 0 0;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
color: #FFF;
background: #b71a71;
box-shadow: none;
white-space: nowrap;
cursor: pointer;
}
.tooltip:hover {
background: #b1d12d;
}
.tooltip-wrapper {
pointer-events: none;
position: absolute;
width: 250px;
margin-left: -125px;
left: 50%;
bottom: 100%;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.js-tooltip-active .tooltip-wrapper,
.tooltip:hover .tooltip-wrapper,
.tooltip-wrapper:hover {
pointer-events: auto;
opacity: 1;
}
.tooltip-wrapper:after {
z-index: 11;
display: block;
position: absolute;
left: 50%;
margin-left: -7px;
content: " ";
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #333;
}
.tooltip-wrapper:before {
bottom: -9px;
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
content: " ";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(255,255,255,0.1);
}
.tooltip-text {
display: inline-block;
position: relative;
padding: 6px 9px;
z-index: 10;
white-space: normal;
font-size: 12px;
font-weight: normal;
line-height: 18px;
background: #333;
background: rgba(0,0,0,0.8);
color: #fff;
border-radius: 5px;
text-shadow: none;
cursor: default;
box-shadow: 0 1px rgba(255,255,255,0.1);
}
<div class="mapbox"><img src="#" style="z-index: 101; border: none" width="672" height="744" usemap="#Map"/>
<a class="tooltip js-tooltip manmap" href="#" style="top: -315px; left: 270px; border: none; "><span class="tooltip-wrapper" style="z-index: 103; border: none; "><span class="tooltip-text" style="z-index: 103; cursor: pointer; border: none;">View</span></span></a>
<a class="tooltip js-tooltip lonmap" href="#" style="top: -150px; left: 365px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">View</span></span></a>
</div>
What the code above does is when I hover over the hotspot a small title box appears that the user can click.
<div id="col3" class="right">
<h2>Select a location<img src="#" width="21" height="18" alt="icon" /></h2>
<div class="box">
<h3>Select</h3>
<ul id="locationList">
<li class="a">A</li>
<li>B</li>
</ul>
</div>
This is the <li> link list that I would like to connect to the map.
What I want is to try and replicate the effect of the circle hover but on the links, I don't want to show and hide the circle markers on the map I would just like them to appear when the corresponding link has been hovered over.
Also the Map markers change colour from purple to green am I able to replicate that effect hovering over the links in the sidebar.
So basically when I hover over the circle marker the title tag pops up with the link, that is what I would like the link to do as well so I can hover over link and it will do the same and hovering over the circle and vice-versa.
I don't know if this helps but this is where I got the code for the tooltip/hotspot Heres the link, then I changed the code for it to look circle.
Thanks.
Ok....it took a little doing because my Jquery skills are poor so I'm sure this could be refactored and simplified but here goes.
We have to add an individual attribute to each list item, I use a data-attribute which can then be used to select each individual map point which will have it's own ID
JSfiddle Demo
Revised HTML
<div id="col5" class="left">
<h1>Pick A Location</h1>
<div class="mapbox">
<a id="A" class="tooltip js-tooltip" href="#">
<span class="tooltip-wrapper">
<span class="tooltip-text">View 1</span>
</span>
</a>
<a id="B" class="tooltip js-tooltip" href="#">
<span class="tooltip-wrapper" >
<span class="tooltip-text">View 2</span>
</span>
</a>
</div>
</div>
<div class="box">
<h3>Select a location</h3>
<ul id="locationList">
<li><a data-item="A" href="#">View 1</a></li>
<li><a data-item="B" href="#">View 2</a></li>
</ul>
</div>
CSS
I just added an `.active' class for the list item links
#locationList a.active {
color:red;
}
EDIT- and for the tooltip something similar
.tooltip.current {
background: #b1d12d;
}
Jquery
I added these two functions
$('.tooltip').hover(function() {
$('a[data-item="'+this.id+'"]').toggleClass('active');
});
/* when a tooltip is hovered, find the anchor which has a data-item attribute that matches the ID of the hovered element and toggle the active class */
$('#locationList a').hover(function() {
$('#' + $(this).data('item')).toggleClass('js-tooltip-active');
$('#' + $(this).data('item')).toggleClass('current'); /* EDIT for hover */
});
/* when list item link is hovered, find the matching ID toggle the js-tooltip-active class */
This is what you need. it is no my code all the credit goes to the author of the link below. Check the link to see the live example.
#one:hover ~ #three,
#six:hover ~ #four,
#seven:hover ~ .box {
background-color: black;
color: white;
}
#four {
margin-left: -35px;
}
#six {
left: 80px;
position: relative;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
http://jsfiddle.net/ThinkingStiff/a3y52/