Force Slider to slide after callback - javascript

Hi I have a slider image gallery built with slides.js. The slider works pretty well but I need to implement swipe functionality. To get it I've thought to make a swipe callback with Hammer.js and make a function to force the slider to slide the image to the next one or the previous one. But I don't know if Slides.js has this option. What I want to do would be something like this:
document.addEventListener("DOMContentLoaded", function() {
var listItems = document.getElementsByTagName("body");
var touchControl = new Hammer(listItems[0]);
touchControl.on("panright", function(event) {
// Here is what I'm not sure how to do it
$("slider").slide
}
});

Well this is what I've done to make it work
document.addEventListener("DOMContentLoaded", function() {
var item = document.getElementsByClassName("flexslider");
var touchControl = new Hammer(item[0]);
touchControl.on("panright", function(event) {
if (event.distance > 250) {
$(".flexslider").flexslider("prev");
}
});
});
document.addEventListener("DOMContentLoaded", function() {
var item = document.getElementsByClassName("flexslider");
var touchControl = new Hammer(item[0]);
touchControl.on("panleft", function(event) {
console.log(event.distance)
if (event.distance > 250) {
$(".flexslider").flexslider("next");
}
});
});

Related

Adding code to existing .js to collapse navbar when click outside menu

Currently I use .js for my sticky navbar in Bootstrap 4.1.3 which works as desired. I have tried to insert a function in the script, which makes the navbar bar collapse on mobile phones if you click outside the menu. However, without luck. https://biogenity.com/RC19/index.html
The code I am currently using is:
$(document).ready(function () {
var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
var stickyHeight = sticky.outerHeight();
var stickyTop = stickyWrapper.offset().top;
if (scrollElement.scrollTop() >= stickyTop) {
stickyWrapper.height(stickyHeight);
sticky.addClass("is-sticky");
}
else {
sticky.removeClass("is-sticky");
stickyWrapper.height('auto');
}
};
$('[data-toggle="sticky-onscroll"]').each(function () {
var sticky = $(this);
var stickyWrapper = $('<div>').addClass('sticky-wrapper');
sticky.before(stickyWrapper);
sticky.addClass('sticky');
$(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
stickyToggle(sticky, stickyWrapper, $(this));
});
stickyToggle(sticky, stickyWrapper, $(window));
});
});
I want to be able to implement a similar function as the following. It is not certain that this is the best solution for "collapse when you click outside the menu".
$(document).on('click', function(event){
var $clickedOn = $(event.target),
$collapsableItems = $('.collapse'),
isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
isLink = ($clickedOn.closest('a').length == 1),
isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);
if( (!isToggleButton && isLink) || isOutsideNavbar ) {
$collapsableItems.each(function(){
$(this).collapse('hide');
});
}
});
Thanks in advance.
Based on your code, try this:
$(document).click(function (event) {
var clickedOn = $(event.target),
isNavbar = clickedOn.hasClass('navbar'),
// Target only nav links not all links
isNavbarLink = clickedOn.closest('.nav-link').length == 1,
navbarCollapse = $('.navbar-collapse'),
isNavbarOpen = navbarCollapse.hasClass('show');
// if its not navbar and navbar is opened
if (!isNavbar && isNavbarOpen) {
// if the user is not cliking on the nav links
if (!isNavbarLink) {
// thes close the navbar
navbarCollapse.collapse('hide');
}
}
});

Timeline change css on enter view port

Am trying to change the background color of the timeline on scroll like on this site.My replication of the sample is development site. Take a look at the codepen I tried using. The closest I have come to replicating it is with the code below which makes the change in color on each timeline circle flicker on/off on scroll.
jQuery(document).ready(function($) {
function onScroll() {
$('.cd-timeline-block').each( function() {
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.05 && $(this).find('.cd-timeline-img').hasClass('cd-inactive') ) {
$(this).find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
$(this).find('.cd-date').addClass('cd-ssf-color');
} else {
$(this).find('.cd-timeline-img').addClass('cd-inactive').removeClass('cd-active');
$(this).find('.cd-date').removeClass('cd-ssf-color');
}
});
};
$(window).scroll(onScroll);
});
I have made some modification to the above code.
CodePen link:
http://codepen.io/anon/pen/KzqWVm
Javascript:
jQuery(document).ready(function($) {
var $timeline_block = $('.cd-timeline-block');
var firstelm = $timeline_block.first();
//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function() {
var _win = $(window), iselm = null;
$timeline_block.each(function(index) {
var _this = $(this);
if (((_this.offset().top - _win.height())) <= (_win.scrollTop())) {
iselm = _this;
}
});
if (_win.scrollTop() < $(firstelm).offset().top) {
iselm = $(firstelm);
}
if (iselm) {
$('.cd-active').removeClass('cd-active').addClass('cd-inactive');
iselm.find('.cd-timeline-img').removeClass('cd-inactive').addClass('cd-active');
if ((iselm.offset().top - _win.height()) > (_win.scrollTop() * 0.75)) {
$('.cd-date').removeClass('cd-ssf-color');
}
iselm.find('.cd-date').addClass('cd-ssf-color');
}
});
});
Continuing each loop on scroll might not work properly.

