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 would please like an explanation to why the slideshow is not working. Below I have used an interval to perpetually change the slideshow, if userClick is false. The white and squared buttons (made of divs) are set to call upon two functions; slideRight() or slideLeft() and clicked(). When the buttons are clicked however, the clicked() function does not seem to change the variable, based on the data on top of the page.
<body>
<div class="page-wrapper">
<header>
<div class="headContent">
<h1 class="titleText">Slideshow</h1>
<h2 class="subTitleText">A slideshow made with JavaScript.</h2>
<p>userClick <span id="uc"></span></p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<div class="body-wrapper">
<h1 class="titleText">Slideshow</h1>
<div id="slideshow">
<div id="leftSlide" onclick="leftSlide(); clicked()"></div>
<div id="rightSlide" onclick="rightSlide(); clicked()"></div>
</div>
<p>The image is not invoked by a tag, but invoked by the background property using Javascript.</p>
</div>
<footer>
<p id="footerText">© 2017 <br>Designed by JastineRay</p>
</footer>
</div>
<script language="javascript">
// Slide function
var slide = ["minivan", "lifeinthecity", "sunsetbodyoflove"];
var slideTo = 1;
window.onload = getSlide();
// Previous Image
function leftSlide() {
if (slideTo != 0) {
slideTo = slideTo - 1;
} else if (slideTo == 0) {
slideTo = slide.length - 1;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
// Next Image
function rightSlide() {
if (slideTo != (slide.length - 1)) {
slideTo = slideTo + 1;
} else if (slideTo == (slide.length - 1)) {
slideTo = 0;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
function getSlide() {
imageURL = 'url(images/' + slide[slideTo] + '.jpg)';
document.getElementById("slideshow").style.backgroundImage = imageURL;
}
// Interval Slideshow & Check if user clicked (timeout)
var userClick = false;
window.onload = slideInterval(5000);
// Start Slideshow
function slideInterval(interval) {
while (userClick = false) {
setInterval(function() {
rightSlide();
}, interval)
}
}
// Stop Slideshow and start timeout
function clicked() {
userClick = true;
setTimeout(function() {
userClick = false;
slideInterval();
}, 2000)
}
window.onload = function() {
setInterval(document.getElementById("uc").innerHTML = userClick), 100
}
</script>
</body>
CSS coding below.
* {
margin: 0;
padding: 0;
}
.page-wrapper {
width: 100%;
}
// Class Styling
.titleText {
font-family: monospace;
font-size: 40px;
}
.subTitleText {
font-family: monospace;
font-size: 20px;
font-weight: normal;
}
// Header Styling
header {
height: 500px;
}
.headContent {
margin: 30px 7%;
}
// Navigation Styling
nav {
overflow: hidden;
}
nav ul {
background: black;
background: linear-gradient(#595959, black);
list-style-type: none;
font-size: 0;
padding-left: 13.33%;
margin: 40px 0;
}
nav ul li {
padding: 15px 20px;
border-right: 1px solid #595959;
border-left: 1px solid #595959;
color: white;
display: inline-block;
font-size: 20px;
font-family: sans-serif;
}
// Body Styling
.body-wrapper {
}
.body-wrapper > .titleText {
text-align: center;
font-size: 50px;
}
#slideshow {
overflow: hidden;
margin: 20px auto;
border: 2px solid blue;
height: 350px;
max-width: 800px;
background-size: cover;
background-position: center;
position: relative;
}
#leftSlide {
position: absolute;
left: 40px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
#rightSlide {
position: absolute;
left: 100px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
// Footer Styling
Try changing the checking part to:
window.onload = function() {
setInterval(function () {
document.getElementById("uc").innerHTML = userClick;
}, 100);
}
The first argument of setInterval has to be a function (something that can be called), not a generic piece of code.
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>
In jQuery API written what .css() return String. This String have view like value without quotes.
If I'll put $(object).css(“margin”) in my code like this:
condition: this != object
$(this).animate({
width: "toggle",
margin: $(object).css("margin"),
padding: ($(object).css("padding"))
}, time, "linear");
"Chrome" work out perfectly, but "IE 11" and last "Edge" work out incorrect.
If I'll add to $(object).css(“margin”) quotes, all browser work identically.
How identically, You can see in code below.
Eventually I need code which independent of content. How to fix it ?
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".icon-language").click(function() {
slide($(".rightBlockMenu i"), $(this), time);
$(".hidden").delay(delay).animate({
width: "show"
}, time, "linear");
});
$(".icon-search-1").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-user-o").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-basket").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
})
function slide(selector, object, time) {
if (selector.not(object).css("display") != "none") {
selector.not(object).animate({
width: "hide",
margin: "0px -1px",
padding: "9px 0px"
}, time, "linear");
$(object).animate({
margin: "0"
}, time).addClass("active_i");
}
if (selector.not(object).css("display") == "none") {
selector.each(function (){
if ($(this).is(selector.last())) {
$(this).animate({
width: "show",
margin: "0 0 0 6px",
padding: "\"" + $(object).css("padding") + "\""
}, time, "linear");
$(this).removeClass("active_i");
} else {
$(this).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
}, time, "linear", function() {
if ($(this).is(selector.first())) {
$(this).css("margin-left", "0");
}
});
$(this).removeClass("active_i");
}
});
}
}
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1" >bbb</i>
<i class="icon-user-o" >ccc</i>
<i class="icon-basket" >ddd</i>
</div>
</div>
</div>
I tested your code on Firefox, Chrome and Edge and it seemed fine. Maybe clarify more what you are trying to achieve. In any case, your code seems a needlessly complicated.
Find below a shorter version of your code:
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".rightBlockMenu i").click(function() {
var currentElement = jQuery(this);
var margin = "0 6px";
var padding = "9px 18px";
var toggle = "show";
if (!currentElement.hasClass("active_i")) {
currentElement.addClass("active_i")
margin = "0";
padding = "9px 0";
toggle = "hide";
}
currentElement.siblings().each(function(index, elemenet) {
jQuery(elemenet).removeClass("active_i").animate({
width: toggle,
margin: margin,
padding: padding
}, time, "linear", function() {
// Show element after it was hidden
if (currentElement.hasClass("icon-language")) {
setTimeout(function() {
jQuery(elemenet).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
});
}, delay);
}
if (toggle == 'show')
$(".rightBlockMenu i").removeClass("active_i");
});
});
});
});
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1">bbb</i>
<i class="icon-user-o">ccc</i>
<i class="icon-basket">ddd</i>
</div>
</div>
</div>