I am using QTip in my project and I have a very frustrating problem.
I have a page which contains around 20 elements. while standing over them, qtip generate an ajax request and get additional details on these elements while showing them in a qtip.
The problem is that it seems the qtip show the tip before downloading all the content of the additional page and causing weird artifacts. This happen the first time for each additional content. second time it shows the tip there is no problem.
Here is how I am calling qtip :
$(".challenge_button").each(function (index, domEle)
{
$(domEle).qtip({
content: {
url: '/main/challenge_get_info/' + $(this).data("challenge-id") +'/'
},
position: {
adjust: { x: -50, y: -10, screen: true },
corner: {
target: 'bottomRight',
tooltip: 'topLeft'
}
},
style: {
name: $(this).data("state"),
width: {
max: 500,
min: 370
},
tip: true
},
show: {
ready: false,
delay: 500,
effect:
{type : 'fade', length : 400 }
}
});
});
Related
I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)
Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)
When loading a page with the CarouFredSel image cycle it is always shifted a little to the right until I either go to the next image or reload the page, same issue happens after a hard refresh.
$( document ).ready(function() {
$(".photos").carouFredSel({
width: "100%",
height: "465px",
items: {
visible: 1,
width: "variable",
height: "465px"
},
scroll: {
fx: "none",
duration: 1
},
auto: 50000,
prev: {
button: ".prev",
key: "left"
},
next: {
button: ".next",
key: "right"
},
pagination: {
container: ".pagination",
keys: true
},
swipe: true,
mousewheel: true
})
});
http://coreytegeler.com/gl/music/
I've tried posting this several times before and no one has given me any info yet and it's really holding me up, and help would be so greatly appreciated.
I don't think it's a problem with your configuration of CarouFredSel. I made a jsfiddle of your code and it works fine.(http://jsfiddle.net/YdAee/). I'm going to guess it has something to do with your masonry code, but that's just a guess because that is throwing an error. Look at this code:
///////MASONRY/////
if (randomComplete == true) {
$('#boxes').masonry({
itemSelector: '.box'
});
}
randomComplete is defined out of scope.
In My Sencha touch 2.0 app I am having an issue with a JW javascript video player not playing when there are two overlays up at the same time and I wanted to see if anyone could better elaborate on what is going wrong or what may be causing it so I can try and look around and try to figure out what is going on (i am new to sencha and javascript). I have the project loaded up at http://www.cox7.com/sean even tho it will only be run on an iPad.
Try the steps below to better see what I am talking about and also note that a lot of the jwplayer events are being logged in the javascript console so you can see whats going on......
1) click on any of the panels on the main page which will open a overlay with the video title description and a javascript video player. You will see that you can play the video.
2) do a search for "stem" in the search bar (top right corner of the main screen) this will then display a pannel with the search results.
3) click on any of the search results which will then open that same video player pannel but this time you will not be able to click the play button. It's almost like the pannel is not the top most element but I can still scroll and the onTouchStart event fires but the video never starts.
Anyone know what might be causing this? any help is much appreciated.
Here is my controller setup for the search result overlay....
showStreamSearchPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoSearchPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoSearchPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoSearchPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoSearchPlayerOverlay.show();
StreamVideoSearchPlayerOverlay.setActiveItem(2);
},
And here is my controller setup for the normal home screen asset overlay...
showStreamPopup: function showStreamPopup(list, index, node, record) {
//alert(record.get('title'));
//var record = getData().getStore().getAt(index);
StreamVideoPlayerOverlay = Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 200,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 200,
easing: 'ease-out'
},
centered: true,
width: '78%',
height: '68%',
styleHtmlContent: true,
listeners: {
painted: function() {
console.log('StreamVideoPlayerOverlay painted');
},
activeitemchange :function() {
console.log('StreamVideoPlayerOverlay activeitemchange');
}
},
items: [{
style: 'padding:1em;',
html:[ "<div class=\"postTitle\">",record.get('title'),"</div><div class=\"postDate\">Added on ",
record.get('date'),"</div><div class=\"postDesc\">",record.get('content'),"</div>"
].join("")
},
{
xtype: 'panel',
layout: 'card',
cls: 'videoPlayeriPad',
items:[{
xtype: 'jwplayer',
playerOptions: {
file: record.get('ipadvideo'),
image: record.get('poster'),
width: 500,
height: 281,
plugins: {
'gapro-1': { accountid: 'UA-23363754-1', idstring: '||title||' }
},
skin: 'http://www.cox7.com/wp-content/mediaplayer/skins/beelden/beelden/glow.xml',
}
}]
}
],
scrollable: true
}
);
StreamVideoPlayerOverlay.setActiveItem(2);
StreamVideoPlayerOverlay.show();
}
jsFiddle http://jsfiddle.net/fDavN/2761/
I understand the concept of why it wouldn't via css, but not sure if the same behavior would apply to this tooltip plugin
initializeToolTip: function () {
$(".offer-item").each(function () {
$(this).hover().qtip({
content: {
text: 'loading...',
title: {
button: true
},
ajax: {
url: '/Fakepath/ToolTips/ToolTipHover',
type: 'GET'
}
},
style: {
classes: { tooltip: 'auction-item-tooltip' }
},
show: {
solo: true
},
position: {
viewport: $(window),
target: $(this),
my: 'top right',
at: 'top right',
adjust: {
method: 'flip flip',
x: 280,
y: -20
}
},
hide: 'unfocus'
});
});
},
initializeCloseToolTip: function () {
$('a.close-tooltip').live("click", function (e) {
e.preventDefault();
$(this).parents('.qtip').qtip('hide');
});
}
Trying to get the last element to flip sides when outside of the window to no avail. Been looking at position.container and viewport to no avail. Anybody know if I'm doing something wrong? I have 5 's with tool tips next to each other, then on the last one I want the positioning to switch to 'top left' and opposite positioning.
Any help is much appreciated. Thanks for your time! Awesome plugin btw!
Here's some SS's of whats going on.
Regular: http://i.imgur.com/bI3oR.jpg
Cut-off http://i.imgur.com/wWhyq.jpg
Edit: Added jsFiddle, link to dev forum http://craigsworks.com/projects/forums/thread-viewport-not-working-with-absolute-positioning?pid=12829#pid12829
Thanks again!
According to the author, the viewport and absolute positioning options do not work in tandem.
http://craigsworks.com/projects/forums/thread-viewport-not-working-with-absolute-positioning
I'm using qtip ( http://craigsworks.com/projects/qtip/ ) to make tooltips. Now I need to show tooltips when the button is pressed and hide tooltips for example when 3 seconds have passed. My current code is not working, tooltips will sometimes go away and sometimes stay...
var self = $("#email");
self.qtip({
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' }, delay: 2000, effect: function () { self.qtip("destroy"); } }
});
#newbie, but a response, is to tidy the code and that maybe that's the problem. eg replacing the name of the variable "self" by "this".
$("#email").qtip( {
content: error,
tip: true,
position: { corner: { target: 'rightMiddle', tooltip: 'leftMiddle' } },
style: 'error',
show: { when: false, ready: true },
hide: { when: { event: 'mousemove' },
delay: 2000,
effect: function() { $(this).qtip("destroy"); }
}
});