Destroy Function on AngularJS - javascript

I have a page in my project that contains several categories and each category has a Flexslider with images. Each category is displayed once and clicking another, the former is hidden and clicked appears, similar scheme with Tabs.
I need that when I click on another category, it destroys the function of Flexslider initialised in the former category and is executed in this category.
Here's what I've done so far, without success:
Function that starts Flexslider:
vm.sliderCol = function () {
setTimeout(function () {
$('.sliderCol').flexslider({
animation: "slide",
controlNav: false
})
}, 1000)
}
Function that enter the category button:
vm.clicou = function(){
$('.sliderCol').flexslider("destroy")
setTimeout(function () {
vm.sliderCol()
}, 1000)
}
Until then I tried to destroy the Flexslider do not know if there is some method to stop performing the function and start it, can anyone help?

With ng-click on each category playing the role, I managed to destroy the slider and start it again with the following function:
vm.clicou = function(){
$('.sliderCol').flexslider("destroy");
$('.sliderCol').removeData("flexslider");
setTimeout(function () {
vm.sliderCol();
}, 100);
}

Related

Show a sub-menu using JQuery

I need some help making a sub-menu appear within 2s after the page loads instead of when the user clicks on it. I'm using JQuery. That file is the core of the website. I need it to stay opened.
Here's the code I have at the moment, I tried to change that on.Click event but it didn't work.
The handleSidenarAndContentHeight(); function resizes the menu items after the sub-menu appears.
jQuery('.page-sidebar li > a').on('click', function (e) {
if ($(this).next().hasClass('sub-menu') === false) {
return;
}
var parent = $(this).parent().parent();
parent.children('li.open').children('a').children('.arrow').removeClass('open');
parent.children('li.open').children('a').children('.arrow').removeClass('active');
parent.children('li.open').children('.sub-menu').slideUp(350);
parent.children('li').removeClass('open');
parent.children('li').removeClass('active');
var sub = jQuery(this).next();
if (sub.is(":visible")) {
jQuery('.arrow', jQuery(this)).removeClass("open");
jQuery(this).parent().removeClass("active");
sub.slideUp(350, function () {
handleSidenarAndContentHeight();
});
} else {
jQuery('.arrow', jQuery(this)).addClass("open");
jQuery(this).parent().addClass("open");
sub.slideDown(350, function () {
handleSidenarAndContentHeight();
});
}
e.preventDefault();
});
Working with a 2 second timeout should do the trick!
jQuery(document).ready(function(){
// Open Parent here
setTimeout(function(){
// Open Child here
}, 2000)
});
There is a simple javascript function you can use, the setTimeout function.
The code follows like this :
setTimeout(function() {yourFunctyion();}. delayTimeInMiliseconds);
This will call your function after the number of second(in ms).
There is also a plugin I've used. It has oneTime and everyTime methods.
jQuery timers plugin

jQuery Autocomplete: dropdown does not show after first typing

I use jQuery UI Autocomplete on my website. My problems:
In Chrome and Firefox: When the user quickly enters a four letters term after loading the site and stops typing, the dropdown does not show immediately. Only after typing another letter, the dropdown then shows. From now on, the dropdown always shows, when the user changes the search term, so then there is no problem. When the user reloads the page and quickly types a new term and stops, again the dropdown does not show. When, after reloading the page, the user types the term very slow, the dropdown shows, then again there is no problem. How do I achieve that the dropdown will also show after "the first instance of typing"?
In Internet Explorer, the dropdown never shows.
Here comes my code:
$('#my-search-input').on('keyup', function () {
var characterLength = $(this).val().length;
if ((characterLength > 2) || (characterLength == 0)) {
typewatch(function () {
$('#my-search-input').autocomplete({
source: function (request, response) {
$.post(Routing.generate('my_path'), {
term: request.term
}, function (data) {
response(data)
}, 'json');
},
close: function (event, ui) {
loadResults();
}
});
loadResults();
}, 500);
}
});
var typewatch = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
UPDATE: JSFIDDLE
Here comes a JS Fiddle which has similar code and contains the problem:
http://jsfiddle.net/cd1kd08s/
When you type in "Alban" in order to find "Albania", the dropdown does not show right away. When you continue with typing the letter "i" (resulting in "Albani"), the dropdown shows.
There is no need to use timer/keyup listeners for this stuff. I tried calling autocomplete plugin function on document load and it works well..
check fiddle

