www.wysiwygwebbuilder.com

[rz] Alert - v1.2.2.2

The most lightweight solution to have a custom alert-box in your website that fits the design, scheme and colors!
This extension replaces the standard alert() function without any change in your code (yes, no changes required) and automatically works with the wb's native javascript form validation; even in (almost?) any other scenario that alert() is invoked.
It is cross-browser compatible and even supports old ones, tested in all major browsers and touch devices.
Sample project included.


DEMO

HTML 4.01 Transitional
W3C compliant


* New in version 1.2.2.2

- Improved alignment uniformity across platforms including mobiles.

* New in version 1.2.2.1

- Improved interaction with [rz] Button extension when it has i.e. 'push' effects.

* New in version 1.2.2

- Improved modal handling with less resources and better interacts with other extensions.
- Improved backward compatibility.

* New in version 1.2.1

- Improved the timed messages handling when the alert box is closed manually.
- The core has been moved to an external file for a faster navigation between pages.
- Minor core tweaks.

* New in version 1.2

- Optional timed messages:
alert('my message'); or alert('my message', 0); for the usual behavior.
alert('my timed message', 5000); i.e: the alert box will be closed after 5 seconds (any other value in milliseconds can be entered).
- Optionally hides the close button in timed messages.
- Optional extra layer-rearrangements on timed messages with hidden close button.

* New in version 1.1

- Added support for RWD.
- Improved message box positioning.

* New in version 1.0.0.1

- The alert box can be displayed outside an inline frame (useful for embedded forms with validation rules).
- Improved modal mode simulation.
- Allow or disallow drag/select the alert box elements.
- New extension: [rz] Alert (ifr) - connects with the alert's elements that are placed outside the contained page.


How to use?

1. Design a layer as you usually do (will be used as the new alert-box layout).
2. Add text object within the layer and setup the font type and the color (will be used to display the message).
3. Add a button (or any similar object - it will be used to close the alert message.
4. Drag and drop the [rz] Alert extension and put it on top (the last object you add).
5. Open the extension properties dialog and enter the layer id, the text object id and the button id.
6. Optionally, you can add other decorative elements to the layer.
7. Optionally, you can fine-tune the screen-cover color, the fade-in/out effect, etc.


Inlines frames:

If a form is called from a parent page, follow the same steps as described; just put the alert elements in the "caller" page instead of in the embedded page. And in the embedded page (i.e. a php form), just drag and drop the [rz] Alert (ifr) extension.


Enjoy!

NICE thank you!!!
BB

thnx for your feedback

WOW!
Looks great and will be useful.
Thank you.

hope so
thanks for your feedback

Cheers RZ. Like it alot!

thank you b for your feedback

* New in version 1.0.0.1:

- The alert box can be displayed outside an inline frame (useful for embedded forms with validation rules).
- Improved modal mode simulation.
- Allow or disallow drag/select the alert box elements.
- New extension: [rz] Alert (ifr) - connects with the alert's elements that are placed outside the contained page.

Heya! I miss the first release and now I can see beautiful alert message. Thanks

thank you adex1 for your feedback

UPGRADE AVAILABLE

* New in version 1.1

- Added support for RWD.
- Improved message box positioning.

I just added Alert plugin for the first time and it works great!
Only alert in contact form to email format does not show properly.
So if I do not write sign @ alert shows in the "bubble dialogue" instead of window that is defined with the Alert extension.

Please, check here: http://korkyraethno.com/template/rozalina/

is not an extension issue
remove the browser native validation
in the email field, general tab, type -> text
in validate tab, mode -> default and data type -> email address

Yes! Thank you

Is it possible to dissable blue focus frame on "OK" button?

are you meaning the outlined box or the focus itself?
if you are meaning the focus itself, can you pls give me a valid reason?

I mean blue outlined box. Box is ugly and anoying.
For example, I dissabled that blue frame in [rz] Button if I dissable "Get focus on click".

BTW: I know. This is Chrome behavior.
EDIT: FF dont have that behavior.

yes, of course you can disable the focus outline box
you can design those buttons as you want
i do not do it within the extension as it is up to the designer -- it's matter of html/css and every designer may have his very own taste about this
about the focus itself, i won't change this behavior as i follow navigability standards
btw, the blue box is not only in chrome, also opera changed its orange box to a blue one

Sorry. I didn't understand well.
You said that I use [rz] Button for OK alert button?

we are talking about the [rz] Alert()
you can design its related layer and elements as you want

I have just tried the [r] Button as alert OK button and works great.
Looks like I'm still not aware that the powerful tools I already have, but I'm learning...

cool!

I have one problem when I use [r] Button as alert OK button.
So, when I press OK (on alert), a web page does not remain at the current position - going to the top.

do you have an online sample to see?
anyhow, in [rz] Button, go to "advanced" category and change "override behavior on event" to yes

This is the site in progress:
This option what you said didn't help.
I'll delete link from here after.

sorry my mistake, i forgot to mention that you also need to add "void(0);" without the double quotes as event
btw, is not the normal way we use the [rz] Button, but always is a handy solution

Thanks
Now is ok.

yes clap your hands
(thanks for reporting this "workaround" back)

upgrade available (get in contact for more details)

* New in version 1.2:

- Optional timed messages:
alert('my message'); or alert('my message', 0); for the usual behavior.
alert('my timed message', 5000); i.e: the alert box will be closed after 5 seconds (any other value in milliseconds can be entered).
- Optionally hides the close button in timed messages.
- Optional extra layer-rearrangements on timed messages with hidden close button.

How do i download this?

follow this link: http://www.magnawebstudio.com/shop

I only need the Alert not the full pack.

menu at top right: packs, singles, ecommerce, etc...

I have now purchased the Alert and another program. However, it has not been sent to me as yet.

Please advise.

DaveP wrote:

SteffJay wrote:I have now purchased the Alert and another program. However, it has not been sent to me as yet.
Please advise.

Hi SteffJay,

I notice on his contact form it says working days are Sunday to Thursday, so you should receive them Tomorrow.

Thank you DaveP

SteffJay wrote:I have now purchased the Alert and another program. However, it has not been sent to me as yet.

Please advise.

thanks for your purchase, the extensions have been sent a few hours ago
i checked it at paypal and the confirmation of your transaction arrived with a 16-hour delay!
sorry for the inconvenience that this may have caused to you

DaveP wrote:I notice on his contact form it says working days are Sunday to Thursday, so you should receive them Tomorrow.

thank you for helping on this

* New in version 1.2.1

- Improved the timed messages handling when the alert box is closed manually.
- The core has been moved to an external file for a faster navigation between pages.
- Minor core tweaks.

* New in version 1.2.2

- Improved modal handling with less resources and better interacts with other extensions.
- Improved backward compatibility.

* New in version 1.2.2.1

- Improved interaction with [rz] Button extension when it has i.e. 'push' effects.

* New in version 1.2.2.2

- Improved alignment uniformity across platforms including mobiles.