We Keep Coding

Owl carousel with mouse wheel scroll plugin speed

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>

Updating jquery-ui tooltip during hide animation breaks it

Whenever you update the content of a jquery-ui tooltip while the hide-animation is running, it'll pop back into visibility and enter some broken state where it is visible forever and unresponsive to events.
Yeah, i know, i know, the lib is dead.
Still, is there any way to get around this bug? I need to update my tooltip in 1 second intervals because it has a timer in it, and I would like to use a fade-out animation somehow.
Demo:
Just move the mouse in and out of the first block a couple of times:
$("#animated").tooltip( {items: "div", content: ""} );
$("#not-animated").tooltip( {items: "div", hide: false, content: ""} );
setInterval( function() {
$("#animated").tooltip("option", "content", Math.random().toFixed(3));
$("#not-animated").tooltip("option", "content", Math.random().toFixed(3));
}, 500 );
.item {
display: inline-block;
background-color: DeepSkyBlue;
padding: 12px;
}
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>
</body>
</html>

You could try updating the .ui-tooltip-content element manually.
$(function() {
function getRandom() {
return Math.random().toFixed(3);
}
function updateContent() {
$(".ui-tooltip-content", $("#animated").tooltip("widget")).html(getRandom());
$("#not-animated").tooltip("option", "content", getRandom());
}
$("#animated").tooltip({
items: "div",
hide: 200,
content: getRandom
});
$("#not-animated").tooltip({
items: "div",
hide: false,
content: getRandom
});
var intv = setInterval(updateContent, 500);
});
.item {
display: inline-block;
background-color: DeepSkyBlue;
padding: 12px;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="item" id="animated">hiding animated</div>
<div class="item" id="not-animated">hiding not animated</div>

Alerting after resizing an element

How do I put an alert message just after am done re-sizing an element? That is, after the element has been re-sized.
resizeend() method not working.

check below link with
$( $clone ).resizable({
stop:function(){
hello();
},
});
check below link for more , which uses jquery ui for resizing and invoking javascrip after resize occurs
Fiddle
html content
<div class = "resizethis">
resize this widget
two js libraries
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
one css
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
javascript content
$('.resizethis').resizable({
stop: resizestopped
});
function resizestopped(){
alert('resize stopped');
}
css
.resizethis{
width: 100px;
height: 100px;
border: 2px solid red;
}

First image doesn't display in JS/JQ slidshow

I'm trying to make a javascript slideshow using some javaquery the first image doesn't fade in like it should and so obviously none of the other images slide or out either. This is my first attempt at making one of these so I'm not quite sure why it isn't working I've looked over and over at the code to make sure I've spelled everything correctly and all the proper punctuation, but I guess I could still be missing something. Anyway my code.
HTML5
<head>
<title>Home Styles</title>
<link rel="stylesheet" href="CSS/index.css" type="text/css"/>
<link rel="stylesheet" href="CSS/style.css" type="text/css"/>
<link rel="shortcut icon" href="Images/favicon-logo-HS.ico"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="JS/slider.js"></script>
</head>
<body onload="Slider();" class="body">
<div class="slider">
<img id="1" src="Images/slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="Images/slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="Images/slide_image3.jpg" alt="Electronic Deals"/>
</div>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
width: 990px;
height: 270px;
border: 0;
display: none;
}
javascript
function Slider(){
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction: 'right'},500);
$(".slider #"+count).delay(5500).hide("slide", {direction: 'left', 500);
if(count == sc){
count = 1;
}else{
count = count + 1;
}
}, 6500);
}

So there are several things going on with your JS that might be the issue here. First off a quick JShint tells me there are some syntax errors (missing semicolons and the like). But I think the real issue is that you're using some of these methods with non default easings but not defining new ones.
For example .hide() doesn't have a 'slide' easing. http://api.jquery.com/hide/. I would read through the api for .show() and .hide() you probably need to replace them with .animate()
Here is a solution that may work for you: EXAMPLE FIDDLE
HTML:
<div class="slider">
<img id="1" src="http://www.placehold.it/500x300&text=Slide1" alt="TV Deals"/>
<img id="2" src="http://www.placehold.it/500x300&text=Slide2" alt="Furniture Deals"/>
<img id="3" src="http://www.placehold.it/500x300&text=Slide3" alt="Electronic Deals"/>
</div>
JS:
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
I use setTimeout() instead of setInterval() because of personal preference (interval can overlap function calls). You could also remove the .fadeIn()in my example and replace it with .animate() to get that horizontal slide effect you wanted.

After looking at this in jsfiddle and removing all the extra stuff that jsfiddle doesn't want, I noticed you are missing a closing bracket. I don't understand how you could not be getting console errors cause this is a syntax error:
function Slider() {
$("#a1").show("fade",500);
$("#a1").delay(5500).hide("slide", {direction: 'left'}, 500);
}
http://jsfiddle.net/mF7wv/

JQuery FancyBox overlay color

I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color.
So far so good on the autoload.
Got it working.
The color I couldn't get to change.
Now I tried several examples many listed here. But I guess I am doing something wrong.
In my head code I am loading :
<script type="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
'overlayColor' : '#ec2d2d',
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
And my HTML is like this :
<a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI">Iframe</a>
It opens onload. But I cannot get the overlay to turn red.
What am I missing here?
I have tried as you see several options. But none used the right way.
TIAD
Edit:
When I try to add this code:
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.
This is what I got now:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
},
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
Also adding the CSS code makes no difference:
#fancybox-overlay{
background-color:#ec2d2d !important;
}
Could it be that there is another JS file loaded that overwrites all of my settings??
These are the libraries loaded:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

Just set the background color before showing of fancybox.
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
and then remove .fancybox() from $("#hidden_link").fancybox().trigger('click');
Just like this it'll work perfectly.

You should be able to change the overlay color in CSS
#fancybox-overlay{background-color:#ec2d2d !important;}

You can execute the overlay alone,
$.fancybox.helpers.overlay.open({parent: $('body')});