I would like the Anchor-Array of the fullpage.js to be set automatically.
I would like to paste this into my WordPress theme, but i have problem with my functions. Do you have a idea? Thank you for help.
HTML
<div id="fullpage">
<div class="section" id="page-section-1"></div>
<div class="section" id="page-section-2"></div>
<div class="section" id="page-section-3"></div>
<div class="section" id="page-section-4"></div>
</div>
JS
function getAnchorarray() {
var idarray = $("#fullpage")
.find(".section")
.map(function () {
return this.id;
})
.get(); //ToArray
}
$('#fullpage').fullpage({
navigation: false,
scrollBar: true,
menu: '.main-nav',
//anchors: ["page-section-1", "page-section-2", "page-section-3", "page-section-4"],
anchors: getAnchorarray(),
responsiveWidth: 400
});
Just use the data-anchor attribute :)
As detailed in the docs:
Note that section anchors can also be defined in the same way, by using the data-anchor attribute, if no anchors array is provided.
<div class="section">
<div class="slide" data-anchor="slide1"> Slide 1 </div>
<div class="slide" data-anchor="slide2"> Slide 2 </div>
<div class="slide" data-anchor="slide3"> Slide 3 </div>
<div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>
Related
is it possible to change an image dependent on the current slide in owl carousel?
I know that there are events within owl carousel but I didn't found what I wanted.
Thanks in advance to everyone who takes the time to answer the questions.
Screenshot
HTML:
<div class="row">
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<img src="image1.png"/> <!-- change to image2.png if slide 2 is active -->
</div>
</div>
<div class="owl-carousel-team">
<div class="col-lg-9 col-md-12 item">
<h3>Slide 1</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
<div class="col-lg-9 col-md-12 item">
<h3>Slide 2</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
</div>
Javascript:
var teamCarousel = function(){
var owl = $('.owl-carousel-team');
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();
teamCarousel();
});
You can detect your slide movement by
owl.on('translated.owl.carousel', function(event) {
// Your code here
})
use translated.owl.carousel for after slider moved
Give an id to your image tag, then get the active slider image source and set to <img/>
e.g.
owl.on('translated.owl.carousel', function(event) {
var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src');
$('#you_img_id').attr('src', now_src);
})
Here's the demo https://jsfiddle.net/566j4jsf/
Problem:
I have tabs that are powered by jQuery tabs. Inside tabs there are accordion items that expand when clicked. I'd like to hide all active(opened) accordion div's when I change to a different tab.
Current code that manages accordion behaviour:
var all_spans = $('.accordion-item-text').hide();
$('.accordion-item h3').click(function(e){
$('.accordion-item h3').removeClass('active');
$(this).toggleClass('active');
var thisSpan = $(this).parent().find('.accordion-item-text'),
isShowing = thisSpan.is(":visible");
all_spans.hide(500);
if (!isShowing) {
thisSpan.slideToggle();
}
e.preventDefault();
});
Current code that should manage tab change and hiding all opened accordion elements:
So, i thought that a simple click function would do it but apparently I was mistaken.
$('.ui-tab').click(function() {
$('.accordion-item h3').removeClass('active');
$('.accordion-item-text').hide(500);
});
This just does not work, do I have to search that exact div before? Any suggestions are welcome.
Current HTML part:
<div class="product_content">
<div id="tabs">
<ul class="clearfix">
<li>About</li>
<li>General specifications</li>
</ul>
<div id="tabs-0" class="tabcontent">
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
</div>
<div id="tabs-1" class="tabcontent">
<div class="accordion_wrap">
<div class="accordion-item">
<h3>Accordion label</h3>
<div class="accordion-item-text">accordion content</div>
</div>
</div>
</div>
</div>
</div>
So, I have found a solution for it.
I dont know exactly why my previous function did not work but after sleeping on it i read jQuery UI documentation and found out that I can use my regular tabs fire function.
$("#tabs").tabs({
activate: function(event, ui) {
$('.accordion-item h3').removeClass('active');
$('.accordion-item-text').hide(500);
}
});
I'm using the excellent slider OWL Carousel 2. http://www.owlcarousel.owlgraphic.com/
My issue is the URLhashListener option only allows you to create a link to a specific slide but does not allow the user to copy the url link from the current slide to share. I would assume the correct behaviour of this option would be the URL updates as the user moves to the next slide so they can then copy that unique URL.
http://www.owlcarousel.owlgraphic.com/demos/urlhashnav.html
My OWL code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var owl = $(".owl-carousel");
owl.owlCarousel({
smartSpeed:1500,
items:1,
lazyLoad:true,
loop:true,
URLhashListener:true,
startPosition: 'URLhash',
nav: true,
});
});
//]]>
</script>
I'm using data-hash in my image tag to generate the hash id for each image which works fine (you can link to the specific slide). But when you click next and arrive at the next slide the URL will remain as #HASHID. The link no longer corresponds to the current slide.
<img id="zm" class="owl-lazy owlimg" data-hash="slideID" data-src="myimagelink.jpg">
Here's a live page with the url hash nav working:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/
With hash:
http://www.legacyart.pinkpoliceman.com/collections/birds-of-prey/#slide14
I'm sure these docs hold part of the answer but I'm not sure how to piece it all together. http://www.owlcarousel.owlgraphic.com/docs/api-events.html
Update (Native solution)
It seems that once you add data-hash to your items, the plugin take care about all the functionality.
http://jsbin.com/javuwod/edit?html,js
Original Answer
You can easily "listen" to slide changed event using changed.owl.carousel, then you can change the hash according the slide's index.
var owl = $('.owl-carousel');
owl.owlCarousel({
margin:10,
nav:true,
URLhashListener: true,
startPosition: 'URLHash'
});
// Listen to owl events:
owl.on('changed.owl.carousel', function(event) {
location.hash = 'slide' + event.property.value;
})
<link href="http://www.owlcarousel.owlgraphic.com/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.js"></script>
<div id="demos">
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<h4>1</h4>
</div>
<div class="item" data-hash="slide1">
<h4>2</h4>
</div>
<div class="item" data-hash="slide2">
<h4>3</h4>
</div>
<div class="item" data-hash="slide3">
<h4>4</h4>
</div>
<div class="item" data-hash="slide4">
<h4>5</h4>
</div>
<div class="item" data-hash="slide5">
<h4>6</h4>
</div>
<div class="item" data-hash="slide6">
<h4>7</h4>
</div>
<div class="item" data-hash="slide7">
<h4>8</h4>
</div>
<div class="item" data-hash="slide8">
<h4>9</h4>
</div>
<div class="item" data-hash="slide9">
<h4>10</h4>
</div>
<div class="item" data-hash="slide10">
<h4>11</h4>
</div>
<div class="item" data-hash="slide11">
<h4>12</h4>
</div>
</div>
</div>
http://jsbin.com/javuwod/edit?html,js
I am trying to select the .next() div to work within a carousel.
However, it seems to be returning all .children() rather than the .next()
HTML
<nav class="slider-navigation">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</nav>
<div class="slides">
<div class="slide" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
JQUERY
$(".left-arrow").click(function () {
var currentSlide = $(this).parent().siblings(".slides").children().next();
// Do something with currentSlide.
});
When I console.log(currentSlide) in the browser it returns all 4 children of .slides.
The same happens for $(".right-arrow").click() I just did not want to add duplicate code
Any help?
Thanks
another option is to set the first element to the "current" class and use it to start the navigation between the slides.
*on prev control click, if there is no element before this one so nothing will happen and vice versa, so that's ok but if you want it to change direction after the last/first element got the "current" class so tell me and i will update the code...
Here it is:
HTML:
<nav class="slider-navigation">
<div class="left-arrow">left</div>
<div class="right-arrow">right</div>
</nav>
<div class="slides">
<div class="slide current" id="slide1"></div>
<div class="slide" id="slide2"></div>
<div class="slide" id="slide3"></div>
<div class="slide" id="slide4"></div>
</div>
Jquery:
$(document).ready(function(){
$(".left-arrow").click(function(){
$('.current').prev().addClass('current');
$('.current:first').next().removeClass('current');
});
$(".right-arrow").click(function(){
$('.current').next().addClass('current');
$('.current:last').prev().removeClass('current');
});
});
live example: http://jsfiddle.net/spvLpjct (i've put some CSS to help you understand it).
If the current slide is visible and the rest are hidden you could use:
$(".left-arrow").click(function () {
var currentSlide = $(".slides > .slide:visible").next();
// Do something with currentSlide.
});
Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>
You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.
I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});
Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/