WebSite X5Help Center

 
John S.
John S.
User

Show/hide objects dependant on resolution  en

Auteur : John S.
Visité 1897, Followers 1, Partagé 0  

I have seen here on the forum an idea for turning objects on/off dependant on the resolution.

I had this need in a new project, and found a way.

For those that are interested it can be seen here : http://bramminginfo.dk/billeder.html

The image gallery is best on a desktop, but can be run as a self-contained php-script.

I therefore on the page made all the objects. And then I made a html-object where I "toggle" the objects.

When above 900px the gallery is shown - when not, then a message ( text-object ) is shown where a link can be chosen.

It is not fine-tuned yet, but it functions.

I use the @media screen and then max-width or min-width and display:none.

This does that an frame and a target iframe is shown when resolution is above 900px and hidden when beneath.

And the text is hidden when resolution is above 900px and shown when beneath.

This way it is possible to toggle objects for a specific screen width.

The idea for INCOMEDIA could be that it should be possible for an object to set a screen-width and then if the object should be min or max.

Posté le
12 RéPONSES - 1 UTILES
Axel  
Axel  
User

Hi John

You can do that here

And you choose which object is displayed or not regarding resolution.

Hope this helps

https://wsx5.afsoftware.fr

Lire plus
Posté le de Axel  
John S.
John S.
User
Auteur

NO - you cannot.

You can only "hide" an object for lower resolutions.

You cannot have an object be shown at the lowest resolution but be hidden at the highest resolution.

If you know an easier way to do this then please tell 

Lire plus
Posté le de John S.
Tom G.
Tom G.
User

Similar solution I used in my original post in October 2018. Since then - nothing from Incomedia.

       

Still hoping for quick solution...

Lire plus
Posté le de Tom G.
John S.
John S.
User
Auteur

Hello Tom

Yes - it is a simple solution only using CSS.

I also don't understand why INCOMEDIA does not offer this option instead/or together with the rather ineffective solution they have now, 

Maybe it is a matter of compability, but I think that now it should be no problem as nearly all browsers ( except from some very old Firefox and IE ) acceps the use of this.

So - INCOMEDIA - think new please.

Lire plus
Posté le de John S.
Axel  
Axel  
User

Hey Tom, John

Seems to need changing syntax about CSS media

this one is OK

@media screen and (max-width: 959px) {

Regards

https://wsx5.afsoftware.fr

Lire plus
Posté le de Axel  
John S.
John S.
User
Auteur

Hello Alex

If you look at my code you will see that this is exactly what I am using. I have no problem with the CSS.

I tried just to tell you, that the X5 software can only handle to remove objects for lower resolutions - not the opposite.

And my post, was just to tell others with the same "problem" that it is possible when using special code/CSS.

And I tried to tell INCOMEDIA that it should be an option in the software for those that do not want to use custom code.

So - my original post is for those that has a need for toggling the existence of objects for predefined resolutions - and for INCOMEDIA to make this as an option.

Lire plus
Posté le de John S.
Claudio D.
Claudio D.
Moderator
Meilleur utilisateur du mois IT
John S.
And I tried to tell INCOMEDIA that it should be an option in the software for those that do not want to use custom code.

I use the custom code for years, but it is right that the possibility be given directly by software to simplify and speed up operations

Lire plus
Posté le de Claudio D.
Axel  
Axel  
User

Ok

embarassed

Lire plus
Posté le de Axel  
John S.
John S.
User
Auteur

@Axel - I had the correct number of letters and the letters were the ones that should be used - but I am sorry for the order of the letters. Sorry for naming you Alex.

Lire plus
Posté le de John S.
Axel  
Axel  
User

...wink

Lire plus
Posté le de Axel  
John S.
John S.
User
Auteur

A maybe better solution can be seen here : http://bramminginfo.dk/tambours-have.html

In the page settings - BODY tag property I have :

onload="narrowWin()" onresize="narrowWin()"

And in the page I  have :

<script>
function narrowWin() {
var iFrame = document.getElementById('album');
if (window.innerWidth > 1150) { //large screen
iFrame.style.height = '570px';
} else if (window.innerWidth > 720){ //narrow screen
iFrame.style.height = '400px';
} else if (window.innerWidth > 480){ //narrow screen
iFrame.style.height = '310px';
} else {
iFrame.style.height = '270px';
}
iFrame.src="YourownURL";
}

</script>

Could be made so, that you had a different iframe-URL for different breakpoints.

The slide-show and corresponding album is special made by an expert. It is quite handy for this job. It can operate on folders, and if you add images to a folder, then the image is automatic shown in the slideshow. Images can be zoomed or if zoom is not chosen, then a nice transition can be used instead. In a folder can be a text-file that will be the folder description ( including HTML-code ) if present.

You can also see : 

http://bramminginfo.dk/varde.html

http://bramminginfo.dk/minibyen.html  ( different setup )

The site has just been started. I just wanted to tell this possibility to make iframes responsive and eventual use different content at different breakpoints.

Hope this is useful for someone.

Lire plus
Posté le de John S.
John S.
John S.
User
Auteur

The text you see in the slideshow is from the EXIF data.

It is very easy to insert text - in the property for the file (in windows explorer) you simply directly insert text and that's that.

Lire plus
Posté le de John S.