WebSite X5Help Center

 
Alberto G.
Alberto G.
User

Loading overlay code for websites  en

Автор: Alberto G.
Просмотрено 2512, Подписчики 4, Размещенный 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

Размещено
29 Ответы - 1 Полезно
Giuseppe Guida
Giuseppe Guida
User

Thank you wink

Читать больше
Размещено От Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Читать больше
Размещено От 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.

Читать больше
Размещено От 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 ?

Читать больше
Размещено От Axel  
Alberto G.
Alberto G.
User
Автор

good idea! i'll look into that

Читать больше
Размещено От Alberto G.
John S.
John S.
User

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

Читать больше
Размещено От 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):

Читать больше
Размещено От 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

Читать больше
Размещено От 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

Читать больше
Размещено От 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.

Читать больше
Размещено От 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

Читать больше
Размещено От Giuseppe Guida
Stiac Engineering
Stiac Engineering
User

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

Читать больше
Размещено От Stiac Engineering
Stiac Engineering
Stiac Engineering
User

Gentilissimo come sempre! wink

Читать больше
Размещено От 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!

Читать больше
Размещено От 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.

Читать больше
Размещено От 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".

Читать больше
Размещено От 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.

Читать больше
Размещено От John S.
John S.
John S.
User

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

Читать больше
Размещено От 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.

Читать больше
Размещено От Stiac Engineering
Alberto G.
Alberto G.
User
Автор

@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

Читать больше
Размещено От 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

Читать больше
Размещено От 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?

Читать больше
Размещено От Tom G.
Tom G.
Tom G.
User

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

Thanks!

Читать больше
Размещено От 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...

Читать больше
Размещено От Tom G.
John S.
John S.
User

You change the transition value(s)

Читать больше
Размещено От 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

Читать больше
Размещено От Tom G.