first fo all: i'm not into JavaScript/JQuery! …but i will try to point out what i want to do.
i'm using the fantastic bx-slider on my page and i made my website responsive via media queries which both works great so far. …but there are some features from the bx-slider-script which i don't want to get active on a specific browser-width. here's what i want:
browser-width LOWER than 500px = load this function:
$('#slider4').bxSlider({
minSlides: 2,
maxSlides: 2,
slideWidth: 230,
slideMargin: 10,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
browser-width HIGHER than 500px = hide the function above and load this one:
$('#slider4').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 230,
slideMargin: 20,
nextSelector: '#next',
prevSelector: '#prev',
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
useCSS: false,
easing: 'easeInOutExpo',
speed: 1000
});
…is that even possible in JavaScript? I tried some scripts which are using breaking points but it think my JS-knowledge is to weak to get this to work as i want.
It would be great if there's someone out here which can show me how to do this easily!
If($(document).width() < 500){
...
}else{
...
}
http://api.jquery.com/width/
You may also want to put in an onchange event
$( window ).resize(function() {
resizefunction();
});
http://api.jquery.com/resize/
Related
I have implemented owl carousel in my application. I need to show half of prev and next images on the modal gallery of main image.
The modal gallery opens when you click on the main bigger image of the page. I tried to set stagePadding property, but it didnt work out.
Can I achieve the same without stagePadding property.
I have implemented thumbnails and other parts. You can view the implemented fuctionality here.
https://www.realtor.com/realestateandhomes-detail/6836-Xana-Way_Carlsbad_CA_92009_M29922-47778
galleryId.owlCarousel({
items: 1,
loop: true,
margin: 5,
startPosition: 1,
animateOut: 'fadeOut',
navSpeed: 100,
lazyLoad: true,
dots: false,
nav: true,
stagePadding: 100,
});
i had the same problem and my problem was solved with center:false.
$(".owl-carousel").owlCarousel({
center:false,
nav: true,
dots: false,
loop: true,
autoHeight: true,
autoWidth:false,
stagePadding: 10,
margin: 30
});
What i want achieve is to change autoplay speed when the first animation will be loaded.
I found that slick has afterChange function but I don't know how to use it.
My code:
$(".home-slider-t").slick({
dots: false,
arrows: true,
infinite: false,
speed: 2500,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 6000
});
I want to set autoplay speed to 15 000ms after first change. (infinite true)
Please note: If you provide a demo of your problem in jsfiddle help us to help you better because this is a plugin. anyways lets see what options we have:
First initialize the plugin
$(".home-slider-t").slick({
dots: false,
arrows: true,
infinite: false,
speed: 2500,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 6000,
});
and then use slick plugin events and methods:
$(".home-slider-t").on('afterChange', function(event, slick, currentSlide, nextSlide){
$(".home-slider-t").slick('slickSetOption', 'autoplaySpeed', '15000');
});
p.s: Hope this code help to get idea of using methods and events of this plugin.
i couldn't check the code because you didn't provide any jsfiddle but seems its fine.
I am using a jquery plugin for testimonial. When i click next slider button it will stop auto sliding. How can i solve that??
here my js code
$('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
here my external js
External Js
Live Demo
Try this :
$(document).ready(function () {
var slider = $('.testimonials-slider').bxSlider({
slideWidth: 800,
minSlides: 1,
maxSlides: 1,
slideMargin: 32,
auto: true,
autoControls: true
});
$('.bx-prev, .bx-next').click(function(e){
slider.stopAuto();
setTimeout(function(){
slider.startAuto();
},300);
return false;
});
});
I have simple bx-slider here. After shrink browser window to small size like 360 slides in recentSoldCarousel act strange. When you click on left/right control you can see correct slide and after that slide blink and another - wrong slide is loading.
Here is my code:
$('#recentSoldCarousel .carousel-inner').bxSlider({
slideWidth: 247,
minSlides: 1,
maxSlides: 3,
moveSlides: 3,
pager: false,
slideMargin: 10,
startSlide: 0,
touchEnabled: true,
oneToOneTouch: true,
preventDefaultSwipeX: true,
preventDefaultSwipeY: true,
autoDirection: 'next',
});
I'm newbe in jQuery so if anybody can help me i will be very gratefull.
I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?
You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.