Canvas Background - Is it Possible?

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 12:48 pm

Hi All,

I would like to add that background canvas in my project:
http://joanclaret.github.io/html5-canvas-animation/

If possible, in a GLOBAL mode (I mean, one set to entire website pages), but if doesn't, no problem at all.

I tried to put this within HTML tool and within PAGE HTML property - but I got no success at all.

Can anyone help me?

Thanks in advance.

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo » Wed Nov 01, 2017 1:30 pm

If the code works in another page then it will also work in a WWB page.
If the code foes not work then either there is an error in the code or a conflict with other code on the page.

Related tutorial:
http://wysiwygwebbuilder.com/add_html.html

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 1:40 pm

Thanks Pablo, I will try your recommended solution.
I'll be back soon with some report.

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 5:18 pm

Pablo, I sent to your mailbox the link of a ZIP with the code I want to add in my pages.

I guess the problem can be related to the lack of a position set to "Before </HTML>".

I tried all positions within the PAGE HTML settings and I had no result...
I tried also put it into a <DIV> using the <HTML> control.

Basically I want to set this as my default background in all pages and even if I have to replicate it on all pages, no problems.

If you could help me to get a solution, I will appreciate a lot.

Thank you!

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo » Wed Nov 01, 2017 5:45 pm

I'm sorry but I cannot help you with third party code. For me it may also take several hours to figure out how this works.
However the problem is not related to WWB.

Tips:
Script links and definitions should go between the head tags.
Visible code should either be in an HTML object or between the body tags.

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 6:01 pm

I understand Pablo.

I had done exactly what you recommend... but no success at all.
Anyway, thank you again to try a help.

Kindest regards,
David

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo » Wed Nov 01, 2017 6:27 pm

What did you exactly?
What is the error?

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 6:43 pm

Pablo,

I put the <STYLE> and <SCRIPT> tags into <HEAD> section.

Code: Select all

      
        <style>
        #canvas{
            width: 100vw;
			height: 100vh;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
			z-index: -1;
        }
        .canvas-wrapBG{
            position:relative;
			width: 100vw;
            height: 100vh;
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -9999;
        }
       </style>
      
      
        <script src="three.min.js"></script>
        <script src="projector.min.js"></script>
        <script src="canvas-renderer.min.js"></script>
        <script src="3d-lines-animation.js"></script>
	<script src="jquery-3.2.1.slim.min.js"></script>
        <script src="color.js"></script>
I put the following in the <BODY> section:

Code: Select all

   
    <section class="canvas-wrapBG">
        <div id="canvas" class="gradient">
		</div>
    </section>
I set the PAGE PROPERTIES to BACKGROUND = Transparent.

When I make a PREVIEW, simply the page functions as a charm but without any color, effect and background.
Since all other codes run 100% (CSS3 and EVENTS) I can see that I'm not facing any "code error" or duplicate script.

I tried also to take off the call of JQUERY (since project has its own call) and the effect is the same...

And if I put the CANVAS code within a <HTML> control, I had no effect at all - same behaviour.

Thank you for asking.

User avatar
BaconFries
 
 
Posts: 4152
Joined: Thu Aug 16, 2007 7:32 pm

Re: Canvas Background - Is it Possible?

Post by BaconFries » Wed Nov 01, 2017 7:11 pm

Just as Pablo I am not really offering any help but more of a question to you. What is the following jQuery?
<script src="jquery-3.2.1.slim.min.js"></script> this is not part of the original scripts in the download so why are you using? You should only use the scripts that you downloaded as adding others can break it as it may not be compatible with the other files. Remove this and only use the scripts/ files that came in the download.

User avatar
Pablo
 
Posts: 14143
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Canvas Background - Is it Possible?

Post by Pablo » Wed Nov 01, 2017 7:11 pm

Did you also publish the script files to the same folder as the page?

Note that you can view script errors in the debugger of your browser (F12)

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 7:26 pm

