Whenever I have 2 Owl-Carousel's on 1 site my hamburger menu doesn't work anymore.
I used flew as the base for my website. It uses jQuery v2.1.4.
Header HTML:
<header class="navbar navbar-default navbar-custom navbar-fixed-top affix" role="banner">
<div class="container">
<div class="header-inner">
<nav role="navigation">
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
Owl Carousel HTML:
<div>
<div class="container"> <!-- Owl Carousel 1 -->
<div class="row">
<div class="owl-carousel-one">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
<div class="container"> <!-- Owl Carousel 2 -->
<div class="row">
<div class="owl-carousel-two">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
</div>
Hamburger menu / Header JS:
;(function () {
var mobileMenuOutsideClick = function() {
$(document).click(function (e) {
var container = $("#tsj-offcanvas, .js-tsj-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-tsj-nav-toggle').removeClass('active');
}
}
});
};
var offcanvasMenu = function() {
$('body').prepend('<div id="tsj-offcanvas" />');
$('#tsj-offcanvas').prepend('<ul id="tsj-side-links">');
$('body').prepend('<i></i>');
$('#tsj-offcanvas').append($('#tsj-header nav').clone());
};
var burgerMenu = function() {
$('body').on('click', '.js-tsj-nav-toggle', function(event){
var $this = $(this);
$('body').toggleClass('tsj-overflow offcanvas-visible');
$this.toggleClass('active');
event.preventDefault();
});
$(window).resize(function() {
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-tsj-nav-toggle').removeClass('active');
}
});
$(window).scroll(function(){
if ( $('body').hasClass('offcanvas-visible') ) {
$('body').removeClass('offcanvas-visible');
$('.js-tsj-nav-toggle').removeClass('active');
}
});
};
}());
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Owl Carousel (it's in the same function as the Hamburger menu / Header):
;(function () {
var oneCarousel = function(){
var owl = $('.owl-carousel-one');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:true,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
oneCarousel();
});
var twoCarousel = function(){
var owl = $('.owl-carousel-two');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
twoCarousel();
});
}());
Also this is the error message I receive when I click on the hamburger menu:
main.js:249 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (main.js:249)
at HTMLAnchorElement.dispatch (jquery.min.js:3)
at HTMLAnchorElement.r.handle (jquery.min.js:3)
EDIT: Whenever I delete 1 Carousel (doesn't matter which one), my hamburger menu works again.
I found the answer!
You have to add the "owl-carousel" class on your carousels.
<div>
<div class="container"> <!-- Owl Carousel 1 -->
<div class="row">
<div class="owl-carousel owl-carousel-one">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
<div class="container"> <!-- Owl Carousel 2 -->
<div class="row">
<div class="owl-carousel owl-carousel-two">
<div> <!-- content --> </div>
<div> <!-- content --> </div>
</div>
</div>
</div>
AND I made the mistake of launching the same function twice.
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
oneCarousel();
});
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
twoCarousel();
});
You need to fuse them:
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight();
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
oneCarousel();
twoCarousel();
});
Related
I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}
I am using slideUp / down to show and hide content and have written it to that it will close any visible content when opening another one. This works until I try to close content by clicking on it, it opens it again straight away.
The HTML
<ul class="contents">
<li>
while($results->fetch()){
<div class="details">text</div>
<div class="more_details">more text</div>
}
</li>
</ul>
The jQuery
$("#results").on("click", ".details", function() {
$(".open").slideUp(600, function() {
$(".open").css("display", "none").removeClass("open");
});
if ($(this).hasClass("open")) {
$(this).slideUp( 600, function() {
$(this).css("display", "none").removeClass("open");
});
} else {
$(this).next(".more_details").slideDown(600, function() {
$(this).css("display", "show").addClass("open");
});
}
});
In the slide down code you are working with the next sibling more_details, where in the slide up code you are dealing with this element.
$("#results").on("click", ".details", function() {
var $details = $(this).next(".more_details");
$details.slideToggle(600, function() {
$details.toggleClass("open");
});
$(".more_details.open").not($details).slideUp(600, function() {
$(this).removeClass("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
</div>
I'm trying to achieve smooth scrolling with jQuery and smoothscroll.js. I have done a lot of research as to why I'm getting this error in dev tools but I can't seem to figure it out:
TypeError: $(...).offset(...) is undefined
This is my code:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - headerH + 'px'
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
This is the html:
<body class="onepage" data-spy="scroll" data-target=".navigation">
<div id="load"></div>
<!-- START PAGE WRAP -->
<div class="page-wrap">
<!-- START HOME SECTION -->
<div id="home" class="home-parallax">
<div class="home-text-wrapper">
<div class="home-logo-text">
Welcome to Jarvis
</div>
<div id="home-slider" class="flexslider">
<ul class="slides styled-list">
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">Creative</span> Nerds</p></li>
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">crazy</span> Coders</p></li>
<li class="home-slide"><p class="home-slide-content">We <span class="highlight">love</span> Pizzas</p></li>
</ul>
</div><!-- END FLEXSLIDER -->
</div><!-- END HOME TEXT WRAPPER -->
</div><!-- END HOME SECTION -->
<!-- START NAVIGATION -->
<nav class="light sticky-nav navigation">
<!-- START CONTAINER -->
<div class="container clearfix">
<div class="four columns">
<!-- START LOGO -->
<div class="logo large">
<img src="images/logo.png" title="logo" alt="Logo"/>
</div>
<!-- END LOGO -->
</div><!-- END FOUR COLUMNS -->
<div class="twelve columns">
<!-- START NAVIGATION MENU ITEMS -->
<ul class="main-menu large nav" id="nav">
<li>Home</li>
<li>About</li>
</ul>
<!-- END NAVIGATION MENU ITEMS -->
</div><!-- END TWELVE COLUMNS -->
</div><!-- END CONTAINER -->
</nav>
<!-- END NAVIGATION -->
<!-- START ABOUT US SECTION -->
<div id="about" class="page">
<div class="container">
<div class="row">
<div class="sixteen columns">
<!-- START TITLE -->
<div class="title">
<h1>About Jarvis</h1>
<div class="subtitle">
<p>we are utmost <span class="highlight">Creative Agency</span> located in Melbourne, Australia. Praesent rhoncus nunc <span class="highlight">vitae metus</span> condimentum viverra.</p>
</div><!-- END SUBTITLE -->
</div><!-- END TITLE -->
</div><!-- END SIXTEEN COLUMNS -->
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
Please check element is exist or not before got top property of offset() function:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var destinateEle = $($(this).attr("href"));
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
After read you update HTML, I have to change js to remove "index.html".
Jquery('index.html#your-id') will always return empty element.
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var queryIDArr = $(this).attr("href").split('#');
if (queryIDArr.length < 2) return;
var queryID = queryIDArr[1];
var destinateEle = $('#' + queryID);
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
I have a simple owl-carousel,
HTML:
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
JavaScript:
$('.owl-carousel').owlCarousel({
items: 5,
loop:true,
nav:true,
margin: 10
})
Included:
owl.carousel.js
owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
How to force the carousel scroll to the clicked item?
<html>
<head>
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
.owl-carousel .item {
height: 80px;
background: #4DC7A0;
}
</style>
</head>
<body>
<div id="owl-demo">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
var owl = $("#owl-demo");
owl.owlCarousel({
items : 5, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0;
itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
});
// Custom Navigation Events
$(document).on('click', '.owl-item', function(){
n = $(this).index();
console.log(n)
$('.owl-wrapper').trigger('owl.goTo', n);
});
});
</script>
</body>
</html>
There are was few trouble with version, and thats why i send you full html page - try it to yourself!
You can try next code:
var sync2 = jQuery('.sync2').owlCarousel({
loop:true,
margin:0,
nav:false,
dots:false,
responsive:{
0:{
items:4
}
},
center: false,
navText: ["",""],
linked: ".sync1"
});
sync2.on('click', '.owl-item', function(event) {
var target = jQuery(this).index();;
sync2.owlCarousel('current',target);
});
Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$('button').trigger('to.owl.carousel', 1);
None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :
//Select by id if one is set or via '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}
Please note : My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**
//Scroll to last selected carousel
$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');
//scroll to last clicked item
for(var i =0; i<lastClickedIndex; i++ ){
$carouselElement.trigger('next.owl.carousel');
}
I have bit of a problem. Animation is working just first time is clicked, second time when it is clicked, it is refusing to work - when I click right and back it is working, but when I want to go right again it is not working. Code:
var main_container = $('.main_container'),
menu = $('.home_navigation_text'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
menu.hover(
function(){
var $this = $(this),
page = $this.find('a').attr('href');
second_page.empty().load(page);
},
function(){
}
);
menu.on('click', function(e){
main_container.animate({
right: '+=' + body_width
}, 600, 'linear', function() {
go_back();
});
return false;
});
function go_back()
{
var back = second_page.find('.back');
back.on('click', function(e){
main_container.animate({
left: '+=' + body_width
}, 600, 'linear', function() {
});
return false;
});
}
HTML Code:
<div class="main_container clearfix">
<section class="home_page clearfix">
<header class="home_header container">
<div class="grid_3 alpha omega" id="home_logo">
<img class="" src="<?php echo IMG ?>resources/jbs_cc_logo.png" alt="JBS Logo">
</div>
<div class="grid_9 alpha omega">
</div>
</header>
<!-- END OF HEADER -->
<div class="home_main container">
<nav class="home_navigation clearfix">
<ul class="clearfix">
<?php foreach ($menu as $mn): ?>
<li class="home_navigation_text">
<a class=home_navigation_link href="<?php echo base_url($mn['slug']) ?>"><?php echo $mn['title'] ?></a>
</li>
<?php endforeach ?>
</ul>
</nav>
</div>
</section>
<section class="second_page">
</section>
</div>
As you're loading content, I'm guessing the menu is somehow replaced, and is as such dynamic. Delegating to the main_container would probably work, but it's hard to say as there is no markup posted and I have no idea how it looks ?
var main_container = $('.main_container'),
second_page = main_container.find('.second_page'),
body_width = $(window).width();
main_container.on({
mouseenter: function() {
second_page.empty().load( $(this).find('a').attr('href') );
},
click: function(e) {
e.preventDefault();
main_container.animate({
right: '+=' + body_width
}, 600, 'linear');
}
}, '.home_navigation_text');
main_container.on('click', '.back', function(e){
e.preventDefault();
main_container.animate({
right: '-=' + body_width
}, 600, 'linear');
});