With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.
I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.
The mootools code I've got so far is:
var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});
If anyone can help with this, I'd be most appreciative.
Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:
onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },
This gives me what I need.
Related
I am trying to use this example from Noty's site: http://ned.im/noty/animations.bouncejs.html
I have installed noty.js and its CSS counter part. And I also have downloaded velocity.js and have it linked properly in my site. I know it is linked properly because I can use JQuery to select an element and perform a function on it that is provided by velocity:
$("table").velocity("fadeOut", {
duration: 3500
});
The example that is provided on the noty site though uses a call formatted like this:
new Noty({
text: 'NOTY - animating with velocity!',
animation: {
open: function () {
var n = this;
Velocity(n.barDom, {
left: 450,
scaleY: 2
}, {
duration: 0
});
Velocity(n.barDom, {
left: 0,
scaleY: 1
}, {
easing: [ 8, 8 ]
});
},
It calls it by using Velocity(... when I put this code into my page it errors and using the chrome F12 it says it is undefined. What am I missing from the example? The example for bounce works but I don't like the movement as much.
With the help of the developer we found an issue with the declaration on his site. Velocity doesn't work the way it is called in the question. It needs to be declared with $.Velocity with the current version of NOTY & Velocity
new Noty({
text: 'NOTY - animating with velocity!',
animation: {
open: function () {
var n = this;
$.Velocity(n.barDom, {
left: 450,
scaleY: 2
}, {
duration: 0
});
$.Velocity(n.barDom, {
left: 0,
scaleY: 1
}, {
easing: [ 8, 8 ]
});
},
I am using qTip2 to display a text box, within which there is a link. I want to display a tooltip when mouse is over this link.
Cannot figure out how to do this.
First, is this doable? And then how if yes?
Thanks for help!
Edit
Dihedral, thanks so much for your info. I followed your approach, but it is still not working. I looked at the html code of the page and notice that in your jsFiddle code, additional html is generated (by qTip) for the second tooltip popup. But in my case, I cannot find such additional html.
The following is my code and this is the jsFiddle link http://jsfiddle.net/mddc/bacqe/6/
$('#author').qtip({
content: {
text: $('#author-container').html()
},
show: {
solo: false,
event: 'mouseover'
},
hide: {
event: 'unfocus'
},
style: {
tip: false,
classes: 'author-content forcedzLowIndex'
},
position: {
my: 'top right',
at: 'bottom right'
},
events: {
render: function() {
buildQtipInfoTooltip($('#author-allow-friends-link'), 'title', 'forcedzHighIndex');
}
}
});
function buildQtipInfoTooltip(jEle, attr_name, classes) {
jEle.qtip({
content: jEle.attr(attr_name),
position: {
at: 'bottom right',
viewport: $(window),
adjust: {
y: 4,
x: 0,
method: 'shift'
}
},
style: {
classes: 'tooltip' + ' ' + classes,
tip: false
}
});
}
.forcedzLowIndex {
z-index: 10000 !important;
}
.forcedzHighIndex {
z-index: 99999 !important;
}
Modifying my answer to use your example code:
Your first qTip uses
content: {
text: $('#author-container').html()
},
for the content. That technique will result in a clone of the #author-container elements, instead of using the existing elements. So your second qTip was being applied, but it was getting applied to elements that were never appearing on screen.
I took away the .html() and it worked for me. Try this: http://jsfiddle.net/bacqe/13/
content: {
text: $('#author-container')
},
I've used the rcarousel plugin a couple of times without encountering any problem.
While implementing it on a new website, rcarousel suddenly duplicates the first slide (I'm showing 3).
This is happening on both slides on the bottom of this page:
http://www.expertmarketermagazine.com/en/home
When you navigate the slider you can see that the "duplicate" reverts to the correct slide just before the whole thing slides away.
Has anyone encountered something similar before?
change your rcarousel selectors to:
<script>
$(function() {
$("#carousel-authors .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-authors",
next: "#ui-carousel-prev-authors"
}
});
$("#carousel-books .wrapper").rcarousel({
visible: 3,
step: 3,
width: 127,
height: 200,
navigation: {
prev: "#ui-carousel-next-books",
next: "#ui-carousel-prev-books"
}
});
});
</script>
I need the following JS Twitter widget to appear on the same line as the "TEST MESSAGE" texts, however it always creates a line break and this code appears as three lines.
TEST MESSAGE<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 30000,
width: 370,
height: 500,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#e8e8e8',
color: '#000000',
links: '#005eff'
}
},
features: {
scrollbar: false,
loop: true,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('ControllerShop').start();
</script>TEST MESSAGE
The Twitter widget renders as a <div>, which is a block element and so behaves this way by default (just like any other block element like <p> or <blockquote>). To make it display inline with the text try:
.twtr-widget {
display: inline-block;
}
You can see it in action in this fiddle (make sure the "Result" pane is wide enough to accommodate everything).
It's not really clear why you'd want to do this so I'm curious about your larger use case, but this does the job anyway.
I'm running this script on a page which shows a box with more information when you roll over it.
site for review
The script works fine, except theres a flicker of the box before it actually scales.
What is causing this? I use the same thing in the main navigation with the same flicking.
Any ideas whats causing this?
//work page springing box
$$('.box').each(function(s) {
var more = $(s).down(2);
$(s).observe('mouseenter', function(e) {
$(more).show();
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
});
$(s).observe('mouseleave', function(e) {
new Effect.Fade(more, {
duration: 0.2
})
});
});
Thanks.
Rich
I should note, I am testing in Safari 4.0.4
#Allen is correct. When you call $(more).show(); The entire box is shown. Then, when you call new Effect.Scale(more the box is scalled down and slide in. So $(more).show(); is what's causing the flickering. You could try:
$(more).show.bind(more).delay(0.01);
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
})
The site looks fine to me. I did notice a very little something, but it could be my imagination.
new Effect.Scale(more, 100, {
scaleX: false,
scaleY: true,
scaleContent: false,
scaleFrom: 1,
mode: 'absolute',
duration: 0.5
});
$(more).show();
You may want to try this though, it seems to show it, then update it, as the code says. Update it first, then show it.
Firefox, fully updated btw.