I want to have a horizontal fx for my third slide, the slider is in fade fx. the third slide is loaded with a simple button not with pager or 'next' 'prev'.
I'm using maximage, so the fx need to be in css too.
So far I achieve to do that:
on click, I change my css, on click I can load my slide.
$('.link_contact').click(function() {
$( ".mc-image" ).css( "transition", "left 2s ease !important" );
$( ".mc-image" ).css( "-moz-transition", "left 2s ease !important" );
$( ".mc-image" ).css( "-o-transition", "left 2s ease !important" );
$( ".mc-image" ).css( "-webkit-transition", "left 2s ease !important" );
$('#nav li:eq(2) a').triggerHandler('click');
return false;
});
now I need to change the cycle option, but I do'nt know how..?
I tried to add
$("#maximage").cycle ('fx' , 'scrollHorz');
But this is no luck..
does anyonne know what to write instead of to change a cycle option..?
$("#maximage").cycle ('fx' , 'scrollHorz');
Thanks !
Assuming your cycling element is $("#maximage"), try this:
changedOpts = $("#maximage").data('cycle.opts');
changedOpts.fx = 'scrollHorz';
$("#maximage").data('cycle.opts', changedOpts);
Related
I am trying to do service with multiple methods - each method will return pipe. The only one method can be called at a time; otherwise, the switch of pipe should happen.
This is an example of how I achieved it -- https://stackblitz.com/edit/rxjs-3pry8u?devtoolsheight=60 . It looks too complicated and has a potential memory leak, but it works. If you will try to click fast "Make red"/"Make green"/"Make blue" buttons, only the last will be triggered(see the console.log).
As requirement - it is important to control pipe run inside Color, not outside. I can imagine how it can be solved with the outside way: I could merge all click events to one pipe and use switchMap(). But it is interesting for me - how this problem can be solved properly inside Color class.
This is how I managed to solve it inside Color class:
I didn't use switchMap as I'm not going to make use of inner observables. I did get rid of makeRed, makeGreen and makeBlue functions as well.
I merged all the events and applied debounceTime to them.
Color
.mergeEvents (events: Observable<any>[]) {
merge<State>(...events)
.pipe(
debounceTime(500),
)
.subscribe(c => {
console.log(c)
this.state$.next(c);
})
}
const color = new Color();
color.mergeEvents([
fromEvent(document.getElementById("make-red"), "click").pipe(mapTo({ color: 'red' })),
fromEvent(document.getElementById("make-green"), "click").pipe(mapTo({ color: 'green' })),
fromEvent(document.getElementById("make-blue"), "click").pipe(mapTo({ color: 'blue' })),
]);
Here is a StackBlitz demo.
I want to create an animation on a single property (eg: scale) of a single entity (eg: a-circle) which would run one after another, using K-Frame. Is this possible?
For example, this would be a simple case:
<a-scene>
<a-circle
position="0 1.25 -5"
color="#F55"
radius="1"
scale=".1 .1 1"
animation__scale="property: scale; dir: normal; dur: 500; easing: easeInSine; loop: true; to: 1 1 1"
>
</a-circle>
</a-scene>
I want to, say, scale from .1 .1 1 to .5 .5 1 for the first 500ms, then stay at .5 .5 1 for another 500ms, and go back to .1 .1 1 in the next 200ms, and then loop through this entire process over and over infinitely.
Is this even possible?
You can daisy-chain the animations within a component checking which animation ended and starting the next one. In Your case that would be
animation1 ended -> wait 500ms and start animation2 -> animation2 ended -> wait 200 ms and start animation1.
You can achieve this, by simply listening for the animation__[ID]-complete event, and emit another one.
If You just chained them, You could just map multiple listeners on the start event list.
However You want to give them some custom wait periods, which can be included within the mapped functions, or done manually:
el.addEventListener('animation__scale1-complete', function() {
setTimeout(function(){
el.emit('secondAnimation');
},500);
})
el.addEventListener('animation__scale2-complete', function() {
setTimeout(function(){
el.emit('firstAnimation');
},200);
})
working fiddle here: https://jsfiddle.net/gftruj/2qoz8b75/2/ Please note, that i trigger the first animation also on the loaded event in case it fires before its loaded.
I'm using Waypoints and their Sticky shortcut to 'stick' an element with the id stick-this to the top of the viewport once it gets scrolled past. I am having some difficulty positioning the element past another fixed element on the screen, however.
There is a <div> with a class .header which always remains fixed. I am trying to position the top of the new element to the height() of the .header element so they are 'stacked' on top of one another and both visible. This is the code I am using to accomplish this:
var sticky = new Waypoint.Sticky({
element: $('#stick-this')[0],
handler: function() {
$(".stuck").css({ "top" : $(".header").height() });
}
})
So, essentially, once the #stick-this is scrolled past, it becomes sticky with a position:fixed class and the top is dynamically determined by the height() of .header.
This works great until I scroll back up, and the top style is still applied to this element, in spite of the stuck class not being applied anymore.
So when I scroll past, the element ends up like this
<div id="stick-this" class="stuck" style="top:70px /*or whatever the height() ends up being */">
and when I scroll back up the element ends up like this with the top property still in place
<div id="stick-this" class="" style="top:70px /*I need this back to 0px */">
Is it possible to have a function called when the "sticky" is removed, so that the inline style property can be set to top:0px or something like that?
For anyone else struggling with this, I ended up dynamically writing the CSS when the sticky element's class is initiated and inserting it into the head:
var sticky = new Waypoint.Sticky({
element: $('#stick-this')[0],
offset: $('.header').outerHeight(true),
handler: function(direction) {
$("<style>")
.prop("type", "text/css")
.html("\
.stuck {\
position: fixed;\
top:" + $(".header").height() + "px;\
}")
.appendTo("head");
}
})
so, the class will be added with the correct top positioning, and once the class is removed, the top property is inherently returned back to 0px.
It's important to have the \ after each line break in the .html() portion of this code in order for it to work.
I'm using kendo tooltips on a graphic (within an anchor link) which is 24px tall. Accordingly, when the tooltip shows up (default position of bottom), it covers the bottom third of the graphic and so the bottom third of the graphic can't be clicked.
I can do the following:
.k-tooltip {
margin-top: 8px;
}
But the problem with this is that if the tooltip is on a graphic at the bottom of the page, the position will be "top" instead of "bottom" but it'll now be covering about 1/2 the graphic instead of just a third because it's still being pushed down by 8px.
What I'd like is if the position is bottom, then the margin-top is 8px, but if the position is top, the the margin-bottom is 8px.
Thanks for any help you can provide!
Billy McCafferty
Would this one help you?
http://dojo.telerik.com/amoZE/5
var tooltip = $("#demo").kendoTooltip({
filter: "a",
show: function (e) {
var position = e.sender.options.position;
if (position == "bottom") {
e.sender.popup.element.css("margin-top", "10px");
} else if(position == "top") {
e.sender.popup.element.css("margin-bottom", "10px");
}
}
}).data("kendoTooltip");
Thank you for your answer, jarno-lahtinen. It was very helpful!
Two problems came up with it and I would like to document the solutions here:
1. Property Error in Typescript
I am using TS and it gave me the following error:
"Property popup does not exist on type Tooltip" for e.sender.popup. I am not sure if this is due to a newer version of Kendo, or of missing type definitions.
Solution:
you can use this.popup instead.
2. Not working for position: "top"
Unfortunately, the "margin-bottom" has absolutely no effect because the popup is positioned "absolute" using top/left.
Solution:
this.popup.element.css("margin-top", "-10px");
This will shift the popup upwards by 10 pixels
I am brand new to Raphael and am really stuck, I would like to rotate a div and its contents, using a button, with Raphael.
Ideally, I would like to have a smooth animation that goes from 0 degrees to -90 degrees when the button is clicked, then when the button is clicked again, the animation would reverse. I think I will change the id or class on mouse click so that I can use the same button for both animations. Would that be wise?
I really would like some help please, my Sandbox is at http://jsbin.com/isijo/ and you can edit it at http://jsbin.com/isijo/edit
Many thanks in advance for any help.
Hello and welcome to Raphael!
I have been looking at Raphael for more than a few months and although the documentation is not very comprehensive the software is brilliant.
I have been mixing Divs with Raphael objects in many ways and have got a "feel" for what works and what does not work.
I am recommending that you do not try rotating divs but (instead) Raphael objects.
First of all you could make a shiney set of Raphael buttons using this "tweakable" code below..
var bcontrols = new Array();
var yheight = 300;
for (var i = 0; i < 3; i++) {
bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({
fill: "r(.5,.9)#39c-#036",
stroke: "none"
});
bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({
fill: "r(.5,.1)#ccc-#ccc",
stroke: "none",
opacity: 0
});
bcontrols[i].index = i;
bcontrols[i].shine.index = i;
bcontrols[i].shine.mouseover(function (e) {
this.insertBefore(bcontrols[this.index]);
});
bcontrols[i].mouseout(function () {
this.insertBefore(bcontrols[this.index].shine);
});
/* Called from Raphael buttons */
bcontrols[i].click(function () {
alert("Hello you just clicked " + this.index);
});
}
Next you need to know more about rotating Sets:
var s = paper.set();
s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'}));
s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'}));
s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'}));
s.animate({rotation: "360 65 25"}, 2000);
This shows the degree of rotation and the centre of rotation of the "set" on the last line.
My additional Raphael resources website which aims to supplement documentation (Amongst other things):
http://www.irunmywebsite.com/raphael/raphaelsource.html
Heres where you can run the above 2 code examples without alteration:
http://raphaeljs.com/playground.html
I'm hoping this helped...
To my knowledge, there is no way to convert a div into a Raphael object. Since the Raphael rotate command is only defined for Raphael objects, your best bet is to create the major elements of your div (images, text, buttons and all) in Raphael instead of HTML, put them together in a single set, and, as the set is a Raphael object, rotate the set.
Consult Rotate a div in CSS and in IE filters. This is not the same as SVG, so if you need more layout magic, Raphael shapes are likely the way to go. You should be able to used JQuery in concert with Raphael to manipulate both in your window, but I am brand new to Raphael and have never done so.