Override js-events - javascript

It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.

Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}

Related

Access jQuery Object After Calling Initial Function

Plugin I'm working with: 3D Gallery (Source code here)
I can get this gallery to work with no issue, but I'm having trouble extending the functionality to include a play and pause button. I've set up a fiddle with how I'm currently getting the slideshow up and running.
I believe the bit that matters is here:
_startSlideshow: function() {
var _self = this;
this.slideshow = setTimeout(function() {
_self._navigate('next');
if (_self.options.autoplay) {
_self._startSlideshow();
}
}, this.options.interval);
}
From what I gather, all I need to do is update the gallery object's autoplay property so that the next time it hits the start slideshow function, it just pauses instead. The problem I'm having is I have no idea how to access that once I've started the slideshow up. Just to have a little more control over things, I've even pulled out the javascript from the fiddle and entered it into the Chrome console to run it there so I can see all the worky bits, still can't seem to update it. One last note, it seems the only public function in there is destroy, which I'm also not able to call on my object after starting the slideshow. If I could get that working, I'd absolutely have just written a setAutoplay(bool) function.
I assume this is just some sort of scope issue mixed with my novice understanding of syntax, but I'd sure appreciate some help.
-- Here's an updated fiddle that includes some of the ways I'm trying to access/update the autoplay stuff, none working. Also showed the destroy function doing nooothing. https://jsfiddle.net/wzrooqof/2/
I've took a look at the library's code. You can do it without needing to change its code. It is exposed, so you can temper with it and leave the source code as is.
In your JS code add this before using it:
$.Gallery.prototype.pause = function() {
clearTimeout(this.slideshow);
this.options.autoplay = false;
}
$.Gallery.prototype.resume = function() {
this.options.autoplay = true;
this._startSlideshow();
}
Then you can pause/resume a slide show like this:
var slideshow = $('#dg-container').gallery({autoplay: true});
slideshow.data("gallery").pause();
slideshow.data("gallery").resume();
JSFiddle example.

Running function on window scroll once in jQuery

I'm creating my portfolio and I'm trying to make my skill bars load when I go to "My skills" section. I want them to do it only once, either when someone scroll to this section or goes to it straight away from the navigation. This is my code:
var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize scroll", function (){
if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80){
console.log ("here is my loading script");
}
});
It doesn't work when I use one instead of on, doesn't work when I created one more function on window with one inside my if statement.
I was trying exit the function with return or return false as well and here, on stack overflow I found something about flag, which I didn't fully understand but I tried different combinations with it.
Can someone please help me with it? I've seen there is a library for this type of effects, but there is no point of installing any just for one thing...
Edit. Console.log represens my loading code.
You can set a namespace at .on() for resize, scroll events, use .off() within if statement to remove namespaced events.
var skills = $('#mySkills');
var skillsPositionTop = skills.position().top;
$(window).on("resize.once scroll.once", function (){
if (pageYOffset<skillsPositionTop-20 && pageYOffset>skillsPositionTop-80) {
$(this).off("resize.once").off("scroll.once");
console.log ("here is my loading script");
}
});

slideReveal script - How do you close all open "slides" before opening a new slide?

Am playing around with this for a new site, and works great & easy to implement: http://nnattawat.github.io/slideReveal/
But one issue I can't determine, of you have multiple sliders, and one is already "out" from a previous event, how do you first make sure all other sliders are "closed" and THEN open the current slider?
I could do an if/then to check aach individual one, but I figure there must be a more elegant way...
I think the best way of solving this problem is to create a "page-level controller". What this does is acts as a container and controller of sorts for events that happen in the page.
So you essentially have to "proxy" sliding open an closed a side (and adding a dependency of closing the other slide area), since the API doesn't seem to have any hooks or events that it emits like "onSlideOpen". That's what your controller will handle.
var PageController = function(){
var $leftSlide = $('#leftSlider').slideReveal(), // You'll want to sub in
$rightSlide = $('#rightSlider').slideReveal(); // your selector names
return {
openLeft: function() {
$leftSlide.slideReveal('show');
$rightSlide.slideReveal('hide');
},
openRight: function() {
$rightSlide.slideReveal('show');
$leftSlide.slideReveal('hide');
}
};
};
var pageController = new PageController();
pageController.openLeft(); // will slide reveal left side
pageController.openRight(); // will simultaneously open right and close left
Now you can even do things like check on the state of those slides in case you have other cross-dependencies.
A lot of people would probably handle this kind of thing by emitting events and catching them, but I really don't like the pub-sub model. It tends to get very brittle very quickly.
Use .slideReveal("hide") on all of the sliders, then use .slideReveal("show") on the one you want revealed.
One way to do this, would be to give all the sliders a class and use that as the selector
i.e.
$(".slider").slideReveal("hide");
$("#sliderYouWantToShow").slideReveal("show");

