JavaScript. How to control background image slide show to synchronize with bubbles - javascript

I am trying to create backgroundImage slide show with bubbles. i was working very fine untill i added eventListeners for mouseover and mouseout.
mouseover enent clears the setInterval while the mouseout calls back the setInterval().
The execution is triggered with the setInterval in the window load event.
i dont know if my explained my problem very well
var bubble_Array;
var bubble_i = 0;
var intrval;
var ba;
var bi =0;
var intr;
var man = ['url(imags/ParLour.jpg', 'url(imags/767.jpg', 'url(imags/7series.jpg', 'url(imags/02.jpg', 'url(imags/BedRoom.jpg', 'url(imags/30.jpg', 'url(imags/volks.jpg', 'url(imags/sports.jpg', 'url(imags/real.jpg', 'url(imags/portable.jpg', 'url(imags/perspective.jpg', 'url(imags/green.jpg', 'url(imags/fantom.jpg', 'url(imags/fantom2.jpg', 'url(imags/elegance.jpg', 'url(imags/bridge.jpg', 'url(imags/BMW.jpg', 'url(imags/interior.jpg','url(imags/3Dcar007.jpg'];
function _(x){
return document.getElementById(x);
}
function bubbleMain(bi){
bubble_i++;
if(bubble_i == man.length){
bubble_i = 0;
}
_('bubblebox').style.opacity = 0;
for (var i =0; i < ba.length; i ++){
ba[i].style.background = "rgba(0,0,0,.1)";
}
setTimeout(function(){
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.background = "red";
_("bubblebox").style.opacity = 1;
}, 500);
}
function bubbleSlide(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
bi++;
if (bi == ba.length){
bi =0;
}
bubbleMain(bi);
}
window.addEventListener("load", function(){
ba = _('bubbles').children;
_('bubblebox').style.backgroundImage = man[bubble_i];
ba[bi].style.backgroundColor = 'red';
intrval = setInterval(bubbleSlide, 2000);
})
window.addEventListener("mouseover", function(){
clearInterval(intrval);
})
window.addEventListener("mouseout", function(){
intrval = setInterval(bubbleSlide, 2000);
})
#bubblebox{
height: 550px;
width: 1200px;
border:2px solid black;
margin: 50px auto;
background-repeat: no-repeat;
z-index: -5;
background-size: cover;
transition:background-image 0.2s;
transition: opacity 0.3s linear 0s;
}
#bubbles{
height: 0px;
width: auto;
text-align: center;
z-index: 100;
position: absolute;
}
#bubbles div{
height: 20px;
width: 20px;
background: rgba(0,0,0,.1);
border: 2px solid green;
border-radius: 100%;
display: inline-block;
position: relative;
margin: 0px auto;
top: 10px;
z-index: 1000;
left: 310px;
color:#fff;
cursor: pointer;
}
#heading{
height: 20px;
width: 200px;
background-color: red;
position: relative;
top: 100px;
left: 500px;
color: #fff;
text-align: center;
}
#arrow_right, #arrow_left, #arrow_middle{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 1100px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(225deg);
}
#arrow_right2, #arrow_left2, #arrow_middle2{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -4px 4px 0 rgb(255, 255, 255);
cursor: pointer;
left: 10px;
position: relative;
margin: 0 -10px 0 0px;
top: 200px;
border-bottom: 3px solid black;
border-left: 3px solid black;
transform: rotate(45deg);
tex
}
#arrow_right2:hover, #arrow_left2:hover, #arrow_middle2:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
#arrow_right:hover, #arrow_left:hover, #arrow_middle:hover{
box-shadow: -5px 5px 0 rgb(255, 255, 255);
}
<div id="bubblebox">
<div id="bubbles">
<div onclick="bubbleMain(0)">1</div>
<div onclick="bubbleMain(1)">2</div>
<div onclick="bubbleMain(2)">3</div>
<div onclick="bubbleMain(3)">4</div>
<div onclick="bubbleMain(4)">5</div>
<div onclick="bubbleMain(5)">6</div>
<div onclick="bubbleMain(6)">7</div>
<div onclick="bubbleMain(7)">8</div>
<div onclick="bubbleMain(8)">9</div>
<div onclick="bubbleMain(9)">10</div>
<div onclick="bubbleMain(10)">11</div>
<div onclick="bubbleMain(11)">12</div>
<div onclick="bubbleMain(12)">13</div>
<div onclick="bubbleMain(13)">14</div>
<div onclick="bubbleMain(14)">15</div>
<div onclick="bubbleMain(15)">16</div>
<div onclick="bubbleMain(16)">17</div>
<div onclick="bubbleMain(17)">18</div>
<div onclick="bubbleMain(18)">19</div>
<div onclick="bubbleMain(19)">20</div>
</div>
<div id="heading">Caption</div>
<div id="arrow_right"></div>
<div id="arrow_middle"></div>
<div id="arrow_left"></div>
<div id="arrow_right2"></div>
<div id="arrow_middle2"></div>
<div id="arrow_left2"></div>
<div id="bubblecontent"></div>
</div>

