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.
});
Related
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>
There is a bootstrap carousel that is changing automatically:
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
Only one div is set to active at a time, and it cycles through like that.
How can I bind all of carousel's children to another element so that it can set it's specific child to be active as well.
For example:
<div id="copy-cat">
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
<li class=""> </li>
</div>
<div id="carousel">
<div class="active"> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
</div>
How can I bind copy-cat to have the same child active as carousel? Keep in mind, I don't want to copy all of the class attributes- just detect that one is active, and set that same numbered child to active also.
I'd use Bootstrap's slid event callback:
http://jsfiddle.net/isherwood/6xF7k/
$('#carousel').on('slid.bs.carousel', function () {
// get the index of the currently active panel
var myIndex = $(this).find('div.active').index();
// set the element with that index active, deactivating the others
$('#copy-cat').find('li').removeClass('active').eq(myIndex)
.addClass('active');
})
Notice that I changed #copy-cat to ul to make it valid HTML.
http://getbootstrap.com/javascript/#carousel-usage
Given an element x, you can get the index of x in its parent's .children() by calling x.index(). In your example, $("div.active").index() would return 0, the div following would return 1, etc. So you should be able to do something like the following:
$("#copy-cat :nth-child("+(1+$("#carousel div.active").index()) + ")").addClass("active");
(nth-child is 1-index-based, so you need to add 1. You could also call eq(), which is 0-based.)
See this jsFiddle for a rough example.
But this is only a general answer. If there are Bootstrap methods for this purpose, by all means use them.
The Bootstrap carousel has some events that you can tap into.
Information about the events can be found in the "Events" section under the Carousel documentation.
I would recommend doing something like:
<div id="copy-cat">
<div id="copy-1" class="active"></div>
<div id="copy-2" class=""></div>
<div id="copy-3" class=""></div>
<div id="copy-4" class=""></div>
</div>
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active" data-transition-to="#copy-1">
<p>something1</p>
</div>
<div class="item" data-transition-to="#copy-2">
<p>something2</p>
</div>
<div class="item" data-transition-to="#copy-3">
<p>something3</p>
</div>
<div class="item" data-transition-to="#copy-4">
<p>something4</p>
</div>
</div>
</div>
Add a listener as described in the event section, and inspect the relatedTarget.
Use the data-transition-to to figure out the class to add the active class to.
Javascript to support this approach:
$('#carousel').carousel({
interval:false //or whatever options you want
});
$('#carousel').on('slide.bs.carousel',function (event) {
$('#copy-cat .active').removeClass('active');
$(event.relatedTarget.dataset.transitionTo).addClass('active');
});
$('#carousel').carousel('next');
This is is the fiddle ...I disabled transitioning & you will have to inspect the DOM to see that the copy-cat div is being changed.
I made a snippet and I am working a jQuery show/hide when the data attr matches.
HTML structure is like below
<div class="container">
<div class="item" data-item="1">1
<div class="inside" data-content="1">
</div>
</div>
<div class="item" data-item="2">2
<div class="inside" data-content="2">
</div>
</div>
<div class="item" data-item="2">3
<div class="inside" data-content="3">
</div>
</div>
</div>
the class class="item" will be append (ed) to outside div, I'd like to achieve that,
if content data-num is existing, do not "append()", show()instead, then the slides can be showed properly. I wanted to learn how to check if data-num existing?
so the concept is like that,
if click on class item if item 's data-item(e.g. data-item = "2") matches outside > content data-num (e.g data-num = "2" ), then show() that content class.
Hope I made it clear. Thanks a lot.
Here is online sample: http://jsfiddle.net/8VD9R/
You have to iterate over the content class.
I am writing the sample code here ,Please update it accordingly:
$('.item').click(function(){
$('.content').hide();
$('.content').each(function(i, obj) {
if($(this).attr('data-item')==$(obj).attr('data-num'))
{
$(obj).show();
return;
}
});
});
I've got a set of elements where when I click on a specific button, I want to animate one element at a time using jquery.
This is my html markup.
<ul class="image-wrapper">
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
<li class="image">
<img src="images/slider-image-1.jpg">
</li>
</ul>
<div class="left-arrow"></div>
<div class="right-arrow"></div>
<div class="overlay"></div>
<div class="menu"></div>
This is my jquery code for animate each element.
$('.left-arrow').click(function(){
$('.image').first().animate({
width:'0px'
},1000);
})
But the problem is after the first animation, I cannot continue with the rest! how can I loop through the elements to slide in each element.
you need to keep and index
var index = 0, $imgs = $('.image');
$('.left-arrow').click(function(){
$imgs.eq(index ).animate({
width:'0px'
},1000);
index = index == 0 ? $imgs.length - 1 : index - 1 ;
})
Demo: Fiddle
Try jquery's .each(),
$('.left-arrow').click(function(){
$('.image').each(function(){
$(this).animate({
width:'0px'
},1000);
})
I have 2 questions:
1) Since I have similar structure for the html contents and the only difference is that class title contents are different. I tried using $(div .title:contains("cat")) also
$(div .title).text()="cat")
2)How can I get the index of the accordion by just checking the $(div a) contents are required ones. I tried using $(div a).text()=="cat"
Check the codes here:
HTML1 contents
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">cat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">rat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">dog</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
Accordian
<div id="dia">
<div id="dialog" title="Detailed FeedBack ">
<div id="accordion">
<h3>dog</h3>
<h3>cat</h3>
<h3>rat</h3>
</div>
</div>
</div>
Javascript
$('div .title').mouseover(function() {
if($("div a").text().indexOf("cat")!=-1)
{
$("#accordion").accordion("activate", 1);
}
$('div .title').mouseleave(function(){$("#accordion").accordion("activate", -1); });
});
Here is what I am trying to do with this javascript code. When I mouse over the cat contents I want the accordion with cat contents to open. And when I leave it to close the accordion selection.
When I hover my mouse over the html contents cat ,rat. It should side by side open the accordion button of those contents. Example: I hovered over rat (of html contents) I should see accordion rat open (or active i.e. contents visible).
Updated (see demo)
It sounds like you want something like this: when a content section is hovered over, find the title of that section, match its text against the text of the <a> elements in the accordion, and activate that section:
$(function() {
$("#accordion").accordion();
var links = $('#accordion a').map(function() {
return $(this).text().trim().toLowerCase();
}).toArray();
$('div.content').mouseover(function() {
var title = $(this).find('div.title').text().toLowerCase();
var index = links.indexOf(title);
if (index != -1) {
$("#accordion").accordion("activate", index);
}
});
});
P.S. jQuery does have a .hover() method for this as well.
It should be as succinct as the following (with potential minor tweaks):
$('.content .title').hover(function(e){
var index = this.textContent.split(/\W/)[1] - 1;
$("#accordion").accordion('activate', index);
});
Be careful with the HTML as this regular expression is overly simple in that it just grabs the last "word" which in the case of your example is a number. We subtract one to get a zero-based index. That will break if you add further text to the element.
See: http://jsfiddle.net/35yGV/