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
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');
}
}
});
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.
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);
}
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/
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();
}
});