Related

Elements not visible on page

I moved a page from my old site to my new one, and cannot for the life of me figure out why the CSS isn't working.
https://ericaheinz.com/art/turrell/
It should have 5 concentric white ovals in the middle. I've inspected everything, the divs and CSS are there but they won't show up.
Here's the JS/CSS/HTML
// color looping
// http://forrst.com/posts/Endlessly_Looping_Background_Color_jQuery_Functi-ey7
var colors = new Array('#077bf4', '#9554d6', '#e62e5c', '#ff9466', '#CCCCCC', '#ffbe0a', '#46b3f2', '#70dab3', '#af93af', '#e51717', '#ffd1d9');
var color_index = 0;
var interval = 3000;
function bg_color_tween() {
$('body').animate({ backgroundColor: colors[color_index] }, interval, 'linear', function() {
if(color_index === colors.length) { color_index = 0; }
else { color_index++; }
bg_color_tween();
});
}
// rotation
$(document).ready(function() {
bg_color_tween();
$('.turrell').each(function(){
var r=Math.floor(Math.random()*90);
$('.carton').css({
'-moz-transform':'rotate('+r+'deg)',
'-webkit-transform':'rotate('+r+'deg)',
'transform':'rotate('+r+'deg)'
});
var t=Math.floor(Math.random()*10)+2;
var l=Math.floor(Math.random()*7)+3;
$('.egg').css({
'top':t+'%',
'left':l+'%'
});
});
});
.carton {
height: 95%;
width: 90%;
margin-left: 10%;
text-align: center;
position: relative;
z-index: -10;
}
.egg {
height: 76%;
width: 80%;
position: relative;
top: 12%;
left: 10%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
-webkit-box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.4);
color: #FFF;
}
.art-caption {
position: absolute;
bottom: 20px;
left: 3.5%;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 11px;
line-height: 13px;
margin: 0;
padding: 0;
}
.art-caption a {
color: #FFF;
opacity: .3;
transition: all 0.25s ease-in-out;
}
.art-caption a:hover {
opacity: .8;
}
<body class="turrell">
<div class="container">
<div class="carton">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<div class="egg">
<!-- THE LIGHT -->
</div>
</div>
</div>
</div>
</div>
</div>
<h6 class="art-caption">Homage to <em>Aten Reign</em> by James Turrell</h6>
</div>
</body>
You're missing "height" attributes in html, body and .container div. If you inspect, they had height 0 which simply do not display them.
If i added height: 100% to all of them, this is what i saw:

hide an element on mousemove, if mouse enters a particular region

