I'm making a website which you can view here: carlraymondhansen.com
I'm not very good at coding so I don't really know what I'm doing here. But I got the website to work how I want on the desktop. Mobile works just as well except that when you open a popup, you can't close it like you can on desktop. I wanted to make it so you can tap anywhere outside the window and it'll close. You can click anywhere on desktop, not on mobile. How do I fix this?
Here's all the code for the site:
$(document).ready(function() {
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel');
var popURL = $(this).attr('href');
var query = popURL.split('?');
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1];
$('#' + popID).fadeIn().css({
'width': Number(460)
}).prepend('<a href="#" class = "close" > < /a>');
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
$('#' + popID).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({
'filter': 'alpha(opacity=80)'
}).fadeIn();
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
body {
background-image: url(https://i.imgur.com/Y4eYm05.jpg);
background-attachment: relative;
background-repeat: no-repeat;
}
.container {
width: 100%;
font-family: Cormorant Garamond;
font-size: 20px;
font-weight: 500;
color: black;
text-align: center;
line-height: 1.5;
}
.container #card1 {
width: 400px;
height: 200px;
background-color: white;
margin: auto;
top: 300px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card1 #name {
width: 400px;
height: 200px;
padding-top: 70px;
}
.container a {
color: black;
text-decoration: none;
}
.container #card2 {
width: 400px;
height: 200px;
background-image: url(https://i.imgur.com/PkOy68G.gif);
background-size: 400px 200px;
margin: auto;
top: 508px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card3 {
width: 400px;
height: 200px;
background-image: url(https://i.imgur.com/XRjMag8.gif);
background-size: 400px 200px;
margin: auto;
top: 720px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card4 {
width: 400px;
height: 200px;
background-image: url(https://i.imgur.com/r9wm3Zv.gif);
background-size: 400px 200px;
margin: auto;
top: 930px;
position: relative;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card5 {
width: 400px;
height: 200px;
background-color: white;
margin: auto;
top: 1138px;
position: relative;
margin-bottom: 250px;
box-shadow: 5px 0px 10px rgba(30, 30, 30, .3), -5px 0px 10px rgba(30, 30, 30, .3), 0px 5px 10px rgba(30, 30, 30, .3), 0px -10px 20px rgba(30, 30, 30, 1);
}
.container #card5 #contact {
width: 400px;
height: 200px;
padding-top: 70px;
}
.popup_block {
text-align: center;
font-family: Cormorant Garamond;
font-size: 18px;
font-weight: 500;
padding: 30px;
width: 500px;
display: none;
background: #fff;
float: left;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
#fade {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
opacity: 0.8;
}
.popup_block a {
color: blue;
text-decoration: none;
}
.popup_block a:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:500,700" rel="stylesheet">
<!----------------------------------------->
<!----------------------------------------->
<div class="container">
<div id="card1">
<a href="#?w=500" rel="box4" class="poplight">
<div id="name">Carl Raymond Hansen</br>Writer & Director</div </a>
</div>
<div id="card2">
</div>
<div id="card3">
</div>
<div id="card4">
</div>
<div id="card5">
<a href="#?w=500" rel="box5" class="poplight">
<div id="contact">408 — 887 — 0157</br>carlraymondhansen#gmail.com</div>
</a>
</div>
</div>
<div class="content">
<div id="blur"></div>
</div>
<!---------------------------------------->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!---------------------------------------->
<link rel="stylesheet" href="styles.css">
</head>
<!----------------------------------------->
<body>
<div id="box1" class="popup_block">
</br>
Reel
</br>
Cinematography
</br>
</br>
</br>
<iframe width="400" height="224" src="https://www.youtube.com/embed/csUuikE2ZIg?showinfo=0" frameborder="0" allowfullscreen></iframe>
</br>
</br>
</div>
<div id="box3" class="popup_block">
</br>
— then Stupor —
</br>
Writer & Director
</br>
</br>
<iframe width="400" height="224" src="https://www.youtube.com/embed/hmDk0CIPV7U?showinfo=0" frameborder="0" allowfullscreen></iframe>
</br>
</br>
</div>
<div id="box2" class="popup_block">
</br>
Calling Lisa
</br>
Writer & Director
</br>
</br>
</br>
<iframe width="400" height="224" src="https://www.youtube.com/embed/EkYuXxTvdFw?showinfo=0" frameborder="0" allowfullscreen></iframe>
</br>
</br>
</div>
<div id="box4" class="popup_block">
</br>
Currently Attending
</br>
Art Center College of Design
</br>
For Directing
</br>
</br>
Resume
</br>
</br>
</div>
<div id="box5" class="popup_block">
</br>
Follow my Social Media
</br>
</br>
Twitter
</br>
Instagram
</br>
</br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------------------------->
</body>
</html>
You can use tap event to make it work on mobile. Example:
$('a.close, #fade').on('tap', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
});
return false;
});
});
reference: https://api.jquerymobile.com/tap/
Try using vclick event, works both on desktop and mobile devices:
$('a.poplight[href^=#]').on( "vclick", function() { ... } )
Docs
Related
Hover is working on some of the page and not working on some pages.
the menu does not hold on home and working fine on the rest of the pages.
Not Working URL : https://pcbmagic.com/
Working URL : https://pcbmagic.com/pcb-quote.php
.dropdown-log {
position: relative;
display: inline-block;
margin-left: 26px;
font-weight: 500;
border: 1px solid rgb(111 111 111 / 65%);
color: rgb(61, 79, 88);
padding: 2px 10px 2px 13px;
border-radius: 17px;
font-size: 14px;
}
.dropdown-log:hover .dropdown-log-content {
display: block;
}
.dropdown-log-content {
display: none;
position: absolute;
padding: 0px 0px 10px 0;
background-color: white;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 1;
}
<div class="dropdown-log">
<span>Hi,Vishal<i class="pl-2 fas fa-chevron-down"></i></span>
<div class="dropdown-log-content">
<div class="bg-dark py-2 mb-2">
<div class="p-img">
<svg style="height:30px;" fill="#21313C" viewBox="0 0 216.56 448.5" class="leafygreen-ui-1yq22vy"><path fill="#10aa50" d="M202.8,179.68c-23-101.47-71-128.49-83.18-147.59C113,21.7,106.25,5.91,106.25,5.91c-.66,9-1.83,14.7-9.51,21.54C81.36,41.16,16,94.42,10.51,209.72c-5.12,107.5,79,173.8,90.18,180.65,8.54,4.2,19,.08,24-3.77,40.54-27.84,96-102.07,78.06-206.92"></path><path fill="#b8c4c2" d="M109.73,333.11c-2.11,26.62-3.63,42.11-9,57.29,0,0,3.54,25.33,6,52.17l8.77,0a488.62,488.62,0,0,1,9.57-56.2C113.71,380.8,110.16,356.46,109.73,333.11Z"></path><path fill="#12924f" d="M125.06,386.39h0c-11.48-5.3-14.8-30.13-15.31-53.28A1090.8,1090.8,0,0,0,112.2,218.4c-.6-20.07.3-185.92-4.94-210.2,2.12,4.75,7.24,15.91,12.36,23.88,12.23,19.11,60.19,46.13,83.17,147.61C220.7,284.27,165.57,358.37,125.06,386.39Z"></path></svg>
</div>
<h6 class="text-center text-light">Vishal Vishwakarma</h6>
<p class="text-center text-light" style="font-size:12px;">webadmin#championsemi.com</p>
</div>
<p>Dashboard</p>
<p>My Order</p>
<p>Production Status</p>
<p>Help Center</p>
<p>Logout</p>
</div>
</div>
.dropdown-log-content {
display: none;
position: absolute;
padding: 0px 0px 10px 0;
right: 0;
background-color: white;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
z-index: 99999999;
}
add z-index as above in your code and it'll fix automatically. your bootstrap carousel is overlapping to that menu. that's the region why it's not getting hold.
I am trying to create and audio scrubber bar using a handle I can drag back and forth to a different part of the music.
The item that has to be draggable is the .handle, and .played will follow it.
I made the structure as below: JSFiddle
.scrubber {
width: 300px;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.8);
}
.scrubber>.bar {
background: transparent;
height: 10px;
}
.scrubber>.buffer {
position: absolute;
height: 10px;
background: rgba(255, 0, 0, 0.2);
top: 0;
}
.scrubber>.played {
position: absolute;
width:100px;
height: 10px;
background: red;
top: 0;
}
.scrubber>.played>.handle {
float: right;
width: 10px;
height: 10px;
margin-top: 0px;
margin-right: -5px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.6);
}
<div class="scrubber">
<div class="bar"></div>
<div class="buffer"></div>
<div class="played">
<div class="handle"></div>
</div>
</div>
Any idea how to make it work?
you need to use
<input type="range" />
and stylize it as you need
codepen link: https://codepen.io/anon/pen/MLZpzg
I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>
I am trying to create a lightbox to show some custom data.
There are two problems I am facing which I do not know how to handle.
1. First problem is I don't want the page to scroll(vertically) when lightbox is visible.
2. Second problem is I want the lightbox to scroll if the content is bigger than the viewport of the browser.
But I am not sure how to approach this. I tried overflow-x:scroll; overflow-y:scroll; but it shows the scrollbar but doesn't scroll.
Following is the code I currently have :
Html:
<div class="lightbox">
<section class="image-app">
<div class="app-bar">
<div class="app-close">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>
</div>
<div class="container_fluid">
<div class="row">
<div class="col-md-8">
<div class="app-image">
</div>
</div>
<div class="col-md-4">
<div class="side-bar">
</div>
</div>
</div>
</div>
</section>
</div>
CSS:
.lightbox {
display: none;
position: fixed;
background: rgba( 0, 0, 0, 0.7 );
bottom: 0;
right: 0;
top: 0;
left: 0;
z-index: 1000;
}
.image-app {
display: none;
position: relative;
background: #fafafa;
top: 3%;
left: 3%;
width: 94%;
min-height: 94%;
overflow-x:scroll;
overflow-y:scroll;
border: #8e8e8e;
z-index: 1001;
padding: 10px;
-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 21px 0px rgba(0,0,0,1);
}
.app-close {
padding: 10px 10px;
text-align: right;
font-size: 150%;
cursor: pointer;
}
.app-image {
text-align: center;
background: #ffffff;
}
.side-bar {
position: relative;
height: 100%;
width: 100%;
}
Javascript :
$ ( '.item' ).click( function ( event ) {
event.preventDefault ( );
event.stopPropagation ( );
$( '.lightbox' ).show ( );
$( '.image-app' ).slideToggle ( "fast" );
} );
if ($('.lightbox').css('display') != 'none') {
$('body').on({'mousewheel': function(e) {
e.preventDefault();
e.stopPropagation();
}
})
}
var div = $(".lightbox").height();
var win = $(window).height();
if (div > win ) {
$(".lightbox").css("overflow-x","scroll");
}
I've tried a lot of jQuery to create an image slideshow with previous/next buttons and auto slide function. However, there is a constant error. In my webpage, the slideshow is just black screen with no pictures loaded. The example i'm following is this website: http://designmodo.com/image-slider-jquery-css3/
this is my codes:
<html lang="es">
<head> <title>ACE ARCHERY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="Stylesheet.css">
<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.nivo.slider.pack.js"></script>
<script>
$(window).load(function() {
$('#slider').nivoSlider({
directionNavHide: false,
captionOpacity: 1,
prevText: '<',
nextText: '>'
});
});
</script>
<!-- <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type ="text/javascript">
$(document).ready(function slider() {
$("#1").show("fade", 500);
$("#1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function () {
$(".slider #" + count).show("slide", {direction: "right"}, 500);
$(".slider #" + count).delay(5500).hide("slide", {direction: 'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
);
</script>-->
</head>
<!-- <body onload="Slider();" >-->
<body>
<div class="wrapper">
<div class="slider">
<div class="slider-wrapper futurico-theme">
<div id="slider" class="nivoSlider">
<img src="Slide_image/one.jpg" alt="">
<img src="Slide_image/two.jpg" alt="">
<img src="Slide_image/three.jpg" alt="">
<img src="Slide_image/four.jpg" alt="">
<img src="Slide_image/five.jpg" alt="">
<img src="Slide_image/six.jpg" alt="">
</div>
</div>
<!-- <div class = "slider">
<img id="1" src="Slide_image/one.jpg" border = "0" alt = "One"/>
<img id="2" src="Slide_image/two.jpg" border = "0" alt = "Two"/>
<img id="3" src="Slide_image/three.jpg" border = "0" alt = "Three"/>
<img id="4" src="Slide_image/four.jpg" border = "0" alt = "Four"/>
<img id="5" src="Slide_image/five.jpg" border = "0" alt = "Five"/>
<img id="2" src="Slide_image/six.jpg" border = "0" alt = "Six"/>
</div>-->
</div>
And the CSS:
.futurico-theme.slider-wrapper {
position: relative;
width: 500px;
height: 250px;
margin: 0;
padding: 5px;
background: #141517;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.futurico-theme .nivoSlider {
position: relative;
width: 500px;
height: 250px;
}
.futurico-theme .nivoSlider img {
display: none;
position: absolute;
width: 500px;
height: 250px;
top: 0;
left: 0;
}
.futurico-theme .nivo-controlNav {
position: absolute;
bottom: -30px;
left: 105px;
}
.futurico-theme .nivo-controlNav a {
display: block;
float: left;
width: 16px;
height: 16px;
margin-right: 5px;
text-indent: -9999px;
background: #141517;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
-webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}
.futurico-theme .nivo-directionNav a {
display: block;
top: 60px;
font-family: 'Consolas', sans-serif;
font-size: 40px;
color: #141517;
text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}
.futurico-theme a.nivo-prevNav { left: -40px; }
.futurico-theme a.nivo-nextNav { right: -40px; }
.slider-wrapper {
width: 80%;
margin: 100px auto;
}
Please cross check your nivo javascript and css path
<link rel="stylesheet" href="nivo-slider.css" media="screen">
<script src="jquery.nivo.slider.pack.js"></script>
You will get a black screen if the nivo javascript is not loaded.
The following is the working sample jsfiddle: http://jsfiddle.net/zeskysee/jjucqame/3/
To simulate the error you having, you may try to remove the external resources "jquery.nivo.slider.js" then you will see a black without the slideshow