I am working with a JS slideshow. My problem is that I don't know very well how to add the swipe functionality for mobiles. I'm trying with the next code with no success, I can not make it work:
HTML
<div class="gallery" id="gallery-001">
<div class="gallery-frame">
<div class="gallery-slide">
<img class="gallery-picture" src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<p class="gallery-caption">Slide 01</p>
</div>
<div class="gallery-slide">
<img class="gallery-picture" src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<p class="gallery-caption">Slide 02</p>
</div>
<div class="gallery-slide">
<img class="gallery-picture" src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<p class="gallery-caption">Slide 03</p>
</div>
</div>
</div>
JS
(function() {
//on page load - show first slide, hide the rest
init();
function init() {
parents = document.getElementsByClassName('gallery');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("gallery-slide");
slides[0].classList.add('active-gallery-slide');
}
}
//mobile swipe right functionality
jQuery( ".gallery-frame" ).on( "swiperight", function( event ) {
current = this;
var slides = current.getElementsByClassName("gallery-slide");
curr_slide = current.getElementsByClassName('active-gallery-slide')[0];
curr_slide.classList.remove('active-gallery-slide');
if (curr_slide.nextElementSibling) {
curr_slide.nextElementSibling.classList.add('active-gallery-slide');
} else {
slides[0].classList.add('active-gallery-slide');
}
})
//mobile swipe left functionality
jQuery( ".gallery-frame" ).on( "swipeleft", function( event ) {
current = this;
var slides = current.getElementsByClassName("gallery-slide");
curr_slide = current.getElementsByClassName('active-gallery-slide')[0];
curr_slide.classList.remove('active-gallery-slide');
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-gallery-slide');
} else {
slides[0].classList.add('active-gallery-slide');
}
})
})();
Please check codepen for my code: CODEPEN
Related
There is a website, there is a mobile version. The mobile version has a drop-down menu. This menu works fine, but it doesn't close when clicked outside the block.
I've been looking for a solution on the Internet for a really long time, but nothing came up( I'll be very grateful for the help!
HTML
<header class="header" id="header">
<div class="container">
<div class="header__inner" id="header">
<div class="header__logo">
<img src="Images/ActiveBox_logo.png" alt="Logo" class="img__logo">
</div>
<nav class="nav" id="nav">
Features
Works
Our Team
Testimonials
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
</div> <!-- header__inner -->
</div>
</header>
JS
let header = $("#header");
let intro = $("#intro");
let introH = intro.innerHeight();
let scrollPos = $(window).scrollTop();
let nav = $("#nav");
let navToggle = $("#navToggle");
checkScroll(scrollPos, introH);
$(window).on("scroll resize", function() {
introH = intro.innerHeight();
scrollPos = $(this).scrollTop();
checkScroll(scrollPos, introH);
});
function checkScroll(scrollPos, introH) {
if( scrollPos > introH ) {
header.addClass("fixed");
} else {
header.removeClass("fixed");
}
}
/* Smooth scroll */
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
let elementId = $(this).data('scroll');
let elementOffset = $(elementId).offset().top;
nav.removeClass("show");
$("html, body").animate({
scrollTop: elementOffset - 70
}, 700);
});
// Nav Toggle
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});
How about something like this?
$(document).on('click', function (e) {
if ($(e.target).closest("#box").length === 0) {
$("#box").hide();
console.log('clicked outside the box');
}
else {
console.log('clicked on the box');
}
});
#box{
width:100px;
height:40px;
background-color:blue;
color:white;
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='box'>
click me, then click outside
</div>
I am trying to make something similar to what you find in google images. When a picture is clicked, a div with the image appears on the next line over the other images that is under the clicked one.
I have a set of divs with float:left and position:relative. They have different widths. When i click on a div i want a new full width div to appear on the next line. The divs under the clicked one should be bushed down under the full width one.
I tried to do this by looping through the divs and compare the position of the divs to the clicked one like this:
$(".Wrapper").on("click", ".testDivs", function () {
var thisTop = $(this).position().top;
$(".testDivs").each(function(i, obj) {
var otherTop = $(obj).position().top;
if(thisTop < otherTop){
$(".fullWidthDiv").insertBefore(obj);
return;
}
});
});
This doesn't work and I don't really know how I should do this. Any tips/solutions?
This requires a lot of information to explain. So I'd rather suggest reading a blog post on this topic.Hope this will help you.
https://www.sitepoint.com/recreating-google-images-search-layout-css/
Here is a way to achieve that. It will not keep scroll position but that would be another easy fix.
<div class="wrapper">
<div class="row1 row">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
</div>
<div class="row2 row">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
</div>
<div class="row3 row">
<div class="img1 img"></div>
<div class="img2 img"></div>
<div class="img3 img"></div>
</div>
</div>
I only applied some styling ti increase visibility of the changes.
.img {
width: 32%;
height: 100px;
background-color: #ccc;
display: inline-block;
}
.row {
border: 1px solid green
}
.big-img {
height: 300px;
}
And finally the JS:
$('.img').click(function() {
var expandedImg = '<div class="big-img"></div>';
$('.big-img').remove();
$(this).parent().append(expandedImg);
})
Fiddle: https://jsfiddle.net/a5fm2dup/
why don't you just do
$(".Wrapper").on("click", ".testDivs", function () {
$(this).after($(".fullWidthDiv"));
});
Ended up making a solution based on my initial code. This doesn't require all the CSS the other solution that was postet suggested. Adding rows dynamically was also suggested, but this became very complicated when making it responsive to window resizing. Feel free to reply if you have any comments on this
function positionDiv() {
var checker = false;
var n;
var thisTop = clickedElement.position().top;
$(".testDivs").each(function(i, obj) {
var otherTop = $(obj).position().top;
if(thisTop < otherTop){
$(".testDivs:eq(" + (i-1) + ")").after($(".fullWidthDiv"));
checker = true;
return false;
}
n = i;
});
if (!checker) {
$(".testDivs:eq(" + n + ")").after($(".fullWidthDiv"));
}
}
var clickChecker = null;
$(".wrapper").on("click", ".testDivs", function () {
if (clickChecker === this){
$(".fullWidthDiv").hide();
clickChecker = null;
} else {
$(".fullWidthDiv").show();
clickChecker = this;
}
clickedElement = $(this);
positionDiv();
});
window.onresize = function(event) {
if( clickedElement != null) {
$(".tagTextWrapper").hide();
positionDiv();
$(".tagTextWrapper").show();
}
}
I have the below fiddle
When I hover over prev I want it to move as it is doing and when I stop hovering I want it to stop.
See the code below. The alert works when I stop hovering but the clearInterval does not?
What am I doing wrong here?
<div> <span id="prev">prev</span>
<div class="scroll-container">
<div class="img-container">
<img src="http://dummyimage.com/100x100/000000/fff">
<img src="http://dummyimage.com/100x100/f33636/fff">
<img src="http://dummyimage.com/100x100/0c5b9e/fff">
<img src="http://dummyimage.com/100x100/0c9e0c/fff">
</div>
</div>
</div>
var hoverInterval;
function goLeft() {
if (!$('.img-container').is(':animated')) {
var first = $('.img-container img:first-child');
var firstClone = first.clone();
$('.img-container').append(firstClone);
$('.img-container').animate({
"left": "-=110px"
}, "slow", function () {
first.remove();
$('.img-container').css("left", "0");
});
}
}
$('#prev').hover(
function () {
hoverInterval = setInterval(goLeft, 100);
},
function () {
alert(1);
clearInterval(goLeft);
}
);
Change it to
clearInterval(hoverInterval);
Consider the following code, which toggles visibility of two classes with separate click() functions:
<!-- Toggles -->
<div class="a"></div>
<div class="b"></div>
<!-- Result -->
<div class="x" style="display:none"></div>
<div class="y" style="display:none"></div>
<div class="z" style="display:none"></div>
<!-- Script -->
$( ".a" ).click(function() {
var $this = $(this);
$this.siblings(".x").toggle();
});
$( ".b" ).click(function() {
var $this = $(this);
$this.siblings(".y").toggle();
});
How would I update this so that any time both x and y are visible, a third class, "z" is shown instead of both x and y?
Demo http://jsfiddle.net/Yn3L2/
API is(':visible') http://api.jquery.com/visible-selector/
Rest should fit your needs :)
Code
$(".a").click(function () {
var $this = $(this);
$this.siblings(".x").toggle();
checkZ();
});
$(".b").click(function () {
var $this = $(this);
$this.siblings(".y").toggle();
checkZ();
});
function checkZ() {
$('.z').hide();
if ($('.x').is(':visible') && $('.y').is(':visible')) {
$('.z').show();
}
}
This works as show here: http://jsfiddle.net/DKRe2/1/
HTML:
<!-- Toggles -->
<div class="a">a</div>
<div class="b">b</div>
<!-- Result -->
<div class="x" style="display:none">class x</div>
<div class="y" style="display:none">class y</div>
<div class="z" style="display:none">class z</div>
JS:
<!-- Script -->
$(".a").click(function () {
var $this = $(this);
if ($this.siblings(".y").css('display') != 'none' && $this.siblings(".x").css('display') == 'none') {
//now Hide y and show Z
$this.siblings(".y").toggle();
$this.siblings(".z").toggle();
} else {
$this.siblings(".z").css('display', 'none');
$this.siblings(".x").toggle();
}
});
$(".b").click(function () {
var $this = $(this);
if ($this.siblings(".x").css('display') != 'none' && $this.siblings(".y").css('display') == 'none') {
//now Hide y and show Z
$this.siblings(".x").toggle();
$this.siblings(".z").toggle();
} else {
$this.siblings(".z").css('display', 'none')
$this.siblings(".y").toggle();
}
});
I think this is what you really want.
Working DEMO
Added jQuery code
function checkZ() {
$('.z').hide();
if ($('.x').is(':visible') && $('.y').is(':visible')) {
$('.x').hide(500);
$('.y').hide(500)
$('.z').show();
}
}
I'm doing some work on a site I didn't build, and I'm running into an issue where the nav links for an image slider are making the browser jump to the DIV with that ID tag. It seems to be treating the nav links like anchor links to the DIVs, is there a way to keep the slider functionality, but disable the browser from jumping to those DIVs?
Here's the HTML:
<div class='slide-selectors'>
<div class="homepage-featured">Link 1</div>|
<div class="homepage-featured">Link 2</div>|
<div class="homepage-featured">Link 3</div>|
<div class="homepage-featured">Link 4</div>|
<div class="homepage-featured">Link 5</div>
</div>
<div id="homepage-slides">
<div id="image1" class="sliderContainer">
<img src="/img/img-01.jpg" width="1160" height="200"/>
</div>
<div id="image2" class="sliderContainer">
<img src="/img/img-02.jpg" width="1160" height="200"/>
</div>
<div id="image3" class="sliderContainer">
<img src="/img/img-03.jpg" width="1160" height="200"/>
</div>
<div id="image4" class="sliderContainer">
<img src="/img/img-04.jpg" width="1160" height="200"/>
</div>
<div id="image5" class="sliderContainer">
<img src="/img/img-05.jpg" width="1160" height="200"/>
</div>
</div>
And here's the JavaScript:
var $ = jQuery.noConflict();
var initialize;
function AnimateSlide(newSlide){
var clickedSlide = typeof newSlide !== 'undefined' ? newSlide : "auto";
// console.log("passed DOM id or auto ",clickedSlide);
var currentSlideId, currentSlideDOM, nextSlideId;
var nextSlideDOM = newSlide;
var slideCount = 0;
/* current slide check */
$('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
slideCount++;
if( $(this).hasClass('active') ) {
currentSlideDOM = $(this).attr('href');
$(this).removeClass('active');
currentSlideId = slideCount;
//console.log("active found: DOM", currentSlideDOM,"id", currentSlideId);
}
$(currentSlideDOM).hide();
});
/* end of current slide check */
// console.log("after loop: current active slide DOM",currentSlideDOM,"id", currentSlideId,"count", slideCount);
/* start of automation check */
if(clickedSlide != "auto" ) {
nextSlideDom = clickedSlide;
nextSlideId = parseInt(clickedSlide.replace("#image", ""));
// console.log('slide set to', nextSlideDOM, nextSlideId);
}
else {
if (currentSlideId == slideCount) {
nextSlideId = 1;
}
else {
nextSlideId = currentSlideId + 1;
}
$('#image' + currentSlideId).hide();
nextSlideDOM = "#image" + nextSlideId.toString();
// console.log("automated slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId,"last slide id", currentSlideId);
}
/* end of automation check */
var nextSelectorId = "#slide-selector-" + (nextSlideId);
$(nextSlideDOM).show(); /* add active class to next slide */
$(nextSelectorId).addClass('active'); //.html(nextSelectorHTML);
};
function initializeSlides() {
var slideCount = 0;
$('.slide-selectors').children('.homepage-featured').children('.tab').each(function(){
slideCount++;
});
$('#homepage-slides').children('div').each(function() {
$(this).hide();
});
nextSlideId = Math.floor(Math.random()*(slideCount)) + 1;
nextSlideDOM = "#image" + nextSlideId.toString();
//console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId);
var nextSelectorId = "#slide-selector-" + (nextSlideId);
$(nextSlideDOM).show();
$(nextSelectorId).addClass('active');
//console.log("random slide transition: new slide DOM", nextSlideDOM,"id", nextSlideId, nextSelectorId);
initialize = false;
};
jQuery(document).ready(function($){
/******************** HOMEPAGE BANNER *************************
-show and hide the different featured items in the homepage banner section
-same function utilized for hiding and showing content in product tabs
*/
initialize = true;
initializeSlides();
setInterval(function() {
AnimateSlide();
},rSpeed);
$('.tab').click(function (e) {
var clickedSelector = $(this).attr('href');
AnimateSlide(clickedSelector);
});
});
You need to prevent the default action for the click event:
$('.tab').click(function (e) {
e.preventDefault();
var clickedSelector = $(this).attr('href');
AnimateSlide(clickedSelector);
});