We Keep Coding

Customizing w2ui sidebar vertical scrollbar with JScrollPane

I'm trying to customize the w2ui sidebar's scrollbar with JScrollPane jQuery plug-in, but I fail all the times and by saying that I mean that I couldn't make JScrollPane to change the sidebar scrollbar style. So, could you please share snippet code here that shows how to get it done ?
Thanks.
It is what I've tried:
$(w2ui['sidebar'].box).find('.w2ui-sidebar-div').jScrollPane({
horizontalGutter:5,
verticalGutter:5,
'showArrows': false
});

Well, I tried several libraries and at the end 'slimScroll' was actually the one which worked perfectly :
onRefresh: function(event) {
event.onComplete = function () {
$('.w2ui-sidebar-div').slimScroll({ height: '100%' });
}
}

Jumpy scrolling in Firefox in jQuery slimScroll 1.3.3 plugin

I am using the jQuery SlimScroll Plugin.
They have a div element and this element content is dynamically loaded via ajax call. I am using slimScroll on that div and tried to start from bottom.
The slimscrollbar start at the bottom but the inside scrollcontent jump a little bit up.
Its work perfectly on Google Chrome, Safari, only problem in Firefox. Here is my jquery code.
$el = $('#myDiv');
$el.slimScroll({
height: '350px',
start: 'bottom',
alwaysVisible: true,
allowPageScroll: false
});

its very simple you just have to comment this line
this.addEventListener('MozMousePixelScroll', _onWheel, false ); on the file 'slimscroll.js' and it will work for all the browser hope this helps you !

jQuery dialog UI get closed when click on title

I'm using this below code for one of my website. I know there have lot of ways to create a dialog boxes. But for a some reason, I need to follow these structure.
//On click trigger a popup box
$('#terms').click(function(e){
popupBox(e);
});
//Create a Popup Box
function popupBox(e){
e.preventDefault();
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
$('<div id="popupbox" title="Terms and Conditions"><!-- popupbox - Edit by Yesh --></div>').appendTo('body')
.html('<div><h1>Lorem Ipsum Title</h1></div><div><p>Lorem ipsum dolar sit amet </p></div><div><small>Read it before accept</small></div>')
.dialog({
modal: true, title: 'Terms and Conditions', zIndex: 9999, autoOpen: true,
width: '60%', resizable: false,
close: function (e) {
e.preventDefault();
$(this).remove();
$('body').css('overflow', 'auto');
},
});
}
Problem is when I click on the Title. It's get hidden (not closed). So, how to fix it?
Here my JSFIDDLE is working fine.

The problem is related to vertical scrolling.
You're probably scrolled down on the page when you open the dialog. When you then click the title bar of the dialog to drag it, the dialog jumps further down the page, usually hidden from view. The only way to get it to close is to press Esc. Your JSFiddle doesn't show the problem because it's not vertically tall enough to require scrolling.
Here's a modified version of your JSFiddle with vertical space added to illustrate the problem.
The solution, as described in this post, is to change the style of the dialog from position: absolute to position: fixed:
.ui-dialog { position: fixed; }
Here's another JSFiddle with the problem fixed.

It is near impossible to answer when there is no way to reproduce the issue you are facing. Try narrowing your problem down:
What browser are you using? Is the behaviour consistent on all browsers?
If the problem doesn't reproduce in jsfiddle, maybe the problem is not the code you put in jsfiddle. Try giving it more code from your page until the problem shows itself - then remove as much as you can to isolate the bug.
So in short, show us more code.

Responsive setting creates page scrolling issues

I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.

Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle

How to hide images until AFTER jquery flexslider finishes loading

I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});

You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});

Set the default style for "display" to "none". using show() will change this style value.

Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!

… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!

I experienced a similar issue when I forgot to include the flexslider.css

I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??