Found a simple stick nav that puts the small menu on the left side of the browser window. No problem so far but I am unsure how to turn that into a sliding menu that reduces to an icon like you would see on a website template theme color switcher. {edit - I have been searching google but am not using the correct terms I think. Appreciate any suggestions as to what I am looking for so as to solve this and learn.}
Something like this quick sketch in Photoshop.
The fiddle is: JSfiddle
and the code is:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
#menu {
position: fixed;
left: 0;
top: 50%;
width: 8em;
margin: -2.5em 0 0 0;
z-index: 5;
background: white;
color: #4E4E4E;
font-weight: bold;
font-size: large;
text-align: left;
border: #4e4e4e;
border-left: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
}
#menu li { margin: 0 }
#menu a { color: inherit }
</style>
</head>
<body>
<ul id=menu>
<li>Section 1
<li>Section 2
<li>Section 3
</ul>
</body>
</html>
Easiest way is to add to your menu a "square" with pseudoelement :after positioned where you want like this:
#menu:after {
content: '';
position: absolute;
top: 0;
right: -40px;
height: 40px;
width: 40px;
box-shadow: 0 1px 3px black;
display: block;
background-color: #fff;
}
#menu:before {
content: '';
position: absolute;
z-index:1;
top: 1px;
right: -1px;
height: 39px;
width: 4px;
display: block;
background-color: #fff;
}
The before is just a white box to cover the shadow of the afterso it will look joined to the menú,
Then position the menu outside the window just showing the after element and make an event on click to add a class to the menu to "show" or "hide".
$('#menu').on('click', function(){
$('#menu').toggleClass('visible');
});
#menu {
position: fixed;
left: -198px;
top: 50%;
width: 8em;
margin: -2.5em 0 0 0;
z-index: 5;
background: white;
color: #4E4E4E;
font-weight: bold;
font-size: large;
text-align: left;
border: #4e4e4e;
border-left: none;
padding: 0.5em 0.5em 0.5em 2.5em;
box-shadow: 0 1px 3px black;
transition: left 0.2s linear;
}
#menu li {
margin: 0
}
#menu a {
color: inherit
}
#menu:after {
content: '';
position: absolute;
top: 0;
right: -40px;
height: 40px;
width: 40px;
box-shadow: 0 1px 3px black;
display: block;
background-color: #fff;
}
#menu:before {
content: '';
position: absolute;
z-index:1;
top: 1px;
right: -1px;
height: 39px;
width: 4px;
display: block;
background-color: #fff;
}
.visible {
left:0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=menu>
<li>Section 1
<li>Section 2
<li>Section 3
</ul>
JSFIDDLE
Related
So i tried to make an Step Progress Bar, I was able to do so but I got a small bug.
I programmed it so that if an List Object gets the Class "active" it will turn this step green for active. But now I have the Problem if the first step/List Object is active the second Step turns green
Heres my HTMl and css:
<div class="container">
<div class="progressbar">
<ul style="list-style-type:none;">
<li>Video Anschauen</li>
<li>Fragen beantworten</li>
<li>Rabatt erhalten</li>
</ul>
</div>
And heres my CSS:
.container{
width: 100%;
position: absolute;
z-index: 1;
margin-left: 20%;
overflow: auto;
}
.progressbar {
counter-reset: step;
}
.progressbar li{
float: left;
width: 25%;
position: relative;
text-align: center;
}
.progressbar li:before{
content:counter(step);
counter-increment: step;
width: 30px;
height: 30px;
border: 2px solid black;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: black;
text-align: center;
font-weight: bold;
}
.progressbar li:after{
content: '';
position: absolute;
width: 100%;
height: 3px;
background:black;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after{
content: none;
}
.progressbar li.active + li:after{
background: #50d146;
}
.progressbar li.active + li:before{
border-color: #50d146;
background: #50d146;
color: white
}
I created a list with divs inside and the one div contains a home icon using font awesome. I want the font icon to change to a picture icon when clicked and change back to the home icon when clicked again. Do I need Javascript for this?
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You can use JavaScript, jQuery is recommended:
$('#home a').on('click', function(e){
$('#home span').toggleClass('fa-home fa-anchor');
};
I guess you know how to include jQuery, if not just paste this into your head section:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Let me know if that works or not!
You need to add jQuery for that:
$("#home a").click(function(){
$(this).parent().toggleClass("active");
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
#home.active .fa-home:before{
content: "\f1b9";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
You have to use Javascript to bind the click event, after you should toggle CSS class.
Try this solution without jQuery
let home = document.querySelector('#home');
home.addEventListener('click', (e) => {
let icon = document.querySelector('.fa');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-heart');
})
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
When user driven events are involved, you'll have to use javascript. One way to do it is, you have two classes and you toggle them to show different icons.
var link = document.querySelector('#home a');
link.addEventListener('click', function(e){
//Prevent default action of a link, which navigates to href prop
e.preventDefault();
var icon = this.querySelector('span');
icon.classList.toggle('fa-home');
icon.classList.toggle('fa-image');
});
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: #fff;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
width: 55px;
height: 55px;
margin-top: 50px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<div id="homecover">
<li id="home">
<span class="fa fa-home"></span>
<li>
</div>
</ul>
This is a non js solution
input + span:before {
height:45px;
content:"\f015"
}
input:checked + span:before {
content:"\f03e"
}
input{
display:none;
}
span.icon{
display: block;
vertical-align: middle;
text-align:center;
line-height: 45px;
}
ul{
list-style-type: none;
margin-top: 0;
}
li a{
text-decoration: none;
color: black;
font-size: 25px;
}
li{
width: 50px;
height: 50px;
display: inline-block;
}
#homecover{
cursor:pointer;
width: 55px;
height: 55px;
margin-top: 150px;
left: 47.5%;
position: absolute;
}
#home{
position: absolute;
z-index: 2;
background-color: #F73933;
border-radius: 50%;
border: 2px solid #F73933 ;
box-shadow: 2px 2px 2px 0.1px #9D9494, 0px 0px 0px 1px white inset;
}
#home a{
padding-left: 0.5em;
position: absolute;
padding-top: 0.3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul>
<label class="switch">
<div id="homecover">
<li id="home">
<input type="checkbox" ><span class="icon fa fa-lg"></span>
<li>
</div>
</label>
</ul>
$("span.fa").click(function(){
if($(this).attr("class") === "fa fa-home"){
$(this).attr("class", "fa-fa-{any-pic}");
} else {
$(this).attr("class", "fa fa-home");
}
});
Currently I have a hamburger menu button: https://jsfiddle.net/sqvwm1dh/
When this is clicked, I'd like to replace it with a graphic.
How do I achieve this with my current code, do I do this in jQuery?
$('header').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function(){
var menuItems = $(".menu-primary-menu-container");
menuItems.toggle();
});
header {
background:red;
height:100px;
}
#menu-button {
position: relative;
z-index: 10000;
display: block;
top: 30px;
right:0;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
/* line 500, sass/_layout.scss */
#menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
/* line 511, sass/_layout.scss */
#menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
<div class="menu-primary-menu-container">
test
</div>
</header>
Method 1(jQuery)
jQuery Methods Used - hide(); and show();
Do something like this-
Write the CSS and HTML of the graphic you want to replace with. Also set display:none; to the CSS of the graphic.
When the button is clicked hide the button and show the graphic.
eg-
`
$("#menu-button").click(function(){
$(this).hide();
$("#graphic").show();};);
Method 2 (CSS pseudo classes)
The above code is perfectly fine but, it would be an obtrusive code (code that affects functionality of the website if javascript is disabled or script is unable to load).
There are many times when we can't avoid javascript but , here we can so why not give it a shot?
for reference- CSS pseudo class - active
#graphic{ display:none; // add other required css for graphic such as property, height,etc}
#menu-button:active {
#graphic{ display:block;
}
#menu-button{display:none;
}
}
I think this is a nice and simple solution
$('header').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function(){
var menuItems = $(".menu-primary-menu-container");
var menubutton = $(this);
if(menubutton.hasClass('active'))
menubutton.removeClass('active');
else
menubutton.addClass('active');
menuItems.toggle();
});
header {
background:red;
height:100px;
}
#menu-button {
position: relative;
z-index: 10000;
display: block;
top: 30px;
right:0;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
#menu-button.active {
/* add your graph here */
}
/* line 500, sass/_layout.scss */
#menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
/* line 511, sass/_layout.scss */
#menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
<div class="menu-primary-menu-container">
test
</div>
</header>
Here's the JSFiddle http://jsfiddle.net/7mzH2/ It's an easy version of what I have right now.
I have two problems which I can't seem to figure out.
The first problem: I want the dot to stay filled when it's on the active page.
Second problem: I want a label to appear on the right of the menu when you hover the dots.
I've tried several ways and in other designs I never had this problem, so I don't understand what I should do.
Hope someone can help me out.
This is the HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav> Home
De mogelijkheden
Restauratie
Het Proces
Werkplaats
Ambacht en Handwerk
Mogelijkheden
Contact
</nav>
</div>
<ul class="content">
<li class="first" id="first">
<div id="pagina01"></div>
<li class="second" id="second">
<div id="pagina02"></div>
</li>
<li class="third" id="third">
<div id="pagina03"></div>
</li>
<li class="fourth" id="fourth">
<div id="wrapper04">
<div id="first04"></div>
<div id="second04"></div>
</div>
</li>
<li class="fifth" id="fifth">
<div id="pagina05"></div>
</li>
<li class="six" id="six">
<div id="pagina06"></div>
</li>
<li class="seven" id="seven">
<div id="pagina07"></div>
</li>
<li class="eight" id="eight">
<div id="pagina08"></div>
</li>
</ul>
This is the CSS
body {
background: white;
min-width: 300px;
height: 100%;
font:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
}
ul.options {
margin-top: 0px;
width: 100%;
}
ul.options li {
display: inline-block;
margin-bottom: 20px;
}
ul.options li h4 {
color: rgba(0, 0, 0, 0.8);
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
ul.btn-group {
color: #000;
margin: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
ul.btn-group li {
background: #7958b8;
border-bottom: 1px solid #563f83;
border-left: 1px solid #563f83;
border-top: 1px solid #563f83;
cursor: pointer;
display: inline-block;
float: left;
margin: 0;
padding: 7px;
}
ul.btn-group li:hover, ul.btn-group li.active {
background: rgb(150, 110, 226);
}
ul.btn-group li:first-child {
border-radius: 2px 0 0 2px;
padding-left: 7px;
}
ul.btn-group li:last-child {
border-radius: 0 2px 2px 0;
border-right: 1px solid #563f83;
padding-right: 7px;
}
ul.content {
margin-top: 0px;
width: 100%;
}
ul.content li {
display: block;
height: 100%;
width: 100%;
}
ul.content li h1 {
color: #000;
padding-top: 20px;
}
.scroller {
background: #CCC;
box-shadow: inset 0 0 5px 0 black;
height: 1px;
overflow: hidden;
}
.scroller h3 {
color: rgba(0, 0, 0, 0.3);
font-size: 30px;
margin-top: 20px;
text-align: center;
}
ul.content li.first {
background: url('../inhouds/images/page01.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.second {
background: url('../inhouds/images/page02.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.third {
background: url('../inhouds/images/page03.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fourth {
background: url('../inhouds/images/page04.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fifth {
background: url('../inhouds/images/page05.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.six {
background: url('../inhouds/images/page06.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.seven {
background: url('../inhouds/images/page07.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.eight {
background: url('../inhouds/images/page08.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid transparant;
background:#666;
}
#pagina01 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8ffff;
}
#pagina02 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beff;
}
#pagina03 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beb0;
}
#pagina04 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6abeb0;
}
#pagina05 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: white;
}
#pagina06 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6a6d6d;
}
#pagina07 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d6d;
}
#pagina08 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d39;
}
Sorry for the long code's but I though maybe this will make it easier to help.
For the labels you can use CSS3 pseudo-elements to create a custom tooltip, and HTML5's data- tag to get the content (text) of the tooltip.
Pseudo-elements are :after and :before
To create a label or tooltip, try to add this to your CSS code:
nav a:hover:before {
pointer-events: none;
content: attr(data-name);
position: absolute;
display: block;
width: 30px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
background: #000;
top: -4px;
right: -40px;
}
..and in your HTML add this to your links: data-name="your text here".
(You can call the data attribute whatever you want. It just has to start with data-).
To make the dots stay filled, you can use jQuery.
When you click on the nav a it adds an .active-class to the <a> which make the dot stay filled. But first we have to make sure that all the other dots gets inactive. Else we suddenly would have every dots active. To do that we first remove the .active-class on all dots. Then we add an .active-class, on that <a> we have clicked on:
$(document).ready(function() {
$('nav a').click(function() {
$('nav a').removeClass('active');
$(this).addClass('active');
});
});
Then we change the .cbp-fbscroller > nav a:hover in your css to .cbp-fbscroller > nav a:hover, nav a.active. Now the active dot, has the same style like when we hover it.
You can test it all, in this Fiddle:
http://jsfiddle.net/7mzH2/3/
P.S:
I think it's better to move the tooltip/label to the left instead of to the right. Right now, you can't add much text, because of the space.
Hope this helped.
I hate to clutter up Stack Overflow, but I can't seem to update my original question here - Issue with div floating on top of carousel. The JSFiddle was incorrect.
I'm having some trouble with this:
http://jsfiddle.net/myoozik/U6bV8/
If you take a look at above the carousel, there is a giant gap. This comes as a result of adding the black overlay div on top of the carousel.
Any idea on how to get rid of that gap aka how is it being generated?
HTML
<div class="carousel-wrapper">
<div id="overlay-div">
</div>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="/_shared/img/img1.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img2.jpg" width="850" height="500" alt="">
</li>
<li>
<img src="/_shared/img/img3.jpg" width="850" height="500" alt="">
</li>
</ul>
</div> ‹›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#overlay-div {
background-color: #000;
width: 200px;
height: 200px;
position: relative;
left: 100px;
top: 300px;
z-index: 999;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
overflow: hidden;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
/*border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;*/
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
The black color box is appearing due to #overlay-div Div that is present which has some height, width and background color. if you set display:none to it the space and black box will disappear.
below is the CSS
#overlay-div {
background-color: #000000;
display: none;
height: 200px;
left: 100px;
position: relative;
top: 300px;
width: 200px;
z-index: 999;
}
Fiddle here here.
Is this what you are looking at?