I am using bootstrap carousel in my website. But I want its functionality little different. I want slides to change on mouseScroll (each slide on each time mouse scrolled).
How can I achieve it with Bootstrap Carousel?
$('#myCarousel').carousel({
interval: 3000
});
jsfiddle
$('#myCarousel').carousel('next') slides to next item as documented.
So you can bind scroll event to do that:
$('#myCarousel').bind('mousewheel', function() {
$(this).carousel('next');
});
Edit: you can get mouse wheel events and make carousel move to next or previous slide:
$('#myCarousel').bind('mousewheel', function(e) {
if(e.originalEvent.wheelDelta /120 > 0) {
$(this).carousel('next');
} else {
$(this).carousel('prev');
}
});
updated your jsfiddle
You can also bind it to all carousels instead of a specific single one by using a class selector: Use $('.carousel').bind(...) for that. If your requirement is to have all your carousels support the mouse wheel, not just a specific single one, the class selector is more convenient.
I'm working on a solution to crop and center images in a cycle2 slideshow.
I'm resizing and centering the image in the slideshow to the parent using this plugin.
Problem I'm having is that I'm centring the image after it transitions, but this causes each slide to 'jump' into place. I can't seem to find a way to center all images on slide init, and resize.
function cropSlideImage() {
$('.cycle-slideshow img').resizeToParent({parent: '.slide'});
}
$( document ).ready(function() {
cropSlideImage();
$( '.cycle-slideshow' ).on( 'cycle-update-view', function( event, optionHash, slideOptionsHash, currentSlideEl ) {
cropSlideImage();
});
});
http://jsfiddle.net/mwHk4/1/
The resizeToParent plugin will not work if the image parents are set to display:none. Because the resizeToParent plugin waits for images to be cached it will not run until after most of the slides are already set to display:none.
Initiate the slideshow programmatically using $('.slideshow').cycle() after running resizeToParent and everything seems to work as desired.
function cropSlideImage() {
$('.slideshow img').resizeToParent();
}
$(document).ready(function() {
cropSlideImage();
$('.slideshow').cycle();
});
Fiddle!
I am trying to create a page containing revolution slider and a tabs script.
You can find the page here: http://lovebomb.nl/dating
But somehow the scripts are conflicting with one another.
This part of the revolution slider:
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
Seems to be conflicting with this part of the tabs script:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
These scripts are combined in one JS file which can be found here: http://lovebomb.nl/dating/tabs.js
I used this site as a base for the tabs script: http://www.snelgeldonlineverdienen.nl/
The only difference is the jquery and the jquery UI version.
If I use the version of jquery of this page, the revolution slider does not work anymore.
I am already trying to fix the tabs for about 4 hours.
Really could use some help.
Thanks in advance :)
Luuk
At the beginning of tabs.js we have the declaration:
var tpj=jQuery;
tpj.noConflict();
this sets the variable tpj to the jQuery object, and then puts jQuery into noConflict():
"Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict()."
Now that jQuery is in no conflict mode you can no longer use the $ to access jQuery. So when we run the code at the bottom of tabs.js:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
We get the error
"Uncaught TypeError: Property '$' of object [object Object] is not a function"
because $ no longer references jQuery. To access jQuery we must use jQuery or tpj
if we alter the tabs.js changing $ to either jQuery or tpj
tpj(document).ready(function(){
tpj('#tabs div').hide();
tpj('#tabs div:first').show();
tpj('#tabs ul li:first').addClass('active');
tpj('#tabs ul li a').click(function(){
tpj('#tabs ul li').removeClass('active');
tpj(this).parent().addClass('active');
var currentTab = tpj(this).attr('href');
tpj('#tabs div').hide();
tpj(currentTab).show();
return false;
});
});
the code should execute correctly.
Use Latest jQuery library Version( 1.7.1 +) and Try to modify above code to following and combine both to single file in init.js and place at bottom of all *.js files included in a page.
jQuery(document).ready(function() {
if (jQuery.fn.cssOriginal!=undefined)
jQuery.fn.css = jQuery.fn.cssOriginal;
jQuery('.fullwidthbanner').revolution({
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
jQuery(document).ready(function(){
jQuery('#tabs div').hide();
jQuery('#tabs div:first').show();
jQuery('#tabs ul li:first').addClass('active');
jQuery('#tabs ul li a').click(function(){
jQuery('#tabs ul li').removeClass('active');
jQuery(this).parent().addClass('active');
var currentTab = jQuery(this).attr('href');
jQuery('#tabs div').hide();
jQuery(currentTab).show();
return false;
});
});
Came across this issue while getting a canned html/css/js landing page template to work on Meteor. In my case removing the jquery-1.11.1.min.js and jquery-1.11.1.min.map files from the solution fixed the problem because I already have the latest version installed as a package. Hope this helps a solution searcher in the future.
I'm putting together this website: www.mccraymusic.com/newsite and I am trying to make it so that the navigation bar (which I know is not styled) fades in after the background fades in. Instead it seems to want to fade out.
I thought I have all the code in place and javascript correct. I actually want it so that the navigation bar and content I add to the site will fade in, after the initial background fade in occurs.
Do you I need to move some stuff around in my html? or how can I achieve this? I don't think I'm far from getting what I want
To start an animation after another, you can use the callback of .fadeIn() (or any effect function). Something like:
$( "#div1" ).fadeIn(function(){ $( "#div2" ).fadeIn(); });
Or (easier to read):
$( "#div1" ).fadeIn(function(){
$( "#div2" ).fadeIn();
});
div1 will fade in, and when it finishes, div2 will start to fade in.
Take a look in the docs: http://api.jquery.com/fadeIn/
I used this to fade stuff in with jQuery... pros will tell you this is a terrible practice... because you have the div initially set to display: none... and if javascript is off - then it will never fade in... but this works. and if it's just for a band or artist - chances are - no one is going to be looking at this site on IE 6 etc... but look in to no.js or whatever and have a back up plan.
<!--fade in div-->
<script type="text/javascript">
$(document).ready(function() {
$("#div-name").css("display", "none");
$("#div-name").fadeIn(15000);
});
</script>
Try callback function of jQuery
<script type="text/javascript">
$(function() {
$("body.bg").fadeIn(200,function(){
$('.second').fadeIn()
});
});
</script>
I'm using the below to create a fade-in and fade-out effect on a hidden div on a FAQ page. Problem is, it makes the hidden div snap open and closed which is quite irritating. I'm not too hot on javascript and can't figure out how to get slideUp and slideDown into this, as I'd like it to also slide up and slide down. Is there any way to get a sliding function into this script? Thanks.
$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).fadeIn('slow');
} else {
$("#" + this.name).fadeOut('slow');
}
return false;
});
});
});
You can fix this with a small CSS tweak by using visibility: hidden to hide the divs instead of display:none. This will reserve the space for the DIVs you are fading in & out.
You want to slide & fade at the same time? Try using .animate() to set opacity to 0/1 and use height to max/0.
If you want to use fading rather than slideUp/slideDown, you can use fadeTo(duration, opacity) which will not make stuff jump as the space for the element is maintained.
If you want a plugin to combine slide and fade, maybe check out this: http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/