$(document).ready(function() {
var mx, my, anime = false;
var e_top = $('.panel-dock').css('top').split('px')[0]
var e_bottom = $('.panel-dock').css('height').split('px')[0]
e_top = parseFloat(e_top)
e_bottom = parseFloat(e_bottom)
$(document).mousemove(function(e) {
if (anime) {
return;
}
mx = parseFloat(e.clientX);
my = parseFloat(e.clientY);
console.log(my, e_top, e_bottom)
if (mx <= 80) {
//if (my >= e_top && my <= e_bottom) {
anime = true;
$('.panel-dock').animate({
left: 0,
}, 'fast', function() {
anime = false;
});
//}
} else if (mx > 80) {
//if (my < e_top && my > e_bottom) {
anime = true;
$('.panel-dock').animate({
left: -60,
}, 'slow', function() {
anime = false;
});
//}
}
});
});
.panel-menu,
.g-tip,
h4,
h5,
p {
font-family: 'Ubuntu', sans-serif;
font-size: 11pt;
}
.panel-dock {
position: fixed;
top: calc(10em - 20px);
margin: 0;
background: #333;
opacity: 0.9;
border-radius: 0 6px 6px 0;
width: 3em;
height: max-content;
padding: 0.5em;
z-index: 1;
color: white;
box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.3);
float: left;
}
#media (max-height: 600px) {
.gadget-dock {
position: fixed;
top: calc(7em - 20px);
}
}
.panel-dock .panel-menu {
cursor: pointer;
width: 100%;
/* background: transparent; */
text-align: center;
z-index: 2;
padding: 2%;
letter-spacing: 0.06em;
margin-bottom: 10%;
margin-top: 10%;
border-radius: 3px;
}
.panel-dock .panel-menu:nth-child(n) {
border: 1px solid transparent;
border-top: 1px solid #585858;
border-bottom: 1px solid #585858;
}
.panel-dock .panel-menu:hover {
background: white;
}
.panel-dock .panel-icons {
background: -webkit-linear-gradient(250deg, #6da741 40%, #00a489 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 30px;
height: 30px;
display: inline-block;
}
.panel-dock .g-icon {
max-width: auto;
max-height: 30px;
}
.panel-dock .g-icon i {
margin-top: 25%;
}
.panel-dock .g-tip {
position: absolute;
left: 55px;
color: #6da741;
line-height: 1.3;
min-height: 30px;
box-shadow: 2px 2px 6px #e0e0e0;
z-index: 1;
letter-spacing: 0.006em;
padding: 5% 5% 0 5%;
border: 2px solid #eee;
border-radius: 8%;
text-align: center;
width: 125px;
background: #fff
}
.panel-dock .g-tip h5 {
display: inline-block;
text-transform: none;
text-shadow: 2px 3px 3px #e0e0e0;
letter-spacing: 0.06em;
color: #6da741;
}
.panel-dock .g-tip:before {
content: '';
position: absolute;
top: 25%;
left: -13%;
border: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
}
.t1 {
position: absolute;
top: 15px;
}
.t2 {
position: absolute;
top: 50px;
}
.t3 {
position: absolute;
top: 85px;
}
.t4 {
position: absolute;
top: 120px;
}
.t1,
.t2,
.t3,
.t4 {
display: none;
}
.tgl {
left: -80px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="panel-dock" id="g">
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg1"><i class="fa fa-th"></i></span>
</div>
<div class="g-tip t1">
<h5>Library</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg2"><i class="fa fa-plus"></i></span>
</div>
<div class="g-tip t2">
<h5>Create a post</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg3"><i class="fa fa-bookmark"></i></span>
</div>
<div class="g-tip t3">
<h5>Bookmarks</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg4"><i class="fa fa-heart"></i></span>
</div>
<div class="g-tip t4">
<h5>Favorites</h5>
</div>
</div>
</div>
Below code is working while I remove the condition if (my>=e_top && my<=e_bottom) and if (my<e_top && my>e_bottom). And, if mouse enters anywhere within mx <= 80 the panel is visible; otherwise, it slowly hides.
I want to show this panel if mouse is within 80px from left and between the start position of panel and it's height.
$(document).ready(function() {
var mx, my, anime = false;
var e_top = $('.panel').css('top').split('px')[0]
var e_bottom = $('.panel').css('bottom').split('px')[0]
$(document).mousemove(function(e) {
if (anime) {
return;
}
mx = e.clientX;
my = e.clientY;
// console.log(my, e_top, e_bottom)
if (mx<=80) {
if (my>=e_top && my<=e_bottom) {
anime = true;
$('.panel').animate({
left: '0',
}, 'fast', function () {
anime = false;
});
}
} else if (mx > 80) {
if (my<e_top && my>e_bottom) {
anime = true;
$('.panel').animate({
left: '-60',
}, 'slow', function () {
anime = false;
});
}
}
});
});
So, any solution?
You've got a couple problems here. First off, you're calculating the e_bottom wrong. You just looked at the height, but the bottom is the height plus the top, and you were trying to do it with strings, not numbers.
var e_top = parseFloat($('.panel-dock').css('top').split('px')[0])
var e_bottom = parseFloat($('.panel-dock').css('height').split('px')[0]) + e_top
And more importantly, your second commented out if statement: if (my < e_top && my > e_bottom) { could never return true, because it's impossible for my to be less than the top AND greater than the bottom. It needs to be an OR.
if (my < e_top || my > e_bottom) {
$(document).ready(function() {
var mx, my, anime = false;
var e_top = parseFloat($('.panel-dock').css('top').split('px')[0])
var e_bottom = parseFloat($('.panel-dock').css('height').split('px')[0]) + e_top
e_top = parseFloat(e_top)
e_bottom = parseFloat(e_bottom)
$(document).mousemove(function(e) {
if (anime) {
return;
}
mx = parseFloat(e.clientX);
my = parseFloat(e.clientY);
console.log(my, e_top, e_bottom)
if (mx <= 80) {
if (my >= e_top && my <= e_bottom) {
anime = true;
$('.panel-dock').animate({
left: 0,
}, 'fast', function() {
anime = false;
});
}
} else if (mx > 80) {
if (my < e_top || my > e_bottom) {
anime = true;
$('.panel-dock').animate({
left: -60,
}, 'slow', function() {
anime = false;
});
}
}
});
});
.panel-menu,
.g-tip,
h4,
h5,
p {
font-family: 'Ubuntu', sans-serif;
font-size: 11pt;
}
.panel-dock {
position: fixed;
top: calc(10em - 20px);
margin: 0;
background: #333;
opacity: 0.9;
border-radius: 0 6px 6px 0;
width: 3em;
height: max-content;
padding: 0.5em;
z-index: 1;
color: white;
box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.3);
float: left;
}
#media (max-height: 600px) {
.gadget-dock {
position: fixed;
top: calc(7em - 20px);
}
}
.panel-dock .panel-menu {
cursor: pointer;
width: 100%;
/* background: transparent; */
text-align: center;
z-index: 2;
padding: 2%;
letter-spacing: 0.06em;
margin-bottom: 10%;
margin-top: 10%;
border-radius: 3px;
}
.panel-dock .panel-menu:nth-child(n) {
border: 1px solid transparent;
border-top: 1px solid #585858;
border-bottom: 1px solid #585858;
}
.panel-dock .panel-menu:hover {
background: white;
}
.panel-dock .panel-icons {
background: -webkit-linear-gradient(250deg, #6da741 40%, #00a489 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 30px;
height: 30px;
display: inline-block;
}
.panel-dock .g-icon {
max-width: auto;
max-height: 30px;
}
.panel-dock .g-icon i {
margin-top: 25%;
}
.panel-dock .g-tip {
position: absolute;
left: 55px;
color: #6da741;
line-height: 1.3;
min-height: 30px;
box-shadow: 2px 2px 6px #e0e0e0;
z-index: 1;
letter-spacing: 0.006em;
padding: 5% 5% 0 5%;
border: 2px solid #eee;
border-radius: 8%;
text-align: center;
width: 125px;
background: #fff
}
.panel-dock .g-tip h5 {
display: inline-block;
text-transform: none;
text-shadow: 2px 3px 3px #e0e0e0;
letter-spacing: 0.06em;
color: #6da741;
}
.panel-dock .g-tip:before {
content: '';
position: absolute;
top: 25%;
left: -13%;
border: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
}
.t1 {
position: absolute;
top: 15px;
}
.t2 {
position: absolute;
top: 50px;
}
.t3 {
position: absolute;
top: 85px;
}
.t4 {
position: absolute;
top: 120px;
}
.t1,
.t2,
.t3,
.t4 {
display: none;
}
.tgl {
left: -80px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="panel-dock" id="g">
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg1"><i class="fa fa-th"></i></span>
</div>
<div class="g-tip t1">
<h5>Library</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg2"><i class="fa fa-plus"></i></span>
</div>
<div class="g-tip t2">
<h5>Create a post</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg3"><i class="fa fa-bookmark"></i></span>
</div>
<div class="g-tip t3">
<h5>Bookmarks</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg4"><i class="fa fa-heart"></i></span>
</div>
<div class="g-tip t4">
<h5>Favorites</h5>
</div>
</div>
</div>

Transition from right to left

I need to change some background color with a smooth transition from right to left instead of just changing the color in a uniform way. I will now provide you my code, so that maybe it will be more clear.
NO jQuery/libraries allowed
HTML
<div id=astuccio>
<div class="cBox" id="cBox1">
<div class="color" id="color1"></div>
</div>
<div class="cBox" id="cBox2">
<div class="color" id="color2"></div>
</div>
<div class="cBox" id="cBox3">
<div class="color" id="color3"></div>
</div>
</div>
<button class="js" id="roll">⋁</button>
CSS
#astuccio {
grid-row: 1/2;
margin: auto;
}
.cBox {
width: 50px;
height: 50px;
display:inline-block;
margin: auto;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
border: 0.5px solid rgb(175,175,175);
box-sizing: content-box;
transition: 0.5s;
}
#cBox1 {
margin: auto 0px auto auto;
}
#cBox2 {
width: 100px;
height: 100px;
}
#cBox3 {
margin: auto auto auto 0;
}
.color{
width: 40px;
height: 40px;
vertical-align: middle;
margin-left: 5px;
margin-top: 5px;
text-align: center;
position: relative;
background: tomato;
display: inline-block;
border: 1px solid black;
z-index: 10;
transition: 0.5s linear;
transform-origin: left;
}
#color1 {
background: pink;
}
#color2 {
width: 90px;
height: 90px;
background: pink;
transition-delay: 0.2s;
}
#color3 {
background: pink;
transition-delay: 0.4s;
}
#roll {
grid-row: 2/3;
width: 45px;
height: 45px;
margin: auto;
cursor: pointer;
border-radius: 500px 500px 500px 500px;
-moz-border-radius: 500px 500px 500px 500px;
-webkit-border-radius: 500px 500px 500px 500px;
border: 1px solid rgba(0,0,0,0.5);
box-sizing: border-box;
line-height: 45px;
text-align: center;
font-weight: lighter;
font-size: 1.2em;
color: rgba(0,0,0,0.9);
background: transparent;
}
Javascript
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function gestoreGiro () {
bott.disabled= true;
bott.setAttribute("style", "background:gray")
t = setInterval(scorri, 500);
setTimeout(riattiva, 5000);
}
function riattiva() {
document.getElementById('roll').disabled = false;
bott.setAttribute("style", "background:none");
}
function scorri() {
var n = i - 1;
var lunghezza = listaColori["colori"].length;
const valore = getRandomInt(listaColori["colori"].length);
if (i>listaColori["colori"].length-1) {
i = 0;
}
if (n < 0) {
n = lunghezza-1;
}
if (m>listaColori["colori"].length-1) {
m = 0;
}
S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
S2.setAttribute("style","background:"+listaColori["coloriHEX"][i]);
S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
i++;
m++;
flag++;
if (flag==13) {
clearInterval(t);
n = valore-1;
m = valore +1;
if (n < 0) {
n = lunghezza-1;
}
if (m>lunghezza-1) {
m = 0;
}
S1.setAttribute("style","background:"+listaColori["coloriHEX"][n]);
S2.setAttribute("style","background:"+listaColori["coloriHEX"][valore]);
S3.setAttribute("style","background:"+listaColori["coloriHEX"][m]);
flag = 0;
}
}
var S1 ;
var S2 ;
var S3 ;
var bott;
var i = 0;
var m = i+1;
var t;
var flag = 0;
function gestoreLoad () {
S1 = document.getElementById("color1") ;
S2 = document.getElementById("color2") ;
S3 = document.getElementById("color3") ;
bott = document.getElementById("roll");
bott.onclick = gestoreGiro;
}
window.onload = gestoreLoad;
var listaColori = {
colori: ["verde", "giallo", "rosso", "blu", "nero", "bianco"],
coloriHEX: ["#2e8b57", "#ffd700", "#ff6347", "#4169e1", "#000000", "#ffffff"]
}
I am sorry if my explanation appears poor: I'll be happy to answer your doubts.
You could do it very simply with css transition. This method work on :hover. Working CodePen.
HTML
<div>
<p>This is some text</p>
</div>
CSS
div {
padding: 20px;
width: 100px;
background: linear-gradient( to left, red 50%, blue 50% );
background-size: 200% 100%;
background-position: right bottom;
transition: all ease 1s;
color: white;
}
div:hover {
background-position: left bottom;
}

