I'm trying to implement the window resize event listener so that the jScroll jQuery plugin I'm using doesn't fire on smaller screens where the scrolling of certain items is causing problems.
By putting together a mix of stuff i've read here this is what i've come up with:
<script>
$(window).resize(function() {
windowWidth = $(this).width();
if (.windowWidth() > 602) {
$(".sectionTitle").jScroll({speed : "slow",top : 50});
});
</script>
How to disable JavaScript in media query was my main source of help but still haven't got it to work. Any help would be greatly appreciated.
RE the comments:
this is what I get in the console:
Uncaught SyntaxError: Unexpected token . (index):113
2
Uncaught SyntaxError: Unexpected end of input (index):1
GET http://ghost-mirror.org/notify_act.php net::ERR_NAME_NOT_RESOLVED jquery.js:5
When i dont wrap the jscroll code in the resize function, .sectionTitle follows the users scrolling in the window like a fixed element until it reaches the end of its container.
I updated the code like entiendo stated:
<script>
$(window).resize(function() {
var windowWidth = $(this).width();
if(windowWidth > 602) {
$(".sectionTitle").jScroll({speed : "slow",top : 50});
}
});
</script>
If I could just get the plugin to run by default on window widths more than 602px and disabled by default on windows less than 602 i would be super grateful. (At the moment it only runs when I resize the window, so If I load up the page but dont change the size then the script doesnt run).
So, here's a suggestion:
HTML:
<div id="container">
<div class="scroll">
<h3>Page 1</h3>
<p>Page 1 of jScroll Example - jQuery Infinite Scrolling Plugin
This is the content of page 1 in the jScroll example. Scroll to the bottom of this box to load the next set of content.
This is example text for the jScroll demonstration. jScroll is a jQuery plugin for infinite scrolling, endless scrolling, lazy loading, auto-paging, or whatever you may call it.
With jScroll, you can initialize the scroller on an element with a fixed height and overflow setting of "auto" or "scroll," or it can be set on a standard block-level element within the document and the scrolling will be initialized based on the brower window's scroll position.
jScroll is open-source and can be downloaded from my GitHub repository at github.com/pklauzinski/jscroll. </p>
next page
</div>
</div>
jQuery:
$(document).ready(function(){
var origElement = $('.scroll').clone(); //we're cloning the original element and will use that to replace the content of the div "container" whenever the window size is less than 602px
if($(window).width() > 602){
$('.scroll').jscroll();
}
$(window).resize(function(){
if($(window).width() < 602){
alert($(window).width());
$('.scroll').remove();
$('#container').html(origElement);
}
else{
$('.scroll').jscroll();
}
});
});
Here's a fiddle: http://jsfiddle.net/6YXFu/3/
Related
I'm very unfamiliar and still learning javascript/jQuery and I'm having trouble putting together the syntax to change a secondary navigation bar offset position to stick to a header that adjusts its size when the screen size changes (logo is setup to viewpoint percentage, hence its height varies with screen size).
So far I got the first part of the following script to calculate the header outerHeight and it works on any screen size but only on the first page load (not while resizing in real time).
jQuery(document).ready(function resizeHeader ($){
$('#CPOP-header').each(function(){
$('#CPOP-sticky-sub-menu').css({
'top' : $(this).outerHeight(true) + 'px'});
});
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
});
However, I want it to "monitor" browser window resize dynamically to avoid browser refresh but I can't figure out how to bind or merge the second part on the same script since I'm not very familiar with javascript/jQuery:
$(function() {
$(window).on('resize',resizeHeader);
alert($('#CPOP-header').outerHeight(true)+'px'); // works on first page load only, will remove later
});
This is for a WordPress/Elementor website, the code will be inserted in an HTML widget.
Any help will be much appreciated!
if anyone is looking for something similar, here it is
const $ = jQuery;
function resizeHeader () {
$('#CPOP-header').each(function(){
$('#CPOP-sticky-sub-menu')
.css({'top' : $(this).outerHeight(true) + 'px'})
});
}
jQuery(document).ready(resizeHeader);
$(window).on('resize',resizeHeader);
Thank you to u/toi80QC at reddit for taking the time and giving a hand!
I do a menu fixed top when scroll, it ok with some pages have large height, but in page has not enough height, this script loop:
Example:
I have menu with height 50px and i write a script:
if ($(this).scrollTop() > 50){
// add class fixed
} else { //remove class }
on pages with large height this run: scroll(over 50px) > add class
on pages with small height this run: scroll(over 50px) > add class > remove class
Please see this example: http://jsfiddle.net/F4BmP/2930/
Finally, i find a solution for my problem.
Reason make problem is HTML document lost height when menu change from static to fixed.Examble: Browser has 500px and has a scrollbar, when user scroll my menu change to fixed and browser lost 50px of menu, so browser not enough height to has scrollbar, it will return to top page and do code lines in ELSE statement.
So i add a div wrap my menu and set height the same height with my menu, this will make the height of document always the same on before and after scroll:
<div id="wrap" style="height:50px;width:100%">
<div id="mymenu"></div>
</div>
This solution solve my problem.
Use this javascript:
$(document).ready(function(){
var elementPosition = $('.menu').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('.menu').css('position','fixed').css('top','0');
$('.menu').css('width','100%');
$('.menu').css('z-index','500');
} else {
$('.menu').css('position','static');
}
});
});
Well, this code is working on my menubar, even if screen size is different .
Basic concept is user has to see the menu while scrolling the page.
But in your functionality is correct.There is no much content and User can see the menu in current screen itself. If there is more content user can scroll and get sticky menu always on top.
If you really want to make browser scroll you can give min-heightfor container.
Example
.containerclassname{
min-height: 1500px;
}
I tested your code in firefox and also in chrome , the issue seems to be in chrome . i reworked the code both html and JS and it works fine in chrome, for for that matter in any browser .
heres what should probably work for you :
$(document).ready(function(){
$(window).scroll(function (e) {
$el = $('.nav');
if ($(this).scrollTop() > 100) {
$('.nav').addClass("fixedNav");
}else {
$('.nav').removeClass("fixedNav");
}
});
});
the entire code is enclosed in a fiddle .
Link to fiddle
Kind regards .
Alexander .
I'm displaying some images on a webpage and I want it to be scrolled all the way to the bottom as soon as the page loads, then fade the image in. This is what my code looks like thus far:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
// fade in initial image
$("#lower").fadeIn(3000);
$("#lower").css("display", "block;");
// show only initial image at mid-page
var margin = ( $(window).height() - $("#lower").height() ) * (0.5);
$("#lower").css("margin-top", margin);
// set scroll position to bottom of page
$(document).scrollTop( $(document).height() );
});
</script>
and my html looks like this:
<body>
<div id="view">
<img id="upper" src="pages/2.gif">
<img id="lower" src="pages/1.gif">
</div>
</body>
(#upper has opacity 0 and I plan to fade it in later, when the user scrolls up to the image)
the problem I'm having is that the page doesn't scroll all the way to the bottom on load. Ive tried a number of things including changing the selector for the .scrollTop function to body and/ or html tag as well as document or window. I even tried overshooting the scrollTop value excessively but to no avail.
Can anyone tell me me why The page is not scrolling all the way to the bottom upon load?
[EDIT]
Sorry sorry, sloppy code. Finals week and little sleep. Heres a no-typo version of the same thing with the same problem. I even overshot the scrollTop parameter here, but the result is the same.
An observation: scroll location persists after refresh. Could this have anything to do with the obstinate scroll position here?
You have a typo here:
var margin = ($(window).hieght() - $("#lower").height())/2;
//----------------------^^^^^^^---a spelling typo
which should be:
var margin = ($(window).height() - $("#lower").height())/2;
Because of this the script execution stops and it never goes to the line where you have done the scrollTop. so all in all it gets stopped at an error and does not go further for execution.
Also i want to add that this is not a correct way of doing:
$("#lower").attr("style", "display: block;")
instead you can use .css() method:
$("#lower").css("display", "block");
or with simple .show(), fadeIn(), .toggle('show') etc. too.
I have read few similar questions regarding the same issue and I have implemented my function. However it doesn't work as expected. I am using Bootstrap for my website thus every element on the page is responsive.
Problem description: I am using jQuery stick plugin http://stickyjs.com/ and I am making one element of my page always visible. Now what I am trying to achieve that the sticky plugin call would only work if the window width is above 1024px. Since I am using bootstrap and below 1024 px every element get stacked underneath.
Here is my function
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize >= 1024) {
$(".rightmain").sticky({
topSpacing:0
});
}
}
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
This code doesn't invoke the sticky plugin.
If I remover the width calculation function and simply invoke the sticky plugin like the one mentioned below then it works fine.
$(document).ready(function(){
$(".rightmain").sticky({
topSpacing:0
});
});
Also, if anyone can give me some pointers to some other library other than http://stickyjs.com/ where I have the option to disable the plugin after a certain given windows (height/width) then it would be great. Since I am using bootstrap I dont want to invoke the sticky plugin in every other cases.
For some reason you need to drag the window in jsfiddle to get it going, but it works fine onLoad in context.
The idea behind this is that if the content exceeds the height of the window, it will removeClass ".sticky" which is slamming the footer down absolute to the bottom of the page. Otherwise, it's a sticky footer.
It should be pretty elegant. My issue is that for a moment, the footer clips off the content. I want it to removeClass ".sticky" when the aqua background of the section[role="main"] meets the footer's purple background and not a pixel later. I can't seem to get this going.
The footer is always the same height... can I just subtract it from something?
$(document).ready(function(){
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').height() >= $(window).height() ) {
$('.footer').removeClass('sticky');
}
$(window).resize(function(){
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').height() <= $(window).height() ) {
$('.footer').addClass('sticky');
}
else {
$('.footer').removeClass('sticky');
}
});
});
Working example here:
http://jsfiddle.net/LxvQ9/ make sure to resize to get it going initallly. Again, this is some issue with jsFiddle. Works fine on my site onLoad.
Thanks for any help.
While calculating height of any element, we also need to consider padding and border if any.
In jQuery we use outerHeight to get the height of any element including padding and border.
So, in your case, we are using only height and that's why some text is clipping.
Use the following code to properly calculate the height and update the footer class.
JavaScript Code
$(function(){
//When Window is Resized
$(window).resize(makeFooterSticky);
//Run once on page load
mkaeFooterSticky();
});
function makeFooterSticky() {
$('aside[role="sidebar"]').height($(window).height());
if( $('section[role="main"]').outerHeight() <= $(window).height() - $('.footer').outerHeight() ) {
$('.footer').addClass('sticky');
} else {
$('.footer').removeClass('sticky');
}
}
Hope this should work.
Let me know if there are any issues.
JSFiddle Demo : http://jsfiddle.net/hVzat/3/