We Keep Coding

Javascript scroll addClass

I want my navbar to be transparant on the top and bottom of my page but i want it to not be transparant in the middle. When i have my webpage on full screen this works:
$(window).on("scroll", function () {
if ($(window).scrollTop() > 720 && $(window).scrollTop() < 1450 ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
})
But when it gets resized this wont work anymore because the sizes change. Is there a way to do this with % instead of just normal numbers so it will be responsive?

It occur because you hardcoded your height values. Check the whole site height, divide it on three and incorporate this variables to your if statement. Every time you resize browser window it will recalculate your new position.
window.addEventListener('resize', function() {
//one third and two third of website
oneThird = window.scrollHeight / 3;
twoThird = onethird * 2;
if ( $(window).scrollTop() > oneThird && $(window).scrollTop() < twoThird ) {
$(".nav").addClass("active");
} else {
$(".nav").removeClass("active");
}
}

You can use Media Queries with JS too, so you can do certain things on your desired window size, this might help https://www.w3schools.com/howto/howto_js_media_queries.asp

Using jQuery in certain screen sizes

I need a mobile navigation to stick after the user has scrolled a certain amount. When a user has scrolled 205px on desktop resolution the navigation will stick no problem.
How do I change this to 64px after the screen size has gone below 767px? and how do I cancel the desktop jQuery from taking effect on a mobile?
Current desktop javascript:
$(window).scroll(function(){
if ($(this).scrollTop() > 205) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
});
Current mobile javascript:
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
$(window).scroll(function(){
if ($(this).scrollTop() > 64) {
$('.sidemenu').addClass('fixed');
} else {
$('.sidemenu').removeClass('fixed');
}
})
}
};
Suggestions would be much appreciated.
Thank you.

You can add a class mobile to your body for example when the matchmedia matches.
$(document.body).toggleClass('mobile', window.matchMedia('(max-width: 767px)').matches);
Once you have that, the checkPosition simply has to get the proper scrollTop value.
function checkPosition() {
var scrollY = $(document.body).hasClass('mobile') ? 64 : 205;
$('.sidemenu').toggleClass('fixed', $(window).scrollTop() > scrollY);
};
Or simply add the matchMedia test instead of the hasClass test.
Additionally, I expect the height of the "fixed container" to be dynamic.
Maybe something like:
var scrollY = $('header').height(); // just an idea ofcourse to get 64 or 205.

You can check screens size in resize wvent like this
var width;
$(window).resize(function () {
width = $("html").width();
});
than in scroll event (or in other place) you can check:
if (width <= 767) {
// do some for small screen
}
else if (width > 767 && width < 1200) {
// do some for medium screen
}
//if..

is there any vertical or horizontal scrollbar?

I am trying to find a way that tells me if a page has a vertical and horizontal scrollbars but no way is working.
I can't use jQuery.
This is what I done:
function hasVerticalScroll() {
return document.body.getBoundingClientRect().height >= window.innerHeight;
}
function hasHorizontalScroll() {
return document.body.getBoundingClientRect().width >= window.innerWidth;
}
I tested this code on a blank page without scrollbars and in a page with scrollbars and I get incorrect results (I get that there is a scrollbar on a page without a scrollbar for example).
Any idea?

Here you can see where I've tried querying several attributes:
With #shell set to greater than viewport size:
http://jsfiddle.net/mori57/8t8Dy/5/
With #shell set to below viewport size:
http://jsfiddle.net/mori57/8t8Dy/6/
I think I found a key that you could use, at least for the testing of scrolling... as you can see, in cases where #shell is set to a width over the viewport size (window.innerWidth), the body scrollWidth is greater than the width reported by getBoundingClientWidth().width.
(Sorry, Pragnesh, your function does not appear to work in my example, which is included in my testing page on my jsFiddle, too.)
To that end, the following function should work in most cases:
function HasHorizontalScroll(){
return document.body.scrollWidth > window.innerWidth;
}
Case with content less than the viewport size:
http://jsfiddle.net/mori57/8t8Dy/11/
Case with content greater than the viewport size:
http://jsfiddle.net/mori57/8t8Dy/12/

I think below functions will help you
function VerticalScrollExist() {
if (window.innerHeight) {
return document.body.offsetHeight > innerHeight;
}
else {
return document.documentElement.scrollHeight > document.documentElement.offsetHeight || document.body.scrollHeight > document.body.offsetHeight;
}
}
function HorizontalScrollExist() {
if (window.innerWidth) {
return document.body.offsetWidth > innerWidth;
}
else {
return document.documentElement.scrollWidth > document.documentElement.offsetWidth || document.body.scrollWidth > document.body.offsetWidth;
}
}

How can I change a width parameter in jQuery given as a pixels integer into a percentage?

I'm working with a custom scrolling div jQuery plugin. I want the div to fill 100% of the width of its parent to change size depending on the browser window size.
The script takes a given width parameter, and uses it throughout the script. The customizable parameters of the script seem to only allow me to specify the width in pixels, as an integer:
$.fn.hoverscroll.params = {
vertical: false, // Display the list vertically or not
width: 1280, // Width of the list
height: 230, // Height of the list
arrows: true, // Display arrows to the left and top or the top and bottom
arrowsOpacity: 0.4, // Maximum opacity of the arrows if fixedArrows
fixedArrows: false, // Fix the displayed arrows to the side of the list
rtl: false, // Set display mode to "Right to Left"
debug: false // Display some debugging information in firebug console
};
I tried quoting the percentage, '100%', but that didn't work. Is there a way to use a percentage here?
If not, is there a way to use a script like the one below, which determines the width of the window, make the script output the width in pixels, and use that integer as the width parameter in the jQuery script?
<script type="text/javascript">
function alertSize() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
//window.alert( myWidth );
}
</script>
For reference, here is the full script of the plugin that I'm using:
http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js

