Develop Reference

Freewall problems in mobile screen

Hello stackoverflow I need help, I've got 300px width blocks like in this link: http://vnjs.net/www/project/freewall/example/demo-filter.html and try to resize window until mobile, blocks vanish... How can we solve this problem? I was surfing all over the Internet and I can't find problem here is what values I used:
jQuery(function() {
jQuery(".free-wall").each(function() {
var wall = new freewall(this);;
wall.reset({
selector: '.size320',
animate: true,
cellW: 200,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
wall.fitWidth();
});
});

bxSlider within colio

first post so hopefully i've followed protocol.
I'm using bxslider with colio on my site - specifically trying to add the bxSlider gallery within the hidden colio content. I saw on previous questions people having an issue initiating the gallery due to it being within a hidden div here
I did a test with a toggled hidden div which worked fine
But can't get it to work with colio: my_colio_test
Any ideas?
So Javascript for my_colio_test:
<script type="text/javascript">
$(document).ready(function(){
var mySlider;
mySlider = $('.bxslider').bxSlider({
auto: true,
video: true,
useCSS: false
});
// "scrollTop" plugin
$.scrollUp();
// "colio" plugin
$('.portfolio .list').colio({
id: 'my_portfolio',
theme: 'black',
placement: 'inside',
hiddenItems: '.isotope-hidden',
onContent: function(content){
$(".holder").show();
mySlider.reloadSlider();
}
});
// "isotope" plugin
var filter = '*', isotope_run = function(f) {
var list = $('.portfolio .list').isotope({layoutMode : 'fitRows', filter: f});
window.setTimeout(function(){
list.trigger('colio','excludeHidden');
}, 25);
};
$('.portfolio .filters a').click(function(){
$(this).addClass('filter-active').siblings().removeClass('filter-active');
var href = $(this).attr('href').substr(1);
filter = href ? '.' + href : '*';
isotope_run(filter);
return false;
});
isotope_run(filter);
});
</script>
In the toggle test i did an initial function defining the slider so it initated:
<script type="text/javascript">
$(document).ready(function(){
var mySlider;
mySlider = $('.bxslider').bxSlider({
auto: true,
video: true,
useCSS: false
});
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$(this).toggleClass("expanded");
$content.slideToggle();
$(".holder").show(); // DIV that contain SLIDER
mySlider.reloadSlider();
});
});
</script>
Steven wanderski - bxSlider developer about having to initialise hidden slider:
Since the slider cannot calculate the height and width's of hidden
elements, you need to either call .bxSlider after the elements have
been set to display:block, or move them off screen, set them to
display: block, initialize the slider, then hide them.
SO I've sort of got it to work - yay.
In the CSS the colio-content is set to display:none - so i removed it and put it in the javascript function instead.
Only issue i have now is that i get replicated/duplicated sliders as i don't know how to target.
Where i'm at now: my_colio_test_2

Smooth jScrollPane scrollbar length adjustment with dynamic content

Some of my webpages contain several text elements that expand and collapse with a jQuery "accordion" effect:
function show_panel(num) {
jQuery('div.panel').hide();
jQuery('#a' + num).slideToggle("slow");
}
function hide_panel(num) {
jQuery('div.panel').show();
jQuery('#a' + num).slideToggle("slow");
}
This causes the window size to change so jScrollPane has to be reinitialized, which will also change the length of the scrollbar. To achieve a smooth length adjustment of the scrollbar, I set the "autoReinitialise" option to "true" and the "autoReinitialiseDelay" to "40" ms:
$(document).ready(function () {
var win = $(window);
// Full body scroll
var isResizing = false;
win.bind(
'resize',
function () {
if (!isResizing) {
isResizing = true;
var container = $('#content');
// Temporarily make the container tiny so it doesn't influence the
// calculation of the size of the document
container.css({
'width': 1,
'height': 1
});
// Now make it the size of the window...
container.css({
'width': win.width(),
'height': win.height()
});
isResizing = false;
container.jScrollPane({
showArrows: false,
autoReinitialise: true,
autoReinitialiseDelay: 40
});
}
}).trigger('resize');
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if ($('#content').width() != win.width()) {
win.trigger('resize');
}
});
The effect is ok, but on the cost of a very high CPU usage which makes my fan go wild.
This is a jsfiddle which shows the settings and the effect: http://jsfiddle.net/VVxVz/
Here's an example page (in fact it's an iframe within the webpage shown): http://www.sicily-cottage.net/zagaraenausfluege.htm
Is there a possibility to achieve the same "smooth" transition of the scrollbar length without using the "autoReinitialise" option, maybe with an additional script, some modification of the jscrollpane.js, or simply a css animation of the scrollbar and then calling the reinitialise manually?
I'm absolutely useless at javascript so any help would be greatly appreciated.

