I am trying to use the BootStrap Slider mentioned here :
http://seiyria.com/bootstrap-slider/
I seem to have run into a rather strange requirement. As users drag the slider, the change in the slider value can change and such change can be capture (as mentioned in the examples in the link above).
However, I want to capture only those values of the slider at which the user "rests" after a slider, (or drops after the drag). She slides, stops, slides back, stops, slides forth stops, and so on. I want to capture values only where she stops.
How can I do this ? Is there an event for a slider, that captures just the drop or the resting place ?
p.s. I have not included any detailed code because I use the code in those linked examples directly, Example 6 in particular, which mentions :
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
You can do it like this:
$("#ex6").on("slideStop", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
More info Here
Related
I'm pretty new here and also with coding, I need help figuring out how to group items on a slider I have working on my website, so the thing is I want to classify them and group them, I wanna show 3 together then 2 others and then 4 each group with a title on top different for each one.
I can't do it cause it shows 4 slides every time I click on the arrows for the transitions, I can't find how to customize the number of slides to show on each transition.
Does anyone have any idea how to solve it or at least what would you recommend in this situation?
I'm trying to modify this over "miSlider jQuery Plugin".
http://www.mislider.com/
In a plugin there is a option called slidesOnStage which handle how many slide you want show at one time. You can use slidesOnStage like this.
var slider = $('.YourDivClass').miSlider({
// Number of slides visible at one time.
// Options: false or positive integer.
// false = Fit as many as possible.
slidesOnStage: 1, // If you use only 1 option remove `,` from last
});
For more option read documentation.
I'm trying to get some feel for JQuery etc.
Currently, my aim is to write a simple browser extension that selects all "deleted videos" in a playlist and removes them.
The selection is going fine, also works with the alternative commented lines:
var allVideos = $(".playlist-video-item.hidden");
alert("Nbr of deleted videos to remove: " + allVideos.length);
jQuery.each(allVideos, function(){
//$(this).find(":checkbox").attr("checked", true)[0].onclick();
//$(this).find(":checkbox").click();
$(this).find(":checkbox").trigger('click');
});
$("#playlist-edit-actions").click(); // button not editable??
However, even though some videos are "checked", the Actions button on top remains disabled. Only when I add another click manually, it becomes editable.
The solution is probably simple? I've looked around a bit for simulating native clicks but didn't see an immediate answer.
Regards.
I'm currently using http://www.eyecon.ro/bootstrap-slider/ which works a treat, however i'd like to output the value in realtime to an input box.
The js does this to a tooltip which is fine, however once you leave the slider, you can't see what you set it to.
Any suggestions?
You can log the slider value at real time using the slide event that is supplied with the plugin.
See this demo: http://jsfiddle.net/vMLPF/1/
Code:
$('#foo').slider().on('slide', function(_ev) {
$('#bar').val(_ev.value);
});
In the above code, #bar represents the input box in which you want to show the slider value in real time.
I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.
I have some weird behavior with jQuery paginate plug-in (jPaginate). I need to have top and bottom pagination and I want to sync them - whenever one is clicked, the second one should be properly changed as well.
I have two divs with number_pagination class and they are initialized the same way:
$(".number_pagination").paginate(options);
Now, here where it gets weird. Whenever I click on the top div, everything works as supposed to, but if I click on the bottom one, it changes the bottom one and does the pagination, but the top one stays the same. I cannot figure out why that could be happening.
Here's the onChange function that is supposed to change both pagination divs. Note the jQuery.fn.draw function that is a part of jPaginate. This is where it applies classes and style.
var opts=jQuery.extend({},jQuery.fn.paginate.defaults,options);
var o=jQuery.meta?jQuery.extend({},opts,jQuery(this).data()):opts;
jQuery(".number_pagination").each(function(){
var obj=jQuery(this);
jQuery.fn.draw(o,obj,page);
});
Found another solution that works perfectly.
It may even work for other pagination plug-ins. It checks the class that has the currently selected page number and checks if the content matches the selected NOW page, and if it doesn't, it looks for siblings that have the correctly selected page and triggers the click event.
jQuery(".jPag-current").each(function(){
if(jQuery(this).html() != page){
jQuery(this).parent().siblings().children().each(function(){
if(jQuery(this).html() == page){
jQuery(this).trigger("click");
}
});
}
});
You should probably look at using the onChange event to redraw the other pager that didn't incur the change