We Keep Coding

Jquery if div toggled is already visible

i have a div that i want to toggle on click.If div is already visible i dont want my toggle function be executed. Here is my code and for some reasont it's not working propper.
JsFiddle here
<script>
$( document ).ready(function() {
if ($("#toggled").is(":hidden"))
{
$(".test" ).click(function() {
$("#toggled").toggle();
});
}
else
{
}
});
</script>

A lot of work but finally
$( document ).ready(function() {
var indexs = null;
var bindIt = false;
$("ul .test" ).click(function() {
$("#toggled").show();
if($(this).index() == indexs && bindIt == true){
$("#toggled").hide();
bindIt = false;
}else if(bindIt == false){
indexs = $(this).index();
bindIt = true;
}
});
});
JSFIDDLE

You're overthinking this one. If you just want to show the div when a list item is clicked, the show function is all you need:
$(document).ready(function () {
$(".test").click(function () {
$("#toggled").show();
});
});
Here's the updated jsFiddle.

Try using jQuery's one method:
$( document ).ready(function() {
$(".test" ).one('click', function() {
$("#toggled").show();
});
});

Matching text within a parent element

I am attempting to check if 2 divs contain the same text, and if they do then add a style to the parent div.
I have this working fine with the below code, but my problem is that the divs are all looking for a match and not just the divs that are in the parent? if you look at the below
<div class="infobox">
<div class="date">8</div>
<div class="secdate">8</div>
</div>
<div class="infobox">
<div class="date">1</div>
<div class="secdate">11</div>
</div>
<div class="infobox">
<div class="date">8</div>
<div class="secdate">11</div>
</div>
and the jQuery
jQuery(function ($) {
$('.date').each(function () {
var myhtml = $(this).html().split(' ')[0];
var ele = $(this);
$('.secdate').each(function () {
myhtml == $(this).html().split(' ')[0] ? $(ele).parent().css('background', '#ffff00') : ""
})
})
});
Fiddle
the third div is having the style applied, which it shouldn't as the 2 divs within don't match?

This seems much simpler:
$('.infobox').each(function () {
if ($(this).find('.date').text() == $(this).find('.secdate').text()) $(this).css('background', '#ffff00')
})
jsFiddle example
Loop over the parent (infobox) and just compare the text of the date child to the secdate child.

Seems like it should be simpler:
jQuery(function ($) {
$('.date').each(function () {
var dateText = $(this).text();
var secdateText = $(this).next('.secdate').text();
if (dateText == secdateText) {
$(this).parent().css('background', '#ffff00');
}
});
});
Fiddle

I changed things a little bit:
$(document).ready(function(){
$('.infobox').each(function () {
if( $(this).children('.date').html() == $(this).children('.secdate').html() )
$(this).css('background', '#ffff00');
});
});
This way you don't even need a loop.
I tested here and it works like charm :)
Hope it helps

Alternate content of a div every 3 seconds with javascript

I would like to alternate the contents of a div (or swap in a new div if better) every few seconds, with a fade in/out. Jquery prefered, or pure js fine too.
Based on Arun's solution, I have added the Jquery below, and it works perfectly... but how do I make it repeat?
HTML:
<div class="wrapper" style="height:100px">
<div id="quote1">I am a quote</div>
<div id="quote2">I am another quote</div>
<div id="quote3">I am yet another quote</div>
</div>
Javascript: (as per Arun in the comments)
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
$els.eq(++i % len).fadeIn();
})
}, 2500)
})

Try
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})
Demo: Fiddle

Here is a working example:
jQuery(function () {
var $els = $('div[id^=quote]'),
i = 0,
len = $els.length;
$els.slice(1).hide();
setInterval(function () {
$els.eq(i).fadeOut(function () {
i = (i + 1) % len
$els.eq(i).fadeIn();
})
}, 2500)
})

this sounds like a job for...a slider. There are a ton of jQuery plugin options out there,
I've always been a fan of Malsup
jQuery plugins by malsup
he even has responsive ones ready to go. Google "jQuery slider" to be overwhelmed with options.

Use a slider plugin there are lots on the internet. This is a simple snippet I wrote that works with any number of elements without having to change the javascript.
It's very easy to change.
http://jsfiddle.net/Ux9cD/39/
var count = 0;
$('.wrapper div').css('opacity', '0');
var varName = setInterval(function() {
//hide all the divs or set opacity to 0
$('.wrapper div').css('opacity', '0');
//get length
var length = $('.wrapper div').length;
//get first child:
var start = $('.wrapper div').eq(count);
if (count < length) {
animateThis(start,length,count);
count++;
} else {
console.log('end of list');
//restore back to hidden
//set count back to 0
$('.wrapper div').css('opacity', '0');
count = 0;
}
}, 2000);
varName;
function animateThis(start,length,count)
{
$( start ).animate({
opacity: 1
}, 1000, "linear", function() {
//return count++;
});
}

