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
Related
Long story short, I used this source, to simulate a case opening: https://codepen.io/zheleznov/pen/POXMdO
<div class="raffle-roller-holder">
<div class="raffle-roller-container" style="margin-left: 0px;">
</div>
</div>
</div>
<center><span style="font-size: 25px;">You winning is <span style="color: green;" id="rolled">rolling</span>
<br>
<button onclick="generate(1);">go</button>
<button onclick="window.location='';">reset</button></center>
<br>
<div class="inventory"></div>
#import url('https://fonts.googleapis.com/css?family=Arvo');
body {
background: rgb(25,25,33);
}
.raffle-roller {
height: 100px;
position: relative;
margin: 60px auto 30px auto;
width: 900px;
}
.raffle-roller-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.raffle-roller-holder {
overflow: hidden;
border-radius: 2px;
border: 1px solid #3c3759;
}
.raffle-roller-holder {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 100%;
}
.raffle-roller-container {
width: 9999999999999999999px;
max-width: 999999999999999999px;
height: 100px;
background: #191726;
margin-left: 0;
transition: all 8s cubic-bezier(.08,.6,0,1);
}
.raffle-roller-holder:before {
content: "";
position: absolute;
border: none;
z-index: 12222225;
width: 5px;
height: 100%;
left: 50%;
background: #d16266;
}
.item {
display: inline-block;
float: left;
margin: 4px 0px 0.5px 5px;
width: 85px;
height: 88px;
float: left;
border: 1px solid #70677c;
background: #14202b;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.class_red_item {
border-bottom: 4px solid #EB4B4B;
}
img {
border: 0;
vertical-align: middle;
}
.winning-item {
border: 2px solid #66b233;
position: relative;
top: -1px;
border-bottom: 4px solid #66b233;
}
.inventory {
margin: 0 auto;
width: 960px;
max-width: 953px;
padding: 10px 15px 6px;
height: auto;
border: 2px solid #1c3344;
background: #0e1a23;
}
.inventory > .item {
float: none;
cursor: pointer;
margin: 4px 2px 0.5px 2px;
}
.inventory > .item:hover {
background-size: 90%;
background-color: #182a38;
}
.inventory > .item:active {
height: 83px;
width: 80px;
position: relative;
top: -2px;
border: 2px solid #356d27;
border-bottom: 4px solid #356d27;
}
var items = {
simple: {
skin: "M4A1-S | Cyrex",
img: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_silencer_cu_m4a1s_cyrex_light_large.144b4053eb73b4a47f8128ebb0e808d8e28f5b9c.png"
},
middle: {
skin: "M4A1-S | Chantico's Fire",
img: "https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou-6kejhz2v_Nfz5H_uO1gb-Gw_alIITCmX5d_MR6j_v--YXygED6_UZrMTzwJYSdJlU8N1zY81TrxO_v0MW9uJnBm3Rk7nEk5XfUmEeyhQYMMLIUhCYx0A"
},
super: {
skin: "M4A4 | Asiimov",
img: "https://steamcdn-a.akamaihd.net/apps/730/icons/econ/default_generated/weapon_m4a1_cu_m4_asimov_light_large.af03179f3d43ff55b0c3d114c537eac77abdb6cf.png"
}
};
function generate(ng) {
$('.raffle-roller-container').css({
transition: "sdf",
"margin-left": "0px"
}, 10).html('');
var randed2 = prompt('enter skin(1-asiimov,3-cyrex,2-chantico)','');
for(var i = 0;i < 101; i++) {
var element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.simple.img+');"></div>';
var randed = randomInt(1,1000);
if(randed < 50) {
element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.super.img+');"></div>';
} else if(500 < randed) {
element = '<div id="CardNumber'+i+'" class="item class_red_item" style="background-image:url('+items.middle.img+');"></div>';
}
$(element).appendTo('.raffle-roller-container');
}
setTimeout(function() {
if(randed2 == 2) {
goRoll(items.middle.skin, items.middle.img);
} else if(randed2 == 1) {
goRoll(items.super.skin, items.super.img);
} else {
goRoll(items.simple.skin, items.simple.img);
}
}, 500);
}
function goRoll(skin, skinimg) {
$('.raffle-roller-container').css({
transition: "all 8s cubic-bezier(.08,.6,0,1)"
});
$('#CardNumber78').css({
"background-image": "url("+skinimg+")"
});
setTimeout(function() {
$('#CardNumber78').addClass('winning-item');
$('#rolled').html(skin);
var win_element = "<div class='item class_red_item' style='background-image: url("+skinimg+")'></div>";
$(win_element).appendTo('.inventory');
}, 8500);
$('.raffle-roller-container').css('margin-left', '-6770px');
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
I managed to add multiple case openings at once, and other stuffs, but, what I want to add now is that, to play a sound when a div passes a certain offset.
I've tried to check where is the middle position, using offsetLeft, and I got 411.
My question is, can I add sound everytime a div passes that offset?
Or is there any other way to play a sound individually for each div?
(The effect I want to get is this one: https://www.youtube.com/watch?v=9ChsGHLPyG8)
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 page that I need to convert to rtl.
The active tab & tab arrow position doesn't match.
I need to change the tab arrow position from TAB 1 to TAB 2 and vice versa.
I already changed some js value but in vain
HTML :
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<label><input name="tab" type="radio">TEXT</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS :
body {
direction:rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0,-12px,0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] { display: none; }
.search-type label {
background-color: #fff;
color: #333;
cursor: pointer;
display:inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
float: right;
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(-3px,0,0);
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
.main-search-box.no-shadow {
box-shadow: none;
padding: 0;
margin: 0;
}
.search-container .main-search-input input {
font-weight: 500;
font-size: 17px;
height: 57px !important;
float: right;
box-sizing: border-box;
border: none;
float: right;
height: auto;
}
.search-container .main-search-input button.button {
width: initial;
min-width: 100px;
max-width: 100px;
margin: 0;
font-size: 18px;
position: relative;
margin-right: 20px;
flex: 0 auto;
height: 57px;
}
.search-container .main-search-input button.button i {
position: relative;
right: 2px;
}
JS :
(function($){
"use strict";
$(document).ready(function(){
function searchTypeButtons() {
// Radio attr reset
$('.search-type label.active input[type="radio"]').prop('checked',true);
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css('right', arrowDist + (buttonWidth/2) );
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
// Positioning indicator arrow
var buttonWidth = $('.search-type label.active').width();
var arrowDist = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
'right': arrowDist + (buttonWidth/2),
'transition':'right 0.4s cubic-bezier(.87,-.41,.19,1.44)'
});
});
}
// Init
if ($(".main-search-form").length){
searchTypeButtons();
$(window).on('load resize', function() { searchTypeButtons(); });
}
// ------------------ End Document ------------------ //
});
})(this.jQuery);
I'm using bootstrap, bootstrap rtl flipped & jquery 2.2.0 as external ressources.
Here's the snippet:
https://jsfiddle.net/s3hy37nd/5/
Can someone help with that?
So many errors... I can only say I tried to comment them all inside the code so... yeah it's all there:
"use strict";
jQuery(function($) { // DOM ready and $ alias secured
// Radio attr reset (on DOM ready... makes sense?)
$('.search-type label.active input[type="radio"]').prop('checked', true);
function repositionArrow() { // Use a meaningful fn name
// Positioning indicator arrow
// Width? No. You need .outerWidth! you have paddings!!
var buttonWidth = $('.search-type label.active').outerWidth();
// Again use meaningful names
// If you do console.log( $('.search-type label.active').position() );
// you'll see no `.right` property. So yeah, use .left
var posLeft = $('.search-type label.active').position().left;
$('.search-type-arrow').css({
left: posLeft + (buttonWidth / 2)
// No need for transition here - move it to Stylesheet instead
});
}
// Init
if ($(".main-search-form").length) {
// You might want this too inside the "if"
$('.search-type label').on('change', function() {
$('.search-type input[type="radio"]').parent('label').removeClass('active');
$('.search-type input[type="radio"]:checked').parent('label').addClass('active');
repositionArrow(); // Now you have such function
});
repositionArrow();
$(window).on('load resize', repositionArrow);
}
});
body {
direction: rtl;
color: #707070;
background-color: #cccccc;
}
.parallax {
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
z-index: 99;
}
.parallax-overlay {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 101;
background-color: #333;
opacity: 0.4;
}
.parallax-content {
position: relative;
z-index: 999;
padding: 105px 0;
}
.main-search-container {
transform: translate3d(0, -12px, 0);
}
.main-search-form {
width: 660px;
display: block;
margin: 0 auto;
position: relative;
margin-top: 35px;
}
.search-type {
display: inline-block;
padding-bottom: 35px;
position: relative;
}
.search-type input[type="radio"] {
display: none;
}
.search-type label {
position: relative;
/* YOU NEED SOME POSITION! */
background-color: #fff;
color: #333;
cursor: pointer;
display: inline-block;
text-align: center;
padding: 9px 18px;
margin: 0 0 0 15px;
/*float: right; WHY? you use rtl already */
transition: all 0.2s;
border-radius: 3px;
}
.search-type label:hover,
.search-type label.active {
background-color: #66676b;
color: #fff;
}
.search-type-arrow {
width: 0;
height: 0;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
border-bottom: 15px solid #fff;
position: absolute;
bottom: 0;
/*right: 0; ...Nope. See JS, we need left */
left: calc(100% - 30px);
/* calc to the rescue */
/*transform: translate3d(-3px,0,0); but why */
transition: left 0.4s cubic-bezier(.87, -.41, .19, 1.44);
/* Moved from JS */
}
.main-search-box {
background-color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);
padding: 30px;
padding-bottom: 20px;
margin-top: -9px;
border-radius: 3px;
}
<div class="parallax-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-search-container">
<form class="main-search-form">
<div class="search-type">
<label class="active"><input class="first-tab" name="tab" checked="checked" type="radio">TAB 1</label>
<label><input name="tab" type="radio">TAB 2</label>
<label><input name="tab" type="radio">TAB 3</label>
<div class="search-type-arrow"></div>
</div>
<div class="main-search-box">
<div class="main-search-input larger-input">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
Updated jsFiddle
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');
}
});