Insert HTML

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.
Post Reply
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Insert HTML

Post by RiaanN »

Good Day

You can find the HTML, CSS and two image files here: https://nofile.io/f/gC7SWoQTxOa/Desktop.zip


When you run the index.html file everything runs as design, but I have a problem importing the code into WB

WHAT I DID

1. Placed the following into Between <head></head> tag

<link href="body.css" rel="stylesheet" type="text/css">

2. Placed the following into After <body> tag

<section>
<div class="wave"></div>
</section>

3. With File Publisher I Add File

body.css
wave.png
aaa.jpg

When I preview it does not look the same as when you run the index file outside off WB. It is as if WB is ignoring part of the css file


Regards


Riaan
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert HTML

Post by Pablo »

I seems to work correct for me, I do not see any problems
Please note that I cannot give support on custom code, because it generally takes a lot of time for me too.

Also, note that the behavior of the code has nothing to do with WWB.
Your code will be inserted "AS IS". If it does not work then either the code is invalid, incomplete or conflicts with other code on the page.
User avatar
BaconFries
 
 
Posts: 5325
Joined: Thu Aug 16, 2007 7:32 pm

Re: Insert HTML

Post by BaconFries »

Just tried to download this on one of my PC's and is blocked by Windows Defender as deemed unsafe!!!.
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Re: Insert HTML

Post by RiaanN »

Hi BF

I can assure you that the file(s) are clean. In fact - it is so small I can even copy and paste the code here.

HTML CODE

<html>
<head>
<title> Wavy</title>
<link href="body.css" rel="stylesheet" type="text/css">
</head>

<body>
<section>
<div class="wave"></div>
</section>

</body>
</html>

CSS CODE

body
{
margin: 0;
padding: 0;
}
section
{
position: relative;
width: 100%;
height: 100vh;
background-image: url(aaa.jpg);
background-size: cover;
background-attachment: fixed;
}
section .wave
{
position: absolute;
width: 100%;
height: 143px;
bottom: 0;
left: 0;
background: url(wave.png);
opacity: 0.6;
animation: animate 10s linear infinite;
}
section .wave:before
{
content: '';
width: 100%;
height: 143;
background: url(wave.png);
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
animation: animate-reverse 10s linear infinite;
}
section .wave:after
{
content: '';
width: 100%;
height: 143;
background: url(wave.png);
position: absolute;
top: 0;
left: 0;
animation-delay: -5s;
opacity: 0.4;
animation: animate 20s linear infinite;
}
@keyframes animate
{
0%
{
background-position: 0;
}
100%
{
background-position: 1360px;
}
@keyframes animate-reverse
{
0%
{
background-position: 1360px;
}
100%
{
background-position: 0px;
}

}
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Re: Insert HTML

Post by RiaanN »

To explain a bit more:

When the 4 files are on your desktop and you run the index.html file, you will see the background picture as full screen. The wave effect is running in 3 stages with a difference in opacity.

BUT - When I import this into WB - the best I am able to see is the background picture as full screen, and the wave effect running in only 1 stage. That is why I am saying it is as if only the top part of the css file is being processed

I hope you understand what I mean

Regards

Riaan
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert HTML

Post by Pablo »

WWB does not change the behavior of the code. The code is interpreted by the browser.
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Re: Insert HTML

Post by RiaanN »

Hi Pablo

I understand that, but that does not bring me closer to understand why this is happening. As you can see from the code of the html and the css file it is not "major programming".

When you look at the page html code I can see that WB is going to create a css file during the publishing process. Maybe that is conflicting in some way with the css file that contains the custom code ??

One thing that I still don't understand is the purpose of the Inside <body> option. The way I understand this is:

After <body> - The custom code MUST be directly after the <body> tag, and no other code must be before that.
Before </body> - Code an be anywhere in the body tag, and other code may precede the custom code.
Inside <body> - No idea when this option must be used as opposed to the two above. What I do ss is that when I put the custom code in here, nothing works. But when I put the code in one of the other two, it works but with limited effect.

I have tested this outside of WB on Edge, Chrome and Firefox and it works.

I have tested this inside WB with Edge, Chrome and Firefox and all I see is the limited effect.

Regards

Riaan
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert HTML

Post by Pablo »

The only way I can help you with this is if I study the code you have inserted. This may take a lot of time for me. That is the reason why I cannot provide support on custom code.
If the code does not work then either the code is invalid, incomplete or it conflicts with other code on the page.
By adding custom code it is assumed that you know what you are doing and that you can detect these errors yourself.
If the code works outside WWB then it can also work with WWB.

'Inside <body' should be used for inserting custom attributes, not HTML or scripts.
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Re: Insert HTML

Post by RiaanN »

Hi Pablo

I understand that you are busy, and I don't want to waste your time - But maybe this is something for you to look into for the future.

The quick solution to the problem is to add the following code from the original html file to the START of the page:

<link href="body.css" rel="stylesheet" type="text/css">
<section>
<div class="wave"></div>
</section>

When you then look at Page HTML, you will see the following, and I guess you will agree with me, that it is not correct, but somehow it works

<link href="body.css" rel="stylesheet" type="text/css">
<section>
<div class="wave"></div>
</section>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 14 - http://www.wysiwygwebbuilder.com">
<link href="Untitled1.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
</body>
</html>

The code when placed in the correct parts, should show it as follows, but for some reason then it does NOT work.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 14 - http://www.wysiwygwebbuilder.com">
<link href="Untitled1.css" rel="stylesheet">
<link href="page1.css" rel="stylesheet">
<link href="body.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<div class="wave"></div>
</section>
</body>
</html>
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Insert HTML

Post by Pablo »

This solution is not correct, this results in invalid HTML code.
Please do not blame the software for this issue. I think there is mistake in your code.
For example, the height property should have a unit.

Code: Select all

height: 143;
https://www.w3schools.com/cssref/css_units.asp
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Re: Insert HTML

Post by RiaanN »

Hi Pablo

The height property is specified - Please see css

Regards


Riaan
User avatar
RiaanN
 
 
Posts: 72
Joined: Wed Sep 20, 2017 6:15 pm

Re: Insert HTML

Post by RiaanN »

Ahhh - I see what you mean.

Thank you Pablo, fault was indeed on my side
Post Reply