We Keep Coding

Trying to update a slideshow with time interval

I'm looking to update a site for some friends with a pretty simple request (to change the time on each slide from ~5 sec -> 15 sec) but can't find the parameters where I'd be able to change the length of time. I'm not by any means an expert, but the site was built by someone who is no longer on board and we just want to fix this element... Any help you can offer would be appreciated --
Here is the CSS related to the slideshow:
.slideshow{
position:relative;
background:#000;
}
.slideshow img,
.slidegallery img{
display:block;
width:100%;
height:auto;
}
.slideshow .slide {
width:100%;
position:absolute;
z-index:1;
left:0;
top:0;
}
.slideshow .slide.active { z-index:2; }
.pagination {
position:absolute;
bottom:28px;
left:0;
width:100%;
z-index:100;
text-align:center;
}
.pagination ul {
margin:0;
padding:0;
overflow:hidden;
line-height:0;
}
.pagination ul li {
margin:0 5px;
display:inline-block;
vertical-align:top;
list-style:none;
}
.pagination a {
width:13px;
height:13px;
text-indent:-9999px;
display:block;
border-radius:50%;
background:#fff;
overflow:hidden;
}
.pagination a:hover, .pagination li.active a { background:#ffcf00; }
.home .caption-holder{
max-width:1250px;
margin:0 auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
}
.slideshow .caption{
font-size:14px;
line-height:29px;
background:rgba(0,0,0,0.7);
color:#fff;
position:absolute;
left:40px;
bottom:118px;
padding:0 32px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.slideshow p { margin:0; }
.slideshow h2 {
margin:0 0 6px;
font-size:31px;
line-height:35px;
font-weight:300;
color:#ffca00;
letter-spacing:-1px;
}
.home .slideshow .slide .caption{
width:491px;
font-size:12px;
line-height:14px;
}
.slideshow .holder {
padding:3.2% 6.5% 4.3%;
line-height:18px;
overflow:hidden;
}
.slideshow .btn-next,
.slideshow .btn-prev {
width:32px;
height:100%;
position:absolute;
right:0;
top:0;
text-indent:-9999px;
background:#fc0;
overflow:hidden;
}
.slideshow .btn-prev {
right:auto;
left:0;
}
.slideshow .btn-next:after,
.slideshow .btn-prev:after{
width:10px;
height:18px;
position:absolute;
content:'';
top:50%;
right:50%;
margin:-9px -5px 0 0;
background:url(images/social-networks.png) no-repeat -219px 0;
}
.slideshow .btn-prev:after { background-position:-198px 0; }
.slideshow .slide.second .caption, .slideshow .slide.third .caption, .slideshow .slide.fourth .caption {padding:3px 5px 3px 19px;}
.slideshow .slide.fourth .caption {
width:727px;
text-indent:7px;
padding:0;
}
.slideshow .slide.fourth .next-btn, .slideshow .slide.fourth .prev-btn{height:30px;}
.slideshow .slide.fifth .caption{
background:none;
}
and the .php from the template that populates the slideshow:
<?php if ($projects = get_field('home_gallery')): ?>
<div class="slideshow">
<div class="slideset">
<?php global $post; ?>
<?php foreach($projects as $slide): ?>
<div class="slide">
<?php echo get_theme_image($slide['image'],'full',array(),true) ?>
<div class="caption-holder">
<?php $post = $slide['project']; ?>
<?php setup_postdata($post); ?>
<div class="caption">
<?php _e('next button','pyramidpremierproperties'); ?><?php _e('previous button','pyramidpremierproperties'); ?>
<div class="holder">
<?php the_title('<h2>','</h2>'); ?>
<?php the_excerpt(); ?>
</div>
</div>
<?php wp_reset_postdata(); ?>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="pagination"><?php _e(' ','pyramidpremierproperties'); ?></div>
</div>
<?php endif; ?>
Here is the JS I could find that seems relevant -- tried changing the switchtime and animspeed but doesnt seem to be making a difference...
/*
* jQuery SlideShow plugin
*/
;(function($){
function FadeGallery(options) {
this.options = $.extend({
slides: 'ul.slideset > li',
activeClass:'active',
disabledClass:'disabled',
btnPrev: 'a.btn-prev',
btnNext: 'a.btn-next',
generatePagination: false,
pagerList: '<ul>',
pagerListItem: '<li></li>',
pagerListItemText: 'a',
pagerLinks: '.pagination li',
currentNumber: 'span.current-num',
totalNumber: 'span.total-num',
btnPlay: '.btn-play',
btnPause: '.btn-pause',
btnPlayPause: '.btn-play-pause',
galleryReadyClass: 'gallery-js-ready',
autorotationActiveClass: 'autorotation-active',
autorotationDisabledClass: 'autorotation-disabled',
autorotationStopAfterClick: false,
circularRotation: true,
switchSimultaneously: true,
disableWhileAnimating: false,
disableFadeIE: false,
autoRotation: false,
pauseOnHover: true,
autoHeight: false,
useSwipe: false,
swipeThreshold: 15,
switchTime: 4000,
animSpeed: 600,
event:'click'
}, options);
this.init();
}

The switchTime option in your javascript looks promising. Also, I'm not sure what jQuery SlideShow plugin you are using but it's possible you aren't setting the time on each slide but instead just using the default time of this plugin.

When scroll page down appear and dissapear element

Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden.
my codes
HTML
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
CSS
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
(in my css I have sticky element which is none appear)
JQUERY
$(function() {
$(window).scroll(function() {
/* I dont't know what I have to do */
});
});
click to see on codepen

I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
$(".sticky").show();
}else{
$(".sticky").hide();
}
});
});

