I'm encountering an issue with react-slick where upon first-loading the page the last slide is being displayed first while the pagination-dots are on a disabled state(this indicating that the autoplay has not yet begun), after the autoplay begins it slides into the actual first slide and pagination-dots indicates correctly(react-slick here works fine onwards, issue lies on first load of page only).
Has anyone had the same issue?
Here's the code for my sliderParams:
const sliderParams = {
className: `slider-container ${styles['slider-container']}`,
autoplay: true,
speed: 1000,
autoplaySpeed: 3000,
dotsClass: `slick-dots ${styles.dots}`,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
nextArrow: <NextArrow />,
prevArrow: <PrevArrow />,
};
Thanks in advance for any help!
For those looking for a solution I have found one by going through the comment sections here:
https://github.com/akiran/react-slick/issues/1171
Apparently this is a bug that hasn't yet been fixed based on what I have read in the forumn(please correct me if I'm wrong).
Solution to my issue:
infinite: slides.length > 3
Now upon page loads, my first slide is displaying the actual first slide instead of the last slide.
Cheers
Related
I've 3 (loader, locker and debug view) hidden views (touchEnabled and visible set to false, and zIndex to 1) above the main view (zIndex = 2).
Each 'over' view has this method:
$.debugView.show = function() {
$.debugView.touchEnabled = $.debugView.visible = true;
$.debugView.zIndex = 3;
};
$.debugView.hide = function() {
$.debugView.touchEnabled = $.debugView.visible = false;
$.debugView.zIndex = 1;
};
This screen has the 3 'over' views hidden:
Now, I'm opening the 'debug view', but, SOMETIMES it seems like it changes the positions (as if the center it's on the top left corner instead of the center of the device).
Instead of the required result:
If I use the opacity instead of the visible property, it works properly.
This might be an SDK bug right?
<Alloy>
<Window>
<View id="content"/>
<View id="locker"/>
<View id="loader"/>
<View id="debugView"/>
</Window>
</Alloy>
All of these 4 views don't have width or height (so it uses the Ti.UI.FILL as default)
I have noticed this too with a completely different implementation. I had just one view that I included in a window.
Apparently the left and top calculations were not done properly if the elements is hidden.
What I did to solve the issue is to hardcode the left/top position by calculating the left position using this:
$.content.left = (Ti.Platform.displayCaps.platformWidth - 75) / 2;
Where in my case 75 is the width the element has, so that'll be bigger in your case. You can do the same for height.
Now, this is an iOS only solution. On Android you will need to take DPI into consideration calculating it.
I do think it is a bug, though this solution works perfectly for me. I recommend looking at JIRA and see if it is a known issue, and if not, raise it with a very specific explanation of the problem, preferably with a reproducible case delivered as an app. Classic would help most. And if it is not reproducible in classic it might be an alloy issue.
I am trying to make a screenshot at the bottom of the long page (e.g. http://www.taoism.net/ttc/complete.htm) like so:
Nightmare({ show: false })
.viewport(1024, 30000)
.goto('http://www.taoism.net/ttc/complete.htm')
.wait()
.screenshot(sImagePath, {
x : 0,
y : 27711,
width : 1024,
height : 133
});
Screenshot file size is 0 bytes.
Tested with different y values, it works until ~8000px.
Tried using .scrollTo, it did not help.
Does anybody know a workaround?
P.S. Nightmarejs wraps around electron browser.
This might be what you've looking for https://github.com/segmentio/nightmare/issues/328#issuecomment-159311982
Basically you dynamically adjust the viewport dimensions based on the content to grab size.
I'm trying to sync up my image slides with their textblocks. I've found that Cycle 2 is a great jQuery plug-in and a simple code got me quite far. There's one issue, however. Whenever the text slides for the first time the transition is really bad. The letters of the current and next block "morph" into eachother for a second. After the first cycle everything works as it should.
Here's the cycle code:
$("#slideshow").cycle({
timeout:0, // no autoplay
fx: 'scrollHorz',
randomizeEffects: false,
next: '#next',
prev: '#prev',
});
$("#text").cycle({
timeout:0, // no autoplay
fx: 'scrollHorz',
next: '#next',
prev: '#prev',
});
U can see everything in this fiddle: http://jsfiddle.net/lucb792/85TCZ/1/ (just click arrow left or right)
Is this something that can be fixed, or do I need to search for other solutions to make something like this?
It looks like the plugin is changing the width of the text the first time you use the prev/next controls. Instead of setting the width to the #text, set the width to the divs inside #text slideshow. Changing the CSS to this fixed it for me:
#text div{
width:600px;
}
Here is the fiddle: http://jsfiddle.net/bbernar1/85TCZ/3/
I'm working with a basic Caroufredsel setup with a main image up top, and thumbnails below. My issue is getting the thumbnails to show at the right size whether there's just one, two, or more. I've got it so that it's almost there, with one remaining weird issue.
When the div is shown, the thumbnails don't appear; with the debugger I can see that the caroufredsel_wrapper class has a width of 0, even though I've tried setting it explicitly to 330 in the config. If I resize the browser, then it "wakes up" and the width gets set correctly. I haven't been able to figure out what's causing this.
The config:
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
width: 330,
height: 65,
auto: false,
items: {
width : "auto",
height : "50%",
visible : {
min : 4,
max : 5
}
}
});
Earlier, I had no height/width specified for the carousel, and explicit "width: 150, height: 75" for the items. Everything was rendered as expected, but the width of the items was actually variable so the images were stretched if only 1 or 2 thumbnails were present. Why the explicit item height/width was ignored also remains a mystery.
Any suggestions would be fantastic; it's driving me nuts.
The above comment is correct. If you put the carousel in a hidden div that you later reveal by tabs it will make all the heights and widths to be zero so it will seem like caroufredsel is hidden.
You can attach the update sizes trigger to the tab click. E.g.
$j("ul.tabs a[href=#tab2]").click( function() {
setTimeout(function() {
$("#thumbs").trigger('updateSizes');
}, 200);
});
The delay ensures the container is displayed before updateSizes triggers.
My question is exactly opposite of this question. So what I'm trying is I'm trying to find a way to lose focus on a cell after user selects an item from the autocomplete combobox in that cell.
$input.autocomplete({
delay: 0,
minLength: 0,
source: args.column.options,
select: function (event, ui) {
$input.val(ui.item.label);
grid.getEditController().commitCurrentEdit();
return false;
}
});
I used this code to lose focus indirectly after finishing with editing. It works fine, however, the cell stays selected somehow.
grid.getEditController().commitCurrentEdit();
I also tried the code below to lose focus but it throws error everytime when I run the code.
grid.setActiveCell();
grid.setSelectedRows(-1);
After selecting an item from the autocomplete combobox, I want the grid to lose focus and select nothing on the viewport of the grid.
Thanks for your answers in advance.
Try calling grid.resetActiveCell().
There was a commit made to the master branch last week that might address your issue: Fix keyboard focus getting trapped when cell has tabbable elements.
You can achieve it as follows,
if (grid.getActiveCell()) {
var row = grid.getActiveCell().row;
var cell = grid.getActiveCell().cell;
grid.gotoCell(row, cell, false);
}