Develop Reference

Problems with scrollto in SlimScroll JQuery plugin

I have 2 DIVs with implemented Slimscroll plugin. both work fine, but one is supposed to be scrolled all the way up <div id="msg_left_sidebar">....</div> (seems to be default) and the other DIV <div id="chat_content">....</div> all the way down. It almost works as expected with the following code:
$(function(){
var scrollDown_int = $('#chat_content')[0].scrollHeight;
$('#msg_left_sidebar').slimScroll({
height: (browserheight - 190) +'px',
width: '248px'
});
$('#chat_content').slimScroll({
height: (browserheight - (207 + 190)) +'px',
width: '526px',
scrollTo : scrollDown_int+'px',
});
//$('#chat_content').scrollTop(scrollDown_int); // this works as good as the scrollTo parameter
});
The problem I'm having is: even though the content is scrolled all the way to the bottom, the scrollbar itself is on top of the DIV element.
This means, as soon as I start scrolling, no matter how (scroll wheel on mouse or grabbing the scrollbar) the content goes all the way up...
Is this a known issue? How can I make this scrollbar also go to the bottom.
Please help. Hope that my explanation is clear enough :-)

Slimscroll has an option for the starting position of the container:
start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.
From: http://rocha.la/jQuery-slimScroll
If you adjust your code to the following, both the div and the scrollbar with be placed at the bottom of the container:
$('#chat_content').slimScroll({
height: (browserheight - (207 + 190)) +'px',
width: '300px',
start: 'bottom'
});
JSFiddle: http://jsfiddle.net/oqet7pe4/

see below link jsFiddle: http://jsfiddle.net/oqet7pe4/50/
// make slimscroll object
var vTable = $("#msg_left_sidebar").slimScroll({ ... });
// and use this command
vTable.slimScroll({scrollTo: scrollDown_int +"px"});
i fixed from http://jsfiddle.net/oqet7pe4/

How to give navigation 100% width in pixels upon resize?

So basically, I am attempting to use jQuery to give my navigation bar (Bootstrap navbar) a 100% width, but in pixels.
Of course, this has to be determined every time the browser/window is resized.
I came up with this, although it is extremely buggy. It uses the starting width of 'nav' as 'navsize', and upon resize of the window, navsize still stays the same.
$(document).on('ready', function () {
$(window).on('resize', function () {
var navsize = $('nav').width();
$('nav').css('width', navsize);
}).trigger('resize');
});
I have also tried var navsize = $('nav').innerWidth(); which was also no good.
The function is definitely being called upon resize since I have tested with console.log()
For all those who are wondering why I am doing this, I am using StickyJS to make my navigation scroll with the page. Although, since it is using 100% width, upon scrolling it becomes much smaller since the nav leaves its container.

This should work
$(document).on('ready', function () {
$(window).on('resize', function () {
$('nav').css('width', 'calc(100% + 1px - 1px)' );
console.log( $('nav').width() );
/// Use following ONLY if you specifically want to set the width in pixel
$('nav').width($('nav').width());
}).trigger('resize');
});
the console.log will have your width in pixel. Means whenever in future you will read the width , it will be in pixel.
calc(100% + 1px - 1px) converts the width and sets in px units, which we can read later on.

Are you sure that $('nav') exists?
I've done some testing using a basic bootstrap page and a slightly change of your code works.
Navigate to this page and open the console inspector.
http://getbootstrap.com/examples/starter-template/
paste the following code and you will see that the .navbar width will be logged on window resize.
$(window).on('resize', function () {
var navsize = $('.navbar').width();
console.log(navsize)
});
Cheers.

It'd be easier with the supporting HTML and CSS, but I will venture a guess based on the behavior alone.
Best Guess
It sounds like one of these options is likely.
you meant to use #nav, .nav, div.nav, etc and don't actually mean to select a "nav" element
your "nav" element is not display inline-block|block, which occurs in some browsers
you are using the "nav" tag in a browser that doesn't support it (IE 8)
your JS library doesn't support the "nav" tag
Alternative
Use JS to relocate your nav into the body (at the appropriate scroll depth) and give your html , body, and nav tags width 100%
Hope that helps.

Jquery slide to visibility hidden?