If you want the width of the hoverscroll region to be some percentage of a container on ready, you can always use jQuery. Wrap your start-up routine in a ready() expression:
$(document).ready(function() {
var w = $(window).width();
var p = 0.95 /* Your percentage */
$.fn.hoverscroll.params = {
width: w * p, // Width of the list
...
};
// Start your hoverscroll like normal;
});
That ... is just there to indicate "the other stuff goes here." I didn't want to fill the answer up with repetitious code.
Although in normal practice, you would never modify the defaults in place, but pass them as arguments:
$(document).ready(function() {
var w = $(window).width();
var p = 0.95 /* Your percentage */
$('#mylist').hoverscroll({
width: w * p // Width of the list
});
});
Note that I'm only passing in the width; everything else uses the defaults. You only have to set the ones that differ from the defaults-- in this example, I've only set the width.

detect window width and compensate for scrollbars - Javascript

How do I detect the width of a user's window with Javascript and account for their scrollbar? (I need the width of the screen INSIDE of the scrollbar). Here's what I have...it seems to work in multiple browsers...except that it doesn't account for the scrollbars..
function browserWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && document.documentElement.clientWidth ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && document.body.clientWidth ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
any ideas? i need it to work in all browsers;)

A (markedly nasty) workaround if you're only interested in the width is to create a 1px x 100% div and use its offsetWidth. Works on IE>=7, FF, Chrome, Safari and Opera (I've not tried IE6, as we're working to a you're-lucky-it-works-at-all-so-don't-complain-about-rendering-oddities policy thereabouts these days). I hang the div off document.body with attributes { position: 'absolute', top: '-1px', left: 0, width: '100%', height: '1px' }, creating it the first time it's needed.
Works if you can stomach it.

You will find the big summary of what properties are supported on what browsers on this page on quirksmode.org.
Your best bet is probably to grab an element in the page (using document.body where supported, or document.getElementById or whatever), walk its offsetParent chain to find the topmost element, then examine that element's clientWidth and clientHeight.

Just add that before the window.innerWidth() check:
if (typeof(document.body.clientWidth) == 'number') {
// newest gen browsers
width = document.body.clientWidth;
height = document.body.clientHeight;
}

This is what I did - only half a year into learning JavaScript, so this may be a bad fix. First, I created a transparent square image (10px x 10px), but you could also create a non-transparent image and add this to your JavaScript as
document.getElementById('getDimensions').style.visibility = "hidden";
HTML:
<img id="getDimensions" src="images/aSmallBox.png" alt="A small transparent image
meant to determine the dimensions of the viewport" width="10px" height="10px"/>
JavaScript:
//Inside function called by window.onload event handler (could go in CSS file, but
//better to keep it with other related code in JS file)
document.getElementById('getDimensions').style.position = "fixed";
document.getElementById('getDimensions').style.bottom = "0px";
document.getElementById('getDimensions').style.right = "0px";
//Everything below inside function called by window.onresize event handler
var baseWidthCalculation = document.getElementById('getDimensions').offsetLeft;
var baseHeightCalculation = document.getElementById('getDimensions').offsetTop;
//Account for the dimensions of the square img element (10x10)
var viewportWidth = baseWidthCalculation + 10;
var viewportHeight = baseHeightCalculation + 10;

This is a more efficient version of an idea posted here by Tim Salai ( even though you are just beginning, it was brilliant to place an element in the bottom right corner like that ).
var getDimensions = document.createElement("div");
getDimensions.setAttribute("style",
"visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var viewportWidth = getDimensions.offsetLeft;
var viewportHeight = getDimensions.offsetTop;
And here is a modular version
var PageDimensions = function(){
var Width;
var Height;
function pagedimensionsCtor (){
var getDimensions = document.createElement("div");
getDimensions.setAttribute("style" ,
"visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
Width = getDimensions.offsetLeft;
Height = getDimensions.offsetTop;
getDimensions.parentNode.removeChild(getDimensions);
}
pagedimensionsCtor();
function Reset(){
pagedimensionsCtor();
}
function GetPageHeight(){
return Height;
}
function GetPageWidth(){
return Width;
}
return{
Reset: Reset,
GetPageHeight: GetPageHeight,
GetPageWidth: GetPageWidth
};
}
Use the modular version:
var page = new PageDimensions();
console.log("viewportWidth: " + page.GetPageWidth() + " viewportHeight: " + page.GetPageHeight());
Bonus feature:
page.Reset();//just in case you think your dimensions have changed

I would compare the "innerWidth" to the width of the body. If the body width > innerwidth, then scrollbars are present.
if (browserWidth() < document.body.offsetWidth) {
doSomething();
}

Another solution you can try is changing some CSS so scrolling happens within your page, instead of the browser window doing it. In the style for body, add overflow:auto. Now the body element includes the scrollbar, so when you get the window width you're measuring the width outside the scrolling container instead of inside it.
This does feel like a potential source of quirkiness, and possibly an accessibility issue, so if you're going for widespread use you might want to test it quite carefully.