I have a blessed box that is set with scrollable: true
let outerBox = blessed.box({
top: '0%',
left: '0%',
width: '0%+6',
height: '100%',
scrollable: true,
tags: true,
padding: 1,
mouse: true,
style: {
fg: 'white',
bg: 'black'
}
});
Inside it I have many elements that I want to be clickable.
[array of many elements].forEach((elem, i) => {
let innerBox = blessed.box({
content: elem,
"height": "0%+1",
"top": "0%+"+i,
style: {
hover: {
bg: "black",
fg: "white"
}
}
});
innerBox.on("click", (data) => {
console.log("clicked",guild)
});
outerBox.append(server);
});
However if the elements have the style property set or listen for the click event handler, scrolling on them no longer scrolls the outer box. I have to scroll on the very edge of the box for it to actually scroll.
This works but I cannot detect clicks:
[array of many elements].forEach((elem, i) => {
let innerBox = blessed.box({
content: elem,
"height": "0%+1",
"top": "0%+"+i
});
outerBox.append(server);
});
How can I scroll the outer box with a mousewheel while still being able to detect clicks on the inner elements?
I solved this by using a List instead of a Box full of Boxes. A list is scrollable and can have selectable elements.
Related
I wish that a button from my toolbar create panel on the mainview
I use this:
{
text:'toolbarButton1', //my button
cls: 'grbuttons',
ui:'action',
height: 95,
width: 95,
handler: function() {
Ext.Viewport.add({
xtype:'mapWorkSpace',
centered:true,
layout:'float',
cls:'toolbars',
height: 500,
width: 300,
draggable: false,
scrollable:true,
margin: 800
});
}
but when centered config has false value, 'mapWorkSpace' renders somewhere i can't found ( a panel is invisible on the mainview).
How to fix it?
I have a revolution slider carousel with a bullets navigation, that's the js configuration:
var revapi2;
tpj(document).ready(function() {
if(tpj("#rev_slider_2_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_2_1");
}else{
revapi2 = tpj("#rev_slider_2_1").show().revolution({
sliderType:"carousel",
jsFileLocation:"libs/revolutionSlider/js/",
dottedOverlay:"none",
sliderLayout: "auto",
delay:9000,
navigation: {
keyboardNavigation:"off",
keyboard_direction: "horizontal",
mouseScrollNavigation:"off",
onHoverStop:"off",
arrows: {
style:"",
enable:true,
hide_onmobile:false,
hide_under:300,
hide_onleave:true,
hide_delay:200,
hide_delay_mobile:1200,
tmp:'',
left: {
h_align:"left",
v_align:"center",
h_offset:30,
v_offset:0
},
right: {
h_align:"right",
v_align:"center",
h_offset:30,
v_offset:0
}
},
touch:{
touchenabled:"off",
swipe_treshold : 75,
swipe_min_touches : 1,
drag_block_vertical:true,
swipe_direction:"horizontal"
}
,
bullets: {
enable: true,
container:"slider",
hide_onmobile: false,
style: "ares",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "bottom",
h_offset: 20,
v_offset: 20,
space: 0,
rtl:false,
tmp: ''
}
},
carousel: {
horizontal_align: "center",
vertical_align: "center",
fadeout: "off",
maxVisibleItems: 3,
infinity: "on",
space: 0,
stretch: "off"
},
viewPort: {
enable:true,
outof:"pause",
visible_area:"80%"
},
responsiveLevels:[1240,1024,778,320],
gridwidth:[1240,1024,778,320],
gridheight:[600,600,500,300],
lazyType:"none",
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
shadow:0,
spinner:"off",
stopLoop:"on",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"on",
hideThumbsOnMobile:"on",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
});
The bullets appears over my carousel but what i can see is a strange behaviour. During navigation beetween slides, the .selected class is applied correctly to the right index only at the beginning of the sliding process. At the end , when the slide is stopped and loaded, the .selected class is automatic cleared from the correct index and applied to the index 0. I'll try to be more clear in my explaination:
slider with 4 element -> i click on the 3° bullet (the index 2)-> my image begin to slide in the view e my 3° bullet is red (red is the color that i have assigned to the .selected class)-> when the image slide animation is complete my 3° bullet return gray and my 1° bullet became red.
I have tried to intercept the event that cause this automatic change, but i have tried to log every events i have found in docs, and nothing is launched at the same time of my strange behaviour. It's a bug? How i can solve it?
I'm using this jVectorMap. By default, it shows tooltip on hover.
Here is what I'm trying to achieve -
Show tooltip only on click (partially working but tooltip should be be above the mouse cursor. I couldn't figure out how to get mouse cursor position.)
Let the tooltip opens until user explicitly clicks on close.
Code: jsfiddle
$('#map').vectorMap({
map: "us_aea_en",
backgroundColor: "transparent",
regionStyle: {
initial: {
fill: "#818486"
}
},
onRegionClick: function (e, code) {
var map = $('#map').vectorMap('get', 'mapObject');
map.tip.show();
map.tip.html(code + "<p>Click to Close</p>");
},
onRegionTipShow: function (e, tip, code) {
e.preventDefault();
}
});
Desire Behavior
I got it working the way you want and updated your fiddle: http://jsfiddle.net/inanda/ufhz316z/5/
Javascript
$('#map').vectorMap({
map: "us_aea_en",
backgroundColor: "transparent",
regionsSelectable: true,
regionsSelectableOne: true,
regionStyle: {
initial: {
fill: "#818486"
},
selected: {
fill: "#C0C0C0"
}
},
onRegionClick: function (e, code) {
var map = $('#map').vectorMap('get', 'mapObject');
var customTip=$('#customTip');
customTip.css({
left: left,
top: top
})
customTip.html(map.tip.text());
customTip.show();
customTip.append(code + "<p>Click to Close</p>");
customTip.children("p").click(function(){
map.clearSelectedRegions();
customTip.hide();
})
},
onRegionTipShow: function (e, tip, code) {
e.preventDefault();
}
});
var left,top;
$('#map').vectorMap('get', 'mapObject').container.mousemove(function(e){
left = e.pageX - 40;
top = e.pageY - 60;
});
HTML
<div id="map"></div>
<div id="x"></div>
<div id="y"></div>
<div id="customTip" class="jvectormap-tip"></div>
CSS
#map {
width: 500px;
height: 400px;
}
You can highlight the selected region via fill or stroke parameters. More details can be found in the documentation of jVectorMap. Here a short example:
regionStyle: {
selected: {
stroke: '#000',
"stroke-width": 1.3,
"stroke-opacity": 1
}
},
I have a QTip assigned to an element as follows:
$('#myDiv').qtip({
show: { when: { event: 'click', } },
hide: { when: { event: 'unfocus' } },
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: 'center',
tip: true, // Give it a speech bubble tip with automatic corner detection
name: 'red' // Style it according to the preset 'cream' style
},
position: {
corner: {
tooltip: 'topMiddle', // Use the corner...
target: 'bottomMiddle' // ...and opposite corner
}
},
content: {
text: self.parent('.qtip').html(),
title: { text: 'My Title' }
},
});
Under 'text' in 'content', I am trying to access the innerHTML of the element that triggered this QTip to appear after being clicked on.
However, my current means of self.parent('.qtip').html(), as displayed above, is not working.
What is the standard way to do this? Thanks.
I later found the solution to this question.
To access properties of the element that triggered the QTip, one must structure the code in this way:
$("#container a").each(function() {
$(this).qtip({ // QTip code });
});
That way, one can use $(this) to access data such as innerHTML of the element that triggered the QTip.
Maybe you could set it before:
var text = $('#myDiv').text();
And use it inside the object:
text: text,
How do i tell qTip to use another attribute than 'title' as default?
The reason i need to use another attribute, is because when i disable qtip and dynamically add elements with "title", the title will show when i hover my mouse over the element. Which i dont want to happen.
Thanks
In our project, we also use qTip and force it to use content of a children instead of Title attribute. The children content is hidden by default (CSS -> display:none;)
$('.tipped').each(function()
{
$elem = $(this);
$elem .qtip({
content: $elem.children('.tiptext').html(),
show: 'mouseover',
hide: 'mouseout',
position: {
corner: {
target: 'bottomMiddle',
tooltip: 'topMiddle'
}
},
style: {
tip: true,
name: 'blue',
color: '#A04242',
background: '#EEEEEE',
border: {
width: 1,
radius: 3,
color: '#4F81BD'
}
}
});
});