I've integrated swiper slide with coverflow effect, now I don't want the effect for first and last slide. can we remove the effect for only first and lst slide.???
You can check your position and disable "swipe to prev" when you are in the first tab, and "swipe to next" when you are in the last one. Like this,
var swiper = new Swiper('.swiper-container', {
effect:'coverflow',
pagination: '#progressbar',
paginationType: 'progress',
nextButton: '#next-button',
prevButton: '#prev-button',
spaceBetween: 30,
onInit: function (swiper) {
if (swiper.activeIndex == 0) swiper.lockSwipeToPrev();
if (swiper.isEnd) swiper.lockSwipeToNext();
},
onSlideChangeStart: function (swiper) {
if (swiper.activeIndex == 0) swiper.lockSwipeToPrev();
else swiper.unlockSwipeToPrev();
if (swiper.isEnd) swiper.lockSwipeToNext();
else swiper.unlockSwipeToNext();
},
});
I guess you mean the slideShadows property. If so, you can easily show/hide it, as following:
var mySwiper = new Swiper('.swiper-container', {
coverflowEffect: {
rotate: 30,
slideShadows: false,
},
});
I was fix hyperlink states via CSS like below sample and it's working fine.
.swiper-slide a {
pointer-events: none !important;
}
.swiper-slide.swiper-slide-next a {
pointer-events: unset !important;
}
Related
I have my vue app which I am using position: absolute in my 'ContentBody' so that my vertical scroll is not displayed in my 'Header/Footer' but the issue I'm having now is that due to using this, it's stopping all my window.addEventListener('scroll' from firing.
Is there another way?
as soon as I remove my position: absolute it works perfectly.
created() {
window.addEventListener('scroll', this.reportInfoDiv);
console.log('111')
},
reportInfoDiv() {
console.log('reportInfoDiv') // NEVER HITS THIS
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollPosition < 78) {
this.showReportInfo = false;
} else {
this.showReportInfo = true;
}
},
I have also tried using #scroll="test" and :scroll="test" but still never seems to fire
I'm trying to add a class "disabled" to the pager if the slider has only 1 slide showing, and nothing to actually slide.
I'm sliding a div, not a list.
It's just a basic div:
<div class="bxslider2">
<div class="wrap">
...
</div>
</div>
Here is the jquery for the slider:
$('.bxslider2').bxSlider({
mode: 'horizontal',
speed: '180',
pagerType:'full',
pager:'true',
captions: false
});
I would like to not show the pager if there is only 1 slide showing.
Thanks for any help!
Justin
I faced the same trouble and here is my solution: we should count how many child elements we have under .bxslider2 block
$(".bxslider2>.wrap").length
and if there is only one, then set option to 'false', otherwise to 'true'.
$('.bxslider2').bxSlider({
mode: 'horizontal',
speed: '180',
pagerType:'full',
pager: ($(".bxslider2>.wrap").length > 1) ? true: false,
captions: false
});
Hope it will helps.
I use css to achieve this.
.bx-pager-item:first-of-type:last-of-type {
display: none
}
Here is a solution if you have more than one bxslider on the page.
$('.bxslider').each(function() {
var options = {
mode: 'fade',
};
if ($(this).find('li').length === 1) {
options.pager = false;
}
$(this).bxSlider(options);
});
Goes through each slider and finds if it has only one li. If so, add pager: false to the object passed to bxSlider.
a nice way to solve this thing is to reload the object like that
and change the controls per number of the items :
var slideQty = $('.bxslider').bxSlider({
minSlides: 1,
maxSlides: 3,
slideWidth: 110,
slideMargin: 0,
adaptiveHeight: true,
pager: false,
moveSlides: 1,
onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
});
var count = slideQty.getSlideCount();
if (count < 7) {
slideQty.reloadSlider({
controls : false,
minSlides: 1,
maxSlides: 3,
slideWidth: 110,
slideMargin: 0,
adaptiveHeight: true,
pager: false,
moveSlides: 1,
onSlideAfter: function ($slideElement, oldIndex, newIndex) { NextSlide(oldIndex, newIndex); }
});
}
return false;
Try this it works for me!!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
See screenshot of custom picker:
I know there isn't a way to style the picker control in Titanium. This picker only needs to work on iOS (iPad only). I was thinking I could hack the TableView control to use instead of the picker to achieve the style desired. Is that reasonable? How would I snap the TableViewRows so one is always in the center like seen in typical picker controls?
that's a tough one i would say you just only need views and labels and the swipe event (you can recognize if some one swipe up and down ) and just changes the labels. you can do this with a callback function i hope this code will help you (we have created a custom picker with this code)
using alloy
XML
<View id="numOfIntrusionsPickerContainer" class="compositeWrapperPicker noMargins" >
<View id="numOfIntrusionsButtonContainer" class="horizontalWrapper"></View>
CSS
".compositeWrapperPicker" : {
height: Ti.UI.SIZE,
layout: "composite",
width:Ti.UI.SIZE
},
".horizontalWrapper" : {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
layout: "horizontal"
},
JS
// INSTANTIATION
var args = arguments[0] || {};
var widthValue = 120;
var pickerEnabled = true;
if(args.width != null){
widthValue = args.width;
}
if(args.isEnabled != null){
pickerEnabled = args.isEnabled;
}
// STYLING
// ADDITIONS
// pressed arg can be: true,false,null. false & null are equal
// true = 'yes' is Pressed at creation, false/null = 'no' is pressed
var btn_main = Ti.UI.createButton({
top: 5,
bottom: 0,
left:0,
right:5,
height: 45,
enabled: pickerEnabled,
width: widthValue,
borderRadius: 5,
backgroundImage: "/images/bttn_gray_flex.png",
backgroundSelectedImage : "/images/bttn_gray_press_flex.png",
backgroundFocusedImage : "/images/bttn_gray_press_flex.png"
});
var picker_divider = Ti.UI.createImageView({
right: 43,
bottom:2,
touchEnable:false,
focusable:false,
image: "/images/Divider_picker.png"
});
var picker_arrows = Ti.UI.createImageView({
right: 16,
top: 17,
touchEnabled: false,
focusable: false,
image: "/images/bttn_selector_arrow.png"
});
$.pickerContainer.add(btn_main);
$.pickerContainer.add(picker_divider);
$.pickerContainer.add(picker_arrows);
// CODE
// LISTENERS
if(args.callBack != null){
btn_main.addEventListener("click",function(_event){
args.callBack(_event);
});
}
I am using JqPlot to display some graph legends on the jqplotMouseEnter, and jqplotMouseLeave events.
Here is my code:
$('#FinancialsLineGraph').bind('jqplotMouseEnter', function(ev, seriesIndex, pointIndex, data) {
$('#FinancialsLineGraph .jqplot-table-legend').show();
});
$('#FinancialsLineGraph').bind('jqplotMouseLeave', function(ev, seriesIndex, pointIndex, data) {
$('#FinancialsLineGraph .jqplot-table-legend').hide();
});
With this above code, when the cursor is moved over the actual legend inside the graph, the legend 'flickers' and the user cannot use the EnhancedLegendRenderer to shown/hide the corresponding series in the plot.
How can I get this above feature working?
Thanks in advance.
EDIT
Here is my JS plot code.
var plotCogsLineGraph = $.jqplot('FinancialsLineGraph', [[30,31,34,40,45], [34,38,31,42,38]],
{
axes:
{
xaxis:
{
ticks: ['5','4','3','2','1']
},
yaxis:
{
label:'%',
pad: 1.05,
ticks: ['0','15','30','45','60']
}
},
width: 480, height: 270,
legend:{show:true, location: 's', placement: 'insideGrid', renderer: $.jqplot.EnhancedLegendRenderer},
seriesDefaults:
{
rendererOptions: {smooth: true}
},
series:[
{
lineWidth:1,
label:'COGS',
markerOptions: { size:1, style:'dimaond' }
},
{
lineWidth:1,
label:'Wages',
markerOptions: { size: 1, style:"dimaond" }
}
]
}
);
What's actually happening here is that the jqplotMouseLeave event is being raised when you enter the legend, causing it to not be displayed, which then raises the jqplotMouseEnter (when the legend is hidden, you all of a sudden enter the plot), causing it to be shown. Because of this cycle, you get the flickering.
Try changing your 'jqplotMouseLeave handler to this:
$('#FinancialsLineGraph).bind('jqplotMouseLeave', function(ev, seriesIndex, pointIndex, data) {
var top, right, bottom, left;
var legend = $('#FinancialsLineGraph .jqplot-table-legend');
top = legend.offset().top;
left = legend.offset().left;
bottom = top + legend.height();
right = left + legend.width();
if (!(ev.pageX >= left && ev.pageX <= right && ev.pageY >= top && ev.pageY <= bottom)) {
$('#chart1 .jqplot-table-legend').hide();
}
});
What this does is hide the legend only if the mouse cursor location is not contained within the legend's bounding box.
I've successfully integrated both a Flot line graph and an instance of FullCalendar into my site. They are both on separate pages (although the pages are loaded into a div via AJAX).
I've added the Flot Resize plugin and that works perfectly, re-sizing the line graph as expected. However, it seems to cause an error when resizing the calendar.
Even if I load the calendar page first, when I resize the window I get this error in the console (also, the calendar does not resize correctly):
TypeError: 'undefined' is not an object (evaluating 'r.w=o!==c?o:q.width()')
I was struggling to work out where the error was coming from, so I removed the link to the Flot Resize JS and tried again. Of course the line graph does not resize, but when resizing the calendar, it works correctly.
The div containers for the two elements have different names and the resize function is called from within the function to draw the line graph (as required).
I have tried moving the link to the Flot Resize plugin into different places (i.e. above/below the fullCalendar JS, into the template which holds the graph), but all to no avail.
Does anyone have any idea where the conflict might be and how I might solve it??
Thanks very much!
EDIT: It seems that the error is also triggered when loading the line graph (flot) page AFTER the fullcalendar page even without resizing the window.... Now I am very confused!
EDIT 2: The code which draws the line graph. The function is called on pageload and recieves the data from JSON pulled off the server. When the graph is loaded, I still get the error about shutdown() being undefined.
function plotLineGraph(theData){
var myData = theData['data'];
var myEvents = theData['events'];
var myDates = theData['dates'];
var events = new Array();
for (var i=0; i<myEvents.length; i++) {
events.push(
{
min: myEvents[i][0],
max: myEvents[i][1],
eventType: "Calendar Entry",
title: myEvents[i][2],
description: myEvents[i][3]
}
);
}
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': 'black',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if ($("#enableTooltip:checked").length == 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if(item.series.label != null){
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + y);
}
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
var d1 = [
myData[0], myData[1], myData[2], myData[3], myData[4],
myData[5], myData[6], myData[7], myData[8], myData[9],
myData[10], myData[11], myData[12], myData[13], myData[14],
myData[15], myData[16], myData[17], myData[18], myData[19],
myData[20], myData[21], myData[22], myData[23], myData[24],
myData[25], myData[26], myData[27], myData[28], myData[29]
];
var markings = [
{ color: '#FFBDC1', yaxis: { from: 0, to: 2 } },
{ color: '#F2E2C7', yaxis: { from: 2, to: 3.5 } },
{ color: '#B6F2B7', yaxis: { from: 3.5, to: 5 } }
];
$.plot($("#placeholder"), [
{label: "Average Daily Rating", data: d1, color: "black"}
], {
events: {
data: events,
},
series: {
lines: { show: true },
points: { show: true }
},
legend: { show: true, container: '#legend-holder' },
xaxis: {
ticks:[
myDates[0], myDates[1], myDates[2], myDates[3], myDates[4],
myDates[5], myDates[6], myDates[7], myDates[8], myDates[9],
myDates[10], myDates[11], myDates[12], myDates[13], myDates[14],
myDates[15], myDates[16], myDates[17], myDates[18], myDates[19],
myDates[20], myDates[21], myDates[22], myDates[23], myDates[24],
myDates[25], myDates[26], myDates[27], myDates[28], myDates[29]
],
},
yaxis: {
ticks: 5,
min: 0,
max: 5
},
grid: {
backgroundColor: { colors: ["#fff", "#eee"] },
hoverable: true,
clickable: true,
markings: markings
},
selection: {
color: 'white',
mode: 'x'
},
});
$('#placeholder').resize();
$('#placeholder').shutdown();
}
EDIT 3:
The calendar is called like this:
function showCalendar() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#fullcalendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
clickable: true,
firstDay: 1,
eventSources: [
{
url: '/populate-calendar/{{theProductUuid}}/',
color: 'black',
data: {
text: 'text'
}
}
],
eventClick: function(calEvent, jsEvent, view) {
var startDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
var endDate = $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd');
var eventId = calEvent.uuid;
$('#modal-event-title').text(calEvent.title);
$('#edit-event-name').val(calEvent.title);
$('#edit-start-date').val(startDate);
$('#edit-end-date').val(endDate);
$('#edit-event-text').val(calEvent.text);
$('#edit-event-btn').attr('data-uuid', eventId);
$('#modal-edit-event').on('click', '#delete-btn', function(){
deleteCalendarEvent(eventId);
});
$('#modal-edit-event').modal();
},
});
}
The AJAX to load the page containing the flot chart:
function loadDetailedReports(uuid){
$('#product-content').fadeOut('slow', function(){
$('#product-content').empty();
$('#whole-product-sub-nav .active').removeClass('active');
$('#detailed-reports-content').load('/detailed-reports/' + uuid + '/', function(){
$('#detailed-reports-btn').addClass('active');
$('#detailed-reports-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadDetailedReports&' + uuid);
getChartData(uuid);
} else {
setLocationHash('');
}
});
});
});
}
And the AJAX to load the page containing the calendar:
function loadCalendar(uuid){
$('#detailed-reports-content').empty().hide();
$('#product-content').fadeOut('slow', function(){
$('#whole-product-sub-nav .active').removeClass('active');
$('#product-content').load('/calendar/' + uuid + '/', function(){
$('#calendar-btn').addClass('active');
$('#product-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadCalendar&' + uuid);
} else {
setLocationHash('');
}
showCalendar();
});
});
});
}
The calls to .resize and .shutdown are there because I was under the impression that they are necessary to achieve the resizing function and in response to your earlier comment regarding shutdown...... They're quite possibly n00b errors........?!?!
It looks like this is triggering on line 198 of jquery-resize:
data.w = w !== undefined ? w : elem.width();
This sounds like a race-condition stemming from the way you load different content into the same div. Flot binds the resize event to the chart div, and only un-binds it if the plot is destroyed cleanly.
EDIT: Looking at your code, my first suggestion would be to get rid of the resize and shutdown calls at the end of plotLineGraph. The resize plugin doesn't require any setup; it hooks into Flot to attach automatically to any new plot. So your call to resize is actually to jQuery's resize event trigger, which may be what's causing the error.
EDIT #2: I'm still not clear on your structure, but to generalize: anywhere that you might be getting rid of #placeholder (via emptying its parent or anything like that) you should first call shutdown on the plot object. If you aren't keeping a reference to it, you can do it like this: $("#placeholder").data("plot").shutdown(); but then have to account for the fact that it's undefined prior to the creation of your first plot.
If that still doesn't work, I'd need to see a live (simplified) example to make any further suggestions.