Suggested Solution:
Add this to your jquery code:
$(function() {
var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
var $w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
$(".sticky").show(); //show the sticky element
} else {
$(".sticky").hide();//hide the sticky element
}
});
});
Whenever I scroll page down to bottom of B element my sticky element must appear
If I scroll page up to top of my B element my sticky must be hidden

You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it)
The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. This can get rather expensive for performance. Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called.
$(function() {
var $sticky = $('ul.sticky');
var bToTop = $('.b').scrollTop();
$(window).scroll(function() {
if($(document).scrollTop() > bToTop){
$sticky.show();
}
else {
$sticky.hide();
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
display:none;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>
If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop();

codepen
$(document).on("scroll", function() {
if ($(document).scrollTop() >= 600) {
$("ul").css({"display":"initial"});
}
if($(document).scrollTop() <=600) {
$("ul").css({"display":"none"});
}
});

This should be the proper and correct solution.
Just change the display: none to visibility: hidden;.
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
$(".sticky").css({
"visibility": "visible"
});
} else {
$(".sticky").css({
"visibility": "hidden"
});
}
});
});
.container {
width:1020px;
margin:0 auto;
}
.container>div{
width:100%;
height:300px;
background:#f0f0f0;
border:1px solid #ccc;
margin:100px 0;
}
.a:after{
content:"A";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.b:after{
content:"B";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
.c:after{
content:"C";
font-size:250px;
text-align:center;
line-height:300px;
display:block;
color:#999;
}
ul.sticky{
list-style-type:none;
padding:0;
margin:0;
position:fixed;
top:0;
left:0;
width:100%;
background:#f0f0f0;
height:50px;
border-bottom:5px solid #ccc;
visibility: hidden;
}
ul.sticky:after,ul.sticky:before{
content:"";
display:table;
clear:both;
}
ul.sticky li a{
display:block;
float:left;
line-height:50px;
padding:0 30px;
text-decoration:none;
color:#999;
}
ul.sticky li a:hover{
background:#999;
color:#f0f0f0;
}
.show{
display:block;
}
<html>
<head>
</head>
<body>
<ul class="sticky">
<li>Home</li>
<li>About Us</li>
<li>Download</li>
<li>Forums</li>
<li>Contact</li>
</ul>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
</html>

Div wrap makes links wrapped in <ul> unclickable

I can't figure this thing out for the life of me! I know the html is a little messy but it works for what I wanted to do. The problem here is that I can't click the links once they're wrapped in the div. I deleted the wrap and the links worked, but obviously the page layout gets messed up and the horizontal scroll doesn't work. Any help would be greatly appreciated. I'm sure it's something obvious that I'm just missing but I can't figure it out!
Here's the css
div#wrap-gallery {
overflow:hidden;
position:relative;
margin:-300px 0 0 0;
height:950px;
background:#000;
z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
background:url('LINK');
background-size:100%;
width:3000px;
float:left;
height:950px;
position:absolute;
z-index:-999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery2 {
background:url('LINK');
background-size:100%;
background-repeat:no-repeat;
opacity:0.6;
width:3000px;
float:left;
height:950px;
position:absolute;
z-index:-99999999999999999999999999999999999999999999999999999999999999999;
}
ul#bio {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:510px;
margin-left:400px;
font-size:40px;
color:#fff;
z-index:999999999999999999999999999999999999999999999999999999999999999;
}
ul#music {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:-215px;
margin-left:970px;
font-size:40px;
color:#fff;
z-index:999999;
}
ul#lyrics {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:10px;
margin-left:1500px;
font-size:40px;
color:#fff;
z-index:99999999999;
}
ul#dates {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:50px;
margin-left:1100px;
font-size:40px;
color:#fff;
z-index:999999999999999999;
}
ul#gallery3 {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:-425px;
margin-left:2000px;
font-size:40px;
color:#fff;
z-index:999999999999999999999999999;
}
ul#store {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:160px;
margin-left:2375px;
font-size:40px;
color:#fff;
z-index:99999999999999999999999999999999999;
}
ul#contact {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:120px;
margin-left:2650px;
font-size:40px;
color:#fff;
z-index:9999999999999999999999999999999999999999;
}
ul#gallery li{
display:block;
}
ul#gallery li img{
float:left;
height:100%;
}
#lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(LINK) repeat;
text-align:center;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 15px #111;
-webkit-box-shadow:0 0 15px #111;
-moz-box-shadow:0 0 15px #111;
max-width:940px;
}
#content img{
height:90%;
max-width:100%;
}
#media only screen and (min-width: 1280px) {
div#wrap-gallery {
overflow:hidden;
position:relative;
margin:-300px 0 0 0;
height:1000px;
background:#000;
z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
background:url('{image:pano}');
background-size:100%;
width:3000px;
float:left;
height:1000px;
position:absolute;
z-index:-999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery2 {
background:url('{image:map}');
background-size:100%;
background-repeat:no-repeat;
opacity:0.6;
width:3000px;
float:left;
height:1000px;
position:absolute;
z-index:-9999999999999999999999999999999999999999999999999999999999;
}
}
And here's the HTML:
<div id="wrap-gallery">
<ul id="gallery">
<ul id="gallery2">
<ul id="bio">
<li>Bio</li>
</ul>
<ul id="music">
<li>Music</li>
</ul>
<ul id="lyrics">
<li>Lyrics</li>
</ul>
<ul id="dates">
<li>Dates</li>
</ul>
<ul id="gallery3">
<li>Gallery</li>
</ul>
<ul id="store">
<li>Store</li>
</ul>
<ul id="contact">
<li>Contact</li>
</ul>
</ul>
</ul>
</div>
and some js:
var moveWin = {
availW: 0,
galW: 0,
moveDis: 0,
init: function(){
this.availW = $(document).width();
this.galW = $('#gallery').width() - this.availW;
this.moveDis = this.galW / this.availW;
$(document).mousemove(function(e){
moveWin.displace(e);
});
},
displace: function(e){
var x = e.pageX * moveWin.moveDis;
$('#gallery').css({left: -x});
$('#status').html(e.pageX);
}
}
jQuery(document).ready(function($) {
moveWin.init();
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#lightbox').length > 0) { // #lightbox exists
$('#content').html('<img src="' + image_href + '" />');
//$('#lightbox').show();
$('#lightbox').fadeIn('2000');
}
else {
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('#lightbox').live('click', function() {
$('#lightbox').hide();
});
});
Thanks again for any help that you can offer!

