*

Vink

  • *****
  • 329
    • NedDate.nl
Override default alert / confirmbox
« on: February 11, 2013, 11:13:19 AM »
Hi
When you find the default alert and confirm boxes ugly and want to use your
own images and  appearance (with css) here is the way, even the button style can be your own style
Anywere you have a javascript alertbox code simply replace the code by the new Jalert code
see:
http://neddate.nl/aa/Alert-Box/alertbox.html
« Last Edit: February 11, 2013, 11:42:30 AM by Vink »
Regards
Vink
osDate 2.19a | PHP 5.3.8 | MySQL  5.0.91

Re:  Override default alert / confirmbox
« Reply #1 on: February 11, 2013, 05:49:52 PM »
Hi very nice. Thanks for sharing.
Kind regards,

Jan Oppeneer
working on template for 2.6 and OsdatePDO

My sites under construction:

www.oudere-homo-mannen.com
www.homosenioren.com
www.hotdatingplanet.eu

Will be testing for Osdater.

*

Vink

  • *****
  • 329
    • NedDate.nl
Re: Override default alert / confirmbox
« Reply #2 on: February 11, 2013, 06:35:16 PM »
i forgot to mention.. if you use it in a tpl file remove the {strip} and {/strip}
« Last Edit: February 21, 2013, 10:40:54 AM by Vink »
Regards
Vink
osDate 2.19a | PHP 5.3.8 | MySQL  5.0.91

*

danielprasanna

Re: Override default alert / confirmbox
« Reply #3 on: June 15, 2013, 01:39:12 PM »
Thanks for the tip. Where can I download the code?

*

Pharg

  • *****
  • 2,060
  • osDate Version: osDate Evo v1.0
Re: Override default alert / confirmbox
« Reply #4 on: October 13, 2013, 04:47:53 AM »
Hi Vink,

Can you share the code please, got a member on here looking to change the alerts for insufficient privileges and want to and a button
to payment.php
Any chance you know how this is done?



Hi
When you find the default alert and confirm boxes ugly and want to use your
own images and  appearance (with css) here is the way, even the button style can be your own style
Anywere you have a javascript alertbox code simply replace the code by the new Jalert code
see:
http://neddate.nl/aa/Alert-Box/alertbox.html
Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDate v2.7 & osDateEvo v1.0 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35

*

Vink

  • *****
  • 329
    • NedDate.nl
Re: Override default alert / confirmbox
« Reply #5 on: October 13, 2013, 11:25:01 AM »
Hi
download the alert files from:
http://neddate.nl/aa/alertbox.rar

put the files in your javascript folder.

remove the  {strip} {/strip} from your tpl file (important!)

Put at the top of your page:
Code: [Select]
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<link rel="stylesheet" href="javascript/alert-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/alert-main.js"></script>

now... when you have a form validation with a normal javascript alert ...like
alert("You didn't enter you name");

you can replace this with your own custom alert box:

Code: [Select]
function validate(form)
{ldelim}
   if (form.txtname.value == '') {ldelim}
$(function() {ldelim}
 jAlert('<img src="stopspam.gif" align="absmiddle">&nbsp;&nbsp;Er is geen Naam opgegeven.<br>&nbsp;', 'Bericht');
   {rdelim});
      return false;
    {rdelim}

   if (form.txtemail.value == '') {ldelim}
   $(function() {ldelim}
     jAlert('<img src="stopspam.gif" align="absmiddle">&nbsp;&nbsp;Er is geen Emailadres opgegeven.<br>&nbsp;', 'Bericht');
     {rdelim});

        //alert("Geef s.v.p. een Emailadres op.");
        return false;
    {rdelim}




Regards
Vink
osDate 2.19a | PHP 5.3.8 | MySQL  5.0.91

*

Pharg

  • *****
  • 2,060
  • osDate Version: osDate Evo v1.0
Re: Override default alert / confirmbox
« Reply #6 on: October 13, 2013, 01:26:02 PM »
Thanks Vink for the code  :D

Hi
download the alert files from:
http://neddate.nl/aa/alertbox.rar

put the files in your javascript folder.

remove the  {strip} {/strip} from your tpl file (important!)

Put at the top of your page:
Code: [Select]
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<link rel="stylesheet" href="javascript/alert-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/alert-main.js"></script>

now... when you have a form validation with a normal javascript alert ...like
alert("You didn't enter you name");

you can replace this with your own custom alert box:

Code: [Select]
function validate(form)
{ldelim}
   if (form.txtname.value == '') {ldelim}
$(function() {ldelim}
 jAlert('<img src="stopspam.gif" align="absmiddle">&nbsp;&nbsp;Er is geen Naam opgegeven.<br>&nbsp;', 'Bericht');
   {rdelim});
      return false;
    {rdelim}

   if (form.txtemail.value == '') {ldelim}
   $(function() {ldelim}
     jAlert('<img src="stopspam.gif" align="absmiddle">&nbsp;&nbsp;Er is geen Emailadres opgegeven.<br>&nbsp;', 'Bericht');
     {rdelim});

        //alert("Geef s.v.p. een Emailadres op.");
        return false;
    {rdelim}





Regards,
Pharg ( Phill )

REMEMBER: ALWAYS BACKUP BEFORE YOU MAKE ANY CHANGES!!

osDate v2.7 & osDateEvo v1.0 | PHP: 5.3.42 & PHP: 5.6.18 | MySQL: 5.5.35

*

marcam

  • ****
  • 267