There is no need to initialise jScrollPane on your content everytime window is resized. You should do it only once - on $(document).ready(). Also, there is no need in using autoReinitialize if your content is staic. You should reinitialise jScrollPane to update scrollbar size only when you slideUp/slideDown one of your container or on window.resize. So, code become less and more beautiful :)
function togglePanel(num) {
var jsp = $('#content').data('jsp');
jQuery('#a' + num).slideToggle({
"duration": "slow",
"step": function(){
jsp.reinitialise();
}
});
return false;
}
$(document).ready(function () {
var container = $('#content').jScrollPane({
showArrows: false,
autoReinitialise: false
});
var jsp = container.data('jsp');
$(window).on('resize', function(){
jsp.reinitialise();
});
// Workaround for known Opera issue which breaks demo (see
// http://jscrollpane.kelvinluck.com/known_issues.html#opera-scrollbar )
$('body').css('overflow', 'hidden');
// IE calculates the width incorrectly first time round (it
// doesn't count the space used by the native scrollbar) so
// we re-trigger if necessary.
if (container.width() != $(window).width()) {
jsp.reinitialise();
}
});

Reload jQuery Carousel on window resize to change orientation from vertical to horisontal

I'm creating a gallery for a responsive lay-out - I am using jQuery Riding Carousels for the thumbnails.
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal ...
I'm doing it like this at present:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
... the JS simply hooks up a class, but it doesn't do so if you re-size the browser window by dragging it - you need to refresh the page.
Is there a way to destroy the script and re-initialize it on the fly?

Please check Working exmpale: http://codebins.com/bin/4ldqpba/1/Jcarousel%20vertical%20on%20resize
Tested in all browsers and works perfectly fine. bounty is mine :)
In the example i have give threshold widht 350 you can test it by resizing the result pane and as soon as you start havin horizontal scroll bar it will converted to vertical.
1 possible issue depending on your requirement is if you ahve any handlers on images they will be gone after changing display way. the solution for it is wrap your #mycarousel in a div and use Jquery delegate to handle events on the wrapper so no issue with events also.
Let me know if you come under this situation.
Following code is exactly as per your need.
When the window is re-sized to smaller than 1024px, the orientation of the carousel needs to change from vertical to horizontal .
which is revers form the example as for me it makes more sense if width is less make it vertical.
jQuery(document).ready(function() {
var widthCheck = 1008;
var resizeTimer = null,
verticalFlg = $(window).width() > widthCheck;
var obj = jQuery('#mycarousel').clone();
$('#mycarousel').jcarousel({
vertical: verticalFlg,
scroll: 2
});
jQuery(window).resize(function() {
resizeTimer && clearTimeout(resizeTimer); // Cleraring old timer to avoid unwanted resize calls.
resizeTimer = setTimeout(function() {
var flg = ($(window).width() > widthCheck);
if (verticalFlg != flg) {
verticalFlg = flg;
$('#mycarousel').closest(".jcarousel-skin-tango").replaceWith($(obj).clone());
$('#mycarousel').jcarousel({
vertical: verticalFlg,
scroll: 2
});
}
}, 200);
});
})

