Combine two line of codes in one function with JavaScript - javascript

I'm using Cycle slideshow and setTimeout() to give it seconds of delay
I want to to combine these two line of codes below to execute them simultaneously. But, I don't know how to accomplish this in JavaScript.
$('#slideshow').cycle('resume');
$('#slideshow').cycle({
sync: false,
speed: 300,
})
I want to put them in one line like this:
$('#slideshow').cycle(??????///here is your help////??????");
If I don't do this, the slide show, again, starts from the initial point and I don't want it.
How may I solve this?

Without looking in detail at the plugin's source code, I think from your description, that the plugin automatically starts from beginning whenever you set its options. That seems reasonable, as the plugin likely has to recalculate things from scratch whenever its options are changed.
Can you set the options once, e.g. during initialization, halting it then if necessary:
$('#slideshow').cycle({sync:false, speed:300}).cycle('pause');
Later, when you want to start the show, just resume it
$('#slideshow').cycle('resume');
Alternatively, you could look into setting the global options before initializing the slideshows.

try this:
$('#slideshow').cycle('resume').cycle({sync: false,speed:300,});

Related

Simplifying a piece of code that switches classes

I have the following piece of code that is placed in a render function. The function runs few times per second.
if ($play.hasClass(playClass)){
$play.removeClass("playing paused").addClass(playClass);
}else{
$play.removeClass("playing paused").addClass(playClass);
}
I want to make sure the code only runs if the playClass is does not exist in the $play element. if it does. Removes all classes and add the current version of playClass.
This is somehow what toggleClass does, but the difference is, since my codes runs few times per second, the toggleclass will keep changing the class.
What I want to achieve is that if the value of playClass does not exist in $play, then swap it with the previous one and only do it when it is different. Do not check it every time.
The value of $play can be either playing or paused.
This code is doing the job correctly, I just want to find out if there is a more efficient and professional way to do it.
Thanks in advance.
You don't need any ' if ' because they do the same.
just:
$play.removeClass("playing paused").addClass(playClass);

Web Animations API: reset animation on demand

I have a complex animation as a combination of KeyframeEffect's grouped into GroupEffect and SequenceEffect. In a very simplified version it looks something like presented in this JSBin https://jsbin.com/denucaq/edit?html,js,output
The problem is that I have to reset all the changes done by animation at some point in order to, possibly, re-run the animation or do something else.
I can not use fill: 'none' since different elements animate with different durations and they all have to stay in it's final position until all the elements have been animated.
So the questions is what should I write in the body of the crazyWords.reset function?
It's going to require a bit of math, but you can get all the info you need from the methods themselves. Try putting this inside the reset function then clicking it at various times:
console.log(document.timeline);
You have access to a oncancel method, so you can use that to revert the changes based on the start time versus the current time, and so forth (maths happening here). I also just found a reverse method that works nicely:
const allAnimations = document.timeline.getAnimations();
allAnimations.forEach((ani) => {
ani.pause();
console.log(ani.playState);
ani.reverse();
});

issues with Raphaƫl and removing objects within svg

if you open the code pen there is a fire button. it will launch a bunch of ellipses and then when it hits it will cause a burst. if you look the ellipses ,which there are two sets of, they are still there. I have tried using the below
d3.selectAll("ellipse").remove()
$("ellipse").remove()
$("ellipse").each(function(){this.remove()})
http://codepen.io/daniel667/pen/QwMWrm
the code pen above will help show what im talking about the second fire button to the far right is what ive been trying to use to kill the ellipses so I don't wait for the animation the functions at the very bottom.
I would create a Raphael set, or an array and store the elemets in that, so you can reference them later to remove. If they will be used repeatedly, it may be worth not removing them, but just hiding them rather than recreating each time.
var mySet;
...
mySet = paper.set();
mySet.push( circi );
....
function throwss() {
mySet.forEach( function( el ) { el.remove(); });
}
Example: codepen
For speed, you may also want to look into Velocity.js, also be aware for animation filters can be quite resource heavy.

How to harness control of my JQuery coded sliding divs?

Essentially I have 4 divs that take turns sliding in and sliding out with delays and then it recalls the function. Like so:
$(document).ready (function bradslide(){
$("#slide1").delay('1000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide2").delay('9000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide3").delay('17000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide4").delay('25000').slideDown('1000').delay('6000').slideUp('1000', 'swing', bradslide);
}
);
Let me say that this works fine, but that I am open to cleaning it up or making it easier or more up to standard if suggestions are made.
However my question is this: How can I arrange this so that the end user can manipulate the animation. This slides through the divs on its own, but ideally I would like to have a couple buttons to click to go backward or forwards (I think you get the idea).
Any suggestions of how or where to begin would be greatly appreciated. I imagine I might have to scrap this little piece of code as it stands. Thanks in advance guys.
Despite my own comment, I do have some general advice:
Look into using classes instead of IDs, and then use jQuery's DOM-traversal methods to identify what the next slider candidate is. Tracking the "currentSlide" and then targeting the "nextSlide" (identified with a .next() perhaps?) means that you can add any number of slider divs (with a class instead of ID, remember?) and still have it work.
The user controls (next, prev, or selecting a specific slide) simply interrupt the timer (probably a setTimeout instead of .delay()) and then invoke the exact same function that brings the next slide into place.
To make code more reusable and flexible, you should use some variables. For example, if your slide duration is going to be 1000, you would have var duration = 1000 scoped to an appropriate place (the document ready function is fine... or the sliding function) and then in your function call (whatever it ends up looking like), you would use .slideDown(duration). Then you can set that value to whatever you want and update it easily later.
Extending on the above, you could even build an API allowing you to pass values into your custom slider function:
var bradslide = function(container, delay, duration) {
// do stuff with a parent container, some delay value, and a duration value
};
bradslide('sliderParent', 6000, 1000);

Can i make Prettify work on any code block? without the class prettyprint?

i am using prettify, i am wondering if i can make it work with any code block, not requiring the prettyprint class.
else, how can i attach the class prettyprint dynamically, maybe using jquery. what i want to acheive is similar to stack overflow where code typed in the editor will be "pretty printed" in the preview and output.
i tried
$("#main").delegate("code", "ready", function() {
// this does not seem to run at all?
// intending to add the prettyprint class here
});
$(document).ready(function(){ $('code').addClass('prettyprint'); });
$(document).ready(<func>) runs <func> when the DOM is ready.
$('code') selects all code tags.
.addClass() adds the specified class to any elements it is passed (in this case, all of the code tags).
I don't think delegate() is necessary here. You just need to execute prettyPrint() every now and then to evaluate your preview. One solution might be to use setInterval to apply Prettify after every x seconds. Here's a quick example:
$('textarea').bind('keyup', function(e) {
val = this.value.replace(/<code>/gi, '<code class="prettyprint">');
$('#preview').html(val);
});
setInterval(function(){ prettyPrint(); }, 10000);
This would execute prettyPrint() every 10 seconds. It's not what I'd call perfect, but I think it does what you want. You'd probably also want to clear the interval if the user hasn't typed anything for a certain amount of time, but I hope this is enough to get you moving in the right direction.

Categories