I have inherited a web page that has a slide show on it and I can't figure out how to change the width of the <article> containing the slide show. I think it is getting size via JavaScript, but I have searched and can't figure out where.
If you view source on the page you will not see a width in the article tag, but if you use firebug to look at the styles you will see:
element.style {
width: 565px;
}
I've posted a sample version here: http://208.112.58.198/help/index_new.htm.
Your element's CSS width is being applied by the jquery plugin.
/help/wp-content/themes/Cobalt3/cobalt/js/main68b3.js this file line number #339 has the following code.
$('#part-slideshow').carouFredSel({
height: 300,
width: '100%',
circular: true,
items: {
visible: 1,
height: 300,
},
scroll: {
items: 1,
fx: "crossfade",
duration: 1000,
easing: "swing"
},
auto: {
timeoutDuration: 5000,
delay: 5000,
pauseOnHover: true
},
pagination: '#pagination',
swipe: {
onTouch: true,
onMouse: true
},
responsive: true
});
The plugin binds a resize event function to the carousel elements, which sets the element width responsive to the screen size because responsive: true option is added in the call.
Related
I would like a little help here. I have two jquery sliders but i would like them to run at the same time. Is it possible?
Here is my code :
$(function () {
$('#slider').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
$('#slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
with the above code the second start after some milliseconds. I would appreciate if someone can fix it.
As those options are identical, I'd think
$("#slider, #slider_small").camera({
/* ...options here... */
});
would do it. Properly-designed jQuery plugins understand they're working on sets of elements.
$(function () {
$('#slider, #slider_small').camera({
autoAdvance: true,
height: 'auto',
loader: 'none',
navigation: false,
pagination: false,
thumbnails: false,
fx: 'scrollHorz',
time: 3000,
playPause: false
});
});
most standard JQuery plugins knows to accepts an array of elements, and with , in the selector you can select multiple elements.
p.s. the plugin most probably will use for-each so what's the real problem here? if its just jumping then maybe your solution is css?
We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest
Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)
As a newbie to caroufredsel, I am trying to override the default wrapper name in for the carousels using a dynamic count.
However, the carousel rendered only has the default caroufresel_wrapper. Whereas my javascript is trying to get caroufredsel_wrapper0, caroufredsel_wrapper1, caroufredsel_wrapper2 for 3 carousels on the same page. I find it amusing that it will not get overridden.
My code for carousel creation is here
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
wrapper: { element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'},
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}
});
});
}
The documentation does not make it explicit, but the carouFredSel accepts two parameters: (options, configs). The wrapper makes it part of the configs parameter. Try this:
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}},
{
wrapper: {
element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'
});
I'm using caroufredsel which I've used many times and have never had this problem before. On Safari only the initial load of the page shows a split image - half of the first and half of the second. Like this:
The slideshow fades the the next one fine and if you go to another page and back again then it is also fine. And it only occurs on Safari. Does anyone have any ideas?
This is my html:
<div class='slideshow'>
<div class='centralised_div'>
<div class='slideshow_inner'>
<div class='slideshow_images'>
<img src='/images/ss2.jpg'/>
<img src='/images/ss3.jpg'/>
<img src='/images/ss4.jpg'/>
</div>
</div>
<div class='arrow_left'><img src='/images/left_arrow.png'/></div>
<div class='arrow_right'><img src='/images/right_arrow.png'/></div>
</div>
</div>
And this is my jquery:
<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script>
$(document).ready(function() {
$(".slideshow_images").carouFredSel({
width: 940,
height: 400,
direction: "left",
items: {
visible: 1,
start: "random",
width: 940,
height: 400
},
scroll: {
fx: "crossfade",
duration: 1000,
pauseOnHover: true
},
auto: 6000,
prev: {
button: ".arrow_left",
key: "left"
},
next: {
button: ".arrow_right",
key: "right"
}
});
});
</script>
Most of the problems I have with carouFredSel are solved when I initialize it after window load instead of document ready. Maybe that helps you:
<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script>
$(window).load(function() {
$(".slideshow_images").carouFredSel({
width: 940,
height: 400,
direction: "left",
items: {
visible: 1,
start: "random",
width: 940,
height: 400
},
scroll: {
fx: "crossfade",
duration: 1000,
pauseOnHover: true
},
auto: 6000,
prev: {
button: ".arrow_left",
key: "left"
},
next: {
button: ".arrow_right",
key: "right"
}
});
});
</script>
I have a toolbar which is created like this -
toolbar = new Ext.Toolbar({
docked: 'bottom',
scrollable: {direction: 'horizontal', directionLock: true},
hidden: true,
items: thumbItems
});
I am using the following code to scroll it -
toolbar.getScrollable()
.getScroller()
.scrollTo(scrollUnit * scrollAmount,
0, {type: 'slide', duration: '1000', easing: 'linear'});
It's working fine when the toolbar is visible. If this code is executed while the toolbar is hidden, the scroller simply doesn't scroll. I can see in the console that this code is being executed, but the scroller is simply not moving from it's position.
What is wrong here?
This probably happens because the way you create your toolbar is deprecated in Sencha Touch 2
You should do it like so :
Ext.create('Ext.toolbar',{
docked: 'bottom',
scrollable: {direction: 'horizontal', directionLock: true},
hidden: true,
items: thumbItems
});
Hope this helped.