Or you can look at the source. I'm guessing you are using version 0.2
Looking at the source
https://github.com/jsor/jcarousel/blob/0.2/lib/jquery.jcarousel.js
we can see that there are two lines (80 and 81) which are only done in object init. Those lines are
this.wh = !this.options.vertical ? 'width' : 'height';
this.lt = !this.options.vertical ? (this.options.rtl ? 'right' : 'left') : 'top';
also this line at 149
if (!this.options.vertical && this.options.rtl) {
this.container.addClass('jcarousel-direction-rtl').attr('dir', 'rtl');
}
It might be if you add those to the callback you will get better results.
You could also try version 0.3 of the plugin.
Prior answer:
Can't test it myself right now, but try this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
reloadCallback: function () {
this.options.vertical = $(window).width() > 1008;
},
});
});
</script>

<script type="text/javascript">
jQuery(document).ready(function() {
var sizeCheck = function() {
return $(window).outerWidth() >= 1024
}
jQuery('#mycarousel').jcarousel({
vertical: sizeCheck(),
scroll: 3,
});
var jCarousel = jQuery('#mycarousel').data('jcarousel');
window.onresize = function() {
jCarousel.options.vertical = sizeCheck(); // maybe you have to access the option through jCarousel.plugin.options.vertical
jCarousel.reset();
}
});
</script>
Maybe this works.

I haven't tested the following code, but I am fairly sure the following code should work:
<script type="text/javascript">
var carousel;
jQuery(window).resize(function() {
if(carousel !== undefined) carousel.destroy();
carousel = jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
</script>
or even better something along the lines of:
<script type="text/javascript">
var carousel;
jQuery(document).ready(function() {
carousel = jQuery('#mycarousel').jcarousel({
vertical: $(window).width() > 1008,
scroll: 3,
});
});
jQuery(window).resize(function() {
//NOT SURE WHICH OF THE BELOW LINES WOULD WORK, try both and check which works
carousel.options.vertical = $(window).width() > 1008;
carousel.vertical = $(window).width() > 1008;
carousel.reload();
});
</script>
If it does not, you should add a console.log(carousel) to your code and check out what the prototype is of the outputted value (check F12). There should be something along the lines of destroy (or alternatively check console.log($.jcarousel())).

Slide out and fade effect using jQuery and localScroll

I'm using localScroll to create a content slider. The problem is that I want to give a fade effect to the div that I'm sliding out, to make it fade before it disappears.
Does anyone have any idea how can I make this? I tried something with onBefore and onAfter but I didn't get what I expected.
Thanks!
LE: here is the code that I'm using:
$(document).ready(function() {
var localScroll = $('#slider .slideshow-wrapper')
var localSections = $('#slider .slideshow-wrapper ul.slideshow li');
var local = $('#slider ul.slideshow');
local.css('width', localSections[0].offsetWidth * localSections.length);
var localScrollOptions = {
target: localScroll,
items: localSections,
navigation: 'ul.tabs li a',
hash: 'false',
axis: 'xy',
duration: 500,
easing: 'swing'
//onAfter: fadeAway
};
$('.container').serialScroll(localScrollOptions);
$('ul.tabs').find('a span').click(selectNav);
});

You can't use fadeOut because it sets the div style to display:none and thus the div has a zero height and width making the scrollTo plugin mess up pretty bad. I would suggest using opacity. In the code below I set the minimum opacity to 0.2 because when I set it to zero, it was hard to tell the content was scrolling.
I took the LocalScroll Demo and made these modifications - it seems to work pretty well. I didn't try to match your code because I know the code below works with the demo and your question title says localScroll but your code uses serialScroll. Anyway, I'm guessing the ul.slideshow li in your code should be equivalent to the .sub in the code below.
$.localScroll({
target: '#content', // could be a selector or a jQuery object too.
queue: false,
duration: 500,
hash: false,
easing: 'swing',
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
$('.sub').animate({ opacity: 0.2 }, 250);
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
$(anchor).animate({ opacity: 1 }, 250);
}
});
Edit: I posted a demo at this pastebin

See: http://docs.jquery.com/Effects/queue