WebSite X5Help Center

 
Alberto G.
Alberto G.
User

Loading overlay code for websites  en

Autor: Alberto G.
Visited 2554, Followers 4, Udostępniony 0  

i've been testing the software for a while and i think it does a lot of thing pretty well. it could be useful if a loading overlay feature was added but in the meantime i made some code for this. maybe is useful to someone

add the file for the logo. it must be named like in screenshot and loaded in images or you need to modify the code

hope is useful to someone, let me know what you think

Posted on the
29 ODPOWIEDZI - 1 POMOCNY
Giuseppe Guida
Giuseppe Guida
User

Thank you wink

Czytaj więcej
Posted on the from Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Very nice effect in the passage from one page to another.

Czytaj więcej
Posted on the from Giuseppe Guida
John S.
John S.
User

Great!!

But a bit annoying if made on all pages. Great on selected pages.

Instant info wjhen entering page - and cool effect when leaving.

Thank you- good job.

Czytaj więcej
Posted on the from John S.
Axel  
Axel  
User

Like John said, could be cool to have it for one specific page.

Who has investigated code to do that ?

Alberto ?

Czytaj więcej
Posted on the from Axel  
Alberto G.
Alberto G.
User
Autor

good idea! i'll look into that

Czytaj więcej
Posted on the from Alberto G.
John S.
John S.
User

Just put it in the settings ( expert ) for a page - or pages.

Czytaj więcej
Posted on the from John S.
Giuseppe Guida
Giuseppe Guida
User

To have the effect only on a specific page I think it would be enough to insert the code in the Properties of the page that interests us (see the screenshot below):

Czytaj więcej
Posted on the from Giuseppe Guida
Axel  
Axel  
User

@Giuseppe

NO.. I have tested on specific page (not works) and you need to identify the used page for the code..

Actually the code is not ready for specific page...

So code investigation is mandatory to detect ID name, class name ...etc.

May be Alberto can generate this one quickly because it's the author and he knows well the subject. foot-in-mouthfoot-in-mouth

https://wsx5.afsoftware.fr

Czytaj więcej
Posted on the from Axel  
Giuseppe Guida
Giuseppe Guida
User

@Wsx5.afsoftware.fr

remove this line from Alberto's code:

//USE THE CURTAIN ON EFFECT WHEN CLICKING ON A LINK IN A MENU -> 1 = YES / 0 = NO

var use_curtain_on_effect = 1;

and put the code in the Properites of the page that interests you, After Opening the Body Tag

CIAO

Czytaj więcej
Posted on the from Giuseppe Guida
Stiac Engineering
Stiac Engineering
User

Really cute! Thanks for sharing.
It would be very nice if this function is enabled directly from Incomedia, possibly accompanied by a lazy loading.

As pointed out by a colleague, if applied to the whole site, this effect could be "heavy" and discourage the visitor from navigating.

Czytaj więcej
Posted on the from Stiac Engineering
Giuseppe Guida
Giuseppe Guida
User

Gabriele, leggi i miei post in questo topic: l'effetto si può applicare solamente alle pagine che tu desideri utilizzando dei semplici accorgimenti da me dettagliatamente spiegati. Ciao

Czytaj więcej
Posted on the from Giuseppe Guida
Stiac Engineering
Stiac Engineering
User

Non avevo aggiornato la pagina. Era rimasta ferma al commento del 22:39. embarassed

Czytaj więcej
Posted on the from Stiac Engineering
Stiac Engineering
Stiac Engineering
User

Gentilissimo come sempre! wink

Czytaj więcej
Posted on the from Stiac Engineering
Stiac Engineering
Stiac Engineering
User

Premetto che non ho visto il codice nel dettaglio anche perché a breve mi addormento al PC.

Sarebbe carino poter estendere questa funzione al primo caricamento o comunque introdurre un delay o un qualcosa per annullare l'effetto nella pagina visitata in precedenza. Non so se ho espresso bene il concetto.

Comunque ancora grazie!

Czytaj więcej
Posted on the from Stiac Engineering
John S.
John S.
User

I have an example here : http://eksempelsite.dk/x52019test

When selecting htmlfiler in the headmenu + page2 in the dropdown, then the effect is shown. When leaving the page2 the effect is "reversed". Other pages is not affected. I gave the overlay a bit opacity.

Czytaj więcej
Posted on the from John S.
Stiac Engineering
Stiac Engineering
User

Eventualmente come si può editare il codice per consentire che il menu (Header) rimanga visibile? Vorrei applicare l'effetto solo al contenuto della pagina, ovvero a "imContentContainer".

How can you edit the code to allow the menu (Header) to remain visible?
I would like to apply the effect only to the page content on "imContentContainer".

Czytaj więcej
Posted on the from Stiac Engineering
John S.
John S.
User

Hello Garbiele

You set the an offset to a value in pixel that matches the height of your header.

Czytaj więcej
Posted on the from John S.
John S.
John S.
User

I have changed my example so the top 100 pixels is "free".

Czytaj więcej
Posted on the from John S.
Stiac Engineering
Stiac Engineering
User

Thank you!

Online i managed to find another very nice code, light and with a delicate effect.
Now i was trying to insert it correctly on WebSite X5 but i'm experiencing some problems.

Czytaj więcej
Posted on the from Stiac Engineering
Alberto G.
Alberto G.
User
Autor

@john that is a good solution

you need to change height from height:100% to height: calc(100% - 100px); to match the overlay height with the 100px top. so the image is still centered

@giuseppe

i don't know why removing that works. that might break the open effect. what if you set var use_curtain_on_effect = 0 to zero so the open effect doesn't happen? it should give the same result

Czytaj więcej
Posted on the from Alberto G.
Giuseppe Guida
Giuseppe Guida
User

Alberto, è la stessa cosa: puoi rimuovere quella riga o puoi impostare il valore a 0, ottieni lo stesso risultato.

Ciao

Czytaj więcej
Posted on the from Giuseppe Guida
Tom G.
Tom G.
User

I don't quite understand what to change in the code to have this effect only on the home page - as Giuseppe shows in his sample above.

Can you, please, help?

Czytaj więcej
Posted on the from Tom G.
Tom G.
Tom G.
User

... also, how to slow down the transition.

Thanks!

Czytaj więcej
Posted on the from Tom G.
Tom G.
Tom G.
User

I found out how to have the effect on one page only!

You just put the code in "After opening the BODY tag" in Page Properties | Expert of that page only (not in Statistics, SEO and Code).

I only need to know how to slow down the transition...

Czytaj więcej
Posted on the from Tom G.
John S.
John S.
User

You change the transition value(s)

Czytaj więcej
Posted on the from John S.
Tom G.
Tom G.
User

Thank you John!

This is what I did, and it works fine:

I love this whole idea of Alberto's loader! smile

Czytaj więcej
Posted on the from Tom G.