I want to achieve something like :
$("#left").hide('slide', {direction: 'right'}, 1000)
However I do not want the div to be hidden I want it to keep up space so I want have the visibility hidden like:
$("#left").css('visibility','hidden')
Yet still achieve the same effect as above.

This is what I'd do
$parent = $('#left').parent(); //store the parent of the element in a variable
$('#left').clone() //clone the existing element
.appendTo($parent) // insert it into the current position
.css('visibility','hidden') //set it's visibility to hidden
.end().end() //target the initial element
.slideUp() //do any slide/hide/animation that you want here, the clone will always be there, just invisible
This could be horrible, but it's the only way I could think of solving the problem :)

EXAMPLE: http://jsfiddle.net/skyrim/j2RWt/4
Try this:
var $content = $("#left");
var offset = $content.offset();
$("<div></div>").css({
width: 0,
position: "absolute",
left: offset.left,
top: offset.top,
height: $content.outerHeight(),
backgroundColor: "White"
}).appendTo("body")
.animate({
width: $content.outerWidth()
}, 1000, function () {
$content.css('visibility', 'hidden');
$(this).remove();
});
EDIT
So, after learning what the actual need was (:p), this method basically place another div over the original element. I've tested it on IE...and I'll edit this with an update after I do further testing on other browsers!
EDIT
Only Chrome seems to be having an issue with getting the correct height.
Added a callback which removes the makes visibility hidden (as LEOPiC suggested) and removes the slideout div

You can do it in very simple way. There is really a nice tutorial here to animate in different direction. It will surely help you. try this
$('#left').animate({width: 'toggle'});
EXAMPLE : http://jsfiddle.net/2p3FK/2/
EDIT: One more solution, this is very simple to move the div out of window with left margin
$("#left").animate({marginLeft:'1000px'},'slow');
EXAMPLE : http://jsfiddle.net/2p3FK/1/

Give element height and remove it after

I am using Easy Pagination plugin to paginate some content. The problem is that after clicking 'next', the browser jumps up do to the height of the element loading data for Pagination.
I am trying to fetch the height of the element, example .recent, and give it to .recent before clicking .next (Before the pagination happens), then set it after.
So I am wondering how can I set the height of .recent, and then take off?
Here is what I tried so far:
var recentH = $('.recent').height();
$('.next').click(function(){
$('.recent').css( 'height', recentH );
});

I am trying to fetch the height of the element
$.height() or $.css('height') is what you´re looking for, they both get and set values. See height() and css().
"The difference between .css('height') and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px)"
before clicking .next (Before the pagination happens), then set it after.
Are you using some plugin for the pagination and does it have it´s own click event handler for the .next element?
Notice that your selectors matches elements by their CSS class and that there might be multiple elements. You should therefore specify the element to read the height of.
Short example;
$('.next').click(function(){
var height = $('#firstElement').height();
// Pagination actions here (toggling elements)
$('#secondElement').css(height + 'px');
});

After seeing the example I figured this might help:
var h = $('.recent').height();
$('.next').click(function(){
$('.recent').css({ 'height': h + 'px', 'display': 'block' });
});

Whole site overlay div?

I'm using this snippet to append an overlay to a whole site:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
It works great, only I need one element to sit above this overlay ID. I've given that element a z-index greater than the 5000 here, but it never seems to ascend above the gray overlay---any ideas?

Make sure it's a sibling and direct child of body to guarantee it'll work in IE along with giving it a position of anything other than static and a higher z-index than 5000.

Give it position:absolute too, or position:relative.

Make sure the element you want overlaying is positioned (like absolute or relative).. other wise z-index means nothing

1st check where exactly the 2nd element is being added in other words if ur assigning this value in JQuery but ur using plain css to code the 2nd elements values there may be a confliction. Also u should try using some quotes where ur values are i found that using double quotes with opacity values help.
Just a suggestion though instead of trying to dynamically assign elements using JQuery and give them properties might i suggest u try plain css when giving the elements attributes and only use JQuery to manipulate what needs to be calculated and or cannot be accomplished by css alone. Then ur code would be like this:
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay").height(docHeight);
$("#overlay").css({"opacity":"0.4"});
});
and the element would also have the properties assigned by the default css file