Develop Reference

OwlCarousel2 animated dots onChange

I would like to make dots in owl-carousel animated like progress bar for each item of carousel, I am using simple jQuery function for animated, which is called onChange event. But problem is, that function is called before HTML structure is changed.
CSS for dots:
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
JS
$(carousel).owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:false,
loop:true,
autoplayTimeout:2000,
onChange:navigationFill,
});
function navigationFill() {
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}
This code works only when carousel is changed on next item, but animation is made for previous dot. Is there any way, how can I "pause" this JS, wait until HTML structure is changed and after that call this function?
JSFIDDLE
https://jsfiddle.net/nxa36myc/29/ ( previous black "navigation dot" is changed to white when slide is changed)

I have created a fiddle based on your question here https://jsfiddle.net/mazinoukah/m45hx3v2/3/
Basically i added the 'owl-theme' class to the owl-carousel container.
Also, i removed the 'onChange' option and added a listener, 'changed.owl.carousel', to the owl instance.
HTML
<div class="wrapper">
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://shrani.si/f/1W/4U/KrJheJj/tine.jpg"></div>
<div class="item"><img src="http://shrani.si/f/3A/q3/kC00r7/torbice.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/2o/hl/1xmizZhJ/medvedki.jpg"></div>
<div class="item padded"><img src="http://shrani.si/f/27/wV/4moHQxYk/maladva.jpg"></div>
</div>
<div id="nav"></div>
CSS
body {
background: #fff;
}
.owl-carousel .item {
background: #ccc;
text-align: center;
height: 450px;
}
.wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.padded {
line-height: 450px;
}
#nav {
position: relative;
}
#nav > div {
font-size: 28px;
position: absolute;
top: -250px;
z-index: 2;
cursor: pointer;
padding: 0 5px;
visibility: hidden;
}
.wrapper:hover #nav > div {
visibility: visible;
}
.owl-prev {
left: 0;
}
.owl-next {
right: 0;
}
.owl-theme .owl-dots .owl-dot{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100px;
height: 5px;
margin-left: 2px;
margin-right: 2px;
background: #ccc;
border:none;
}
.owl-theme .owl-dots .owl-dot span {
margin: 0;
background: white;
width:0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 5px;
}
.owl-theme .owl-dots .owl-dot.active span {
background: white;
width:0px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
JAVASCRIPT
var owl = $(".owl-carousel").owlCarousel({
slideSpeed: 500,
paginationSpeed: 500,
singleItem: true,
navigation: true,
items: 1,
autoplay:true,
loop:true,
autoplayTimeout:2000,
navText: [
'<i class="fa fa-angle-left"></i>',
'<i class="fa fa-angle-right"></i>'
],
responsive:{
0:{
items:1
},
767:{
items:1,
nav:true
}
}
});
owl.on('changed.owl.carousel', function(event) {
navigationFill();
})
function navigationFill() {
// Reset the width of all the 'dots'
var pr = $(".owl-theme .owl-dots .owl-dot span");
$(pr).css({ width: "0%" });
var progressbar = $(".owl-theme .owl-dots .owl-dot.active span");
$(progressbar).animate({ width: "100%" }, 'slow');
}
Let me know if you have any issues, or need further assistance.
Hope it helps :)

jQuery slide toggle shows then disappears