This will do it if you set your second and third divs to hidden:
window.setInterval(function(){
window.setTimeout(function(){
$('#quote1').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 0);
window.setTimeout(function(){
$('#quote2').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 3000);
window.setTimeout(function(){
$('#quote3').fadeIn('slow').delay(3000).fadeOut('fast').delay(6000);
}, 6000);
}, 3000);
It's not going to do exactly what you want because fading takes time, so two divs will be onscreen at the same time. I tried to remedy this by having them fadeIn() slowly and fadeOut() quickly, but I'd recommend taking out the fading altogether and just hiding them.
See demo.
Also, #ArunPJohny has a solution here that is a bit difficult to understand but does get rid of the fading delay problem. Alternatively, here's my no-fading solution.

HTML
<div id="div1">quote 1</div>
<div id="div2" style="display:none">quote 2</div>
JavaScript
i=0;
setInterval(function(){
if(i%2 == 0)
$('#div1').fadeOut('slow', function(){
$('#div2').fadeIn('slow')
})
else
$('#div2').fadeOut('slow', function(){
$('#div1').fadeIn('slow')
})
i++;
}, 2000)
Fiddle

Here is something you can try if you can do without fade in and fadeout. Just a simple few lines of java script no need to add any plugins etc.
Also look at this link Jquery delay it has sample with delay and fade in fadeout. May be you can tailor it to your needs.
Try in your browser
<html>
<head>
<script type="text/javascript">
function swapDiv(){
var firstString = document.getElementById("quote1").innerHTML;
var secondString = document.getElementById("quote2").innerHTML;
document.getElementById("quote1").innerHTML = secondString;
document.getElementById("quote2").innerHTML = firstString;
setTimeout(swapDiv, 3000);
}
setTimeout(swapDiv, 3000);
</script>
</head>
<body>
<div id="quote1">I am another quote</div><span>
<div id="quote2">I am yet another quote</div><span>
</body>
</html>

How to append the checkbox with the children div of a main div

I want to append a checkbox with each children.
For that I used
var len = $("#personalDetails").children("div").length;
for(var id=0; id<len;id++)
{
var el = $('<input type="checkbox"/>');
$("#personalDetails").children(":first").attr("id",id);
alert(id);
$( "#"+id).append(el);
}
html
<div id="personalDetails">
<div>personal</div>
<div>Education</div>
</div>
By doing this I got a problem. All checkboxes are coming under one div. How can I set one for one div and other for other div?
[Note: We can not put any id or class for children div]
http://jsfiddle.net/QTzrB/

you can
$(document).ready(function(){
$('#personalDetails > div').each(function(idx, el){
$('<input type="checkbox"/>').attr("id", idx).appendTo(el);
})
$('#personalDetails').on('click', 'input[type="checkbox"]', function(){
alert(this.id);
});
});
Demo: Fiddle

Try This
$(document).ready(function(){
var len = $("#personalDetails").children("div").length;
$("#personalDetails div").each(function(idx) {
$(this).append("<input type='checkbox' id="+ idx +" />");
});
$("input[type=checkbox]" ).on("click",function(){
alert($(this).attr("id"));
});
});
Fiddle Demo

You should cache the div list. Also if you don't want to put ids to the input elements then you can cache them also.
Below code is working on Fiddle.
$(document).ready(function(){
var divs = $("#personalDetails").children("div");
var len = divs.length;
for(var id = 0; id < len; id++) {
var el = $('<input type="checkbox"/>');
divs.eq(id).append(el);
}
});

replace your script with this one,hope this will do what you want.
$(document).ready(function(){
$('#personalDetails').children('div').each(function(){
$(this).append('<input type="checkbox"/>');
});
});
fiddle

$(document).ready(function(){
$("#personalDetails").children("div").each(function(index, obj) {
var $chk = $("<input/>",{"type":"checkbox"});
$(this).prepend($chk.attr("id",index));
$chk.on("click",function(){
alert(this.id);
});
});
});
Working demo here:
http://jsfiddle.net/HNezs/

setInterval advance to next div when timer has cycled

I've been fiddling with this:
http://jsfiddle.net/bXJhe/46/
What I need is for the time to advance to the next div id after timer has cycled. I click on "one" and it shows the current id, then it should advance to "two", "three"... and show their respective ids. I do not want to use jQuery's .remove() or .detach(). Any insight would be fantastic.
Have a big project due, and no hair left to pull out.
HTML:
<span id="bar"></span>
<span id="timer">00:05</span>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<div id="four">four</div>
JS:
jQuery(document).ready(function() {
jQuery('div').not(':first').hide();
jQuery('a').hide();
timer(5)
});
// Timer
var GLOBAL_TIMER;
function timer(intCount) {
GLOBAL_TIMER = setInterval(function() {
var intTickLength = 5;
jQuery('#bar').css('width', intCount * intTickLength + 'px');
jQuery('#timer').html('00:0' + intCount--);
if (intCount < 0) {
jQuery('a').show('slow');
jQuery('a').click(function() {
id = jQuery(this).parent('div').attr('id');
alert('current id: ' + id);
jQuery(this).hide();
timer(5);
});
stopTimer();
}
}, 1000);
}
function stopTimer() {
clearInterval(GLOBAL_TIMER);
}

Check and see if this is what you need:
jQuery(document).ready(function() {
jQuery('div').hide();
currDiv = jQuery('#one');
timer(5);
});
// Timer
var GLOBAL_TIMER;
function timer(intCount) {
GLOBAL_TIMER = setInterval(function() {
var intTickLength = 5;
jQuery('#bar').css('width', intCount * intTickLength + 'px');
jQuery('#timer').html('00:0' + intCount--);
if (intCount < 0) {
currDiv.show('slow');
currDiv.click(function() {
id = currDiv.attr('id');
alert('current id: ' + id);
jQuery(this).hide();
currDiv = currDiv.next();
timer(5);
});
stopTimer();
}
}, 1000);
}
function stopTimer() {
clearInterval(GLOBAL_TIMER);
}

The cleanest solution, I think, is to use jQuery's data() mechanism to attach a variable to each <div>, signaling that it's the next one to be shown.
Also, you have <a> elements inside your <div> elements, and you're sometimes trying to show/hide one or the other...it seems to me it would be clearer to always operate on the same element. I chose the <div> elements.
So, first you'll want to hide all your <div> elements:
jQuery('div').hide();
Then you'll want to indicate that the "one" <div> is the next one to be shown:
jQuery('#one').data('nextToBeShown',true);
Then when you're going through each element (I go through <div>s instead of <a>s), you just have to look to see if it's the next element to be shown, and show it:
jQuery('div').each(function() {
current = jQuery(this);
if( current.data('nextToBeShown') ) {
current.show('slow');
}
});
Finally, when you click on the link, you'll want to move the "nextToBeShown" pointer:
jQuery('a').click(function() {
id = jQuery(this).parent('div').attr('id');
alert('current id: ' + id);
div = jQuery(this).parent();
div.hide();
div.data('nextToBeShown',false);
div.next().data('nextToBeShown',true);
timer(9);
});
And that gets you where you want.... See my updated jsFiddle here: http://jsfiddle.net/NjUg2/1/

jsBin demo
Referring to my old answer and my old DEMO to you....
the only thing you need to add is this:
////////////// old answer :
(function($){ // remap "$" to jQuery
$(function(){ // "Document Ready" shorthand
var divCounter = 0; ///// added
function timer(bar, intCount){
var elWidth = $(bar).width(), intTickLength=intCount, i;
function math(){
var m = Math.floor(intCount/60);
var s = intCount % 60;
if(m<10){m='0'+m;}
if(s<10){s='0'+s;}
$(bar).next('.timer').text(m+':'+s);
$(bar).width( elWidth*intCount/intTickLength );
if(intCount--<=0){
clearInterval(i);
showDiv(); /////// added
}
}
math();
i = setInterval(math, 1000);
}
timer('#bar',5);
////////////////////////////////
///////////// new answer :
$('div.box').hide(); // hide all initially
function showDiv(){
$('.box').hide().eq(divCounter%$('.box').length).show();
}
$('.box a').click(function(e){
e.preventDefault();
$('.box').hide();
divCounter++;
timer('#bar',5);
});
/////////////////////////////
});
})(jQuery);
HTML: add a class .timer to your span
<span id="bar"></span>
<span class="timer">00:05</span>
and add a common CLASS to your div elements:
<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="box">four</div>
If you have questions feel free to ask, and don't pull more hair out, but review some old questions for some solutions :)