Increasing CSS value instead of decreasing with jquery

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

CSS, express and bootstrap : overflow and margin error

I stack two circles over an image, using the position and overflow properties.
It works fine but I have the circle running over the image on left and right (not top and left.
Here is the image : Circle overflowing
Here is the CSS.
.mainContainer {
background-color: #A6A4AA
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
}
.ajustement {
opacity: 0.5;
}
The code source (ejs+bootstrap) : the row is a child of mainContainer
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
How can I draw my circles into the images only, without running out the border ?
Here is what I would like :
Do you looking something like this:
body{
margin: 0;
background-color: #A6A4AA
}
.mainContainer {
background-color: #A6A4AA;
margin: 15px auto;
width: 98%;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border-radius: 0 0 8px 8px;
background: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
border: 3px solid #2C3756;
line-height: 0;
border-radius: 12px;
}
.impact, .ajustement {
position: absolute;
background-color: #dc022e;
border-radius: 100%;
opacity: 0.75;
margin: 0;
width: 100%;
height: auto;
border: 3px solid #2C3756;
left: -45%;
top: -78px;
height: calc(100% + 78px);
}
.impact{
width: 20px;
height: 20px;
border-color: #000;
left: 10%;
top: 10%;
}
.ajustement {
opacity: 0.5;
}
<div class="mainContainer">
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Papageitaucher_Fratercula_arctica.jpg/800px-Papageitaucher_Fratercula_arctica.jpg">
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
</div>

Categories