Codepen here: https://codepen.io/anon/pen/gRJEwx
So basically jQuery toggle 'slide' slides the div in and then right back out. It only happens every second or third time you press the button. It never happens on the first try but seems to happen on the second or third try after clicking the back button.
$('#go').on('click', function() {
$('#s1').fadeOut('slow', function() {
$('#s2').toggle('slide', {
direction: 'right'
}, 800, function() {
$('#s2 .back').on('click', function() {
$('#s2').fadeOut('slow', function() {
$('#s1').toggle('slide', {
direction: 'right'
}, 800);
});
});
});
});
});
body {
overflow: hidden;
width: 400px;
background: gray;
height: 400px;
}
#s1,
#s2 {
width: 100%;
height: 100%;
}
#s1 {
padding: 20px;
display: block;
background: purple;
}
#s2 {
padding: 20px;
display: none;
background: blue;
}
#s3 {
display: none;
background: black;
}
#go,
#go2 {
width: 400px;
padding: 10px 0;
margin: 20px auto;
text-align: center;
font-weight: bold;
background: white;
}
.back {
background: white;
font-weight: bold;
width: 300px;
padding: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s1">
<div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
<div class="back">GO BACK</div>
</div>
So essentially it's working right the first time. But the second time it shows the second screen and then immediately hides. Any idea how I can get it to slide and then stay put until the back button is pressed?

You are binding new #s2 .back click event every time you click on #go. Move it out of click event.
Also please not how .on is working. It must be binded to static element, so it's form is $(staticElement).on(event, dynamicElement, callback). So if your #go is some time will be removed and added using JS, than your provided form will not work.
$(document).on('click', '#go', function() {
$('#s1').fadeOut('slow', function() {
$('#s2').toggle('slide', {
direction: 'right'
}, 800);
});
});
$(document).on('click', '#s2 .back', function() {
$('#s2').fadeOut('slow', function() {
$('#s1').toggle('slide', {
direction: 'right'
}, 800);
});
});
body {
overflow: hidden;
width: 400px;
background: gray;
height: 400px;
}
#s1,
#s2 {
width: 100%;
height: 100%;
}
#s1 {
padding: 20px;
display: block;
background: purple;
}
#s2 {
padding: 20px;
display: none;
background: blue;
}
#s3 {
display: none;
background: black;
}
#go,
#go2 {
width: 400px;
padding: 10px 0;
margin: 20px auto;
text-align: center;
font-weight: bold;
background: white;
}
.back {
background: white;
font-weight: bold;
width: 300px;
padding: 10px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="s1">
<div id="go">GO TO SCREEN2</div>
</div>
<div id="s2">
<div class="back">GO BACK</div>
</div>

You have the second on click event listener as a callback to the first one.
Unnest them so they sit at the same depth in the code:
$('#go').on('click', function(){
$('#s1').fadeOut('slow', function(){
$('#s2').toggle('slide', {direction: 'right'}, 800);
});
});
$('#s2 .back').on('click', function(){
$('#s2').fadeOut('slow', function(){
$('#s1').toggle('slide', {direction: 'right'}, 800);
});
});

How to access a button not originally on page to animate and refresh?

I'm working on this codepen to practice working with APIs and search bar animations.
wikiSearch codepen
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset" onclick="moveReset();"></button>
some of my js
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
How can I access the X button after the search results come in?
On the splash page, the X button works as I want it to - moves right when input is focused and moves back to the left where it is hidden.
My goal is to have this behavior persist, even after the results display, and in addition to refresh to the original splash page.
I've tried adding an active class when it is clicked,delegating to #reset from body, adding an onclick event inline with the html, and using the location reset property, to no avail.
Thanks for any pointers.

You have a z-index management problem. After click on search button the reset button has a z-index value of -1, this means that even you are see the button when you think you click on it you don't.
A way to fix this particular problem could be to remove the z-index attribute in your css file for reset button, also give z-index value to input control like 5 and for the search button like 10 to keep the logic you already have.
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').css("background", "yellow")
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('input').on('focus', function(){
$('.btn-reset').css({
'right': '-22px',
'background-color': 'white'
})
$('.btn-search').css({
'background-color': 'hotpink'
})
})
$('.btn-reset').on('click', function(){
$('.btn-reset').css({
'right': '22px'
})
$('.btn-search').css({
'background-color': 'white'
})
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
transition: all .3s ease-in-out;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
z-index:5;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
z-index:10;
}
.btn-reset {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset"></button>
</form>
</div>
<br>
<div id="content">
</div>

So, if I'm getting you, you're looking for how to cause certain effects on the reset button when certain events happen? If I'm getting that, then there are really two events: first, any time the text input loses focus (at which point, you'd hide the reset button, I assume), and second, when the reset button itself is clicked.
Looking at the first case, you'd simply have the on('blur', function(){...}) set on the input, just as you have on('focus', function(){...}) happening right now. When the input is blurred, simply re-hide the reset and toggle the color change back on the search button.
In the second case, you're missing a line to actually clear the contents of the input. Presumably, you'd also want to remove the results of any search if you clear the input, but that's not really a given.
Hope this helps, if not please clarify!
// form validation
$("form").on("submit", function(e) {
var word = $("#search").val();
if (word.length === 0) {
alert("This field is required");
e.preventDefault();
} else {
e.preventDefault();
$('form').css({
"margin-top": "0%"
})
$('body').addClass("body-with-results");
search(word);
}
})
// retrieve data from wikipedia api
function search(word) {
$.ajax({
url: '//en.wikipedia.org/w/api.php',
data: {
action: 'opensearch',
list: 'search',
search: word,
format: 'json'
},
dataType: 'jsonp',
success: function (response) {
var content = ''
for (var i = 0; i < response[1].length; i++) {
content +=
'<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
+"<h3>"+response[1][i]+"</h3>"
+"<p>" + response[2][i] + "</p>"
+'</a> </div>';
};
$('#content').html(content)
.css({
"margin": "5% 25%",
"text-align": "center"
});
}
});
}
$('#search').on('focus', function(){
$('.btn-reset').show();
$('.btn-search').css({
'background-color': 'hotpink'
})
}).on('blur', function(){
$('.btn-search').css({
'background-color': '#ccc'
});
})
$('#resetBtn').on('click', function(evt){
evt.stopPropagation();
evt.preventDefault();
$(this).hide();
$('#content').empty();
$('#search').val('');
$("body").removeClass("body-with-results");
})
* {
box-sizing: border-box;
}
body {
background: Chartreuse ;
}
.body-with-results {
background: yellow;
}
/* search button: */
input {
border: 1px solid #ccc;
font-size: 12px;
height: 30px;
padding: 4px 8px;
position: absolute;
width: 25%;
}
input:focus {
outline: none;
}
button {
text-align: center;
}
button:focus {
outline: none;
}
.btn-search {
background: hotpink;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
width: 30px;
cursor: pointer;
}
#resetBtn {
display: none;
background: white;
border: none;
height: 30px;
font-size: 12px;
padding: 4px;
position: absolute;
right: -28px;
top: 0px;
width: 30px;
z-index: 5;
}
form {
float: left;
height: 50%;
margin: 0% 27%;
position: relative;
width: 30%;
margin-top: 10%;
}
input {
border-radius: 15px;
right: 0;
transition: all .3s ease-in-out;
width: 50%;
}
input:focus {
width: 100%;
}
.btn-search {
background: hotpink;
color: #fff;
}
.btn-reset:focus {
right: -22px;
}
button {
transition: all .3s ease-in-out;
}
.btn-search {
background: #ccc;
border-radius: 50%;
height: 26px;
right: 2px;
top: 2px;
transition: all .3s ease-in-out;
width: 26px;
}
.btn-reset {
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 15px;
height: 20px;
line-height: 20px;
padding: 0;
right: 5px;
top: 5px;
width: 20px;
z-index: -1;
}
h3 {
padding-top: 10px;
}
.item {
position: relative;
padding-bottom: 5px;
background-color: hotpink;
border-radius: 5px;
}
/* for underlining each item block */
/* .item:before {
content: "";
position: absolute;
width: 75%;
bottom: 0;
left: 12.5%;
border-bottom: 1px solid black;
} */
.item-text {
text-decoration: none;
color: black;
}
#returned {
color: white;
font-size: 0.75em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='search-wrapper'>
<form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button class="btn btn-reset fa fa-times" id="resetBtn"></button>
</form>
</div>
<br>
<div id="content">
</div>
A few changes have been made to the code. Specifically, what's happening is when the form has been submitted and the body's CSS altered, there is a z-index issue cropping up. Here are the changes made:
The body el style is now being changed by adding/removing a 'body-with-results" class. This is purely cosmetic, as I really don't like hard-coding style changes.
The reset button is no longer a pure reset button, it is now simply a styled button that simulates a reset. When you reset a form, that's all you reset. However, in this case, you want to reset the form, hide the reset element, and clear any results from the contents div. So the reset el now does just that.
Styles on the reset button -- rather than sliding in and out (which could still probably be a thing), I simply set the right/top values in the css, and also fixed the z-index thing. Note that I used the ID of the el rather than the class to set the styles. This was done to properly handle the specificity of the styles (IDs are considered more specific than classes, thus ID styles override class styles).
I removed the code to hide the reset button on blur -- the issue with that becomes, when you try to click on the reset button, the first event is the input blur, which promptly hides the element you just thought you clicked on.
Still trying to track down the wierd suggested results remnant code, but this is a starting point.

Slide from left to right

I have been searching and tried alot of things but I can't get the solution;
#bar {
width: 2em;
height: 15em;
display: none;
position: relative;
float: left;
margin-left: -1.7em;
background: rgba(22, 43, 58, 0.4);
}
#button {
width: 2em;
height: 1.3em;
float:left;
position: relative;
margin-top: 0.7em;
margin-left: 0.em;
background: rgba(22, 43, 58, 0.4);
color: rgba(250, 250, 250, 0.7);
font-size: 1em;
border-radius:0px 5px 5px 0px;
text-shadow: 1px 1px 2px;
cursor: pointer;
border: none;
opacity: 0.8;
}
I would like when I press the button the bar slides to the right.
$(document).ready(function () {
$('#button').click(function () {
$("#bar").show('slide', {
direction: 'right'
}, 1500);
});
});
this is the HTML for the part
<div class="apps border">
<div id="bar"></div>
<div id="button">>></div>
<div class="field"></div>
</div>
Demo

