Hi, this video is super awesome yet simple to understand! Thanks for sharing! One question, can I make the element on the code (in your case is the strip) as a lightbox? Because I wanna cover the whole thing includes the menu. Thanks!
I really like it that you add the codes already! That makes it even more easier. I would really hate it if I had to learn how to code wix all on my own! Thanks again
This video was fantastically helpful. Easy to follow. The code and the links were just what I needed. Thank you so much for taking the time and trouble to post it.
very useful and easy explanation.... for the people who are trying in 2021, select the header column and then create a new box ( and add your gif and text as instructed in the video) then paste the code and rename the value of the box (eg: #box1) and the delete the text "export" in the 5th line of the code (if the text was highlighted as error)
I used the tips you have disclosed, and I even made a custom gif for my preloader, but for some odd reason, it doesn't move as intended. But it does move, say after someone clicks a link to another page, clicks back to home, and it starts moving. Do you think it's something within the code or with the gif itself?
Thanks for this tutorial, it worked. I'm having trouble with my website that is like a one-pager with anchors. My gif preloader is located at the top where my "about" anchor is, but if I am on another page and from there click "contact" on the menu then it takes me directly to the "contact" anchor but the gif preloader isn't visible because the gif preloader is located at the anchor above it. Is there a way to solve this other than placing the gif in different places throughout that one page?
Thank you for this video, I have applied the Wix code to one of my pages in the website, but I have tested that if I submit without filling any field, the uploader starts working and need to click into another page to exit. is this an error? did I do something wrong?. thank you
Awesome tutorial, thank you v much! Question: how would I have to change the code if I wanted to show the lightbox as soon as the page opens (not even waiting for it to load)? Thanks again!
How do I get the web pages to span the full width of my phone screen? I realize most websites does this but my wix site has like side margins when viewed on my phone
Thank you so much, from Brazil!! It really works for what i was searching, some tools the Wix doesn't automize to help us... here in Brazil we have some problems with the freight configuration in e-ccomerce sites and the company responsible for deliveries... whatever, i'm waiting for more tips, good work man!
Amazing video. However, this only works on page load/refresh. Can you share code for the loader to work when going from one page to another. For eg. if I click on an image and this results in opening a new page. Till the new page is getting uploaded, I wish the loader to work till then.
Doesn't work well, 1. takes almost the same time to load (to be seen) than the website 2. I doesn't work for all the pages, even selecting "Web" instead of "Page" 3. I noted that you (ComputerMDofGilbert) don't even used it on your website (www.wixmywebsite.com/) and your website take like 6 seconds to load completely. (at least with computer ) 4. Once publish the website with the loader command on, the WIX builder got stock, I had to use another searcher, Firefox instead Grome to be able to access to the builder. I don't understand how the wix.com website loads so fast. I guess they use WordPress. This issue is huge on WIX and I am strongly consider WordPress and the Divi theme by the end of my yearly plan on WIX. I have a website multilingual and it takes almost 5 to 8 seconds loading. I've done the test online and all the results say it is very optimized.
Hello Esteban, I appreciate your concern and voicing your opinion. Let me first clarify, the main Wix website runs on Wix. Next, loading speed has absolutely been an issue on Wix, but just today they revealed that SSR (Server Side Rendering) will roll out in March boosting the speed exponentially of websites that take advantage of the new system. Thank you, Michael
@WixTrainingAcademy1 Hello, Very nice video 👌 but i cannot cover strip over my top menu? Strip is not covering the top menu, so that full screen got covered under the intro video.
can you please do an update to this, since this function still isn't implemented... another idea to do, would be: HOW TO DO A RESPONSIVE SIDE VERTICAL. This would be very good, so that we can build websites, that looks the same on every screen size. On wix it is only possible to do a website responsive to the horizontal, but not the vertical...so maybe it is possible to do that, with a java code or something...
Hi, great tutorial, just subscribed. But did you try it on mobile and does it work ? Because I mainly need it on a mobile site as the loading time is really long. Thanks for your answer ;)
Thanks for this video! However, is there a way to make the loading page only play the first time when you enter your homepage? Now every time you go back to the homepage you see the loader.
Thanks. How can I put a visitors' controlled active timer on a page. A timer that I set to my preferred duration but starts when the visitor /member clicks it. Similar to an exam timer. Please email me. Thanks
do i need to add the strip to each page i want the loader to show on, added it to the home page but it wont show on other pages. anyway to link one to multiple pages?
well it works, but it only work on my start screen, if i load other pages on my website it doesnt show up and i did make sure that i made it under site and not page
Whenever I publish my website after doing what this clip says, it screws with my mobile version. It takes out my desktop version of menu and everything, and puts it on mobile version, screwing up everything. I have to go back to the site history because I even can't undo the process... Any tips?
Any idear, I have created a slideshow, it has to run always. It is placed in the header but when scrolling it stops. How to prevent it from stoppen. The header is in a fixed possition I you have to be able to view at all times. - www.nemsign.dk thanks.
How is this a preloader? $w.onReady(() => { waitForLoading(); }); - All the above code is doing is calling the waitForLoading() function, which is this code: function waitForLoading() { setTimeout(() => { $w('#preloader').hide('FadeOut'); }, 1500); } - And all that does is wait 1.5 seconds before fading out the preloader screen. export function button6_onClick(event) { $w('#preloader').show(); waitForLoading(); } - The above code is just making the screen a button that on press restarts the preloader. So if the visitor keeps clicking on the screen, the loader will never finish and the site will never be shown. All this "preloader" really need are these 3 lines: setTimeout(() => { $w('#preloader').hide('FadeOut'); }, 1500); - But yeah, this is no preloader, just a fake "let's wait a bit before we continue in hopes the page has actually finished loading all the content when we fade out the preloader". I mean, if the page content actually would take 10 sec to load, then with this code it would still be loading after the preloader fades away after the set 1.5 sec LOL I was looking for a proper preloader and saw this same code on the Wix Code and then Googled instead for a real preloader and found this video, but it was just the same thing again. Guess Wix really can't properly preload its content, so a fake preloader is better than no preloader I guess.
I totally see where you are coming from. I will be the first to tell you that I am in the process of learning Javascript. I was following Wix's code content like you said. I will have to discuss this with some of the Wix developers. I apologize for the inconvenience.
i solved the problem already ah Check this line here in the script: solved it setTimeout(() => { $w('#columnStrip1').hide('FadeOut'); }, 1500); you just change the 1500 value which stands for 1.5 seconds to 5 seconds or other then the fade away starts later and the website continues to stay
i used this it works great but the major problem is that when i click on menu button it goes on same page in mobile version for a second or two and then load to next page with strip preloader what we can do about that thing where i see a bad user experience in it.
I am a vendor in Canada and wish to integrate Canada Post to my WIX store, to get the cost of shipping and add the amount to the total of my customer's shopping carts. You should do a step by step video on how it would be done because I have no friggin idea how to do it. lol
Mine doesn't work, when paste the code on to my page code it works but when paste the same thing on to my site code it doesn't, it is underlined red and it doesn't go away, so how do I fix it?
the preloader is working on the homepage only - why? Also, on other pages it is showing the following error:- "#columnStrip1 is not a valid selector" @ Wix Training Academy, PLEASE HELP
i mean an extra time period before the fade away starts, that i can enter into the code, if the "wait till loaded" time period is not enough because, the website is still not depicted completely
Yeah it doesn't really show the whole preloader it workes but i want to know if you could add a certain amount of time that the preloader loads for like 5 seconds because is loading really quick for me
@@TheWixTrainingAcademy i want to make photobook order form, file upload only able to upload single image, but my user have to upload upto 25 image, what should i do to tackle this problem ?
Can you please make a video how to use Wix code tools? I have html-code for ads that i can put on my website. Html ifram box don't work. How to insert html code on wix code tools?
Hi, whenever I add a strip on a page and increase its height to full page the other elements like images also get dragged down! what should I do? After loading the screen appears white with header only! All the elements and data get dragged down and we have to scroll the page! please help me with this
Lol.. doesn't anyone really understand what that piece of code does? haha. it's not really a pre-loader. It loads with the page and plays for 1.5 seconds. the code uses the timeout function to do so. So when someone is actually waiting on the page to load, he wouldn't actually get any pre-loader screen. Haha. they have actually made you a fool by defining a function with a timer and called it waitforload. haha
The setTimeout is used only for demonstration. In a real world application it should probably wait for a db query or api call to complete before revealing the page to the user
Preloader should be in a lightbox not a strip, that way it will show up on any page not just the home page, your example is so simple and basic and doesn't serve the actual purpose of the preloader
@@TheWixTrainingAcademy Well i found one where you put loader in the head where Analytic Scripts are placed as a custom code. Runs faster and is more light weight.
Hi, this video is super awesome yet simple to understand! Thanks for sharing! One question, can I make the element on the code (in your case is the strip) as a lightbox? Because I wanna cover the whole thing includes the menu. Thanks!
I really like it that you add the codes already! That makes it even more easier. I would really hate it if I had to learn how to code wix all on my own! Thanks again
This video was fantastically helpful. Easy to follow. The code and the links were just what I needed. Thank you so much for taking the time and trouble to post it.
very useful and easy explanation.... for the people who are trying in 2021, select the header column and then create a new box ( and add your gif and text as instructed in the video) then paste the code and rename the value of the box (eg: #box1) and the delete the text "export" in the 5th line of the code (if the text was highlighted as error)
Wow! You are a legend, was literally trying to figure out how to do this a month ago to no resolution! Thank you
I'm glad I could help! I appreciate the kind words!
Thank you for the video, is there a way to extend the page width from 980px to let's say, 1200px?
I used the tips you have disclosed, and I even made a custom gif for my preloader, but for some odd reason, it doesn't move as intended. But it does move, say after someone clicks a link to another page, clicks back to home, and it starts moving.
Do you think it's something within the code or with the gif itself?
Thanks for this tutorial, it worked. I'm having trouble with my website that is like a one-pager with anchors. My gif preloader is located at the top where my "about" anchor is, but if I am on another page and from there click "contact" on the menu then it takes me directly to the "contact" anchor but the gif preloader isn't visible because the gif preloader is located at the anchor above it. Is there a way to solve this other than placing the gif in different places throughout that one page?
When do you think you will have an updated video for this problem? Its a great video but I can't get rid of the preloader strip after my page loads!
Thank you for this video, I have applied the Wix code to one of my pages in the website, but I have tested that if I submit without filling any field, the uploader starts working and need to click into another page to exit. is this an error? did I do something wrong?. thank you
Thanks for the tutorial! Really easy to follow along and very helpful:)
Awesome tutorial. It helped me a lot. Thank you!
thanks ! very useful, you have just made my day :)
Awesome tutorial, thank you v much! Question: how would I have to change the code if I wanted to show the lightbox as soon as the page opens (not even waiting for it to load)? Thanks again!
You would change the element it opens to the "#lightbox1" or whatever your element ID is.
How do I get the web pages to span the full width of my phone screen? I realize most websites does this but my wix site has like side margins when viewed on my phone
What about pre loaders for specific pages? I want a different pre loader for a specific page but have the same pre loader for every other page.
Thanks for the tutorial... waiting for more :)
No problem! Yes, I'm uploading another one tonight!
Thank you so much, from Brazil!! It really works for what i was searching, some tools the Wix doesn't automize to help us... here in Brazil we have some problems with the freight configuration in e-ccomerce sites and the company responsible for deliveries... whatever, i'm waiting for more tips, good work man!
Thank you very much! Glad I could help!
You are a KING for this
This is exactly what i needed
Hey I have a GIF logo I would like to make a preloader on a wix site any help? ps It is also saved as just a video media format too
Amazing video. However, this only works on page load/refresh. Can you share code for the loader to work when going from one page to another. For eg. if I click on an image and this results in opening a new page. Till the new page is getting uploaded, I wish the loader to work till then.
Thanks for this! Great tutorial but how are we supposed to edit the site if there is a strip over the top of the whole thing?
Good catch. This was a makeshift preloader back when I created this video, I need to make an updated video for this.
Thanks. How do i add a preloader to all links of a website, which has dynamic pages connected with repeater? pls help
Nice video man. Keep it up!
I appreciate it!
This is the tool I was waiting for. 🎉🎊🎉
Thanks a lot.
Doesn't work well,
1. takes almost the same time to load (to be seen) than the website
2. I doesn't work for all the pages, even selecting "Web" instead of "Page"
3. I noted that you (ComputerMDofGilbert) don't even used it on your website (www.wixmywebsite.com/) and your website take like 6 seconds to load completely. (at least with computer )
4. Once publish the website with the loader command on, the WIX builder got stock, I had to use another searcher, Firefox instead Grome to be able to access to the builder.
I don't understand how the wix.com website loads so fast. I guess they use WordPress.
This issue is huge on WIX and I am strongly consider WordPress and the Divi theme by the end of my yearly plan on WIX.
I have a website multilingual and it takes almost 5 to 8 seconds loading. I've done the test online and all the results say it is very optimized.
Absolutely!
Hello Esteban,
I appreciate your concern and voicing your opinion. Let me first clarify, the main Wix website runs on Wix. Next, loading speed has absolutely been an issue on Wix, but just today they revealed that SSR (Server Side Rendering) will roll out in March boosting the speed exponentially of websites that take advantage of the new system.
Thank you,
Michael
That 2 minute intro advertisement about the services you offer was really fun, but I had to mute the sound... Keep advertising
Thanks for doing this!
Thanks for this tutorial!!! Because if this my group got a perfect score in our group project:))
Never mind. I used wix history and uploaded the older version! Great tool guys! Thanks!
Glad to hear the Wix history helped you out!
worked like a charm in 2022... thanks bud, we all appreciate it!
@WixTrainingAcademy1
Hello, Very nice video 👌 but i cannot cover strip over my top menu? Strip is not covering the top menu, so that full screen got covered under the intro video.
can you please do an update to this, since this function still isn't implemented... another idea to do, would be: HOW TO DO A RESPONSIVE SIDE VERTICAL. This would be very good, so that we can build websites, that looks the same on every screen size. On wix it is only possible to do a website responsive to the horizontal, but not the vertical...so maybe it is possible to do that, with a java code or something...
does it apply to all pages or just home page?
Thanks! it really works!
Perfect! Glad I could help!
the preloader is working on the homepage only - why?
can you do a video of the scroll over effect that makes the images turn whit @ 10:06?
I will add this to my video request list!
I used the tips but I am having troubles to delete now the codes. After making the updates, is not allowing me to get back to original.
erase the code and publish. worked for me.
Hi, great tutorial, just subscribed. But did you try it on mobile and does it work ? Because I mainly need it on a mobile site as the loading time is really long. Thanks for your answer ;)
It does, but you need to design it in your mobile editor as well.
Is it possible to display the preloader only once at the entrance to the site ?
cant put the strips above every thing event i bring it to top by arange option...it continues to push everything bellow
how to put the stripabove everything like footer header etc
Can u also do a tutorial on adding a progess bar?
Helpful! ❤️
Where is button 6 at? from what your code says, i have to click a button before this will work...
Thank you very much from Russia !!
Absolutely! Glad I could help!
Hi I need advice and help for my site SEO Content and optimization my website is made
with the platform WIX please help I am new to this Thanks
Thanks for this video! However, is there a way to make the loading page only play the first time when you enter your homepage? Now every time you go back to the homepage you see the loader.
I will be making an updated video for this!
Do u have a solution for that yet? Tkx
@@TheWixTrainingAcademy We will love to have this, have you got a solution?
HOW DID YOU CUSTOMISED OR CHANGED THE CHECKOUT PAGE ????
Thanks.
How can I put a visitors' controlled active timer on a page. A timer that I set to my preferred duration but starts when the visitor /member clicks it. Similar to an exam timer.
Please email me. Thanks
How to I add time to that loading page/code??
Helpful. Thanks
No problem! Glad I could help!
do i need to add the strip to each page i want the loader to show on, added it to the home page but it wont show on other pages. anyway to link one to multiple pages?
I will have a new video coming out regarding this to make your life easier!
Lifestyle Printing did you ever figure out how to do this.
well it works, but it only work on my start screen, if i load other pages on my website it doesnt show up and i did make sure that i made it under site and not page
Yes, this is an issue. We will have an update video soon!
Worked on first page but not on others. Have you posted an update?
same with me
THANK YOU x1,000,000!! It's people like you who make the internet a better place!!
Thank you!
Great just love it.....
Thank you!
hey!! thank you for this useful video. my question is, how do i make sure that it's in a fixed position when i scroll down?
Thank you! I need to make an updated video for this
@@TheWixTrainingAcademy Ahhhh please!
Will work on it
the link for the code is not working :(. is this just happening to me?
Whenever I publish my website after doing what this clip says, it screws with my mobile version. It takes out my desktop version of menu and everything, and puts it on mobile version, screwing up everything. I have to go back to the site history because I even can't undo the process... Any tips?
Yes, there is a new method to doing this. I just need to make an updated video.
Oh great. I'll stay tuned!
Is there a way to dismiss the Preloader after a set time frame instead of whenever the site is done loading?
yes
@@theotutuianu5567 just yes? no solution? thx alot
@@FakaNuts yep ur welcome, figure it out yourself
Can you show how we can get verification codes for when someone signs up and needs to confirm instead of by email a verification code?
Any idear, I have created a slideshow, it has to run always. It is placed in the header but when scrolling it stops. How to prevent it from stoppen. The header is in a fixed possition I you have to be able to view at all times. - www.nemsign.dk
thanks.
Hi i did as you said step by step but it shows, stays there and does not leave.
Can you explain this a bit further?
How is this a preloader?
$w.onReady(() => {
waitForLoading();
});
- All the above code is doing is calling the waitForLoading() function, which is this code:
function waitForLoading() {
setTimeout(() => {
$w('#preloader').hide('FadeOut');
}, 1500);
}
- And all that does is wait 1.5 seconds before fading out the preloader screen.
export function button6_onClick(event) {
$w('#preloader').show();
waitForLoading();
}
- The above code is just making the screen a button that on press restarts the preloader. So if the visitor keeps clicking on the screen, the loader will never finish and the site will never be shown. All this "preloader" really need are these 3 lines:
setTimeout(() => {
$w('#preloader').hide('FadeOut');
}, 1500);
- But yeah, this is no preloader, just a fake "let's wait a bit before we continue in hopes the page has actually finished loading all the content when we fade out the preloader". I mean, if the page content actually would take 10 sec to load, then with this code it would still be loading after the preloader fades away after the set 1.5 sec LOL
I was looking for a proper preloader and saw this same code on the Wix Code and then Googled instead for a real preloader and found this video, but it was just the same thing again.
Guess Wix really can't properly preload its content, so a fake preloader is better than no preloader I guess.
I totally see where you are coming from. I will be the first to tell you that I am in the process of learning Javascript. I was following Wix's code content like you said. I will have to discuss this with some of the Wix developers. I apologize for the inconvenience.
So, guys, seriously :) any update to the current status that this is actually "virtual" as in unreal?
yeah, its not a "loader' its a psuedo loader, infact it may even be slowing the site down by 1500ms.
It takes 2 days to learn javascript
hello can you pl create an alternative script where there is a default loading time, the fading away is often to soon
I will work on this.
i solved the problem already ah Check this line here in the script:
solved it setTimeout(() => {
$w('#columnStrip1').hide('FadeOut');
}, 1500);
you just change the 1500 value which stands for 1.5 seconds to 5 seconds or other then the fade away starts later and the website continues to stay
i used this it works great but the major problem is that when i click on menu button it goes on same page in mobile version for a second or two and then load to next page with strip preloader what we can do about that thing where i see a bad user experience in it.
Yes, I need to create an update video.
I am a vendor in Canada and wish to integrate Canada Post to my WIX store, to get the cost of shipping and add the amount to the total of my customer's shopping carts. You should do a step by step video on how it would be done because I have no friggin idea how to do it. lol
I would recommend checking out: www.askwix.com/
I own this new platform/service and we can certainly help.
Legend!
Mine doesn't work, when paste the code on to my page code it works but when paste the same thing on to my site code it doesn't, it is underlined red and it doesn't go away, so how do I fix it?
did you change the name to the scripts name? its probably columnStrip1
the preloader is working on the homepage only - why? Also, on other pages it is showing the following error:-
"#columnStrip1 is not a valid selector"
@
Wix Training Academy, PLEASE HELP
Turn on the option that makes this column on all pages.
is there a way to add to the loading time a default extra time, because for me it still shows up uncomplete,
When you say a "default extra time," what do you mean?
i mean an extra time period before the fade away starts, that i can enter into the code, if the "wait till loaded" time period is not enough because, the website is still not depicted completely
Yeah it doesn't really show the whole preloader it workes but i want to know if you could add a certain amount of time that the preloader loads for like 5 seconds because is loading really quick for me
did you figure it out? need help too
this damn preloader is simply horrible why cant we just have a default preload time because for me it always fades away to soon
i take it this will work on editor x sites too
Thanks a lot
Absolutely!
why the button 6 on click ?????
I Wish RUclips Would Do A Preloader As Well
that is unable to do with lightbox, QQ
Is it works on mobile view?
I still have to test it, but I believe it will.
ComputerMDofGilbert but mobile view doesn't have an tool to add a strip....pls help with that
Tried the same but does not work. the error (red dot) remains
There is a different system for this now, need to make an update video.
how can i make file upload for multiple files ?
Can you please explain further?
@@TheWixTrainingAcademy i want to make photobook order form, file upload only able to upload single image, but my user have to upload upto 25 image, what should i do to tackle this problem ?
Nice
Thank you!
The code is not in the description!!
It is in a Google Drive link in the description.
Thx man :)
Damn, in the beginning there you almost sound like Walt Junior from Breaking Bad
Maybe I am...(just kidding ;)
Is this still working? I tried it once, didn't work for me, Hope I am not doing something wrong
Need to update this video
@@TheWixTrainingAcademy Please do, It will help me a lot
Why this is not recognising my strip , I have done everything according to you 😩
right click and go to "show on all pages" turn it on and then customize the strips name
just found out if you press control and space you will see it pop up with all javascripts value and you can just click it but no need to type in
Oh, awesome! Great find!
I think the code is wrong. It seems to me it just wait for 1500s before to show the later. So looks like just a delay
This video needs an update
Thank.... But how to set up time ? i want for 5s for example ... How to set up time .... PLEASE
What do you mean by "set up time?"
Hello, i mean by, how can i make preloader screen hide after 5 seconds or 7 seconds.
Can you please make a video how to use Wix code tools? I have html-code for ads that i can put on my website. Html ifram box don't work.
How to insert html code on wix code tools?
This is not working now
doesn't work for me :(
I need to make an update video
This person's voice reminds me of Sokka
Video starts at 2:11
are you junior walt ?
Hi, whenever I add a strip on a page and increase its height to full page the other elements like images also get dragged down! what should I do?
After loading the screen appears white with header only! All the elements and data get dragged down and we have to scroll the page!
please help me with this
Skip to 2:09
Please fix your mic when you before you start recording
Lol.. doesn't anyone really understand what that piece of code does? haha. it's not really a pre-loader. It loads with the page and plays for 1.5 seconds. the code uses the timeout function to do so. So when someone is actually waiting on the page to load, he wouldn't actually get any pre-loader screen. Haha. they have actually made you a fool by defining a function with a timer and called it waitforload. haha
Hey there,
Yes, I will have a new video soon of a much better pre-loader!
Stay tuned.
@@TheWixTrainingAcademy and... Is there a new video yet?
@@TheWixTrainingAcademy and... Is there a new video yet?
The setTimeout is used only for demonstration. In a real world application it should probably wait for a db query or api call to complete before revealing the page to the user
Here is a decent solution....
www.vorbly.com/Vorbly-Code/WIX-CODE-HTML-PRELOADER
THIS IS A LIE. THIS IS NOT A PRELOADER. YOUR PAGE HAS TO LOAD BEFORE IT EXECUTES THE JS.
Preloader should be in a lightbox not a strip, that way it will show up on any page not just the home page, your example is so simple and basic and doesn't serve the actual purpose of the preloader
You are correct. Need to update this video
@@TheWixTrainingAcademy Thanks. I'll be waiting ..
It is pretty much useless. Because wix still preloads ton of scripts before it starts to render your Loader.
There is a better process for this now. I have to release the video!
@@TheWixTrainingAcademy Well i found one where you put loader in the head where Analytic Scripts are placed as a custom code. Runs faster and is more light weight.
@@chrissre7935 could you please link me to this video? thanks.
Sure. Here you go: ruclips.net/video/fjSkD2m7CPo/видео.html