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();
})
});

Sometimes data isn't loading to CKeditor in angular

I have this code in angular directive.
var ck = CKEDITOR.replace(element[0]);
ngModel.$render = function () {
$timeout(function () {
ck.setData(ngModel.$modelValue);
},350);
};
ck.on('instanceReady', function () {
$timeout(function () {
ck.setData(ngModel.$viewValue);
},350);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
}
ck.on('pasteState', updateModel);
But, sometimes, data that loaded via API, doesn't set up without any errors. console.log(ngModel.$viewValue) always show information.

Inside CKEditor 4 documentation there is no "pasteState" event, only "paste". So you should probably listen to "paste" or "change" event.
Something like this:
var ck = CKEDITOR.replace(element[0]);
ck.on('instanceReady', function () {
$timeout(function () {
ck.setData(ngModel.$viewValue);
},350);
});
function updateModel() {
scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
}
ck.on('paste', updateModel);
ck.on('change', updateModel);
ngModel.$render = function () {
$timeout(function () {
ck.setData(ngModel.$modelValue);
},350);
};

Detect hover in jquery drag event

I'm using a Jquery UI drag/drop effect, and while i'm dragging the element I need to execute a piece of code that detects if an element is hovered.
Update: Live Example: here
Here is my Drag code:
<script type="text/javascript">
$(function(){
$('.list-disc').sortable({
connectWith: '.list-disc',
drag: function(event, ui){
$(".prof-name").hover(function(event) {
var $obj = event.target;
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$($obj).next().slideToggle();
}, 2000);
}
},
function (event) {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$(event.target).next().slideToggle();
}
});
},
start: function (event, ui){
//SomeCode
},
stop: function (event, ui){
//SomeCode
}
})
</script>
The documentation says:
drag( event, ui )
Triggered while the mouse is moved during the dragging, immediately before the current move happens.
Maybe I've understood it wrong or something is wrong with the code...
As you can see, I can make that code inside drag:: event works when executing it inside my $(document).ready(function(){}. But I need to do it while draggin the element, test if the dragged element is hover that object for 2 seconds then i'll slideToggle() it.
Also tried to write a simple console.log() to verify if that's firing, but nothing...
*Update:*Tried Ron's answer: (Still not working - Nothing happens)
over: function(event, ui){
var timeoutId;
$(".prof-name").hover(function(event) {
var $obj = event.target;
if (!timeoutId) {
timeoutId = window.setTimeout(function() {
timeoutId = null;
$(this).next().slideToggle();
}, 2000);
}
},
function (event) {
if (timeoutId) {
window.clearTimeout(timeoutId);
timeoutId = null;
}
else {
$(event.target).next().slideToggle();
}
});
}

Try this:
$( ".list-disc").sortable({
over: function( event, ui ) { // $(this) will be the current hovered element }
});

How do I stop text scrolling?

This is my code:
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
setInterval(function(){ ticker(); }, 3000);
});
I don't know how to stop the text scrolling when I place the mouse over a particular title.
DEMO

Use a hover() to clear the interval and when mouse leaves then again start the ticker like,
$(document).ready(function () {
function ticker() {
$('#ticker li:first').slideUp(function () {
$(this).appendTo($('#ticker')).slideDown();
});
}
var clr = null;
function animate(){
clr=setInterval(function () {
ticker();
}, 3000);
}
animate();
$('#ticker li').hover(function () {
// clear interval when mouse enters
clearInterval(clr);
},function(){
// again start animation when mouse leaves
animate();
});
});
Live Demo

Minor update in your answer. Use mouseover and out function.
$(document).ready(function() {
function ticker() {
$('#ticker li:first').slideUp(function() {
$(this).appendTo($('#ticker')).slideDown();
});
}
var ticke = setInterval(function(){ ticker(); }, 3000);
$('#ticker li').mouseover(function() {
clearInterval(ticke);
}).mouseout(function() {
ticke= setInterval(function(){ ticker(); }, 3000);
});
});
See here Demo

please try this one:
$(document).ready(function () {
function ticker() {
$('#ticker li:first').slideUp(function () {
$(this).appendTo($('#ticker')).slideDown();
});
}
var clr = null;
function animate(){
clr=setInterval(function () {
ticker();
}, 3000);
}
animate();
$('#ticker li').hover(function () {
// clear interval when mouse enters
clearInterval(clr);
},function(){
// again start animation when mouse leaves
animate();
});
});

The setInterval method returns an id value which you can then pass to clearInterval to cancel the calls to ticker().

How I insert additional strings in this jquery script?

I want to add fade-in and fade-out transitions in this script, so i want to insert fadeOut(1000) fadeIn(1000) in the script.
Here is the script:
jQuery(document).ready(function () {
var $box=jQuery(".post"),
$bar=jQuery("a.bar_view");
$dat=jQuery("a.dat_view");
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
jQuery.cookie("dat_style", 1);
return false
});
if(jQuery.cookie("dat_style")==0) {
$box.removeClass( "bar");
$dat.addClass("active")
} else {
$box.addClass("bar");
$bar.addClass("active")
}
});
this is jQuery script for switch between grid and list views to display content.
This is the site, here i implemented this script: http://bbelog-megagrid.blogspot.com View the HTML Sources there.
This is a same example script transitions added:
$(document).ready(function () {
var elem=$('ul');
$('#viewcontrols a').on('click',function(e) {
if ($(this).hasClass('gridview')) {
elem.fadeOut(1000, function () {
elem.removeClass('list').addClass('grid');
elem.fadeIn(1000);
});
}
else if($(this).hasClass('listview')) {
elem.fadeOut(1000, function () {
elem.removeClass('grid').addClass('list');
elem.fadeIn(1000);
});
}
});
});
I want to modify the first script like this one.

you can add those like this
$dat.click(function () {
$box.removeClass("bar");
jQuery(this).addClass("active");
$bar.removeClass("active");
$bar.fadeOut(1000);
$dat.fadeIn(1000);
jQuery.cookie("dat_style", 0);
return false
});
$bar.click(function () {
$box.addClass("bar");
jQuery(this).addClass("active");
$dat.removeClass("active");
$dat.fadeOut(1000);
$bar.fadeIn(1000);
jQuery.cookie("dat_style", 1);
return false
});