I don't like when animationLoop is true that when it reaches the end of the slides, it does a quick scroll to the start. I would like it to instead keep a continues loop. I did NOT see an option for this so I am trying to keep adding the current slide to the end on the after callback, but it isn't working. Below is the code.
jQuery('.flexslider').flexslider({
after: function(slider)
{
slider.addSlide(slider.slides[slider.currentSlide],slider.count-1);
}
}
Related
Is there a way to avoid reset the carousel after the user zoom in/out the browser page?
I found pages with similar carousel and this behaviour doesn't happens.
Go to spartacus demo website https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en/USD/, in the carousel navigate to the next block of slide, then zooming the page, you should see the carousel reset to the first block of slides.
This behaviour of the CarouselComponent is expected. Its service depends on window.resize event to adjust the number of items on carousel page whenever the window got resized.
If you consider it as a bug, please create an issue in the Spartacus GitHub repository. Team will take your proposal into consideration.
There is one way this can be handled.
In DOM, instead of using Spartacus's activeSlide variable for rendering the UI, use one tempVariable named say tempActiveSlide
Reassign the tempActiveSlide only if the items per slide are changing. This count will change whenever the window resizes and which is as per the functionality of CarouselService.
Ref - https://sap.github.io/spartacus/injectables/CarouselService.html#source
This way, the carousel on UI will only reset if the number of items per slide have changed. Otherwise it wont reset.
TS code:
tempActiveSlide;
itemsPerSlide = 0;
ngOnInit(): void {
super.ngOnInit();
this.tempActiveSlide = this.activeSlide;
this.size$.subscribe((items) => {
if (items !== this.itemsPerSlide) {
this.itemsPerSlide = items;
this.tempActiveSlide = this.activeSlide;
}
});
}
I would like to hide a wheelnav completely. So far I've been hiding each individual slice using the hide() method. This was a suggestion I found here, but would also require me to loop through the items and show them again later. I also stumbled across a suggestion to call spreadWheel() on the wheels themselves. I liked this idea, as the animation for closing are played. However, This doesn't hide the spreader. If I have a title, icons, colored circle etc. as a spreader, this will still show on both 'solutions'. Is there any way I can hide everything in one call?
Thanks.
You can achieve your needs outside the wheelnav.
When a spreader disappears at the end of closing how can you use that spreader for an opening?
Here is a possible solution:
switchButton.onclick = function () {
if (wheelDiv.style.display === "none") {
wheelDiv.style.display = "block";
}
else {
wheelDiv.style.display = "none";
}
wheel.spreadWheel();
}
I have a page where I click a "change" link which displays another section. When this happens, the page scrolls vertically a bit so that the visible section is somewhat centered on the screen.
My next step in the test is to click something inside this newly shown container. But since the viewport scrolled, the coordinates that geb picks up for the clickable element are no longer accurate and geb tells me it can't click the link.
There's nothing I can assert in the waitFor in terms of visible content. But I'm wondering if there is a way for me to waitFor the content to stop scrolling?
waitFor { // page no longer scrolling }
If not, is there a way to just tell geb to wait a few seconds before moving on to the next event?
If you know what element you're scrolling to (the element that is at the top of browser viewport when you're done with scrolling) you can wait for the y property of a navigator representing that element to equal zero. Following is an example that you can paste into groovy console which goes to a page and then scrolls to an element by using it's id in the url (I know there is no waiting here nor the scrolling is animated but I just want to show how that property can be used to achieve want you want):
#Grapes([
#Grab('org.gebish:geb-core:0.9.0'),
#Grab('org.seleniumhq.selenium:selenium-firefox-driver:2.32.0')
])
import geb.Browser
Browser.drive {
//at the top of the page
go 'http://docs.codehaus.org/display/GROOVY/Creating+an+extension+module'
//an element we'll scroll to later
def elem = $('#Creatinganextensionmodule-Themoduledescriptor')
assert elem.y != 0
//scroll to the element
go 'http://docs.codehaus.org/display/GROOVY/Creating+an+extension+module#Creatinganextensionmodule-Themoduledescriptor'
assert elem.y == 0
}
So you should end up with something like:
waitFor { elementWeScrollTo.y == 0 }
or even:
waitFor { !elementWeScrollTo.y }
I don't know how to express it in geb, but I'd write a loop checking the document.body.pageYOffset (document.body.scrollTop for IE) repeatedly until it settles down.
I need to call parent.history.back(); after a jquery function is called.
My code looks like this:
if((counteditems).length == 0) {
$("li.res").fadeIn("slow");
$('div.no-items').fadeIn("slow", "linear");
$('div.no-items .close-it').click(function(){
$("div.no-items").fadeOut('slow', function() {
parent.history.back();
return false;
});
});
}
There are some items counted and if their length is equal zero then li.res should be shown.
After that a div.no-items should fade in. In this div.no-items there is a close it button. When i click on it the div.no-items should fadeOut and after that the "back-button" of the browser should be fired.
Everything works like it should be but exept the fading out. It fades out and then fades in and fires the back button but the div.no-items remains.
Whats wrong with my code?
EDIT: I am using jquery BBQ
I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});
I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.
think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});
use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'