I'm trying to call a jQuery click function at the navigation of my bxslider like the following:
$("a.bx-next").click(function(){
alert("works!");
});
the problem is, that somehow i can't access anything that is in the .bx-controls section... if i try to:
$(".bx-viewport li").click(function(){
alert("works!");
});
it works as expected...
is there anyone, who experienced the same or knows, what the problem could be?
thanks in advance :)
EDIT
Actually i am using Drupal and the views slideshow plugin to include the bxslider... i don't know, what impact that could have, but these are the options given in JSON:
"viewsSlideshowBxslider": {
"views_slideshow_bxslider_images_1": {
"general": {
"mode": "horizontal",
"speed": 500,
"slideMargin": 0,
"startSlide": 0,
"randomStart": 0,
"infiniteLoop": 1,
"hideControlOnEnd": 0,
"captions": 1,
"ticker": 0,
"tickerHover": 0,
"adaptiveHeight": 0,
"adaptiveHeightSpeed": 500,
"video": 0,
"touchEnabled": 1,
"preloadImages": "all",
"disable_standard_css": 0,
"useCSS": 1,
"align_image": "left",
"align_caption": "left",
"swipeThreshold": 50,
"oneToOneTouch": 1,
"preventDefaultSwipeX": 1,
"preventDefaultSwipeY": 0,
"color_caption": "80, 80, 80, 0.75"
},
"controlsfieldset": {
"controls": 1,
"nextText": "",
"prevText": "",
"startText": "",
"stopText": "",
"autoControls": 0,
"autoControlsCombine": 0
},
"pagerfieldset": {
"pager": 1,
"pagerType": "full",
"pagerShortSeparator": " \/ "
},
"autofieldset": {
"pause": 4000,
"autoStart": 1,
"auto": 0,
"autoHover": 0,
"autoDelay": 0,
"autoDirection": "next"
},
"carousel": {
"minSlides": 4,
"maxSlides": 6,
"moveSlides": 1,
"slideWidth": 0
},
"callback": [
],
"fixes": {
"height_does_not_dyn_change": 0
}
}
}
okay, i found it on my own...
i'm not sure if it didn't work, because of the implementation via Drupal.
I had to define custom navigation like
<p><span id="slider-prev"></span> | <span id="slider-next"></span></p>
and then in a custom js file
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Onward →',
prevText: '← Go back',
onSlideNext: function(){
handleBxNav("next");
},
onSlidePrev: function(){
handleBxNav("prev");
}
});
function handleBxNav(direction){
if(direction == "prev"){
console.log("prev");
}else{
console.log("next");
}
}
with this solution, i can add custom events to the navigation :)
hope it helps if anyone is running in the same issue
Related
I'm using swiper slider and don't know how to get rid of the empty space when the slider comes to the first or last element, can you tell me please
https://monosnap.com/file/jLTCNd8CIT82h6WNqGbP5qxVKWkS8d
Tried find some property in Swiper slider API and make styles
{
"loop": true,
"slidesPerView": 3,
"observer": true,
"loopFillGroupWithBlank": true,
"slidesPerGroup": 1,
"initialSlide": 3,
"navigation": {
"nextEl": ".collection-slider-2-swiper-button-next",
"prevEl": ".collection-slider-2-swiper-button-prev"
},
"pagination": {
"el": ".swiper-pagination",
"dynamicBullets": true
},
"breakpoints": {
"320": {
"slidesPerView": 2,
"spaceBetween": 20,
"pagination": {
"type": "progressbar"
}
},
"1024": {
"slidesPerView": 2,
"pagination": {
"type": "bullets"
}
},
"1440": {
"slidesPerView": 3,
"spaceBetween": 30
}
}
}
I want to align my cytoscape graph on the center of the canvass, can anyone help?
This is the result i get:
Heres my layout code:
var cy = window.cy = cytoscape({
// Contenedor
container: document.getElementById('graficaCytoscape'),
// Layout
layout: {
name: 'cose',
idealEdgeLength: 100,
nodeOverlap: 20,
refresh: 20,
padding: 30,
randomize: false,
componentSpacing: 100,
nodeRepulsion: 400000,
edgeElasticity: 100,
nestingFactor: 5,
gravity: 80,
numIter: 1000,
initialTemp: 200,
coolingFactor: 0.95,
minTemp: 1.0
},
// Styles
style: [{
"selector": "node",
"style": {
"width": "mapData(score, 0, 25, 30, 70)",
"height": "mapData(score, 0, 25, 30, 70)",
"content": "data(name)",
"font-size": "12px",
"background-color": "#c2c2c2",
"text-outline-color": "#555",
"text-outline-width": "2px",
"color": "#fff",
"overlay-padding": "6px",
"z-index": "10"
}
}, {
"selector": "edge",
"style": {
"curve-style": "haystack",
"haystack-radius": "0.5",
"opacity": "0.4",
"line-color": "#EC0000",
"width": "mapData(weight, 0, 1, 1, 8)",
"overlay-padding": "3px"
}
}],
// Data
elements: data
});
So what i need is that the graph goes to the center of its container.
I think its a easy question but i never worked before with cytoescape and im stucked in this.
Thanks.
You may try to use cy.center() when you in .js file while rendering your graph.
Cytoscape.js documentation: https://js.cytoscape.org/#cy.center
You can try to add cy.center() in script.js file to see the effect in this example: http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/
Alternatively, from your code, you can also try to add cy.center() at the end of the cy variable declaration.
At last i could do it with:
pan: { x: 400, y: 100 },
Using amcharts, I am plotting a chart with 3 kinds of data. But these two creates problem.
Job execution duration - The value actually should be in 'hh:mm'
format, for example 03:30 (can be read as 3 hours, 30 minutes)
Time of the day - The value should be in 'hh:mm' format, for example 08:30 (can be read as 8:30 am)
I tried, but i am not getting them working as expected(I want the axis values in above format). Here is my JSfiddle. Any suggestions/corrections would be highly appreciated!
code is under JS part : var chart = AmCharts.makeChart
Please find below code
return {
'type': 'serial',
'theme': 'light',
'marginTop': 0,
"autoMarginOffset": 20,
'marginRight': 80,
"mouseWheelZoomEnabled":true,
"legend": {
"align": "center",
"listeners": [ {
"event": "hideItem",
"method": this.legendHandler
}, {
"event": "showItem",
"method": this.legendHandler
} ]
},
'dataProvider': dataProvider,
'valueAxes': [{
"minimum": 0,
"axisColor":"#FFFFFF",
"titleColor":"#FFFFFF",
"color":"#FFFFFF",
"strictMinMax": true,
'axisAlpha': 0,
'position': 'left',
// "title":selectedParameter +" Level ("+type+")"
},
{
"logarithmic": true,
"dashLength": 1,
position: "left",
}
],
'graphs': graphlinelist,
'chartScrollbar': {
'graph': 'g1',
'gridAlpha': 0,
'color': '#888888',
'scrollbarHeight': 55,
'backgroundAlpha': 0,
'selectedBackgroundAlpha': 0.1,
'selectedBackgroundColor': '#888888',
'graphFillAlpha': 0,
'autoGridCount': true,
'selectedGraphFillAlpha': 0,
'graphLineAlpha': 0.2,
'graphLineColor': '#c2c2c2',
'selectedGraphLineColor': '#888888',
'selectedGraphLineAlpha': 1
},
'chartCursor': {
'categoryBalloonDateFormat': 'YYYY-MM-DD JJ:NN:SS',
'cursorAlpha': 0,
'valueLineEnabled': true,
'valueLineBalloonEnabled': true,
'valueLineAlpha': 0.5,
'fullWidth': true
},
'dataDateFormat': 'YYYY-MM-DD JJ:NN:SS',
'categoryField': 'Date',
'categoryAxis': {
'minPeriod': 'ss',
"labelColorField":"#FFFFFF",
'parseDates': true,
"axisColor":"#FFFFFF",
"titleColor":"#FFFFFF",
"color":"#FFFFFF",
'minorGridAlpha': 0.1,
"title": "Time(24 hours)",
'minorGridEnabled': true
},
'export': {
'enabled': true
}
};
}
You can either use 'dataDateFormat': 'YYYY-MM-DD JJ:NN:SS',
or
'dataDateFormat': 'NN:SS',
I was reading some code today and came across this. This is using the Revolution slider with extensions, link to their site here. I'm not entirely sure what this huge piece of code does, and was wondering if there was anyone that could help me out with this. In the code, it says navigation, so is this how the website makes its navigation bar? I was viewing the actual code and noticed that no-where in the code was there an actual place that made the navigation bar. So I'm assuming they used this or some other JavaScript to insert the nav-bar without coding it directly in HTML.
<script type="text/javascript">
var tpj=jQuery;
var revapi4;
tpj(window).load(function() {
if(tpj("#rev_slider_4_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_4_1");
}else{
revapi4 = tpj("#rev_slider_4_1").show().revolution({
sliderType:"standard",
jsFileLocation:"assets/revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "gyges",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: false,
hide_onmobile: false,
style: "gyges",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "top",
h_offset: 0,
v_offset: 20,
space: 5,
tmp: ''
}
},
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
fullScreenAlignForce:"off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
Thanks a bunch, I appreciate the help!
I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:
var c1 = $('.cropper-example-1 img').cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
}
});
After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.
var cropper;
var imgx;
$(function(){
var imgx = $('#cpdiv').find('img');
cropper = new Cropper(imgx[0], {
//aspectRatio: 1/2,
autoCropArea: 0,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
//cropBoxMovable: false,
cropBoxResizable: false,
data:{
width: 240,
height: 607,
},
crop(event) {
console.log(event.detail.width);
console.log(event.detail.height);
},
});
});
i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.
Try like this add autoCropArea: 0.5, and changes the built method
var $image=$('.cropper-example-1 img');
$image.cropper({
//aspectRatio: 10 / 16,
strict: true,
background:false,
guides: false,
highlight: false,
dragCrop: false,
movable: false,
resizable: false,
mouseWheelZoom: false,
touchDragZomm:false,
autoCropArea: 0.5,
built: function () {
//alert(1);
// $(this).cropper('setData', 0, 0, 675, 1080,90);
// $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
$image.cropper('setCanvasData', 0, 0, 1920, 1080));
$image.cropper('setCropBoxData', 0, 0, 675, 1080);
}
});
built: function () {
//$image.cropper('setCropBoxData', 0, 0, 675, 1080);
$image.cropper("setCropBoxData", { width: 160, height: 80 });
or
$image.cropper("setCropBoxData", { left: 0, top: 0, width: 160, height: 80 });
}
If you want to make CropBox selection fit to Canvas use this
autoCropArea: 1,
To make CropBox selection has margin 50% from the Canvas
autoCropArea: 0.5,
try to limit its height and width on cropper.js.. not the best option but it fixed my problem. When user try to minimize the cropbox, it will stop at the set size creating a not so bad solution for now..:')
minCropBoxWidth: 350,
minCropBoxHeight: 350
Working code to set crop box. I am using jQuery Cropper v1.0.0
var $image = $(".image-crop > img");
var init_data = { x: parseFloat($("#event_crop_x").val()), y: parseFloat($("#event_crop_y").val()), width: parseFloat($("#event_crop_w").val()), height: parseFloat($("#event_crop_h").val()) };
$($image).cropper({
zoomable: false,
aspectRatio: 2 / 1,
preview: ".img-preview",
crop: function(event) {
$("#event_crop_x").val(event.detail.x);
$("#event_crop_y").val(event.detail.y);
$("#event_crop_w").val(event.detail.width);
$("#event_crop_h").val(event.detail.height);
},
data: init_data
});