Scroll photos into view once selection made

[theremotedr]

Hi,
Here is the site in question.
https://www.theremotedoctor.co.uk/photogallery.html

On the Pc all is good so this is aimed at the mobile phone market.

This is what happens / would like to happen.
The user can see various option titles, BIRDS, CATTLE, DEER etc etc.
The selection is made example DEER now the deer images should scroll into view thus the option titles moving to
the top of the screen.

Currently when the title is selected the user then needs to manually scroll to bring the photos into view.


See my attached photos to show before title selected & then what should happened is relation to page scrolling up.

[coothead]

Hi there theremotedr,

I am sorry for the long delay in replying to your post.

Unfortunately, as forum coding problems become more and more infrequent
I find that my little grey cells take longer to solve those that come my way.

This one of yours, as you can see, took me a long time to find a possible
solution for you to try.

Check out the attachment to see best and only answer that I am able to
provide for you

coothead.

[coothead]

Hi there theremotedr,

use the attached javascript file in place of the existing.

coothead

[theremotedr]

I have today managed to log in.
The issue mentioned is as follows as to what i have noticed.

Post #2 js file works fine.

Post #3 you advise to use this js file.
Please advise what changes were made & what it was supposed to do.

I ask because changing & using the js file in post #3 i see the issues mentioned.

The main header image "Me & my dog" is not shown.
I click example "DEER" & the Deer photos are now loaded / shown but as soon as i scroll on the phone ALL the photos are now loaded.
So for example 20 Deer were loaded.
I slightly scroll.
All the photos from AIRCRAFT, BIRDS, BUDDY, CATTLE etc etc have replaced the Deer.

[coothead]

Hi there theremotedr,

I have looked at you link in post#1 and see that you using this javascript...

function styleChange(){
if( document.body.offsetWidth>544){
    document.querySelector('.reload-btn').classList.add( 'hide' );
    filterSelection('all');  
    document.querySelector('.reload-btn').classList.add( 'hide' );
 }
 
else { document.querySelector('.reload-btn').classList.remove( 'hide' );
       c='';
       filterSelection(c);
       document.querySelector('#myBtnContainer').style.top = 0;
       document.querySelector('.header-container').classList.add( 'hide' );
       document.querySelector('.h2text').classList.add( 'hide' ); 
 }
}

The lines in red need to be removed.

coothead

[theremotedr]

Hi,
I have deleted the red text as mentioned.
Please can you check that all is ok.

[coothead]

Hi there theremotdr,

almost there, now add the two lines in red as shown here...

function styleChange(){
if( document.body.offsetWidth>544){
    document.querySelector('.header-container').classList.remove( 'hide' );
    document.querySelector('.h2text').classList.remove( 'hide' );
    filterSelection('all');  
 }

coothead

[theremotedr]

Sorry for delay but server down most of day.
I have now replaced the red text as advised but please explain what is supposed to happen ?

Like before still if I click Deer I see Deer but if I scroll a very small
Amount the deer is replaced with all of the images.

[coothead]

Hi there theremotedr,

I have just checked out your site and I am not seeing the
implementation of the javascript modification in post #7.

coothead

[theremotedr]

I will add it again now.

I did remove it but I suppose I should of left it for you to see.