I have looked at a lot of questions that have already been asked and can't find and answer that works for me. I am trying to make a logo that has an ampersand in the middle. The Ampersand is supposed to change font familys every few seconds which works. Only issue is that now when it changes font it messes up the who page.
https://codepen.io/anon/pen/BVddWV
Main issues are coming from line 21 in the CSS
.ampersand{
display:inline;
width:35px;
max-width:35px;
height:79px;
max-height: 79px;
font-family:"Exo", sans-serif;
}
Any ideas?
Added display: flex on the <b> tag and removed ampersand styles and made it a span instead of a div and added line-height: 1 to it.
.ampersand {
line-height: 1;
display: inline-block;
width: 60px;
transition: all 1s;
}
<b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
$(document).ready(function() {
var fonts = ['Dosis', 'Exo', 'Gloria Hallelujah', 'PT Sans', 'PT Serif', 'Yaanone Kaffeesatz'];
var counter = 0;
var inst = setInterval(change, 2000);
function change() {
if (counter > fonts.length) {
counter = 0;
}
font_selection = fonts[counter];
$('.ampersand').css("font-family", font_selection);
counter++;
}
});
#import url('https://fonts.googleapis.com/css?family=Quicksand');
#import url('https://fonts.googleapis.com/css?family=Molengo');
#import url('https://fonts.googleapis.com/css?family=Dosis|Exo|Gloria+Hallelujah|PT+Sans|PT+Serif|Yanone+Kaffeesatz');
* {
font-family: "Gill Sans", sans-serif;
margin: 0px;
padding: 0px;
}
body {
background-color: #f5f6fa;
}
#header {
width: 100%;
padding: 4% 0px 20px 0px;
}
.logo_text {
font-family: "Molengo", sans-serif;
font-size: 70px;
color: #333;
}
.ampersand {
line-height: 1;
display: inline-block;
width: 60px;
transition: all 1s;
}
.nav {
width: 100%;
padding: 25px 0px 25px 0px;
}
.nav>ul {
padding-top: 15px;
}
.nav>ul>a {
text-decoration: none;
color: #333;
}
.nav>ul>a>li {
color: #333;
font-size: 25px;
padding: 20px 30px 20px 30px;
display: inline;
transition: border 0.1s linear;
border: 3px solid #f5f6fa;
}
.nav>ul>a>li:hover {
border: 3px solid #333;
}
#body {
padding-top: 35px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper" align="center">
<div id="header">
<div class="logo">
<span class="logo_text"><b display: flex;>Flo<span class="ampersand">&</span>Behold</b>
</span>
</div>
<div class="nav">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Music</li>
</a>
<a href="#">
<li>Media</li>
</a>
<a href="#">
<li>Contact</li>
</a>
</ul>
</div>
</div>
<div id="body"></div>
</div>
You are not able to set fixed hight for inline elements.
And you need to switch to display:inline-block or display:block to transform your elements into block elements.
Also please note, that some elements like <span> or <i> are inline by default, and some like <div> and <p> are block, but you are still able override that behavior (default) via CSS display rule.
In your case (I assume you would like to prevent jumping of your logo text, when ampersand changes font), I would suggest two things:
set fixed height to the .logo_text, you could add display:block and max-height: 84px;
set ampersand as span not as div to make your HTML markup more semantically relevant;
Related
I'm trying to get a site to show and potentially sell my artwork, and need some help with a page header and menu (both in the same div), which at the top of the page are angled by 45° and are above the other elements (at z-index 2). This is fine at a scroll position of 0, but gets in the way when one scrolls down to the page's other text elements, and non-background images. I want to have these elements to be moved to 0 rotation, and fixed at the top of the page at any scroll position >300px, or even duplicate them and have one show and the other hide based upon this position. I can do the CSS part myself, but scripting is a bit beyond me.
I already have tried this (https://css-tricks.com/styling-based-on-scroll-position/ ) to change the CSS, but haven't had any luck getting it to do anything. The menu itself is shown/hidden through another piece of javascript that does work. Both the scripts I have tried, and the CSS are linked externally.
This is the current code I have:
html:
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3>Menu</h3>
</div>
<ul class="menu" id="content">
<li>Home</li>
<li>Design Services</li>
<li>Artwork</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
The CSS is:
.base {
position: fixed;
top: 11rem;
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
}
.base a {
text-decoration: none;
color: #FFFFFF;
}
Use jQuery for the detection on 300px and adding a class. Just to make it funky for you I added a transition:all 1s;. Since you know your CSS, enjoy with a simply added class. Cheers!
$(document).scroll(function() {
if($(document).scrollTop() >= 300 ) {
$('.base h2').addClass('rotateback');
$('.base h3').addClass('rotateback');
} else {
$('.base h2').removeClass('rotateback');
$('.base h3').removeClass('rotateback');
}
});
body{
height:2000px;
}
.base {
position: fixed;
top: 11rem ; /* 11rem */
left: -4rem;
width: 100%;
z-index: 2;
}
.base h2 {
width: 35%;
background: #000000;
padding: .25rem 1rem .25rem 3rem;
color: #FFFFFF;
transform: rotate(45deg);
font-family: novecento-sans-wide, sans-serif;
font-weight: 600;
transition:all 1s;
}
.base h3 {
width: 20%;
transform: rotate(45deg);
background: #000000;
padding: .25rem 2rem .25rem 3rem;
margin-left: 3rem;
color: #FFFFFF;
font-family: novecento-sans-wide, sans-serif;
font-weight: 500;
transition:all 1s;
}
.base a {
text-decoration: none;
color: #FFFFFF;
}
.base h2.rotateback {
transform: rotate(0deg);
}
.base h3.rotateback {
transform: rotate(0deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgimg-1">
</div>
<div class="base">
<h2>Site Name</h2>
<div>
<h3>Menu</h3>
</div>
<ul class="menu" id="content">
<li>Home</li>
<li>Design Services</li>
<li>Artwork</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I am trying to make a menu that is off screen and appears if I click a certain button. The jQuery code works, but my button is below the menu instead of next to it.
I've tried wrapping all the elements in a div with a maximum height of 100% viewport height, but that's not working.
Is there anything I a doing wrong? HTML, CSS and jQuery provided in the jsfiddle link: https://jsfiddle.net/u9bq5v2g/
The button is not visible at first glance because you have to scroll down first to be able to see it.
HTML:
Home
Profile
Profile
<button type="submit" class="btn btn-danger" id="menubutton">Menu</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#menubutton").click(function(){
$("#list").css("margin-left", "0vw");
});
});
</script>
CSS:
* {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
max-height: 100vh;
}
#list {
margin-left: -15vw;
max-width: 15vw;
min-height: 100vh;
background-color: rgb(40, 35, 35);
}
.nav-pills>li>a {
border-radius: 0px;
color: white;
font-size: 16px;
}
.nav-pills>li>a:hover {
background-color: rgb(66, 57, 57);
}
Perhaps this is a better approach, this is taken from a tutorial. Make use of it if you find it useful. Its a similar logic, except it uses absolute positioning.
$("#open").click(function(){
$("#mySidenav").css("width","250px");
$("#main").css("margin-left","250px");
});
$(".closebtn").click(function(){
$("#mySidenav").css("width","0");
$("#main").css("margin-left","0");
});
body {
font-family: "Lato", sans-serif;
}
.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 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.closebtn{cursor:pointer;}
#open{
font-size:15px;
background-color: #ff0000;
padding: 10px 5px;
cursor:pointer;
color: #ffffff;
border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
<a class="closebtn">×</a>
About
Services
Clients
Contact
</div>
<div id="main">
<span id="open">MENU</span>
</div>
If you want your button to the left of the menu, you'll need
nav {
display:inline-block;
}
as nav is a block element. Move your button before the list
<button type="submit" class="btn btn-danger" id="menubutton">Menu</button>
<nav id="list">
and move list further left to makeup for the width of the
#list {
margin-left: -30vw;
https://jsfiddle.net/auqhysr1/
After seeing your comment about sliding in the menu I've updated my jsfiddle to do just that in CSS, although its on hover not on click and is reliant on CSS3.
Use float left to list and btn.
$(document).ready(function(){
$("#menubutton").click(function(){
$("#list").css("margin-left", "0vw");
});
});
* {
padding: 0;
margin: 0;
}
#wrapper {
min-height: 100vh;
max-height: 100vh;
}
#list {
margin-left: -15vw;
max-width: 15vw;
min-height: 100vh;
background-color: rgb(40, 35, 35);
float:left;
}
.nav-pills>li>a {
border-radius: 0px;
color: white;
font-size: 16px;
}
.nav-pills>li>a:hover {
background-color: rgb(66, 57, 57);
}
.btn{
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="wrapper">
<nav id="list">
<ul class="nav nav-pills nav-stacked">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Profile</li>
</ul>
</nav>
<button type="submit" class="btn btn-danger" id="menubutton">Menu</button>
</div>
</body>
Hi I was just wondering if there was a way of double clicking on a div and making the height reduce just by using CSS.
<div class="container"></div>
<ul class="accordion">
<li>
First
<div class="accordion-content" id="first">
<p>Bonjour</p></div>
</li>
<li>
Second
<div class="accordion-content" id="second">
<p>Hello</p></div>
</li>
<li>
Third
<div class="accordion-content" id="third">
<p>No</p></div>
</li>
You can find the code that I want to adjust in this Fiddle.
This is achievable in CSS only, if you can add the following HTML immediately after each <div class="accordion-content">:
<input>
Then add these styles:
.accordion-content {
position: relative;
}
.accordion-content a, .accordion-content input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.accordion-content input:focus {
z-index: -1;
}
.accordion-content a:focus {
z-index: 1;
}
Fiddle
Note: Please don't actually use this. It's an interesting way to go about what you want, and a fun challenge for me, but Javascript is by far a more appropriate and reliable tool for the job. Unless you are burdened with a client who is demanding this functionality while completely against the use of JS, just slap some jQuery on it and call it a day.
So, I couldn't figure out how to do this with only CSS using the ul in your current markup, but if you're open to changing it a little bit, you can do this with CSS only. I'm dumb and just needed to plug the code below into the ul element. Here is an example:
HTML
<ul class="accordion">
<li>
<span class="span" tabindex="0">
<input type="text" value=" " readonly="true" />
Show
</span>
<p id="showme" class="alert">Hidden Content</p>
</li>
</ul>
CSS
body {
font: 1em'Source Sans Pro', sans-serif;
}
.accordion {
width: 100%;
padding:0;
margin:0;
list-style-type: none;
}
span {
display: block;
padding: 15px 20px;
background: #bbb;
color:#fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
span a {
text-decoration: none;
}
span a:visited {
color:#fff;
}
.alert {
display: none;
margin: 20px;
}
span {
position: relative;
}
span a {
position: relative;
z-index: 2;
}
span a:hover, span a:active {
z-index: 4;
}
span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%;
height: 301%;
z-index: 3;
}
span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
#showme:target {
display: block;
}
Fiddle: https://jsfiddle.net/yn13syuj/
Essentially, what this does is cover the a tag using some z-index trickery until you click it once. Then, once it's uncovered, you can use :target to change the display property of the hidden content.
Using only css you can't handle double click events, Use JavaScript and .ondblclick function to do this, here's a DEMO of your code:
var divs = document.getElementsByClassName("accordion-content");
for (var i = 0; i < divs.length; i++) {
divs[i].ondblclick = function() {
if (this.offsetHeight > 50) {
this.style.height = this.offsetHeight - 20 + "px";
}
};
}
body {
font: 1em'Source Sans Pro', sans-serif;
}
.container {
width: 100%;
max-width: 400px;
}
.accordion {
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.accordion-header {
display: block;
padding: 15px 20px;
background: #bbb;
color: #fff;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .1);
margin-bottom: 5px;
}
.accordion-content {
height: 0;
overflow: hidden;
-webkit-transition: height 400ms ease;
transition: height 400ms ease;
}
.accordion-content p {
margin: 20px;
}
.accordion-content:target {
height: 150px;
overflow-y: scroll;
}
<div class="container"></div>
<ul class="accordion">
<li> First
<div class="accordion-content" id="first">
<p>Bonjour</p>
</div>
</li>
<li> Second
<div class="accordion-content" id="second">
<p>Hello</p>
</div>
</li>
<li> Third
<div class="accordion-content" id="third">
<p>No</p>
</div>
</li>
</ul>
It keeps decreasing the height until it reachs 50 px, you can change it to fit your needs.
And here's your updated Fiddle.
I'm trying to make the entire li tag area clickable as well as the text which I have made clickable already. I have tried giving it a href property but that doesn't work. I have already set the li background to change color when it's hovered over but as I said, how do I also make the entire area clickable? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 id="sectwohead">Best Selling Books Right Now</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
}
#sectwohead{
margin: 2em 0 2em 0;
color: #888888;
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
This should help see more clearly what I'm trying to do, as you can see in this image - http://i.imgur.com/OZIt9TM.png - The only clickable area is the blue part within chromes inspect that's easy to see. So what I'm trying to do is make the entire area of that specific 'Home Li' clickable.
Rule #1 of list-based menus: Style the links, not the wrappers. Only style the list for positioning (display/float etc.).
Use display:block on your A-tags and put all styling on that tag, not the list itself.
Home
Move background-color: #333 to the .link class in your css, and add display:block to that declaration.
If you are using jQuery (assuming the tags are right) you can do it like this without styling the anchor tags:
$('ul li').click(function() {
location.href = $(this).find('a').prop('href');
});
I would suggest a class name for the ul list like <ul class="navigation">
$('ul.navigation li').click(function() {
location.href = $(this).find('a').prop('href');
});
Ups sorry...Try this..
#nav li {
list-style-type: none;
/* margin: 0; */
/* padding: 0.75em 0 0.75em 0; */
/* text-align: center; */
/* max-width: 100%; */
/* display: block; */
}
#nav li a {
display: block;
padding: 0.5em 0;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
Wrap your A tag around the LI tag. For example look at the google link. You're putting the A tag around the text only, not the entire element.
<ol>
<a href="http://google.com">
<li>google</li> <!-- DO THIS -->
</a>
<li>
yahoo <!-- YOUR CURRENTLY DOING THIS -->
</li>
</ol>
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/