Re: Override default alert / confirmbox
« Reply #7 on: October 13, 2013, 07:02:58 PM »
Hi demo ??

Marc
osdate 2.5.4
Flashchat 4.7
php 5.2.7

*

Vink

  • *****
  • 329
    • NedDate.nl
Re: Override default alert / confirmbox
« Reply #8 on: October 13, 2013, 09:36:06 PM »
I use it all over my site... but to see it in action.. click "contact"   so you don't have to subscribe
Regards
Vink
osDate 2.19a | PHP 5.3.8 | MySQL  5.0.91

*

lfa

  • *
  • 35
Re: Override default alert / confirmbox
« Reply #9 on: October 19, 2013, 04:31:24 PM »
Thank you Vink and thank you Pharg!

Please help. I'm trying to modify the insufficientPrivileges alert in the index_header.tpl file but I haven't got it to work yet.

1. I have downloaded the alert files from http://neddate.nl/aa/alertbox.rar and put them in my javascript folder
2. I put at the top of my index_header.tpl page:
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<link rel="stylesheet" href="javascript/alert-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/alert-main.js"></script>
3. But I'm not sure how to modify the insufficientPrivileges alert in the index_header.tpl file. See the index_header.tpl code below:

<?xml version="1.0" encoding="{lang mkey='ENCODING'}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

{if $title != '' }
   <title>{$title} {if $page_title ne ""}- {$page_title}{/if}</title>
{elseif $config.site_title ne '' }
   <title>{$config.site_title|stripslashes} {if $page_title ne ""}- {$page_title}{/if}</title>
{else}
   <title>{lang mkey='title'} {if $page_title ne ""}- {$page_title}{/if}</title>
{/if}
<meta http-equiv="Content-Type" content="text/html; charset={lang mkey='ENCODING'}" />
<meta name="keywords" content="{$config.meta_keywords} {$title} {$page_title} " />
<meta name="description" content="{$title} {$page_title} {$config.meta_description} " />

<link href="{$css_path}default.css" rel="stylesheet" type="text/css" />
{$addtional_css}
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<link rel="stylesheet" href="javascript/alert-style.css" type="text/css" media="screen" />
<script type="text/javascript" src="javascript/alert-main.js"></script>
<script type="text/javascript" src="{$DOC_ROOT}javascript/functions.js"></script>
<script type="text/javascript" src="{$DOC_ROOT}javascript/validate.js"></script>
<script type="text/javascript" src="{$DOC_ROOT}javascript/enlargeit.js"></script>
{if $config.enable_shoutbox == 'Y' or $config.enable_shoutbox == '1'}
   <script type="text/javascript" src="{$DOC_ROOT}javascript/shoutbox.js"></script>
{/if}
{$addtional_javascript}

<script type="text/javascript">
/* <![CDATA[ */

var loadingTag = "{lang mkey='loading'}";
var modeRewrite = "{$config.enable_mod_rewrite}";
var docRoot = "{$smarty.const.DOC_ROOT}";
var alphanumeric_chars = "{lang mkey='alphanumeric'}";
var alphanum_chars = "{lang mkey='alphanum'}";
var text_chars = "{lang mkey='text'}";
var full_chars = "{lang mkey='full_chars'}";

{if $config.use_popups == 'N'}
var use_popups = false;
{else}
var use_popups = true;
{/if}
{if $config.use_profilepopups == 'N'}
var use_profilepopups = false;
{else}
var use_profilepopups = true;
{/if}
var ajaxImSiteName = "{$config.site_title|stripslashes}";
var enl_darksteps=3;
var enl_gifpath="{$DOC_ROOT}javascript/images/";


/* ]]> */
</script>

<script type="text/javascript">
/* <![CDATA[ */
function insufficientPrivileges(){ldelim}
   alert("{lang mkey='insufficientPrivileges'}");
   return false;
{rdelim}

function newvalidateLogin(newform)
{ldelim}
   if (newform.txtusername.value == '') {ldelim}
      alert("{lang mkey='signup_js_errors' skey='username_noblank'}");
      return false;
   {rdelim}
   if (newform.txtpassword.value == '') {ldelim}
      alert("{lang mkey='signup_js_errors' skey='password_noblank'}");
      return false;
   {rdelim}
{rdelim}
function simplesearchZip(value) {ldelim}
       osDatehttp.open('get', 'simplesearchZip.php?a=' + value );
       document.getElementById('simplesearch_zip').innerHTML="";
       osDatehttp.onreadystatechange = osDatehandleResponse;
       osDatehttp.send(null);   
{rdelim}

/* ]]> */
</script>
</head>

*

Vink

  • *****
  • 329
    • NedDate.nl
Re: Override default alert / confirmbox
« Reply #10 on: October 19, 2013, 04:51:43 PM »
Hi

It's pretty straight forward..

you have now:
Code: [Select]
function insufficientPrivileges(){ldelim}
   alert("{lang mkey='insufficientPrivileges'}");
   return false;
{rdelim}
 

make it like this:
Code: [Select]
function insufficientPrivileges(){ldelim}

$(function() {ldelim}
     jAlert('you have insufficient Privileges<br>&nbsp;', 'Bericht');
     {rdelim});

   return false;
{rdelim}
 

and so on for the rest of your alerts.
You can add images as well... see example
Regards
Vink
osDate 2.19a | PHP 5.3.8 | MySQL  5.0.91

*

lfa

  • *
  • 35
Re: Override default alert / confirmbox
« Reply #11 on: October 19, 2013, 05:37:40 PM »
Thank you Vink. It works beautifully!