Reluctant Scrolling (Two Varieties - Same Code)

[iwato]

BACKGROUND:  The same code does to different things in two different environments neither of which is good.   Another baffling phenomenon that is probably my doing, but I do not understand.

On my iPhone: the scroll simply does not do its job.  When the hidden <div> is opened the dynamic action is suppose to return the page to a designated position automatically.  It appears, however, to move the page to the save relative position that it was in before the scroll, but now relative to the new <div>.

On my computer: the automated scroll functions just as intended, but then any manual scrolling thereafter stutters briefly before the page becomes normal.

You may observe this phenomenon by clicking on the link And, more... after opening to the GC Tutor item from either the navigation bar on the Grammar Captive mainpage or the Grammar Captive subdomain tutor.grammarcaptive.com.

The CODE

.click(function() {
    var hm_content = $("#handyman").html();
    $(".hidden_tr").slideToggle(function() {
        $("#replace_td").html(hm_content);
        $('body, html').animate({scrollTop: $('#your_tutor').offset().top},800);
    });
})

Roddy

 

[justsomeguy]

It seems like the animation doesn't finish for a while, maybe because you're trying to simultaneously scroll 2 elements.  If you wait before scrolling it's fine.

Quote

You may observe this phenomenon by clicking on the link And, more... after opening to the GC Tutor item from either the navigation bar on the Grammar Captive mainpage or the Grammar Captive subdomain tutor.grammarcaptive.com.

Are you unable to link directly to specific parts of your site because you're loading everything with Javascript?

[iwato]

Have you tried your mobile device.  There it simply fails.  Yes, if one waits in a non-mobile environment the problem does correct itself, but internet users are generally impatient and demand perfection.  Too many quirks will chase them away.

Are you suggesting another way to expose a hidden div that does not use Javascript?

Roddy

p.s.

Quote

Are you unable to link directly to specific parts of your site because you're loading everything with Javascript?

If I ever build another site, or have someone overall the current site,  things will be done very differently.  Developing is a learning experience on the one hand, and a business enterprise on the other.  One must balance between the two.   Neither can I afford an overall, nor can I afford the time to build another site at this moment.

Edited June 26, 2019 by iwato

[justsomeguy]

Are you suggesting another way to expose a hidden div that does not use Javascript?

There's probably a way to use CSS only to do a transition, but no, I wasn't suggesting not using Javascript.

Have you tried your mobile device.

No.  Maybe it reacts differently to trying to animate scroll two elements at the same time.

Yes, if one waits in a non-mobile environment the problem does correct itself, but internet users are generally impatient and demand perfection.

I know.  I see the fact that it doesn't do it if you wait as a symptom or clue to what the problem is, and my guess, again, is trying to scroll two elements at the same time.

[iwato]

Although it is true that two scrolls do take place within the same .load() function, they are very separate actions.  The first scroll is automatically triggered when the div is loaded, the second takes place at the visitor's discretion and occurs only after the div is loaded, if it occurs at all.

Roddy

[justsomeguy]

Look:

$('body, html').animate({scrollTop: $('#your_tutor').offset().top},800);

You are targeting 2 elements.  The body element, and the html element.  You are telling it to animate scroll both of them at the same time.  I have no idea what the browser is going to do when jQuery tries to animate the window scrolling of 2 elements.

That's what I'm talking about.

[iwato]

If the second scroll mechanism is not included in the original .load( ) function, the second scroll fails completely. 

The entire .load( ) function is provided below.  What you see is slightly different from what appears on the original page of this thread.  Neither the original, nor the modified position alters either originally stated outcome.

MODIFIED CODE

$("#main").load("gctutor_filler.html #gctutor_div", function() {
    $(".hidden_tr").hide();
    $("#hidden_handyman").hide();
    $(".seeMore").css({"font-family": "'Bradley Hand', 'cursive'", "font-size": "1.2em", "color": "#fadb9d"});
    $("span.windowAdjust").css({"font-family" : "'Bradley Hand', cursive", "color":"#fadb9d", "font-size" : "1.2em"});
    $('body, html').animate({scrollTop: $('#main').offset().top},800);
    $(".seeMore").mouseenter(function() {
        $(this).css({"cursor": "pointer", "color":"#fff"});
    })
    .mouseout(function() {
        $(this).css({"cursor":"none","color":"#fadb9d"});
    });

    $("span.windowAdjust").mouseenter(function() {
        $(this).css({"cursor": "pointer", "color":"#fff"});					
    })
    .mouseout(function() {
        $(this).css({"cursor":"none","color":"#fadb9d"});
    });
    $("span.windowAdjust").mouseenter(function() {
        $(this).css({"cursor": "pointer", "color":"#fff"});
        })
        .click(function() {					
            $('body, html').animate({scrollTop: $("nav #availability").offset().top}, 800);
        })
        .mouseup(function() {
            $(this).css({"cursor":"none","color":"#fadb9d"});
    });
    $(".seeMore").mouseenter(function() {
        $(this).css({"cursor": "pointer", "color":"#fff"})
    })
    .click(function() {
        var hm_content = $("#handyman").html();
        $(".hidden_tr").slideToggle(function() {
            $("#replace_td").html(hm_content);
            $('body, html').animate({scrollTop: $('#your_tutor').offset().top},800);
        });
    })
    .mouseup(function() {
        $(this).css("color" , "#fadb9d");
        $("#replace_td").css({"font-family": "inherit", "color": "#fff"});
    });
});

 