Example on how to use seek(time, [callback]) in Flowplayer

I'm trying to understand the flowplayer API, I'll be honest, I really need examples to get this stuff. I know some of you ninjas know what you're doing quite easily.
I am building a video training page for someone. It uses a PHP (kirbycms) framework to generate pages. I understand how to drop my variables and all that stuff. I have the videos working. It would be largely beneficial if I could have cue points that trigger things, and buttons that seek to specific time codes. It would be best if I can use PHP to define a string for these links.
I am looking for an example on how to use seek(time, [callback])
I am also looking for an example of
$(".player").bind("cuepoint", function(e, api, cuepoint) {
// here we use custom properties left, top and html
$("#info").html(cuepoint.html).animate({
left: cuepoint.left,
top: cuepoint.top
});
});
Update
Included bootply, this still does not work for me. Is it because my controls are outside of the flowplayer window?
http://bootply.com/86532
seek function (as documentation says: CLICK) is for jumping into given time on the timeline:
seek(time, [callback])
It takes two arguments: time in seconds and a callback - function that will be executed after jumping into that time on the timeline. Assuming that you are using jQuery you can write something like this to jump into 15.5s of the movie if you click button and then alert some message (just a simple example):
flowplayer(function (api, root) {
$("#someButton").on('click' function(e){
e.preventDefault();
api.seek(15.5, function(){
alert("you've jumped to 15.5s of the movie!");
});
});
});
Flowplayer doesn't do what you're after. In fact, seek() pretty much does the opposite- it triggers the video to jump to that point in time (and optionally calls back when its done).
If you want to set cuepoints and have the video trigger code when the video reaches those points in time, have a look at addEventListener("timeupdate", callback), see docs.
You might also want to check out popcornjs.

jQuery selector :not(:animated)

We're trying to make sure our JavaScript menu, which loads content, doesn't get overrun with commands before the content in question loads and is unfurled via .show('blind', 500), because then the animations run many times over, and it doesn't look so great. So I've got about six selectors that look like this:
("#center_content:not(:animated)")
And it doesn't seem to be having any effect. Trying only :animated has the expected effect (it never works, because it doesn't start animated), and trying :not(div) also has this effect (because #center_content is a div). For some reason, :not(:animated) seems not to be changing the results, because even when I trigger the selector while the div in question is visibly animated, the code runs. I know I've had success with this sort of thing before, but the difference here eludes me.
$("#center_content:not(:animated)").hide("blind", 500, function () {
var selector_str = 'button[value="' + url + '"]';
//alert(selector_str);
var button = $(selector_str);
//inspectProperties(button);
$("#center_content:not(:animated)").load(url, CenterContentCallback);
if (button) {
$("#navigation .active").removeClass("active");
button.addClass("active");
LoadSubNav(button);
}
});
I hope this provides sufficient context. I feel like the second selector is overkill (since it would only be run if the first selector succeeded), but I don't see how that would cause it to behave in this way.
Here's the snippet that seemed to be working in the other context:
function clearMenus(callback) {
$('[id$="_wrapper"]:visible:not(:animated)').hide("blind", 500, function() {
$('[id^="edit_"]:visible:not(:animated)').hide("slide", 200, function() {
callback();
});
});
}
Here, the animations queue instead of interrupt each other, but it occurs to me that the selector still doesn't seem to be working - the animations and associated loading events shouldn't be running at all, because the selectors should fail. While the queueing is nice behavior for animations to display, it made me realize that I seem to have never gotten this selector to work. Am I missing something?
Sometimes it's helpful to use .stop() and stop the current animation before you start the new animation.
$("#center_content").stop().hide("blind", 500, function () {});
Really depends on how it behaves within your environment. Remember that .stop() will stop the animation as it was (eg. halfway through hiding or fading)
I don't know if I understand it correctly, but if you want to make sure the user doesn't trigger the menu animation again while it's currently animating(causing it to queue animations and look retarded, this works and should help. I use an if-statement. And before any mouseover/off animation I add .stop(false, true).
$('whatever').click(function(){
//if center_content is not currently animated, do this:
if ($("#center_content").not(":animated")) {
$(this).hide(etc. etc. etc.)
}
//else if center_content IS currently animated, do nothing.
else {
return false;}
});
another example i found elsewhere:
if($("#someElement").is(":animated")) {
...
}
if($("#someElement:animated").length) {
...
}
// etc
then you can do:
$("#showBtn").attr("disabled", $("#someElement").is(":animated"));

Categories

Resources