I have a jQuery each() function that loops through a set of three divs adding active to the items within the divs. I'm able to stop the loop on click for my function, but I'm having a hard time making it so that when you click on one of the items of a div, the other items that have the same class stays active. I know I can do it with if statements, but I'm having a hard time figuring it out.
HTML:
<div class="list-items loop-set">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="list-items loop-set">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="list-items loop-set">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
my function:
function doLoop() {
var $one = $('.one');
var $two = $('.two');
var $three = $('.three');
var interval = setInterval(function () {
$('.loop-set').each(function () {
var $set = $(this);
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
});
}, 1000);
$('.loop-set').on('click', '> *', function () {
var $this = $(this);
$('.loop-set .active').removeClass('active');
if ($this == $one) {
$one.addClass('active');
} else if ($this == $two) {
$two.addClass('active');
} else if ($this == $three) {
$three.addClass('active');
}
clearInterval(interval);
});;
}
doLoop()
I included my code on this fiddle. Any help/advice would be greatly appreciated!
Try
$('.loop-set').on('click', '> *', function () {
var $this = $(this);
$('.loop-set .active').removeClass('active');
$('.loop-set .'+this.className).addClass('active');
clearInterval(interval);
});
Demo: Fiddle
What about this more simplier code: http://jqversion.com/#!/ndZt3Zz/1
Is this the behaviour you want?
$('.loop-set').change(function () {
var $set = $(this);
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
});
var interval = setInterval(function(){
$('.loop-set').trigger('change');
}, 1000);
$('.loop-set > div').click(function(){
clearInterval(interval);
$('.loop-set > div').removeClass('active');
$('.' + $(this).attr('class')).addClass('active');
});
What about changing the onClick to something like this:
$('.loop-set').on('click', function () {
var $this = $(this);
$('.loop-set.active').removeClass('active');
$this.addClass("active");
clearInterval(interval);
});
What it does is it adds active class to loop-set making all of its children bolded. When you click another group - the highlight changes as well.
Here is the updated jsfiddle: http://jsfiddle.net/sL95U/5/. Hope it helps.
Related
I just made layer popup and I want to make it more accessibility.
This is what I tried so far
<p>Open layer1</p>
<p>Open layer2</p>
<div id="target" class="hidden">
layer1
<button class="close">clos</button>
</div>
<div id="target2" class="hidden">
layer2
<button class="close">clos</button>
</div>
$(document).ready(function() {
$.fn.layerOpen = function(options) {
return this.each(function() {
var $this = $(this);
var $layer = $($this.attr('href') || null);
$this.click(function() {
$layer.attr('tabindex',0).show().focus();
$layer.find('.close').one('click',function () {
$layer.hide();
$this.focus();
});
});
});
}
$('.layer').layerOpen();
});
Can any one have an idea for more accessible code ? Or any examples ?
Thank you.
Avoid to bind multiple click events. Also use hash property instead of href-attribute.
I suggest you do something like this:
$.fn.layerInit = function(options) {
return this.each(function() {
var $this = $(this), hash = $this.prop('hash'), $layer;
if (hash) {
$layer = $(hash).attr('tabindex', 0);
$this.on('click.layer', function() {
$layer.show().focus();
});
$layer.find('.close').on('click.layer', function() {
$layer.hide();
$this.focus();
});
}
});
};
$(document).ready(function() {
$('.layer').layerInit();
});
Avoid using loops and in-lining events
I suggest you do something like this:
$(document).ready(function() {
$.fn.layerOpen = function(options) {
var $this = $(this);
var layer = null;
$this.click(function() {
layer = $(this).attr('href') || null;
$(layer).attr('tabindex',0).show().focus();
});
$layer.find('.close').one('click',function () {
$(layer).hide();
$('[href="'+layer+'"]').focus();
});
}
$('.layer').layerOpen();
});
I have the following HTML:
<section>
<div class="main" id="second"> </div>
</section>
<section>
<div class="main" id="third"></div>
</section>
<section>
<div class="main" id="fourth"></div>
</section>
And following jQuery code:
<script>
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if( placement.top<window.innerHeight && placement.bottom>0 ) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
</script>
The work of the script is to allow smooth scrolling between different anchors on the site and to change URL #id on click or on scroll. I want to use here conditional statements with the id grabbed from the URL.
For example:
if(grabbedhashid == "second"){
$(".phone").css('display', 'none');
}else{
//display
}
But I am not having any idea as from where I can do it. Please help me guys.
Example URL with ID: http://localhost/sites/fh/index.php#first
So basically you have it in your scroll function, use that script to hide phone only in #second, it will work for you
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if (placement.top < window.innerHeight && placement.bottom > 0) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
if(elem.id == "#second"){
$(".phone").css('display', 'none');
}else{
$(".phone").css('display', 'block');
}
return false; /* Exit $.each loop */
};
});
});
If you want to get current browser url at the time of scroll/click, you can get them as below. Use some string filter function like(window.location.href.split("#");) if you want to filter out only #id part.
JavaScript :
//using href
var URL = window.location.href;
//using path
var URL = window.location.pathname;
Jquery :
$(location).attr('href');
I have a function that continuously loops through a set of divs (see below) with the class active. I'm trying to modify the function so that when you click on the div it stops the loop and adds the class active to that div.
I've looked through countless examples on StackOverflow, but haven't been able to find something that works for my situation.
Function I'm trying to modify:
function doLoop() {
$('.cd-types, .img-frame, .img-content-container').each(function(){
(function($set){
setInterval(function(){
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
},7000);
})($(this));
});
}
Here is the jfiddle with my attempt on modifying the loop. I know its fairly simple and I've spent the last few hours trying to figure it out. Any advice/direction would be greatly appreciated.
Try
function doLoop() {
$('.cd-types, .img-frame, .img-content-container, .list-items').each(function () {
var $set = $(this);
var interval = setInterval(function () {
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
}, 1000);
$set.data('loop', interval);
$set.on('click', '> *', function () {
$(this).addClass('active').siblings('.active').removeClass('active');
clearInterval($set.data('loop'));
$set.removeData('loop')
});
});
}
Demo: Fiddle, Fiddle2
Simplified the loop function a bit to use the "self" variable trick.
timerID was used to track the setInterval() call so that it could be stopped using clearInterval() call when clicked:
$('.list-items').children().first().addClass('active');
var timerID;
$('.list-items').each(function () {
var self = this;
timerID = setInterval(function () {
var $cur = $(self).find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $(self).children().eq(0);
$next.addClass('active');
}, 1000);
});
$('.list-items').on('click', function(){
clearInterval(timerID);
alert("Stopped");
});
See the working code at:
JSFiddle
The goal: I'm trying to limit all my text boxes in all DIV ID named #boom1.
The problem: Can't get them all (a problem with the loop method in my opinion)
$(function () {
var maxL = 300;
$('#boom1').each(function (i, div) { //I got lost with syntax over here
var text = $('#boom1').text();
if(text.length > maxL) {
var begin = text.substr(0, maxL),
end = text.substr(maxL);
$('#boom1').html(begin)
.append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
.append($('<div class="hidden" />').html(end));
}
});
$(document).on('click', '.readmore', function () {
$(this).next('.hidden').slideDown(750);
})
})
I'll be glad to get some help, with syntax if possible..
Thanks.
Attaching a DEMO
try using following code, working fine
$(function () {
var maxL = 300;
$('.wp-caption-text').each(function (i, div) {
//alert("dfs");
var text = $(this).text();
if(text.length > maxL) {
var begin = text.substr(0, maxL),
end = text.substr(maxL);
$(this).html(begin)
.append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
.append($('<div class="hidden" />').html(end));
}
});
$(document).on('click', '.readmore', function () {
$(this).next('.hidden').slideDown(750);
})
})
$(function () {
var maxL = 300;
$('#boom1').each(function () { // If you don't use them you won't need them here
var text = $('#boom1').text();
if(text.length > maxL) {
var begin = text.substr(0, maxL),
end = text.substr(maxL);
$('#boom1').html(begin)
.append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
.append($('<div class="hidden" />').html(end));
}
});
$(document).on('click', '.readmore', function () {
$(this).next('.hidden').slideDown(750);
});
});
DEMO
id must be unique.
Use classes for multiple usage .
added class boom to each div.
added read less... and read more... toggling feature too.
$(this) refers to the current element in the loop.
$(function () {
var maxL = 300;
$('.boom').each(function (i, div) {
var text = $(this).text();
if (text.length > maxL) {
var begin = text.substr(0, maxL),
end = text.substr(maxL);
$(this).html(begin)
.append($('<a class="readmore"/>').attr('href', '#').html('read more...'))
.append($('<div class="hidden" />').html(end));
}
});
$(document).on('click', '.readmore', function () {
$(this).html(function(_,ctr){
return (ctr == 'read more...') ? 'read less...':'read more...'
});
$(this).next('.hidden').slideToggle(750);
});
});
.each() makes you loop through all instances of an element, so you shouldn't use an ID. The following would iterate on every "some-class" element.
<div class="some-class"></div>
<div class="some-class"></div>
$('.some-class').each(function (i, div) {/* code*/ });
I don't think you can use each on an id - it will only get you the first one. Identifiers should be unique and only appear once per page. So only the first one will be used.
Try adding a class to each '#boom1'.. for example '.boom-class' and then doing jQuery each on it.
I have slightly modified the code in this post jQuery div content partial hide, show all to show/hide a list of div's on my page.
I am still learning jQuery and am trying to figure out how I can modify the code so that when I open one div, it will close any other's that are open.
Thanks a lot for any help. Here is my code block:
function setScroll(){
var slideHeight = 80;
$(".container").each(function() {
var $this = $(this);
var $wrap = $this.children(".wrap");
var defHeight = $wrap.height();
if (defHeight >= slideHeight) {
var $readMore = $this.find(".heading");
$wrap.css("height", slideHeight + "px");
$readMore.append("<div id='clickButton' class='expand-div'>Click for More Info</div>");
$readMore.children("#clickButton").bind("click", function(event) {
var curHeight = $wrap.height();
if (curHeight == slideHeight) {
$wrap.animate({
height: defHeight
}, "normal");
$(this).removeClass("expand-div").addClass("collapse-div");
$(this).text("Close");
$wrap.children(".gradient").fadeOut();
} else {
$wrap.animate({
height: slideHeight
}, "normal");
$(this).removeClass("collapse-div").addClass("expand-div");
$(this).text("Click for More Info");
$wrap.children(".gradient").fadeIn();
}
return false;
});
}
});
}
Simple example (jsfiddle) demonstrates closing all and opening one.
var divs = $('div.highlander').hide();
var which = divs.length;
$('#cycler').click(function () {
which += 1;
if (which >= divs.length) {
which = 0;
}
divs.hide();
divs.eq(which).show();
});
Roy's answer is good. I have another example of something you could do. A little bit more general and possible easier to understand. http://jsfiddle.net/sFR6Q/2/
<button class="show1">show1</button>
<button class="show2">show2</button>
<button class="show3">show3</button>
<button class="show4">show4</button>
<div class="show1">1</div>
<div class="show2">2</div>
<div class="show3">3</div>
<div class="show4">4</div>
var divs = $("div")
$('button').click(function () {
divs.hide();
$("div." + $(this).attr("class")).show();
});
First close all the div's irrespective of if they are open or closed.
Then just open the div you need.