Roddy

[iwato]

$('body, html').animate({scrollTop: $('#your_tutor').offset().top},800);

Oh, I see what you mean.  This technique is used throughout my site, and I have not had trouble with it.  What would you suggest that I target?  The loaded gctutor_div, the main div in which the gctutor.div resides, the html div, or the body div.  I am referring only to the affected offset at this point.

Roddy

Edited June 26, 2019 by iwato

[justsomeguy]

I think the body element is used for scrolling, if that doesn't work try just the html element.

[iwato]

Using the HTML tag alone corrects the problem on my iPhone, but does not correct the stuttering effect in my computer's browser window.

Roddy

[justsomeguy]

I'm not sure what else it would be, there might be another animation playing still.  It seems like there are competing animations.  The fact that it doesn't do it if you wait (presumably until after any animations finish) suggests that's the issue.

[iwato]

OK.  I have now got the scrolling to work in all instances.  The only thing that remains to be solved is the stuttering.

There are six different conditions that must be met:

Computer Browser

1) Load the insert directly from the mainpage by clicking on GC Tutor in the navigation bar.

2) Load the insert directly from the subdomain tutor.grammarcaptive.com

3) Load the insert from the subdomain, load other inserts, and then load the insert GC Tutor, as if the page were loaded directly from the mainpage.

Smart Phone

1) Load the insert directly from the mainpage by clicking on GC Tutor in the navigation bar.

2) Load the insert directly from the subdomain tutor.grammarcaptive.com

3) Load the insert from the subdomain, load other inserts, and then load the insert GC Tutor, as if the page were loaded directly from the mainpage.

Note:  In the end, the functionality does not work on both the smartphone and the computer unless the dual specification is employed in all cases -- namely, $('body, html').  Unfortunately, in all cases the stuttering persists.

Roddy

[dsonesuk]

It seems strange to have it for both html and body elements to me and thought it would cause the stuttering as they would conflict with each other. You haven't  changed the default browser overflow stying for these elements have you?

[iwato]

Hi, Dsonesuk.  I have checked all of the relevant HTML and CSS documents that go into producing the mainpage with the GC Tutor insert.  In no case does the word overflow appear.  No, I have not change my browser's setting.  In any case, the issue is not browser sensitive.  I would like to bring your attention to the CSS used to format the tutor.grammarcaptive.com subdomain index page.

/* CSS Stylesheet for GC Tutor
** Date of Creation:  Sunday, 21 October 2018
** Author:  Roddy A. Stegemann 
*/

body, html {
    height: 100%;
    background-color: #666;
    color: #ccc;
}

.parallax {
    background-image: url('../../_images/la_brume.png');
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1, h2, h3, p {
	text-align: center;
}

@media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
}

#contact_div {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: start;
	margin-bottom: 1em;
}

.contact_item {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.contact_info {
	padding: 0 1em; 
	text-align:right;
	color: #ccc;
}

.contact_data {
	padding: 0 1em;
}

a:link {text-decoration: none;color: #ccc; border:none}
a:visited {text-decoration: none;color: #D4AF37;}
a:hover {text-decoration: none;color: #fff;font-weight: 800;}
a:active {text-decoration: none;color: #D4AF37;}

Do you find anything strange or unusual here?

Roddy

[dsonesuk]

This is on mobile, the image at first fits the viewport minus body default margin, as you scroll down the image area increases in height the image adjusts to this new height. Is this the stuttering  you referred to?

Using 100% height does not give true viewport height if margins or padding are used, using 100vh and 100vw might be a better option.

media queries are used AFTER default css layout stying.

Edited June 30, 2019 by dsonesuk

[iwato]

Actually, no.  The problem occurs with the page to which the link on the page for which the above CSS code appears.  I believe that I have inadvertently misled you.  Please focus on the following statement and ignore the code that I provided in my previous entry.  It is from a different page and a different problem.

Quote

I have checked all of the relevant HTML and CSS documents that go into producing the mainpage with the GC Tutor insert.  In no case does the word overflow appear.  No, I have not change my browser's setting.  In any case, the issue is not browser sensitive.

Roddy

Edited June 30, 2019 by iwato

[dsonesuk]

The html element is the size of viewport area, that shows scrollbars when body extends beyond the viewport  height, you make the body scroll to top of html,  or to a specific element position, to be clear.

[iwato]

So, all of the selectors currently identified by $('body, html') should read $('body').  Is this correct?

Roddy

[dsonesuk]

Seems 'html, body' is correct but for desktop only,  'window' is used for mobile devices.

See here:

http://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

[iwato]

Dsonesuk,  I have awarded you the cup for a helpful accident on your part.  Please compare the following two pieces of code.  The first fails; the second works:

FAILED CODE

$('body, html').animate({scrollTop: $('#your_tutor').offset().top},800);

WORKING CODE

$('body, html').animate({scrollTop: $('#your_tutor').offset().top},800,function(){
    $('html,body').clearQueue();
});

There appears to be some sort of jQuery bubbling going on.

Roddy

[dsonesuk]

So basically which ever uses the animation first cancels out animation for the other, which suggests there is a conflict of both running the animation at same time.