JavaScript changing image when hovering

I am trying to write a script, so that when someone hovers over an image, that same images changes to a different one, ie. I hover over up.png, and it changes to up_highlighted.png, when the mouse goes off the image it should change back.
However I can't seem to get it working despite all my attempts, here is the relevant code of what I have tried so far:
print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onhover=\"hover_up()\" onclick=\"increase_rating()\">";
function hover_up(){
$(document).ready(function() {
var oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').hover(function() {
//on hover of your element
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}, function() {
//when the cursor leaves your element
$('.thumbsbtn1').attr('src', oldSrc);
});
});
}
PS. I do not wish to use sprites.
Old School: http://jsfiddle.net/PAGUp/
var elem = document.getElementById('targetImg');
var oldSrc;
elem.onmouseover = function() {
oldSrc = elem.src;
elem.src = 'http://www.eclipse-developers.com/images/up_hover.png';
}
elem.onmouseout = function() {
if(typeof oldSrc !== 'undefined') {
elem.src = oldSrc;
}
}
I'm sure the jquery is more pithy. Essentially you need a variable to hold the 'old' src URL, and mouseover and mouseout handlers to set the new URL and back it out.
You don't have to wrap $(document).ready inside hover_up function. Note that I have removed onhover from HTML
Try
print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onclick=\"increase_rating()\">";
$(document).ready(function() {
var oldSrc;
$(document).on('hover', '.thumbsbtn1', function () {
oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}, function () {
$('.thumbsbtn1').attr('src', oldSrc);
});
});
try this
print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onhover=\"hover_up(this)\" onclick=\"increase_rating()\" onmouseout=\"hover_out(this)\">";
var oldSrc;
function hover_up(e){
oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}
function hover_out(e){
$('.thumbsbtn1').attr('src',oldSrc);
}

Fade-out controls when there's no keyboard/mouse input

Based on this script I found on Stack Overflow, I tried adapting it to fade out an editor panel on a HTML page. Fading out works fine, but I'd like limit the fade-out from being triggered.
What I hope to accomplish is to prevent the fade-out whenever the mouse is over the editor panel (and child controls) or when there's keyboard activity in one of the input children.
var i = null;
// this part is working
$("#my-canvas").mousemove(function() {
clearTimeout(i);
$("#panel,#btn-panel-toggle,#fps").fadeIn(200);
var i = setTimeout('$("#panel,#btn-panel-toggle,#fps").fadeOut(800);', 3000);
})
// this part is not working
$("#panel").mouseover(function() {
clearTimeout(i);
})
For a live example, please check out this jsFiddle.
Two independent variables are needed here to indicate, whether the input#sc-url is focused and div#panel is hovered by mouse or not. Then you can handle the timer with these functions:
$(function () {
var t = null; //timer
var is_url_focused = false, is_panel_hovered = false;
var panel = $('#panel');
function hide_panel(){
if (t) {
clearTimeout(t);
}
t = setTimeout(function(){
if (is_url_focused || is_panel_hovered) {
return;
}
panel.stop().animate({
opacity:0
},800, function(){
panel.hide(); // == diplay:none
});
},2000);
}
function show_panel(){
panel.show().stop().animate({
opacity:1
},800);
}
$('#my-canvas').mouseenter(function(){
show_panel();
}).mouseleave(function(){
hide_panel();
});
$('#panel').hover(function(){
is_panel_hovered = true;
show_panel();
}, function(){
is_panel_hovered = false;
hide_panel();
});
$('#sc-url').focus(function(){
is_url_focused = true;
show_panel();
}).blur(function(){
is_url_focused = false;
hide_panel();
});
$('#btn-panel-toggle').click(function(){
if (panel.is(':hidden')) {
panel.css('opacity',1).show();
} else {
panel.css('opacity',0).hide();
}
});
});
http://jsfiddle.net/w9dv4/3/