Javascript mouseover mouseout menu

I'm trying to make this javascript menu work where, when I hover over AAA its submenu shows and on BBB its submenu shows.
It is implemented as a javascript which toggles the #subnav1 and #subnav2 css visibility where the two overlap one another.
However it seems only BBB mouseover works correctly, I suspect because the subnav2 is on top of the subnav1 however even messing with z-index doesn't solve the quirk..
Any idea?
Below is the code.. I left the css style so to make it look like a menu, hope it's not too long for an sscce
<html>
<head>
<style>
#nav {
float:left;
height:20px;
width:50%;
font-size:.8em;
margin:10px 0 0 20%;
}
#nav li,#subnav1 li,#subnav2 li {
display:inline;
}
#nav ul li a,#subnav1 ul li a,#subnav2 ul li a {
color:#000;
text-decoration:none;
margin:0 10px 0 0;
}
#nav ul,#subnav1 ul,#subnav2 ul {
list-style-type:none;
margin:0;
padding:0;
}
#subnav1,#subnav2 {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
#subnavs {
background:none repeat scroll 0 0 #ccc;
position:relative;
float:left;
height:20px;
width:60%;
font-size:.8em;
margin:0 0 0 20%;
padding:3px 0 0 10px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>Home</li>
<li onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')"><a>AAA</a></li>
<li onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')"><a>BBBB</a></li>
</ul>
</div>
<div id="subnavs">
<div id="subnav1" onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')">
<ul style="display: none; z-index: 10;">
<li><a>AAAAAAAA1</a></li>
<li><a>AAAAAAAA2</a></li>
<li><a>AAAAAAAA3</a></li>
<li><a>AAAAAAAA4</a></li>
</ul>
</div>
<div id="subnav2" onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')">
<ul style="display: none; z-index: -10;">
<li><a>BBBBBBBB1</a></li>
<li><a>BBBBBBBB2</a></li>
<li><a>BBBBBBBB3</a></li>
<li><a>BBBBBBBB4</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
function showAAA(show, subnavid)
{
var subNav1 = document.getElementById(subnavid);
var ull = subNav1.getElementsByTagName("ul");
for (var i = 0, ii = ull.length; i < ii; i++)
{
if(show)
{
ull[i].style.display = "block";
ull[i].style.zIndex = 10;
}
else
{
ull[i].style.display = "none";
ull[i].style.zIndex = -10;
}
}
};
</script>
</html>

Image resizing issue in Slides

The problem is, in one of my pages I have a slide, where my images are 1920x1080 while the slide is just set to 1350 as width. My images are not getting centered, you just see about 1/3 of the picture's top left-middle-ish. The slide also doesn't reach out to the ends (<---->) of the screen, there's this tiny space there. Any solutions?
Picture: http://tinypic.com/view.php?pic=29crp7a&s=6
Code
Html:
<div id="container">
<div id="banner">
<ul class="bjqs">
<li><img src="images/lamborghini/av_lp700-4_roadster_ov3_v2_1920x1080.jpg" title="This is my slideshow!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_home_1920x1080.jpg" title="Apparently it works!"></li>
<li><img src="images/lamborghini/gal_lp_550-2_spyder_home_1920x1080.jpg" title="By Andreas!"></li>
</ul>
</div>
</div>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/basic-jquery-slider.min.js"></script>
<script>
$(document).ready(function() {
$('#banner').bjqs({
'animation' : 'slide',
'width' : 1350,
});
});
</script>
Css:
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}
/* demo styles */
body{
font-family: 'Carter One', sans-serif;
}
#container{
width:100%;
padding:20px 0;
margin:0 auto;
overflow:hidden;
}
#banner {
height:300px;
width:700px;
margin:0 auto;
position:relative;
background:#fff;
#fff solid;
}
ul.bjqs-controls li a{
display:block;
padding:5px 10px;
position:absolute;
background:#000000;
color:#fd0100;
text-decoration:none;
text-transform:uppercase;
}
a.bjqs-prev{
left:0;
}
a.bjqs-next{
right:0;
}
p.bjqs-caption{
background:rgba(0,0,0,0.7);
color:#fff;
text-align:center;
}
ol.bjqs-markers{
position:absolute;
bottom:-50px;
}
ol.bjqs-markers li{
float:left;
margin:0 3px;
}
ol.bjqs-markers li a{
display:block;
height:10px;
width:10px;
border:4px solid #fff;
overflow:hidden;
text-indent:-9999px;
background:#000;
border-radius:10px;
}
ol.bjqs-markers li.active-marker a{
background:#fd0100;
}

The solution is very simple actually.
You need to set a width to your images to 100% in your CSS.
.bjqs img {
width:100%;
}
Hope that helps, good luck