Dark Screen OVERLAY (fail) - Q&A HTML, CSS, Javascript

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
ConsciouSince2017
 
 
Posts: 37
Joined: Fri Apr 13, 2018 8:23 pm

Dark Screen OVERLAY (fail) - Q&A HTML, CSS, Javascript

Post by ConsciouSince2017 » Fri Aug 10, 2018 11:29 am

To simplify explanation, I created a bare bones
page within WWB v12.5. It has only a text block and a shape which
is set to behave as a button...

Image

The goal is to click this "button" and
this causes a transparent overlay to
cover the entire page (50% alpha black) and display a text...

Image

Here is my bare bones code, generated by WWB at preview time and viewed on Notepad++
HTML (left) and CSS (right). I manually went in there and added the various sections you see here, all inspired from W3Schools.
I know it's hard to see. Click here for Full Screen

It would be a disservice if I left this here w/o explanation, so here goes.
In section #1 (green circle), a <div> is created to hold the text inside it, and the CSS over on the right sets the initial appearance to invisible (display: none)
In section #2, the WWB Shape (id="Shape1") has an event added "onClick", which triggers the javascript function shown
in section #3.
So what we have is a simple button that should be triggering the 'overlay div' to appear when the Shape is clicked, and remains covering the entire viewport until the user clicks anywhere, which then triggers the 'off' function. Easy, right?


Image

At first, I thought it was a z-index issue. I tried using way higher z-order number. Didn't work. Then I thought only <button> were allowed to trigger the javascript function, so I created a temporary html button...it worked: the button, when clicked, toggled the overlay nicely. But I didn't want a hard-coded html button for this project -- I wanted the shape I drag/dropped into the page to be what triggers the event. What I see at the moment is this flicker or flash, as if the code acknowledges the click but as soon as the overlay appears it instantly disappears and all I see is this momentary flash...

Image

What could I be doing wrong?

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

Re: Dark Screen OVERLAY (fail) - Q&A HTML, CSS, Javascript

Post by BaconFries » Fri Aug 10, 2018 1:22 pm

Tried with a shape and it works for me by simply using the on() as the onclick event applied directly to shape nothing else.

User avatar
ConsciouSince2017
 
 
Posts: 37
Joined: Fri Apr 13, 2018 8:23 pm

Re: Dark Screen OVERLAY (fail) - Q&A HTML, CSS, Javascript

Post by ConsciouSince2017 » Fri Aug 10, 2018 11:49 pm

Well, blow me down! You're right, Bacon Fries!! Adding the event listener directly onto the shape worked, instead of hacking into the html file later. I noticed the huge difference: WWB added one tiny code to the javascript that I had not...

Image

Could not believe a simple "return nothing" for the JS function could affect this the way it was! But it made the difference!!...

Image

For those forum members reading this in the distant future (like, the year 2050+), I went back to tidy up the code. I realized I actually can insert all this code while inside the WWB workspace. No need to hack into it later using Notepad++ (althought that's always fun!).

Step 1) Most custom code for my projects goes inside 'Page HTML' (on some occassions, must be done specifically on 'Object HTML')...

Image

Step 2) I add the invisible <div> here, which will play the role of the full-size overlay, and also the CSS that describes it pasted immediately below. The javascript was inserted right at the end of the html, under the tab "Before </body>"...

Image

Image

Step 3) ...and of course, the Shape itself needs to have the event listener, which goes here..

Image

DONE!! There is no
feeling that compares
to this sense of immediate gratification.
For lots of things in life, you gotta wait YEARS to reap rewards. But here in the wonderful world of wysiwyggers, it happens one code snippet at a time...

Image


...one last thing before I return to the Coding Cave and save the world: "Thank you, Bacon Fries, for your help!" :D

Image

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests