Related
Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});
I have a Div slider that rotates a set of Divs in and out of focus. Everything was working fine until I tried switching everything to (table / table-cell) in order to keep them all the Divs the same height in CSS. Now they still rotate out but one div remains visible with a reduced width off to the side of the stage. I get a sense that its position related but just can't figure out what's causing the issue.
Affected Page - https://www.harpercollege.edu/dev/blog-slider-test.php
JS Code:
$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');
// Calculate Conditions & Set Vars
// var playTimer = 9,
slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
$(window).resize(function() {
var slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
});
$('.blog-posts-next').on('click', function(event) {
event.preventDefault();
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
});
$('.blog-posts-prev').on('click', function(event) {
event.preventDefault();
$('.well:last').prependTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: -(slideWidth)
});
$('.blog-posts-stage').animate({
left: '0px'
}, 500, function() {});
});
function moveForward() {
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
}
var timer = setInterval(moveForward, playTimer);
$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
// clearInterval(timer);
}, function(ev) {
// timer = setInterval( moveForward, playTimer);
});
CSS Code:
<style>
.blog-posts {
width: 100%;
background: #eee;
font-size: 0;
position: relative;
}
.blog-posts-prev,
.blog-posts-next {
display: inline-block;
background: #eee;
color: #000;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-prev:hover,
.blog-posts-next:hover {
background: #ccc;
}
.blog-posts-prev-disabled,
.blog-posts-next-disabled {
display: inline-block;
background: #eee;
color: #ccc;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-stage {
position: relative;
white-space: normal;
width: 100%;
height: 100%;
float: none;
}
.well {
background: #ccc;
box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
width: 100%;
font-size: 12px;
text-align: left;
display: table-cell;
height: 100%;
width: 100%;
}
.well .row .col-sm-12.col-md-12 h2 {
float: left;
margin-top: 0px;
}
</style>
You could just use a lightbox library and save yourself the effort, but if you really want to do this why not try flex?
.blog-posts-stage {
display: flex;
flex-direction: row;
overflow: hidden;
}
.well-large {
flex-shrink: 0;
}
I have a code which displays congradulations and displays stars popping out when body loads in a blue screen for for a timeout of 4000
when body loads it calls a function animatecongrat() which has two functions in it given below
The text congradulations is animated in function animatetext(), and stars animated in animateblobs()
My problem is text congradulation is animated and bluescreen appears for a timeout of 4000 but stars ( var numberOfStars = 20; in blob) are not appearing and animated in blue screen.
How to solve this? How do i achieve this effect?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js'></script>
<script>
var timeOut;
function animateCongrat()
{
debugger;
$('.congrats').show();
clearTimeout(timeOut);
addBlueBody();
reset();
var numberOfStars = 20;
for (var i = 0; i < numberOfStars; i++) {
$('.congrats').append('<div class="blob fa fa-star ' + i + '"></div>');
}
animateText();
animateBlobs();
hideCongratAndBlueBody();
}
function addBlueBody() {
$('body').addClass('bodyblue');
$('#2').hide();
$('.hiddenimage').show();
}
function hideCongratAndBlueBody() {
timeOut = setTimeout(() => {
$('.congrats').hide();
$('body').removeClass('bodyblue');
}, 4000);
}
function reset() {
$.each($('.blob'), function(i) {
TweenMax.set($(this), {
x: 0,
y: 0,
opacity: 1
});
});
TweenMax.set($('h1'), {
scale: 1,
opacity: 1,
rotation: 0
});
}
function animateText() {
TweenMax.from($('h1'), 0.8, {
scale: 0.4,
opacity: 0,
rotation: 15,
ease: Back.easeOut.config(4),
});
}
function animateBlobs() {
debugger;
var xSeed = _.random(500, 500);
debugger;
var ySeed = _.random(300, 300);
$.each($('.blob'), function(i) {
var $blob = $(this);
var speed = _.random(1, 5);
var rotation = _.random(5, 100);
var scale = _.random(0.8, 1.5);
var x = _.random(-xSeed, xSeed);
var y = _.random(-ySeed, ySeed);
TweenMax.to($blob, speed, {
x: x,
y: y,
ease: Power1.easeOut,
opacity: 0,
rotation: rotation,
scale: scale,
onStartParams: [$blob],
onStart: function($element) {
$element.css('display', 'block');
},
onCompleteParams: [$blob],
onComplete: function($element) {
$element.css('display', 'none');
}
});
});
}
#font-face {
font-family: 'Sigmar One';
font-style: normal;
font-weight: 400;
src: local('Sigmar One Regular'), local('SigmarOne-Regular'), url(https: //fonts.gstatic.com/s/sigmarone/v8/co3DmWZ8kjZuErj9Ta3do6Tpow.ttf) format('truetype');
}
#import url(https: //fonts.googleapis.com/css?family=Sigmar+One);
body {
overflow: hidden;
}
.dashed {
border: 2px dashed #999 !important;
}
.bodyblue {
background: #3da1d1;
color: #fff;
width: 0.3vw;
height: 0.5vh;
}
.congrats {
position: absolute;
top: 140px;
width: 550px;
height: 100px;
padding: 20px 10px;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
display: none;
}
h1 {
transform-origin: 50% 50%;
font-size: 50px;
font-family: 'Sigmar One', cursive;
cursor: pointer;
z-index: 2;
text-align: center;
width: 100%;
position: absolute;
top:-10.5vh;
left: 0.3vw;
}
.blob {
height: 50px;
width: 50px;
color: #ffcc00;
position: absolute;
top: 45%;
left: 45%;
z-index: 1;
font-size: 30px;
display: none;
}
.heading{
margin-left:20%;
margin-right:20%;
margin-top:-2%;
}
.text {
padding: 20px;
margin:7 px;
margin-top:10px;
color:white;
font-weight:bold;
text-align:center;
}
body{
background-image:
background-size: 100vw 100vh;
}
.next{
margin-right:50%;
margin-left:50%;
margin-bottom:10%;
float:right;
}
ul{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="animateCongrat();">
<div class="congrats">
<h1>Congratulations!</h1>
</div>
</body>
I am using ResponsiveSlides for a photo slideshow on a page, and I cannot make the navigation button show up as they do on the website. Currently, the Previous and Next links appear below the slider as simple hypertext links. Here is how this is showing on the website:
website-slideshow. See the Previous/Next buttons below image. Here is how I would like for this to look: navigation-buttons-centered. I've tried so many different things and nothing is working, so any help would be appreciated.
Here is the code that is being used:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="/wp/wp-content/themes/Avada-Child-Theme/responsiveslides.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "rslides",
});
});
</script>
<link href="/wp/wp-content/themes/Avada-Child-Theme/css/responsiveslides.css" rel="stylesheet" type="text/css" />
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
</ul>
</div>
JS:
(function($, window, i) {
$.fn.responsiveSlides = function(options) {
// Default settings
var settings = $.extend({
"auto": true, // Boolean: Animate automatically, true or false
"speed": 500, // Integer: Speed of the transition, in milliseconds
"timeout": 4000, // Integer: Time between slide transitions, in milliseconds
"pager": true, // Boolean: Show pager, true or false
"nav": true, // Boolean: Show navigation, true or false
"random": false, // Boolean: Randomize the order of the slides, true or false
"pause": false, // Boolean: Pause on hover, true or false
"pauseControls": true, // Boolean: Pause when hovering controls, true or false
"prevText": "Previous", // String: Text for the "previous" button
"nextText": "Next", // String: Text for the "next" button
"maxwidth": "", // Integer: Max-width of the slideshow, in pixels
"navContainer": "", // Selector: Where auto generated controls should be appended to, default is after the <ul>
"manualControls": "", // Selector: Declare custom pager navigation
"namespace": "rslides", // String: change the default namespace used
"before": $.noop, // Function: Before callback
"after": $.noop // Function: After callback
}, options);
return this.each(function() {
// Index for namespacing
i++;
var $this = $(this),
// Local variables
vendor,
selectTab,
startCycle,
restartCycle,
rotate,
$tabs,
// Helpers
index = 0,
$slide = $this.children(),
length = $slide.length,
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
// Namespacing
namespace = settings.namespace,
namespaceIdx = namespace + i,
// Classes
navClass = namespace + "_nav " + namespaceIdx + "_nav",
activeClass = namespace + "_here",
visibleClass = namespaceIdx + "_on",
slideClassPrefix = namespaceIdx + "_s",
// Pager
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
// Styles for visible and hidden slides
visible = {
"float": "left",
"position": "relative",
"opacity": 1,
"zIndex": 2
},
hidden = {
"float": "none",
"position": "absolute",
"opacity": 0,
"zIndex": 1
},
// Detect transition support
supportsTransitions = (function() {
var docBody = document.body || document.documentElement;
var styles = docBody.style;
var prop = "transition";
if (typeof styles[prop] === "string") {
return true;
}
// Tests for vendor specific prop
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
prop = prop.charAt(0).toUpperCase() + prop.substr(1);
var i;
for (i = 0; i < vendor.length; i++) {
if (typeof styles[vendor[i] + prop] === "string") {
return true;
}
}
return false;
})(),
// Fading animation
slideTo = function(idx) {
settings.before(idx);
// If CSS3 transitions are supported
if (supportsTransitions) {
$slide
.removeClass(visibleClass)
.css(hidden)
.eq(idx)
.addClass(visibleClass)
.css(visible);
index = idx;
setTimeout(function() {
settings.after(idx);
}, fadeTime);
// If not, use jQuery fallback
} else {
$slide
.stop()
.fadeOut(fadeTime, function() {
$(this)
.removeClass(visibleClass)
.css(hidden)
.css("opacity", 1);
})
.eq(idx)
.fadeIn(fadeTime, function() {
$(this)
.addClass(visibleClass)
.css(visible);
settings.after(idx);
index = idx;
});
}
};
// Random order
if (settings.random) {
$slide.sort(function() {
return (Math.round(Math.random()) - 0.5);
});
$this
.empty()
.append($slide);
}
// Add ID's to each slide
$slide.each(function(i) {
this.id = slideClassPrefix + i;
});
// Add max-width and classes
$this.addClass(namespace + " " + namespaceIdx);
if (options && options.maxwidth) {
$this.css("max-width", maxw);
}
// Hide all slides, then show first one
$slide
.hide()
.css(hidden)
.eq(0)
.addClass(visibleClass)
.css(visible)
.show();
// CSS transitions
if (supportsTransitions) {
$slide
.show()
.css({
// -ms prefix isn't needed as IE10 uses prefix free version
"-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
"-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
"-o-transition": "opacity " + fadeTime + "ms ease-in-out",
"transition": "opacity " + fadeTime + "ms ease-in-out"
});
}
// Only run if there's more than one slide
if ($slide.length > 1) {
// Make sure the timeout is at least 100ms longer than the fade
if (waitTime < fadeTime + 100) {
return;
}
// Pager
if (settings.pager && !settings.manualControls) {
var tabMarkup = [];
$slide.each(function(i) {
var n = i + 1;
tabMarkup +=
"<li>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
"</li>";
});
$pager.append(tabMarkup);
// Inject pager
if (options.navContainer) {
$(settings.navContainer).append($pager);
} else {
$this.after($pager);
}
}
// Manual pager controls
if (settings.manualControls) {
$pager = $(settings.manualControls);
$pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
}
// Add pager slide class prefixes
if (settings.pager || settings.manualControls) {
$pager.find('li').each(function(i) {
$(this).addClass(slideClassPrefix + (i + 1));
});
}
// If we have a pager, we need to set up the selectTab function
if (settings.pager || settings.manualControls) {
$tabs = $pager.find('a');
// Select pager item
selectTab = function(idx) {
$tabs
.closest("li")
.removeClass(activeClass)
.eq(idx)
.addClass(activeClass);
};
}
// Auto cycle
if (settings.auto) {
startCycle = function() {
rotate = setInterval(function() {
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}, waitTime);
};
// Init cycle
startCycle();
}
// Restarting cycle
restartCycle = function() {
if (settings.auto) {
// Stop
clearInterval(rotate);
// Restart
startCycle();
}
};
// Pause on hover
if (settings.pause) {
$this.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
// Pager click event handler
if (settings.pager || settings.manualControls) {
$tabs.bind("click", function(e) {
e.preventDefault();
if (!settings.pauseControls) {
restartCycle();
}
// Get index of clicked tab
var idx = $tabs.index(this);
// Break if element is already active or currently animated
if (index === idx || $("." + visibleClass).queue('fx').length) {
return;
}
// Remove active state from old tab and set new one
selectTab(idx);
// Do the animation
slideTo(idx);
})
.eq(0)
.closest("li")
.addClass(activeClass);
// Pause when hovering pager
if (settings.pauseControls) {
$tabs.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
// Navigation
if (settings.nav) {
var navMarkup =
"<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
"<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
// Inject navigation
if (options.navContainer) {
$(settings.navContainer).append(navMarkup);
} else {
$this.after(navMarkup);
}
var $trigger = $("." + namespaceIdx + "_nav"),
$prev = $trigger.filter(".prev");
// Click event handler
$trigger.bind("click", function(e) {
e.preventDefault();
var $visibleClass = $("." + visibleClass);
// Prevent clicking if currently animated
if ($visibleClass.queue('fx').length) {
return;
}
// Adds active class during slide animation
// $(this)
// .addClass(namespace + "_active")
// .delay(fadeTime)
// .queue(function (next) {
// $(this).removeClass(namespace + "_active");
// next();
// });
// Determine where to slide
var idx = $slide.index($visibleClass),
prevIdx = idx - 1,
nextIdx = idx + 1 < length ? index + 1 : 0;
// Go to slide
slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
if (settings.pager || settings.manualControls) {
selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
}
if (!settings.pauseControls) {
restartCycle();
}
});
// Pause when hovering navigation
if (settings.pauseControls) {
$trigger.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
}
// Max-width fallback
if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
var widthSupport = function() {
$this.css("width", "100%");
if ($this.width() > maxw) {
$this.css("width", maxw);
}
};
// Init fallback
widthSupport();
$(window).bind("resize", function() {
widthSupport();
});
}
});
};
})(jQuery, this, 0);
CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides1_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
z-index: 99;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.rslides1_nav:focus {
outline: none;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
a {
color: #fff;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 10;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0, 0, 0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0, 0, 0, .8);
}
I believe your problem is in this line under .rslides1_nav:
background: transparent url("themes.gif") no-repeat left top;
Try:
background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
Or copy that image to your local and use whatever link would be appropriate. I've been messing around with a fiddle, but it doesn't look quire right yet. Hopefully, this can at least get you started
You need to add the responsiveslides.css and theme.css. After that you can download the image with the arrows from here. Or you can just change the background images path of .centered-btns_nav with the path from this link.
You can get the responsiveslides.css file from here.
You can get the theme.css file from here.
You also have to change the namespace property value from the plugin initialization to be:
namespace: "centered-btns"
See the working snippet below:
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "centered-btns"
});
});
http://responsiveslides.com/themes/themes.gif
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
* {
margin: 0;
padding: 0;
}
html {
background: #fff;
}
body {
color: #333;
font: 14px/24px sans-serif;
margin: 0 auto;
max-width: 700px;
_width: 700px;
padding: 0 30px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
#wrapper {
float: left;
width: 100%;
margin-bottom: 50px;
}
h1 {
font: 600 28px/36px sans-serif;
margin: 50px 0;
}
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
a {
color: #222;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://responsiveslides.com/themes/themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("http://responsiveslides.com/themes/themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0,0,0, .8);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
</ul>
</div>
The variable "abtBack" contains an if statement that when ran after the xBttn click function should allow the word "About" on the screen move back to its original position. For some reason when I try to run the variables nothig different happens from when I didn't try to run them. I left out what parts of the code I feel are not important to solve this problem. Please refer to my full code in the Fiddle below.
JSFiddle
<div id='bckDrp'>
<div id='nav'>
<img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
</div>
var abtBack = function() {
if ($('#abt').offset().left == (abtLeft - 210)) {
$(this).animate({
left: "+=210"
}, 450);
}
}
var main = function() {
//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
$('#xBttn').toggle(300);
$('#xBttn').click(function() {
$('#xBttn').fadeOut(300);
$('#hme, #abt, #prt').animate({
opacity: 1
}, 300);
abtBack();
})
})
var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
if ($('#hme, #prt').css('opacity') == 0) {
$('#hme, #prt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #prt').animate({
opacity: 0
}, 300);
}
}
The variable abtLeft is local to the main function, so it can't be accessed in the abtBack function. Either move the declaration of this variable outside both functions, or put the defintion of abtBack inside main.
Another problem is that this is not set to the element you want to animate in the abtBack and prtBack functions, so $(this).animate() won't work. Use $('#prt').animate() and $('#abt').animate().
var main = function() {
var prtBack = function() {
if ($('#prt').offset().left == (prtLeft - 430)) {
$('#prt').animate({
left: "+=430"
}, 450);
} else {
$('#prt').animate({
left: "-=430"
}, 450);
}
}
var abtBack = function() {
if ($('#abt').offset().left == (abtLeft - 210)) {
$('#abt').animate({
left: "+=210"
}, 450);
}
}
//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
$('#xBttn').toggle(300);
$('#xBttn').click(function() {
$('#xBttn').fadeOut(300);
$('#hme, #abt, #prt').animate({
opacity: 1
}, 300);
abtBack();
prtBack();
})
})
//When Home tab is clicked
$('#hme').click(function() {
if ($('#abt, #prt').css('opacity') == 0) {
$('#abt, #prt').animate({
opacity: 1
}, 300);
} else {
$('#abt, #prt').animate({
opacity: 0
}, 300);
}
});
var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
if ($('#hme, #prt').css('opacity') == 0) {
$('#hme, #prt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #prt').animate({
opacity: 0
}, 300);
}
if ($('#abt').offset().left == (abtLeft - 210)) {
$(this).animate({
left: "+=210"
}, 450);
} else {
$(this).animate({
left: "-=210"
}, 450);
}
});
var prtLeft = $('#prt').offset().left;
//When About tab is clicked
$('#prt').click(function() {
if ($('#hme, #abt').css('opacity') == 0) {
$('#hme, #abt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #abt').animate({
opacity: 0
}, 300);
}
if ($('#prt').offset().left == (prtLeft - 430)) {
$(this).animate({
left: "+=430"
}, 450);
} else {
$(this).animate({
left: "-=430"
}, 450);
}
});
}
$(document).ready(main);
body {
background: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');
}
.mvLeft {
right: 215px;
}
#bckDrp {
left: 50%;
transform: translate(-50%, 0);
position: fixed;
width: 85%;
height: 100%;
background: url('http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/18.jpg');
}
#nav {
background: rgba(0, 0, 0, 0.20);
}
.padExt {
width: 100%;
height: 100%;
padding: 10px;
}
#nwsArea {
height: 65%;
width: 40%;
background-color: grey;
-webkit-transition: transform 1s, box-shadow 1s;
border: 2px solid silver;
box-shadow: 0 0 15px #777;
}
#nwsArea:hover {
transform: skewY(3deg);
box-shadow: -5px 15px 10px #777;
}
#nwsTtl {
height: 100px;
width: 100%;
background-color: white;
border-radius: 5px;
text-align: center;
border: 2px solid black;
}
#nwsTtl:hover {
background-color: #E3E3E3;
}
#nwsTxt {
font-family: 'Roboto Condensed', sans-serif;
font-size: 40px;
}
#ruschin {
height: 90%;
width: 90%;
padding: 5%;
}
#xBttn {
height: 20px;
padding: 8px;
position: absolute;
display: none;
}
#navLst {
margin: 0 auto;
text-align: center;
}
li {
list-style-type: none;
display: inline-block;
-webkit-transition: color .5s;
}
li:hover {
color: #2B2B2B;
}
.navOp {
padding: 50px;
font-size: 40px;
font-family: 'Droid Sans', sans-serif;
}
#abt,
#prt {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='bckDrp'>
<div id='nav'>
<img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
<div class='padExt'>
<div id='nwsArea'>
<img src='https://www.scmp.com/sites/default/files/2014/05/20/tpbje20140520272_43042097.jpg' id='ruschin'>
<div id='nwsTtl'>
<h3 id='nwsTxt'>Russia and China begin joint military drill</h3>
</div>
</div>
</div>
</div>