Sami's Site: CSB - Trellix Support and Tests
|
   |
Test Index · CSB4 Rollover Links · Link Styles 1 · Link Styles 2 · Link Styles 3 · iFrame Tutorial - IFrames described in detail! · Form sample in iFrame · Arrowhead · Excel · Color Blind · Websafe Fonts and tests · Make an Alert Box · Webgem Placeholder Images · LINK HOVER TOOLTIP · OverLIB tooltip · Disguise Email · Quote of the Month · Map to your location! · Link Border Test · FORUM
Make an Alert Box
All three choices above cause an alert popup with similar results: The alert box is informational only, does not require input from your visitor and does not return any kind of value.
The FANCY alert button above is an ordinary button that has been modified by me to suit my site. As you can see, you can add color an alert button, you can add paragraphs in an alert button, and you can even get rid of the dotted line when you press the button. See the codes below for the ordinary and all of the enhancements.
Want to have centered text, or different color for your alert box when you enter the page?
Check out this faux alert box script that actually uses a tiny new window!
GRAY POPUP ALERT ON ENTERING THIS PAGE: (CONFIRM ENTRY)
This is the code I placed on THIS PAGE to ask if you wanted to continue.
If the visitor clicks Cancel, they will be returned to the previous page.
This code is placed at the TOP of your page that you want to have the alert.
Every time someone loads the page with this code, the alert is activated.
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix webgem)
|
BUTTONS - NO ALERT, JUST A LINK TO ANOTHER PAGE!
If the visitor clicks the button, the visitor will be taken to the new page just like any regular link.
This button does not cause an alert and can be used for any standard link.
TIP: If you put the POPUP alert on the new page, then you can use this button on some other page to send your visitor to the new page. The page with the POPUP code will cause the alert that askes for OK before entering/warning. Used alone, this button will NOT cause an alert.
ORDINARY BUTTON (link, no alert)
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix webgem)
FANCY BUTTON (link, no alert)
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix webgem)
UNDERSTANDING THE CODE:
I added code to the ordinary button. The fancy alert box code has the following additional code:
(any of these snippets can be removed from the code safely if not wanted!)
 color to a plain button, add this: style=" background-color:#660099; color:#FFFFFF;" remove the dotted line from the button when clicked, add this: onfocus="this.blur()"
|
THE CODES BELOW CAUSE AN ALERT ON THE CURRENT PAGE
THESE DO NOT LINK TO ANOTHER PAGE
So why would you want an alert box and a button to access it? You can provide an instruction for the user inside the alert box.
|
Example Instruction alert:
|
This button is used on the on one of the CSB/Trellix color charts, between sections, I provide alert buttons (named "Instructions" as see above) to assist in the use of the chart that allows background color change so you can see text colors against a variety of colors.
(first time visitors to that color chart page, it can take up to a couple minutes to load on slow connections!)
|
|
SIMPLE TEXT LINK:
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix webgem)
UNDERSTANDING THE CODE:
So, what would happen If you change return false to return true?
After clicking OK on the message box, the browser would want to return to the url in the href=" " part of the code. Since this sample has href=" " (no address), the browser will default back to your main server address, which is usually your home page, index.htm.
|
ORDINARY BUTTON:
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix webgem)
|
FANCY BUTTON:
To capture the code, press Select All then COPY (Ctrl C) the contents.
Paste (Ctrl V) this script into an Insert > HTML (Trellix webgem)
UNDERSTANDING THE CODE:
I added code to the ordinary button. The fancy alert box code has the following additional code:
(any of these snippets can be removed from the code safely if not wanted!)
2nd paragraph: add \n\ to break the line, then add another for a blank line if wanted.color to a plain button, add this: style=" background-color:#660099; color:#FFFFFF;" remove the dotted line from the button when clicked, add this: onfocus="this.blur()" |