How to use Hammer to swipe

I've found an interesting resource: Hammer.js. I tried to swipe with Hammer and jQuery.
1) I've downloaded the code here
2) I've put that code in a document. I put a link to that code in the head of the document I want to use swipe: <script src="hammer.js"></script>
3) I do not know how to use it. I try to do something similar to this in jQuery. I mean I want to swipe instead of click:
$(function(){
$(".blue").click(function() {
$(".blue").animate({left: "0"}, 500)
});
})
http://jsfiddle.net/Narcis/rmtXC/
Something like this? http://jsfiddle.net/6jxbv/119/
I'm using Hammer(element).on("event", callback); to get the result. In this case, I added the swipeleft and swiperight events.
The script uses the syntax described above to add events like:
drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
swipe, swipeup, swipedown, swipeleft, swiperight
If you want to use it with jQuery, they provide this syntax (which is kind of awkward if you ask me):
$(elementOrSelector).hammer().on("event", function(event) {
//callback
});
But you have to include the jquery.hammer.js plugin
Try reading the docs for more info
EDIT:
Here, you can see an example using swipe and drag. Take into account that swipe is a fast movement (with the mouse or touch) and drag is pressing and moving (so the implementation it's not correct, but I'll leave the animate to you. :) )
http://jsfiddle.net/uZjCB/183/ and full screen http://jsfiddle.net/uZjCB/183/embedded/result/
Hope it helps
With Hammer.js 2.0 you need to use a Recognizer :
var blue = document.getElementById('blue');
var hammer = new Hammer.Manager(blue);
var swipe = new Hammer.Swipe();
hammer.add(swipe);
hammer.on('swipeleft', function(){
$(blue).animate({left: "-=100"}, 500)
});
hammer.on('swiperight', function(){
$(blue).animate({left: "+=100"}, 500)
});
read more on Hammer documentation
updating the JS fiddle with correct Hammer cdn so now it's working:
$(function(){
var red = document.getElementById("red");
var blue = document.getElementById("blue");
//Swipe
Hammer(red).on("swipeleft", function() {
$(this).find(".color").animate({left: "-=100"}, 500);
$("#event").text("swipe left");
});
Hammer(red).on("swiperight", function() {
$(this).find(".color").animate({left: "+=100"}, 500);
$("#event").text("swipe right");
});
// Drag
Hammer(blue).on("dragleft", function() {
$(this).find(".color").animate({left: "-=100"}, 500);
$("#event").text("drag left");
});
Hammer(blue).on("dragright", function() {
$(this).find(".color").animate({left: "+=100"}, 500);
$("#event").text("drag right");
});
});
Try this way with hammer.js v2.0.8
https://jsfiddle.net/elijah123467/q6m84wgt/6/
var body = $("#body");
var navbar = $("#navbar");
var hammertimeBodyRight = new Hammer.Manager(body[0], {
recognizers: [
[Hammer.Swipe, { direction: Hammer.DIRECTION_RIGHT}]
]
});
hammertimeBodyRight.on("swipe", function (ev) {
var canvasSlid = navbar.hasClass("canvas-slid");
if (!canvasSlid) {
$(".navbar-toggle").click();
}
});
var hammertimeBodyLeft = new Hammer.Manager(body[0], {
recognizers: [
[Hammer.Swipe, { direction: Hammer.DIRECTION_LEFT}]
]
});
hammertimeBodyLeft.on("swipe", function (ev) {
var canvasSlid = navbar.hasClass("canvas-slid");
if (canvasSlid) {
$(".navbar-toggle").click();
}
});
var hammertimeNavbarRight = new Hammer.Manager(navbar[0], {
recognizers: [
[Hammer.Swipe, { direction: Hammer.DIRECTION_RIGHT}]
]
});
hammertimeNavbarRight.on("swipe", function (ev) {
var canvasSlid = navbar.hasClass("canvas-slid");
if (!canvasSlid) {
$(".navbar-toggle").click();
}
});
var hammertimeNavbarLeft = new Hammer.Manager(navbar[0], {
recognizers: [
[Hammer.Swipe, { direction: Hammer.DIRECTION_LEFT}]
]
});
hammertimeNavbarLeft.on("swipe", function (ev) {
var canvasSlid = navbar.hasClass("canvas-slid");
if (canvasSlid) {
$(".navbar-toggle").click();
}
});

Categories

Resources