We Keep Coding

Why the delete function is not working?

Following is a part of my to-do list application. The delete function is not working properly
function deleteTodoItem(e, item) {
$(item).parent().remove();
};
$(function() {
$("#MyList").on('click', '.todo-item-delete', function(e) {
var item = this;
deleteTodoItem(e, item)
})
});

function deleteTodoItem(elem) {
elem.parent().remove();
};
$(function() {
$("#MyList").on('click', '.todo-item-delete', function() {
deleteTodoItem($(this))
})
});
short code
$(function() {
$("#MyList").on('click', '.todo-item-delete', function() {
$(this).parent().remove();
})
});

Bootstrap popovers don't allow DOM access. What to do?

I have problems with Bootstrap (3.3.4) popovers. My html code for the popover is in the data-html tag, which also contains a class link_click. The jQuery click function for this class doesn't work. Why is jQuery not seeing this link_click class from data-content field of the popover? What to change?
popover = 'Main-Objekt';
$('#popover_test').html( popover );
$('[data-toggle="popover"]').popover({ trigger:"manual", animation:false})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});})
.on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100);
});
$('.link_click').click( function(){
alert('Click success!');
});
Thanks
Michael

Event delegation for dynamic content:
$('#popover_test').on('click', '.link_click', function(){
alert('Click success!');
});

Closing link in a div tag

i need help with closing a div tag that has been expanded using jquery when a "read more" link has been clicked.
I can get one to work but not the rest.
I have attached a fiddle of my code:
http://jsfiddle.net/R9LvG/
This is the first time i have ever used jquery and i am very new to it so please bear with me.
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
});
$(document).ready(function () {
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
});
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})

As all those part of code are crappy, I would use :
$(document).ready(function () {
$('[class^="clickme"]').click(function (e) {
e.preventDefault();
$(this).next().slideToggle("slow");
});
});
Simpler, cleaner.
:)

$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
})
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
});
JsFiddle
Also:
remove the '#' href to prevent it from jumping to the top of the page whenever it is clicked
<a class="clickme"><u><b>Read more</b></u></a>
To your clickme css class:
.clickme{cursor:poniter}
and then add a hover event:
.clickme:hover{color:#F00}

You close it 2 times which means it opens up again
Remove this at the end
$(document).ready(function () {
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})

Don't use dom ready functions more times in a single page.
Use Multiselector for click functions
For examples
$(document).ready(function () {
$("#selector1,#selector2, ... #selector-n").click(function () {
$(".content").slideToggle("slow")
});

Please use only one
$(document).ready(function () {
$(".clickme2, .clickme3, .clickme4, .clickme5").click(function () {
$(this).slideToggle("slow");
});

I didn't find any problem in you code.You modify the anchor tab by removing the href="" element, this will prevent moving the page to top each time you click on Read more.
<a class="clickme2" ><u><b>Read more</b></u></a>
And include the jQuery script in you page by copyng the below content in your page,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
And you can update the script for expanding and compressing as below since you are dealing with different divs with different classes,
<script>
$(document).ready(function () {
$(".clickme").click(function () {
$(".content").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
$(".clickme2").click(function () {
$(".content2").slideToggle("slow")
});
$(".clickme3").click(function () {
$(".content3").slideToggle("slow")
});
$(".clickme4").click(function () {
$(".content4").slideToggle("slow")
});
$(".clickme5").click(function () {
$(".content5").slideToggle("slow")
});
$(".close").click(function () {
$(".content").slideToggle("slow")
});
})
</script>

Send visitor to new page after Drag and Drop

I want to send a visitor to a new page after they drag three coins into three different jars, but I am unsure of how to trigger the new page after they drag the coins into the jars.
I'm hoping that something like this will work:
http://jsfiddle.net/F8L44/
$(init);
function init() {
$('#makeMeDraggable1').draggable();
$('#makeMeDroppable1').droppable({
drop: function () {
$("#makeMeDraggable1").draggable("option", "containment", "#makeMeDroppable1");
}
});
$('#makeMeDraggable2').draggable();
$('#makeMeDroppable2').droppable({
drop: function () {
$("#makeMeDraggable2").draggable("option", "containment", "#makeMeDroppable2");
}
});
$('#makeMeDraggable3').draggable();
$('#makeMeDroppable3').droppable({
drop: function () {
$("#makeMeDraggable3").draggable("option", "containment", "#makeMeDroppable3");
}
});
}

$(init);
function init () {
var drops = 0,
redirectIfDone = function () {
if (drops === 3) {
window.location = 'http://www.google.com';
}
};
$('#makeMeDraggable1').draggable();
$('#makeMeDroppable1').droppable({
drop: function () {
drops++;
redirectIfDone();
$("#makeMeDraggable1").draggable("option", "containment", "#makeMeDroppable1");
}
});
$('#makeMeDraggable2').draggable();
$('#makeMeDroppable2').droppable({
drop: function () {
drops++;
redirectIfDone();
$("#makeMeDraggable2").draggable("option", "containment", "#makeMeDroppable2");
}
});
$('#makeMeDraggable3').draggable();
$('#makeMeDroppable3').droppable({
drop: function () {
drops++;
redirectIfDone();
$("#makeMeDraggable3").draggable("option", "containment", "#makeMeDroppable3");
}
});
}

jQuery looping animation from the beginning

I would like this animation to repeat from the very beginning each time (#slide1).
I tried the setTimeout method but could not get it to work.
I am using a simple line by line since the timing difference and (lack of knowledge).
Thanks for your help.
http://jsfiddle.net/q9EZg/6/
$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});
<div id="slide1">Slide 1</div>
<div id="slide2">Slide 2</div>
<div id="slide3">Slide 3</div>
<div id="slide4">Slide 4</div>
<div id="slide5">Slide 5</div>
<div id="slide6">Slide 6</div>
<div id="slide7">Slide 7</div>
<div id="slide8">Slide 8</div>
<div id="slide9">Slide 9</div>
<div id="slide10">Slide 10</div>

Check the following JSFiddle...
$(document).ready(function () {
(function animate() {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, animate); // Call animate again
});
});
});
});
});
});
});
});
});
}()); // Call the animate function
});
I wrapped your code in a Animate function that is called again after the last step.
PS. And yes you forget to enable JQuery in JSFiddle, but I assume that is not your question or related to your question.

Wrap you main animation logic in a function (which you have already done). Like this:
function Animate() {
//your animation logic
}
And then call the same function at regular interval. Like this:
setInterval(function(){
Animate()
}, 1000);
But, you definitely need to improve your main logic and structure.

Try this
JS CODE
$(document).ready(function () {
setInterval(intervalTest, 1000);
});
function intervalTest() {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});

If you want a nice way of queueing up animations, you can make an animation queue array containing objects with instructions, something like this:
var animationQueueArr = [
{
selector: '#slide1',
delay: 4000,
animation: 'fadeIn',
duration: 2000,
callback: true
},
{
selector: '#slide1',
animation: 'fadeOut',
duration: 2000,
callback: false
},
{
selector: '#slide2',
delay: 6000,
animation: 'fadeIn',
duration: 2000,
callback: true
}
// and so on
];
Then, you can loop over them:
function animate (i, skipDelayBool) {
skipDelayBool = skipDelayBool || false;
var animationObj = animationQueueArr[i];
if (animationObj.delay && false === skipDelayBool) {
return setTimeout(function () {
animate(i, true);
}, animationObj.delay);
}
if (false === animationObj.callback) {
$(animationObj.selector)[animationObj.animation](animationObj.duration);
i += 1;
i %= animationQueueArr.length; // reset back to 0 if necessary to start new loop
animate(i);
} else {
$(animationObj.selector)[animationObj.animation](animationObj.duration,
function () {
i += 1;
i %= animationQueueArr.length;
animate(i);
);
}
}
animate(0);
Note I havent tested this, but it will send you on the right path and away from your worst indentation nightmares.

I've already answered this question once. Duplicate: jQuery looping command
See the edits to the question and you will see that I have answered it twice now.
$(document).ready(function me() {
$("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
(function startFade(slide, step) {
if ((slide === 1) && (step === -1)) {
setTimeout(me, 100);
} else if (slide < 10) {
$("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
startFade(slide + step, step);
});
} else {
startFade(slide - step, -step);
}
}(2, 1));
});
});