Hi Baconfries, thank you for help too.

The page does not execute the function as expected EVEN if I take off the JQuery.
I utilize here as default the "JQuery-3.2.1.min" and this one (Slim) was downloaded from the JQuery official page.

Anyway, even completely erasing this line of call, the behaviour is the same - no error in any other script/effect, but this specific one does not run.

Pablo, I did the test you recommend also. I loaded the scripts from basefolder (and they are there) and from the Threejs folder. I had put them also in the SCRIPTS folder I have here and changed the load instruction to reflect that new folder.

In time: I have CHARTJS scripts also loading 100%. The page plots these charts without any problem. Only the background is not functioning.

Pablo, I will test F12 and return in minutes...

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 7:35 pm

Ops!

Yes Pablo, you are right. I have here ERR_FILE_NOT_FOUND.

My steps here:

1- In SITE MANAGER I pressed right-button and create a FOLDER (threejs)
2- In this folder I had IMPORTED EXTERNAL FILES (the scripts)
3- I see here IN SITE MANAGER the folder and below it (within it), all scripts.
4- But, when I open the location of my project, I don't see that folder.

Anyway, I see all scripts in the "base-folder" of the project (the main foder).
Even changing the load instruction like these:

Code: Select all

        
        
        <script src="three.min.js"></script>
        <script src="projector.min.js"></script>
        <script src="canvas-renderer.min.js"></script>
        <script src="3d-lines-animation.js"></script>
        <script src="color.js"></script>

I continue to get "ERR_FILE_NOT_FOUND in F12 of Chrome...

NOTE: other scripts like CHARTJS are being loaded from its own folder and I see the same in SITE MANAGER ("scripts" folder).

Thank you BOTH to try help me!!

User avatar
BaconFries
 
 
Posts: 4152
Joined: Thu Aug 16, 2007 7:32 pm

Re: Canvas Background - Is it Possible?

Post by BaconFries » Wed Nov 01, 2017 7:44 pm

Note then your issue may or will be jQuery conflicts. You mention that you are using Charts.js using jQuery I take it? if so then there will be conflicts as you can only have one version on the page at one time and both scripts will need the same version. This means is charts using for talking sake v2.2.0 then then the script you are using using needs the same.

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 7:48 pm

Hi Bacon,

CHARTJS is not using JQuery ...

I notice a curious thinkg here:

- I load the CHARTJS in this page normally in <HEAD> section. But Chrome reports FILE_NOT_FOUND.
- But ALL charts here are functioning normally and the load of this script is just performed once.

Anyway, the other scripts to background are not functioning as should and Chrome reports also FILE_NOT_FOUND, even I seeing them in the base-folder and adapting the LOAD of them to this.

Baconfries, would like to view the scripts I'm trying to add here?

MorningLight
 
 
Posts: 133
Joined: Tue Jul 04, 2017 12:15 pm

Re: Canvas Background - Is it Possible?

Post by MorningLight » Wed Nov 01, 2017 8:20 pm

Hmmm.....

Now I'm seeing that the page is NOT LOADING really ANY script I had set in <HEAD>.

I found in some point there the following instrunction:

Code: Select all

/*
* <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
*/

So, due to MY FAULT the "Chart.min" was STILL BEING LOADED from Cloudflare - and I really do not want this.
I remarked this line (using <!-- -->) and all charts stopped functioning.

So, even I using:

Code: Select all

<script src="scripts/Chart.min.js"></script>
this script is not being loaded. Notice:

1- The folder exists in SITE MANAGER and I see the JS script within it.
2- The folder ALSO exists in my disk, below the base-folder of the project.

And I'm running the PAGE PREVIEW (Shift Preview), not entire "site preview".

So, why the script is not being loaded?

In time: I changed this line to only "src=Chart.min.js" (and the file also exists within the base-folder) and I had the same result: script was not loaded. But if I return the "Cloudflare" instrunction, the script loads normally....

Am I doing something wrong here?

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests