Search:

Hi there DAS,


and a warm welcome to these forums.

Bearing in mind that PHP is not really my forté,
check out the attachment which contains a
basic example.

...and you most likely could not be bothered to check the
original poster's code to see if your assertion was correct. :confused:


coothead

Hi there thrremotedr,


it seems that you might have missed this post of mine here...

Responsive webpage advice - post #9

...which would. to my mind, make the hiding of the button...

Hi there theremotedr,


why would you want that? :confused:


coothead

Hi there theremotedr,


it is impossible to code for all the mobile and other devices and silly to try.
And I would not worry about laptops and desktops. Users are perfecty able
to manually...

CSS Tricks - What are viewport units?


coothead

Hi there theremotedr,


sorry about that, I am not as sharp as I used to be
and suffer more frequently from Senior Moments.

This is my test CSS for the modal image and video at present...

...

This link of yours...

https://www.theremotedoctor.co.uk/gallery.html

...does not appear to be an updated modal" version.

This makes it impossible to for me to actually view your problem.
...

Hi there the remotedr,


Sorry, when I said add, I did not mean remove any code that followed.

I should have posted this...


cls.addEventListener( 'click',
function(){

Hi there theremotedr,


it looks as though we are now, at last, down to fine tuning.

1. Close button
This...


#closure {

Hi there the remotedr,


I have now got it working correctly, I hope. ;)

html


<!-- ****************** modal window ****************** -->

Hi there theremotedr,



I had to amend the code to allow for the videos not being able to display in the modal window.
Images open in the modal and but, at prersent, videos need to open in a...

Hi there theremotedr,



I noticed that you now want to display videos.
Unfortunately, I haven't as yet been able to make them work in the modal.
This means that at present I am having to let...

Hi there theremotedr,


you are right, well spotted.

This line...


cnt[k].firstElementChild.firstElementChild.src;

I will check the code.


coothead

Hi there theremotedt,


this can be done with these additions to you existing code...

HTML


<!-- ****************** modal window ****************** -->

No problem, as always, you're very welcome. :)

Note:-

I have removed my copy of your "gallery site" from my server,
but not wishing to spoil the sense of my posts I have edited
the relevant...

Hi there theremotedr,


If that suits your requirements, then this is the CSS that will achieve the efect...



#myBtnContainer{
position:sticky;
top:0;

Hi there theremotedr,





You probably need to clear cache - ( Ctrl +F5 key ).

It can sometimes takes a few repitions, though.

Hi there theremotedr,


Have a look at my copy of your page...

updated gallery.html

Scroll down the page and then comment. :cool:

Hi there theremoted,




You are mistaken it is the gallery image that is larger.The header image is a static 300 x 168px.
If you decrease the page width you will find the gallery image size...

Hi there theremotedr,


this code...



img {
display: block;
width: 100%;

Hi there theremotedr,


add this...


html {
scroll-behavior: smooth;
}

Hi there theremotedr,


I am very sorry about that,

In the gallery.html file I had this code...



<link rel="stylesheet" href="Gallery.css" media="screen">

Hi there theremotedr,


the completed site may be download here...

the-doctor-with-thumbs.zip

...as it exceeds the forum attachment size

Notes: