I have multiple html5 range sliders on my page, this was working for one however I can't make this work for seperate sliders. They should have no relation, so the user can select a score on each different question.
I know the jQuery code should target the slider, however I cannot get this to work. We are going to be using around 20 of these sliders, so need this to be dynamic really.
var sheet = document.createElement('style'),
$rangeInput = $('.range input'),
prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];
document.body.appendChild(sheet);
var getTrackStyle = function(el) {
var curVal = el.value,
val = (curVal - 1) * 25,
style = '';
// Set active label
$('.range-labels li').removeClass('active selected');
var curLabel = $('.range-labels').find('li:nth-child(' + curVal + ')');
curLabel.addClass('active selected');
curLabel.prevAll().addClass('selected');
//curLabel.addClass('halfselect');
// Change background gradient
for (var i = 0; i < prefs.length; i++) {
style += '.range {background: linear-gradient(to right, #a50e2d 0%, #a50e2d ' + val + '%, #fff ' + val + '%, #fff 100%)}';
style += '.range input::-' + prefs[i] + '{background: linear-gradient(to right, #a50e2d 0%, #a50e2d ' + val + '%, #b2b2b2 ' + val + '%, #b2b2b2 100%)}';
}
return style;
}
$rangeInput.on('input', function() {
sheet.textContent = getTrackStyle(this);
});
// Change input value on label click
$('.range-labels li').on('click', function() {
var index = $(this).index();
$rangeInput.val(index + 1).trigger('input');
});
body {
padding: 100px;
}
.range {
position: relative;
width: 100%;
height: 5px;
}
.range input {
width: 100%;
position: absolute;
top: 2px;
height: 0;
-webkit-appearance: none;
}
.range input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
margin: -16px 0 0 0;
border-radius: 50%;
background: #a50e2d;
cursor: pointer;
border: 0 !important;
}
/*
.range input::-moz-range-thumb {
width: 30px;
height: 30px;
margin: -8px 0 0;
border-radius: 50%;
background: #a50e2d;
cursor: pointer;
border: 0 !important;
}
.range input::-ms-thumb {
width: 30px;
height: 30px;
margin: -8px 0 0;
border-radius: 50%;
background: #a50e2d;
cursor: pointer;
border: 0 !important;
}
*/
.range input::-webkit-slider-runnable-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #272725;
}
.range input::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #272725;
}
.range input::-ms-track {
width: 100%;
height: 2px;
cursor: pointer;
background: #272725;
}
.range input:focus {
background: none;
outline: none;
}
.range input::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
.range-labels {
margin: 18px -11% 0;
padding: 0;
list-style: none;
display: flex;
position: relative;
}
.range-labels li {
position: relative;
text-align: center;
color: #272725;
font-size: 14px;
cursor: pointer;
flex: 1;
}
.range-labels li::before,
.halfselect::before {
position: absolute;
top: -37px;
right: 0;
left: 0;
content: "";
margin: 0 auto;
width: 30px;
height: 30px;
background: #272725;
border-radius: 50%;
}
.range-labels .active {
color: #a50e2d;
}
.range-labels .selected::before,
.range-labels .active::before {
background: #a50e2d;
}
.range-labels .active.selected::before {
display: none;
}
.halfselect {}
.halfselect:after {
position: absolute;
top: -23px;
right: auto;
left: 0;
content: "";
margin: 0 auto;
width: 50%;
height: 5px;
background: #a50e2d;
z-index: 9999;
}
span.question {
color: #272725 !important;
padding: 5px 0;
display: block;
width: 70%;
margin: auto;
}
span.inp-value {
position: absolute;
top: -60px;
display: block;
text-align: center;
width: 100%;
color: #272725;
}
<div class="questions">
<div class="range">
<input type="range" min="1" max="5" steps="1" value="1">
</div>
<ul class="range-labels" id="working-with-people-question1">
<li id="1" class="active selected"><span class="inp-value">1</span><span class="question">Shows little interest in or understanding of others</span></li>
<li id="2"><span class="inp-value">2</span></li>
<li id="3"><span class="inp-value">3</span></li>
<li id="4"><span class="inp-value">4</span></li>
<li id="5"><span class="inp-value">5</span><span class="question">Demonstrate an interest in and understanding of others</span></li>
</ul>
</div>
<div class="questions" style="padding-top: 100px">
<div class="range">
<input type="range" min="1" max="5" steps="1" value="1">
</div>
<ul class="range-labels" id="working-with-people-question1">
<li id="1" class="active selected"><span class="inp-value">1</span><span class="question">Question 2</span></li>
<li id="2"><span class="inp-value">2</span></li>
<li id="3"><span class="inp-value">3</span></li>
<li id="4"><span class="inp-value">4</span></li>
<li id="5"><span class="inp-value">5</span><span class="question">Question 2</span></li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Codepen here - https://codepen.io/scottYg55/pen/BazGamz
The problem is that getTrackStyle(this) is sending all the elements and not just (this). (this) is global and not set to the individual (this) function
I have a div which acts like a button when I press it. I add classes to change color and the circle inside moves to the right when is clicked. What I would like to do, is to call a function and then change a global variable inside the function and pass it back. I am also testing the code using the document.getElementById("test").innerHTML and the 12th changes to 13th and vise versa successfully. However, the variable flag13th does not change. It always has a false value.
Any ideas folks on this? I would appreciate your help. Thank you.
document.getElementById("toggleButton").addEventListener("click", dekatosTritos);
var flag13th = false;
function dekatosTritos() {
var ThirteenthSalary = document.getElementById("toggleButton").classList;
if ((ThirteenthSalary.contains("toggle-btn")) && (ThirteenthSalary.contains("active"))) {
flag13th = false;
document.getElementById("test").innerHTML = "12th";
} else {
flag13th = true;
document.getElementById("test").innerHTML = "13th";
}
}
document.getElementById("test11").innerHTML = flag13th;
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test">12th</p>
<p id="test11"> </p>
Here's an example that uses no JavaScript, but rather an input type checkbox that can be submitted with your form:
.toggler {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
opacity: 0;
}
.toggler-btn {
display: inline-block;
position: relative;
width: 60px;
height: 28px;
border-radius: 28px;
cursor: pointer;
background: gray;
transition: background 0.3s;
}
.toggler-btn:after {
content: "";
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 100%;
transition: transform 0.3s;
}
.toggler-label::after {
content: attr(data-label);
}
/* CHECKED STATES */
.toggler:checked ~ .toggler-btn {
background: #0bf;
}
.toggler:checked ~ .toggler-btn:after {
transform: translateX(30px);
}
.toggler:checked ~ .toggler-label::after {
content: attr(data-labelchecked);
}
<div class="Question_13th">13th Month Salary?</div>
<input class="toggler" type="checkbox" id="13th" name="13th">
<label class="toggler-btn" for="13th"></label>
<div class="toggler-label" data-label="12th" data-labelchecked="13th"></div>
Here's an example that uses JavaScript, classList.toggle() and bool = !bool to toggle a boolean
const EL_btn = document.querySelector("#toggleButton");
const EL_test = document.querySelector("#test");
let is13 = false;
function dekatosTritos() {
is13 = !is13; // Toggle boolean
EL_btn.classList.toggle('active', is13);
EL_test.innerHTML = is13 ? "13th" : "12th";
}
EL_btn.addEventListener("click", dekatosTritos); // Do on btn click
dekatosTritos(); // and on init.
.toggle-btn {
display: inline-block;
position: relative;
top: 8px;
width: 60px;
height: 28px;
background: gray;
border-radius: 30px;
}
.toggle-btn.active {
background: #4F94CD;
}
.toggle-btn .inner-circle {
position: absolute;
left: 4px;
top: 4px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 80%;
}
.toggle-btn.active>.inner-circle {
margin-left: 32px;
}
<div class="Question_13th">13th Month Salary</div>
<div id="toggleButton" class="toggle-btn">
<div class="inner-circle"></div>
</div>
<p id="test"></p>
I am creating a sort-of popup menu that is specific to each .smallCatalogBlock div. The circle you see under the title is the trigger. The issue I am having is that if you click on the blue circle, both popup menus fadeIn, when it should only be that specific one.
The same applies to the popup title. It uses only the first .smallCatalogBlock information, opposed to the one clicked on.
Does anyone know how I can leave this in the dynamic setup I am going for, while populating the specific information for the one clicked on?
var catalogName = $('.smallCatalogBlock').data('fill-specs');
//Filling Circle
$('.catalogSmallCircle').html(
'<div class="catalogSmallCircleIn" data-catalog-name=' + catalogName + '><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
//Circle Expand
$('.catalogSmallCircleIn').on('click', function() {
// old $('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
$(this).closest('.catalogSmallCircle').addClass('rectangle').find('.catalogSmallCircleIn').hide();
// old $('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//$(this).closest('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
$('.catalogCircleExpand').fadeIn(100).addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
$('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
$('.catalogSmallCircle').removeClass('rectangle').find('.catalogSmallCircleIn').fadeIn();
$('.catalogCircleExpand').hide().removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0, 0, 0, .9);
border: 2px solid #FFF;
webkit-transition: all 1s;
transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right, #225DB8, #4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s;
transition: all 1s;
transform: translate(-45%, -45%);
-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
<div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
You have to loop over the smallCatalogBlocks and build them individually, otherwise they will all have the same catalog name. And then in your event handlers, you have to make all your selectors be contextual lookups.
I ran the modified code, and it appears to be building the circles correctly, however for some reason the text is not showing up on them, even though the text is there if you inspect the element. Didn't figure that part out, but this should show you at least how to do the contextual logic and the looping to build the elements.
$('.smallCatalogBlock').each(function(index, catalogBlock){
var catalogName = $(catalogBlock).data('fill-specs');
console.log(catalogName);
//Filling Circle
$('.catalogSmallCircle', catalogBlock).html(
'<div class="catalogSmallCircleIn" data-catalog-name='+ catalogName +'><div class="total-center"><div class="circlePlus"></div></div></div><div class="catalogCircleExpand"><div class="catalogExpandClose">x</div><div class="total-center expandText"><span class="catalogName pdfSubHeader"></span><p class="dGw circleExpandText"></p><button class="catalogDownload downloadButton" name="Profile_Catalog" data-catalog-now="Profile Small Catalog Button" data-catalog-view-name="Profile Catalog">View</button><button class="catalogDownload requestButton" data-catalog-name="Profile Catalog">Request</button></div></div>'
)
});
//Circle Expand
$('.catalogSmallCircleIn').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.addClass('rectangle')
.find('.catalogSmallCircleIn')
.hide();
$smallCircle
.find('.catalogCircleExpand')
.fadeIn(100)
.addClass('rectangle');
//Getting Catalog Name
let catalogChoice = $(this).data('catalog-name');
console.log(catalogChoice);
$smallCircle.find('.catalogName').html(catalogChoice);
event.stopPropagation();
});
//Close Circle
$('.catalogExpandClose').on('click', function(event) {
var $smallCircle = $(this).closest('.catalogSmallCircle');
$smallCircle
.removeClass('rectangle')
.find('.catalogSmallCircleIn')
.fadeIn();
$smallCircle
.find('.catalogCircleExpand')
.hide()
.removeClass('rectangle');
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 25%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.smallCatalogButtonWrap {
margin-top: 15px;
width: 100%;
position: relative;
}
.catalogSmallCircle {
background: #225DB8;
width: 70px;
height: 70px;
position: absolute;
margin: 10px auto;
left: 90%;
-webkit-transform: translateX(-50%);transform: translateX(-50%);
border-radius: 100%;
box-shadow: 0 0 20px rgba(0,0,0,.9);
border: 2px solid #FFF;
webkit-transition: all 1s;transition: all 1s;
cursor: pointer;
}
.catalogSmallCircle.rectangle {
border-radius: 0;
border: 2px solid #094765;
background: linear-gradient(to bottom right,#225DB8,#4174C2);
width: 400px;
min-height: 200px;
webkit-transition: all 1s; transition: all 1s;transform: translate(-45%, -45%);-webkit-transform: translate(-45%, -45%);
z-index: 1;
cursor: auto;
}
.catalogSmallCircleIn {
width: 100%;
height: 100%;
position: relative;
}
.circlePlus {
background-size: 30px 30px;
width: 30px;
height: 30px;
display: block;
margin: 0 auto;
z-index: 1;
}
.catalogCircleExpand {
height: 0;
display: none;
opacity: 0;
webkit-transition: all .5s;
transition: all .5s;
}
.catalogCircleExpand.rectangle {
opacity: 1;
height: auto;
webkit-transition: all .5s;
transition: all .5s;
transition-delay: .4s;
-webkit-transition-delay: .4s;
padding: 10px 0;
}
.expandText .catalogDownload {
font-size: 1.1rem;
padding: .7em 1.1em;
}
.expandText .pdfSubHeader {
font-size: 1.1rem;
}
.catalogExpandClose {
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
<div class="smallCatalogBlock" data-fill-specs="Catalog">
<span class="smallCatalogTitle">Catalog</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div><div class="smallCatalogBlock" data-fill-specs="Technology">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>
</div>
I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.
I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.
I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV
$('.dot').click(function() {
$('div.toggle-active').removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>
Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.
$('.dot').click(function() {
$('div.toggle-active').not($(this).next()).removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>
Updated to check whether the tooltip was already being displayed before displaying it.
$('.dot').click(function() {
var displayed = $(this).next().attr('class').match('toggle-active');
$('div.toggle-active').removeClass('toggle-active');
if(!displayed){
$(this).next().toggleClass('toggle-active');
}
});
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is a pre made website. I am working on it, and I am okay with CSS and HTML, but I don't have much experience with Java. I think that the problem is with Java. I would really like the dots to not be there where the list items just rotate without the dots appearing below.
/*! http://responsiveslides.com v1.54 by #viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
#slider3,#slider4 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 61%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 62px;
width: 45px;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
a.callbacks_nav.callbacks1_nav.prev {
background: transparent url("../images/themes.png") no-repeat 0px 0px;
left: -3.1%;
}
.callbacks_nav.next {
background: transparent url("../images/themes.png") no-repeat -46px 0px;
left: 100%;
}
#slider3-pager a,#slider4-pager a {
display: inline-block;
}
#slider3-pager span,#slider4-pager span{
}
#slider3-pager span,#slider4-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a ,#slider4-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a ,#slider4-pager a {
padding: 0;
}
#slider3-pager li, #slider4-pager li{
display:inline-block;
}
.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{
position: relative;
display: block;
}
<div class="banner-info">
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<div id="top" class="callbacks_container">
<ol class="rslides" id="slider3">
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>
We simplify HR so you can focus on your business!</h4>
</div>
</li>
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>We are committed to helping grow your business!</h4>
</div>
</li>
<li>
<div class="banner-text">
<h3>Strategic Benefits Design</h3>
<h4>We give you exactly what you need!</h4>
</div>
</li>
</ol>
</div>
</div>
You got the following code in your HTML file:
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
Change pager: true, to pager: false, and see if it works. I don't know if it will for sure, but this would be the first thing I would try after seeing the ResponsiveSlides.js website.