Please check the updated version: https://jsfiddle.net/isherwood/gc3b8n9q/
In JS, direction should be 'left'
$("#bar").show('slide', {
direction: 'left'
}, 1500);
Also in CSS (not directly needed)
#bar {
width: 20em; //can try make bigger
}

jquery animation breaks at different screen resolution

The code below is expected to fade out the overlay and animate left property of two divs which are captions.
Well, this code works like a charm at 1920x1080. It works as well in my tablet 7inchs (where overing is replaced by tapping). And the same happens in the 1024x768 res!
But in my laptop at 1366x768 two things happen:
mg_caption moves in only for 1/3 of its width
mg_caption2 doesn't appear at all
And the same happen in following resolutions:
1280x720 (mg_caption shows only a smallest portion)
1280x768 (mg_caption shows only a smallest portion)
1360x768
How to fix that?
Many thanks in advance
$('.overlay').on('mouseenter', function() {
$(this).fadeOut('slow');
$(this).closest('.kenburns').css({
"z-index": "11000",
border: "inset 2px #000;"
});
$(this).siblings('.mg_caption').animate({
left: "400px"
}, {
duration: 400,
queue: false,
easing: 'easeOutQuad'
});
$(this).siblings('.mg_caption2').animate({
left: "0px"
}, {
duration: 500,
queue: false,
easing: 'easeOutQuad'
});
});
$('.kenburns').on('mouseleave', function() {
$(this).children('.mg_caption2').animate({
left: "-700px"
}, {
duration: 500,
queue: false,
easing: 'easeOutQuad'
});
$(this).children('.mg_caption').animate({
left: "2000px"
}, {
duration: 1000,
queue: false,
easing: 'easeOutQuad' //,
});
$(this).children('.overlay').fadeIn('slow');
});
.img-responsive {
width: 100%;
}
.kenburns {
overflow: hidden;
position: relative;
float: left;
}
.kenburns img {
transition-duration: 20s;
transform: scale(1.0);
transform-origin: 50% 50%;
}
.kenburns img:hover {
transform: scale(1.5);
transform-origin: 50% 0%;
}
.mg_caption {
position: absolute;
top: 30px;
background: rgba(100, 59, 15, 1.0);
background: #FABC59;
color: #B19D87;
background: #000;
color: #fff;
width: 300px;
height: 50px;
padding: 10px;
font-size: 1.2em;
display: block;
left: 2000px;
z-index: 12000;
}
.mg_caption2 {
position: absolute;
top: 330px;
background: rgba(100, 59, 15, 1.0);
background: #FABC59;
color: #B19D87;
background: #000;
color: #fff;
width: 600px;
height: 50px;
padding: 10px;
font-size: 1.2em;
display: block;
left: -700px;
z-index: 12000;
text-align: center;
}
.overlay {
background: rgba(100, 59, 15, 0.5);
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-4 no-pad">
<div class="kenburns">
<img class="img-responsive" src="<?php echo base_url( 'assets/images/WESTMINSTER_SINGLE.jpg' ) ?>" />
<div class="overlay"></div>
<div class="mg_caption">Westminster Single</div>
<div class="mg_caption2">Lorem ipsum dedicat aliquod</div>
</div>
</div>

Edit: I post a better solution which uses left property from elements whoch come from left and right property for elemenets which come from right.
This is the working code:
css:
.mg_caption{
position:absolute;
top:30px;
background: #000;
color: #fff;
width: 300px;
height:50px;
padding:10px;
font-size:1.2em;
right:-100%;
z-index:12000;
}
.mg_caption2{
position:absolute;
top:180px;
background: #000;
color: #fff;
width: 600px;
height:50px;
padding:10px;
font-size:1.2em;
left:-100%;
z-index:12000;
}
JS:
$('.overlay').on('mouseenter',function(){
$(this).fadeOut('slow');
$(this).closest('.kenburns').css({
"z-index": "11000",
border: "inset 2px #000;"
});
if (animating === true)
{
$(this).siblings('.mg_caption').animate({
right: "-30%"
}, {
duration:400,
queue:false,
easing:'easeOutQuad'
});
$(this).siblings('.mg_caption2').animate({
left:"0%"
}, {
duration:500,
queue:false,
easing:'easeOutQuad'
});
}
});
$('.kenburns').on('mouseleave', function(){
if (animating === true)
{
$(this).children('.mg_caption2').animate({
left: "-100%"
}, {
duration:500,
queue:false,
easing:'easeOutQuad'
});
$(this).children('.mg_caption').animate({
right: "-100%"
}, {
duration:1000,
queue:false,
easing:'easeOutQuad'
});
}
$(this).children('.overlay').fadeIn('slow');
});
Tank you