i have written this code to apply 'jQuery Tooltip plugin' to ajax loaded elements.
i mean the row i want to show tooltip on its mouseover is loaded into page by ajax.
here's the code:
$("[id^=pane]").delegate("[id^=comm]","mouseover",function() {
$(this).tooltip({
// each trashcan image works as a trigger
tip: "#tooltip",
// custom positioning
position: "center right",
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } });
});
the tooltip is shown when mouseover but firebug report this error:
"$(this).tooltip({tip: "#tooltip", position: "center right", offset: [0, 15], delay: 0}).dynamic is not a function"
is it because of using $(this) ???
The problem is that you haven't loaded the dynamic function. From the jQuery tools documentation:
the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.
Furthermore, you don't need your delegate call. You are redoing the tooltip creation on every mouseover. You only need to do it once; the plugin will handle the events internally.
$("[id^=pane] [id^=comm]").tooltip({/*...*/})
.dynamic({/*...*/});
This selects all elements with ids beginning comm that are children of elements with ids beginning pane. Note that adding appropriate classes to all these elements would speed up your selection significantly.
it is solved now,i searched more in google and found the solution.
here it is:
$("[id^=pane]").delegate("[id^=comm]:not(.hastooltip)","mouseover",function() {
$(this).addClass("hastooltip").tooltip({
tip: "#tooltip",
position: "bottom center",
offset: [-10, 0],
delay: 0
}).dynamic({ bottom: { direction: "down", bounce: true } }).mouseover();
});
Related
I'm developing a TimeLine component. There are Views list inside horizontal ScrollView that represents half an hour blocks. And I have a Component called TimeRangeSelector, which I use to select a range of time in TimeLine ScrollView. So while I scroll the ScrollView I need to move the TimeRangeSelector in parallel without any lag. Below is the TimeLine component. You can see the 30mins blocks are filled inside ScrollView. The yellow color one is the TimeRangeSelector which is a Animated.View. And the left position of the TimeRangeSelector is set using the scroll position. Each time ScrollView moves im setting the state as below.
<ScrollView
horizontal={true}
onScroll={this.onScrollFunc}
>
{timelineElements}
</ScrollView>
onScrollFunc = (event, gesture) => {
this.setState({
contentOffsetX: event.nativeEvent.contentOffset.x,
scrollStopped: false
});
};
And Im passing the scrollBarPosition as props to the TimeRangeSelector and setting its left position style as shown in below code
<TimeRangeSelector
scrollBarPosition={this.state.contentOffsetX}
/>
let styles= [
{
position: "absolute",
left: this.props.scrollBarPosition,
backgroundColor: backgroundColor,
marginTop: 20,
marginLeft: 1,
width: this.state.selectionWidth,
height: 100
}
];
But the issue is when I scroll the ScrollView the TimeRangeSelector moves with it, but it has a delay.. when I scroll faster the distance between where it should be and where it is, is becoming high. Can anyone give me some ideas according to your knowledge.
My assumption: According to my understanding, I think the lag is because of it takes several instances to reach the setState in and set the ScrollBarPosition as below steps.
ScrollView moved 1 frame.
ScrollView fires the onScroll function and emmits the event with new x point.
Then in the onScroll function it sets the State.
As I understand it takes some time to happen all these steps from JavaScript thread all the way to Native Thread and come back to JS thread again.
You should use something like const onScroll = Animated.event([{ nativeEvent: { contentOffset: { x: animatedValue } } }], { useNativeDriver: true }); with const animatedValue = new Animated.Value(0). This way the animation is only done on the native level without going back and forth through the JS thread.
This animated value can only be used effectively with opacity and transform style properties, but it should help you with your problem.
You can read more about this, in this awesome article.
I have a problem with animation in jquery. I want to make an element smaller after time (1second) and then move this to the bottom (20px).
What am i doing wrong?
$(function(){
var box = $('box');
box.delay(1000).animate({
width: 100,
height: 100,
}, 3000, function(){
box.animate({
top: "+=20",
}, 3000);
});
})
Your code works: https://jsfiddle.net/b4qjagwt/
However, I think you meant to select #box not box, is that right? There is no <box> element.
For the element to move down, you have two options:
Make the box element have position: relative
Use a top margin: "margin-top": "+= 20"
Using relative positioning will mean the element may overflow onto something else. I don't know what your page looks like, but you can try both and see which works best.
I need some help with how Kendo Chart tool.
I am trying to plot a line graph with bookings on particular date. I have a booking on a particular day and can see the circular plot. If i hover on it i can see the tool tip which contains the summary of the booking. I want this tooltip to always be visible/open. At the moment it only happens on mouse over.
function createChart() {
$("#chart").kendoChart(data);
var tooltip = $("#chart").kendoTooltip({
width: 120,
position: "top",
visibe: true
}).data("kendoTooltip");
}
I am using Kendo for the first time and am very confused now. Any help will be much appreciated.
You can always show the tooltips or labels without having to hover over them by mouse, by using setting the visible of the series labels to true as follows:
seriesDefaults: {
type: "line",
labels: {
visible: true
}
}
You can check and see a demo example here: http://demos.telerik.com/kendo-ui/line-charts/local-data-binding
i have a page that shows a div on mouseover i want the page to move to the div on focus....i got help here to do that...
Now i want the onfocus to the div to move with the easing plugin and move it. i dont want to use the 'slow' in the animate e.g
$('html, body').animate({ scrollTop: $('#box0').offset().top }, 1000);
how can i apply easing to the above code
Secondly i want the div that is showing to slide out from left to right on mouseenter and slide right to left before hiding.
this is what i am using for now. I know there is a better or best way to achieve what i am doing right now.
$("#app0").mouseenter(function () {
$("#lSection2").show('slide').delay(3000); //container for div of four
$("#boxContent0").slideDown(2000);$('html, body').animate({ scrollTop: $('#app0').offset().top }, 1000);// one of the divs within #lSection2
});
$('#boxContent0').mouseleave(function() {
$("#boxContent0").fadeOut(1000);
$("#lSection2").fadeOut(1000);
});
Thanks for your help
The easing can be added as follow, see http://api.jquery.com/animate/
.animate( properties [, duration] [, easing] [, complete] )
You can use hover for mouseover and mouseout.
$("#app0").hover(function () {
// Mouseover
$("#lSection2").stop(true, false).width(0).animate({ width: 200}, 1000);
},function(){
// Mouseout
$("#lSection2").stop(true, false).width(0).animate({ width: 0}, 1000);
});
The stop is needed otherwise mouseover, mouseout, will complete the first animation and then the next and the next and the next, this way you can stop the animation and continue with the next.
i want to apply jquery tooltip plugin from jQuery Tools website
(http://flowplayer.org/tools/tooltip/index.html) to some elements loaded by ajax in my page.
i know that delegate(0 and live() methods are used for applying events to ajax loaded elements but i don't know how i can apply a plugin to these kind of elements.
the code is:
$("#mytable img").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: 'down', bounce: true } });
would someone help me?
thank you.
Apply the call to a hover function portion of your script like:
$("#mytable img").live('hover', function() {
//your function here
});
Alternatively you can use the script directly inside the ajax page you're loading in, in which case the script is directly in the same layer as the content.
You have to initialize the tooltip plugin on the new content on the success function of your ajax call.
it is solved now.i wrote it here:
jQuery Tooltip plugin error