Hi i'm experimenting with the auto play function in owl carousel, however whenever i switch to another web tab in chrome and come back to my webpage with the carousel, it stops working unless i give it a drag on the image. Here's my html and jquery code:
<!DOCTYPE html>
<html>
<head lang="en">
<title>MySite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div> <img src="1.jpg"></div>
<div> <img src="2.jpg"></div>
<div> <img src="3.jpg"></div>
<div> <img src="4.jpg"></div>
<div> <img src="5.jpg"></div>
<div> <img src="6.jpg"></div>
</div>
<script>
$(document).ready(function(){
var owl = $(".owl-carousel")
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:false
});
owl.trigger('play.owl.autoplay',[5000]);
});
</script>
</body>
</html>
You can try to use ifvisible.js
And try to use both .blur and .focus commands otherwise it won't work
This is implementation for my site
jQuery(window).ready(function(){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
dots:false,
responsive:{
0:{
items:2
},
620:{
items:3
},
992:{
items:4
},
1200:{
items:6
}
}
})
jQuery('.owl-carousel .owl-item').on('mouseenter',function(e){
jQuery(this).closest('.owl-carousel').trigger('stop.owl.autoplay');
})
jQuery('.owl-carousel .owl-item').on('mouseleave',function(e){
jQuery(this).closest('.owl-carousel').trigger('play.owl.autoplay',[2000]);
})
ifvisible.blur(function(){
owl.trigger('stop.owl.autoplay',[2000]);
});
ifvisible.focus(function(){
owl.trigger('play.owl.autoplay',[2000]);});
});
});
I hope this helps
Here is answer
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
owl.trigger('stop.owl.autoplay');
break;
case "focus":
// do work
owl.trigger('play.owl.autoplay', [1000]);
break;
}
}
$(this).data("prevType", e.type);
});
try this it will work ENJOY :D
You can simply trigger the next slide button. It worked well for me:
$(window).on('focus', function () {
$('.owl-next').trigger('click');
});
Related
I'm using Owl Carousel 2 along the Mouse Wheel plugin as the website shows how to implement it:
https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
Here is my example: https://z-testing.000webhostapp.com/_owlcarousel/
This is my code:
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
The problem I have is that the scroll it's not smooth, it is very fast and scrolls through 6-10 slides at once which it's not useable.
I want it to be as smooth as the mouse wheel scroll as posible.
I have find a lightbox plugin that integrates the mousewheel plugin and checked how they do it but I just don't know how to use that with my code, can you help me with it?
This is the plugin: http://fancybox.net
You can check on the Image gallery (ps, try using mouse scroll wheel) popup gallery example.
If you download the plugin it, you can see that they implemented Mouse Wheel plugin this way:
if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}
Can you help me to make it work correctly with Owl Carousel?
You need to use smartSpeed function to set the scrolling speed.
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
smartSpeed:1000,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
$(document,window,'html').mouseleave(function(){
$("#footer").fadeOut();
}).mouseenter(function(){
$("#footer").fadeIn();
});
$(function(){
$("#header").load("includes/header.html");
$("#footer").load("includes/footer.html");
});
body { padding-top: 0px;}
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/normalize.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.carousel.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/bootstrap.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/main.css">
<header id="header"></header>
<div class="owl-carousel owl-theme">
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-3-ux.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-4-editorial.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-5-senaletica.png)"></div>
</div>
<footer id="footer"></footer>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery-3.5.1.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/bootstrap.bundle.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.justifiedGallery.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/owl.carousel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.mousewheel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/main.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animations</title>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box").on("click", function(){
$(".container").addClass("animated rollIn");
//$(".container").addClass("rollIn"); we have the same result
});
$("#join_us button").on("click", function(){
$(this).addClass("animated shake");
});
});
</script>
</head>
Why the two functions are executed only at the first time (only once) each of them when I click the box and button of my html page? Do you have any solution? I searched a lot here the topics but I didn't manage to fix the problem.
P.s.: sorry for any mistake if any, it's the first time I post a topic.
Try using this, where the class is added in setTimeout
<div class="container">DIV 1</div>
<button class="box">Roll In</button>
<div id="join_us">
<button>Shake It</button>
</div>
<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".box").on("click", function(){
$(".container").removeClass("animated rollIn");
setTimeout(function(){
$(".container").addClass("animated rollIn");
},1);
});
$("#join_us button").on("click", function(){
var button = $(this);
button.removeClass("animated shake");
setTimeout(function(){
button.addClass("animated shake");
},1);
});
});
</script>
I am learning how to use jQuery dialog. One link I found helpful is http://imperavi.com/redactor/examples/uidialog/. The code is listed below, but I don't know why it does not work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog()
{
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
The dialog appears after adding jquery-ui and css, but "Lorem..." does not show.
One more thing... Is it possible to pass a string to "showDialog" such that it can show different content based on different link? For example, adding "Open 1" and "Open 2" to show different string?
I think, you forgot to add jquery UI.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Dialog</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path_to_jq_ui"></script>
</head>
<body>
<p>Open</p>
<div id="dialog-modal" title="Basic modal dialog" style="display: none;"></div>
<script type="text/javascript">
function showDialog(text)
{
$("#dialog-modal").html(text)
$("#dialog-modal").dialog(
{
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
autoresize: false,
initCallback: function()
{
this.set('<p>Lorem...</p>');
}
});
}
});
}
</script>
</body>
</html>
Here is working fiddle: http://jsfiddle.net/bY3F4/3/
Download JqueryUI from here
Edit: Dynamic dialog content added to code
Dialog is a part of jQuery UI. You have to include it as well.
the Dialog is in the JQuery UI, you only required the JQuery.
insert this in the beginning:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Add jQuery UI Stylesheet
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
Add jQuery + jQuery UI
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
http://jsfiddle.net/6jxQs/18/
this is my code, I want somehow to elements show one by one with timeout of 700ms.
Currently all elements are shows at once.
I tryied with setInterval and setTimeout functions bu without succes.
Can anyone help me or point me to some tutorial how I can do this?
Code:
<!DOCTYPE html>
<html>
<head>
<title>.::Efekat::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/stil.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('.mydiv').css('opacity','0');
$("#demo").click(function(){
$("div").each(function(index){
var self = $(this);
self.not(':animated').css(
{'opacity': 0.8}
).effect(
"scale",
{
origin:['middle','center'],
from:{width:self.width()+20,height:self.height()+20},
percent: 100,
direction: 'both',
easing: "linear"
},
700,
function(){
$(this).animate({"opacity": 1})
});
});
});
});
</script>
</head>
<body>
<span id="demo">klikni!</span>
<div class="mydiv">Element 1</div>
<div class="mydiv">Element 2</div>
<div class="mydiv">Element 3</div>
<div class="mydiv">Element 4</div>
<div class="mydiv">Element 5</div>
</body>
</html>
Use jquery's delay()
$("div").each(function(index){
var self = $(this);
self.not(':animated').css(
{'opacity': 0.8}
).delay(700 * index)
.effect(
"scale",
{
origin:['middle','center'],
from:{width:self.width()+20,height:self.height()+20},
percent: 100,
direction: 'both',
easing: "linear"
},
700,
function(){
$(this).animate({"opacity": 1})
});
}, 100);
});
The following code will only let me drag and drop ONE clone onto a droppable area. When I try and drop another clone on the droppable area it disappears. I am able to drag it however.
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
Following the comments from people and the jfiddle provided below, it appears as though this snippet of code is working in a typical setup, however, I am using this in combination with Phonegap and more specifically on an Android device.
I know this is more specific and harder to replicate for other people, but for some reason it will not allow me to drag another clone onto the wrapper still.
Here is my entire code, if someone can spot something, i'd really appreciate it!
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.7.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ff.css" />
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
originalEvent.preventDefault();
});
}
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
$(".show").live('touchstart', function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginLeft: "-150px"
}, 500 );
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginLeft: "0px"
}, 1000 );
$("#openCloseIdentifier").hide();
}
});
}//onDeviceReady
</script>
</head>
<body>
<div id="wrapper">
<div id="navWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
<img class="shape" src="images/150x150.gif" />
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="images/show.gif" class="show" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Figured it out.
I had the shape being cloned nester in the wrapper div. That won't work.
Took it out and it works!