Extjs SlideOut panel

I am trying to slide out a panel and then hide it using extjs. The slideout is working fine but as soon as I add the hide function it stops working. How do I fix this.
My function is as below.
toggleSidebar : function () {
var sidebar = this.getSidebar();
if(sidebar.hidden){
sidebar['show']();
}else{
sidebar.el.slideOut('l', {
easing: 'easeOut',
duration: 200,
scope: this,
callback: this.onSidebarAnim()
});
sidebar['hide'](); // Slide works if I remove this line.
}
},
Animation is an asynchronous process, and slideOut does not block until animation has finished; in fact your code starts to animate the panel and then hides it immediately. That is why it's not working the way you expect it to.
The solution is to hide the panel after the animation has finished. That is what callback is for, except that in your original code instead of passing the function in callback property, you're calling it and assigning the result of its execution to the callback property. That is not going to work, and in fact it's going to blow up with "foo not a function" exception.
toggleSidebar: function () {
var sidebar = this.getSidebar();
if (sidebar.hidden) {
sidebar.show();
}
else {
sidebar.el.slideOut('l', {
easing: 'easeOut',
duration: 200,
scope: this,
// Pass the function itself, note no parentheses:
callback: this.onSidebarAnim
});
}
},
onSidebarAnim: function() {
this.getSidebar().hide();
...
}

Pausing function in javascript

I have a function which loops through rows in a table so that only one is shown at any given time.
I want to expand on this so that when I hover over the table, it shows all the rows, and then when I move away, it resumes showing one row at a time.
The Problem I have is that on hovering, the first function keeps going, is there a way to 'pause' the function. I've looked at various examples using ClearInterval(),but can't match them to my script.
//Calling The function that loops through the rows
function hideShow(time)
{
setInterval('showRows()',time);
};
//Set the time between each 'loop' and start looping
$(document).ready(function()
{
hideShow(2000);
}
);
//The hover function to show / hide all the rows
$(document).ready(function()
{
$('#dbTable1 tr').hover(function()
{
$('.Group td').removeClass('RoundBottom');
$('.Group').show();
},
function()
{
$('.Group td').addClass('RoundBottom');
$('.Group').hide();
}
);
}
);
Can anyone show me please how I can combine the two?
You need to keep track of the timer ID when you call setInterval:
var timerID;
function hideShow(time){
timerID = setInterval(showRows, time);
}
Then later on when you want to stop the repetition, call clearInterval and pass in that ID:
// ...
$('.Group td').removeClass('RoundBottom');
$('.Group').show();
clearInterval(timerID);
},
function()
{
hideShow(2000);
$('.Group td').addClass('RoundBottom');
// ...
You could just check the hovering state before doing anything else, like this:
function showRows() {
if (isHovering) {
return;
}
// ...
}
The isHovering variable is just a boolean with current hovering state, that could be set by your callback function.
With the above approach, you can set your timer only once and forget about it.

jQuery - link working *only* after some time

I have a link:
Here's my link
This is not a normal clickable link, it's coded in jQuery like this:
$("#link").hover(function(e) {
e.preventDefault();
$("#tv").stop().animate({marginLeft: "50px"});
$("#tv img)").animate({opacity: 1});
})
So after hovering unclickable link there's change of #tv's margin and opacity.
Is there any way of making this work only after the user hovers the link area with pointer for more than two seconds?
Because now everything happens in real time.
I know there's delay(), but it doesn't work because it just delays the animation and in this case I don't want any action if the pointer is over for less than two seconds.
Possible without a loop?
What you're after is called hoverIntent.
var animateTimeout;
$("#link").hover(function() {
if (animateTimeout != null) {
clearTimeout(animateTimeout);
}
animateTimeout = setTimeout(animate, 2000);
}, function() {
clearTimeout(animateTimeout);
});
function animate() {
//do animation
}
You just need a setTimeout() to delay the code, along with a clearTimeout() to clear it if the user leaves the link within 2 seconds.
Example: http://jsfiddle.net/mNWEq/2/
$("#link").hover(function(e) {
e.preventDefault();
$.data(this).timeout = setTimeout(function() {
$("#tv").stop().animate({marginLeft: "50px"});
$("#tv img)").animate({opacity: 1});
}, 2000);
}, function(e) {
clearTimeout($.data(this,'timeout'));
});

Categories