Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post

    Error box customization

    http://pastebin.com/uqqRMhui

    Hi to all. In code that i`ve been pasted, is shown a alert box. Can i create a function who change text in alert box"Client is not specified !" and "ERROR" text too. I want to implemented to my future site.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You can use something called a 'modal window'. There's a lot of modal window code around, just search for it.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DrDOS View Post
    You can use something called a 'modal window'. There's a lot of modal window code around, just search for it.
    Nope this is not what i`m looking for. Its simple maybe, but i cant do it.
    I want just use some function() to modify the text in error box. To change "ERROR" and to change "client is not selected !"

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    <!DOCTYPE html>
    Code:
     
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title></title>
     <style type="text/css">
      #divmsg {
       position: absolute;
       top: 50%;
       left: 50%;
       width:302px;
       height:181px;
       margin-left: -150px;
       margin-top: -90px;
       background:#f8f8f8;
       text-align:center;
       -webkit-user-select: none;  
       -moz-user-select: none;    
       -ms-user-select: none;      
       user-select: none;      
      }
      
      #header{
       text-align:left; 
       background: #F0F0F0;
       height: 50px;
      }
      
      #header-error{
       margin:14px 0 0 20px;
       float:left;
       COLOR:7f8488;
       font-family:arial;
       font-size: 15px;
      }
      
      #header-x{
       margin:-14px 0px;
       float:right;
       font-weight:bold;
       COLOR:CECECE;
       font-family:arial;
      }
      
      div.ok{
       width:95px;
       line-height: 36px;
       margin:20px 0 20px 98px;
       background:#c8c8c8;
       -webkit-user-select: none;  
       -moz-user-select: none;    
       -ms-user-select: none;      
       user-select: none;
      }
     </style>
     <script type="text/javascript">
      function fclick(){
       var div = document.getElementById("top");
       div.style.display = "block";
      }
      function fclose(){
       var div = document.getElementById("top");
       div.style.display = "none";
      }
      function fchange(Er,Ms){
       document.getElementById("header-error").innerHTML=Er;
       document.getElementById("error-text").innerHTML=Ms;
      }
     </script>
    </head>
    <body>
     <div id="divbody">
      <input type="button" value="click" onclick="fclick()" />
      <input type="button" value="change" onclick="fchange('NoError','AOK')" />
     </div>
     <div id="top" style="display:none;position: absolute;width: 100%;height: 100%; background: url('background.jpg');">
      <div id="divmsg">
       <div id="header">
        <div id="header-error">ERROR</div>
        <div id="header-x" href="#" onclick="fclose()">
         <p><img src="X.jpg"></p>
        </div>
       </div>
       <p id="error-text" style="font-size:14px; margin:35px 0 0 0; font-family:arial" >Client not specified !</p>
       <div class="ok" href="#" onclick="fclose()" style="font-size:14px; font-family:arial; font-weight:bold; color:7f8488">OK</div>
      </div>
     </div>
    </body>

  • Users who have thanked DaveyErwin for this post:

    val10 (09-26-2013)

  • #5
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post
    DaveyErwin this is the code that i need but now i need another solution for this problem. I have to make this alert box to appear without DIVs and html code. Only JavaScript. Now i dont have a idea how ot do that. This is my latest code :
    http://pastebin.com/f0cAk1Js

    Actually div who create alert box is has to be gone. Only on click event has to be show alert box. NO HTML CODE.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You just need to declare a variable, change that variable to whatever you want, based on conditional statements, then use it as the alert value.
    Code:
    var my_alert = 'HELLO';
    my_alert = 'GOODBYE';
    alert(my_alert);
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #7
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DrDOS View Post
    You just need to declare a variable, change that variable to whatever you want, based on conditional statements, then use it as the alert value.
    Code:
    var my_alert = 'HELLO';
    my_alert = 'GOODBYE';
    alert(my_alert);
    But i want the design on alert box is not ot change. And how to append css to alert box.

  • #8
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by val10 View Post
    But i want the design on alert box is not ot change. And how to append css to alert box.
    You cannot change the alert box, it's why you were supplied with the HTML code. You cannot apply .css to the alert box.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #9
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by DrDOS View Post
    You cannot change the alert box, it's why you were supplied with the HTML code. You cannot apply .css to the alert box.
    Ok and how to eliminate div-s and get the same result. If you have some idea share it, i`m finish with ideas. My boss when see my code, just delete div-s and tell me how about now, is the alert box show or not. Offcourse is not showing. This site is my project and i have to do it.But dont know how to proceed.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    It's confusing whether you want a native alert box using alert() or a custom alert box with HTML and CSS for styling.

  • #11
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Quote Originally Posted by val10 View Post
    I have to make this alert box to appear without DIVs and html code. Only JavaScript.
    Code:
     
     !DOCTYPE html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
     <title></title>
     <style type="text/css">
      #divmsg {
       position: absolute;
       top: 50%;
       left: 50%;
       width:302px;
       height:181px;
       margin-left: -150px;
       margin-top: -90px;
       background:#f8f8f8;
       text-align:center;
       -webkit-user-select: none;  
       -moz-user-select: none;    
       -ms-user-select: none;      
       user-select: none;      
      }
     
      #header{
       text-align:left; 
       background: #F0F0F0;
       height: 50px;
      }
     
      #header_error{
       margin:14px 0 0 20px;
       float:left;
       COLOR:7f8488;
       font-family:arial;
       font-size: 15px;
      }
     
      #header_x{
       margin:-14px 0px;
       float:right;
       font-weight:bold;
       COLOR:CECECE;
       font-family:arial;
      }
     
      div.ok{
       width:95px;
       line-height: 36px;
       margin:20px 0 20px 98px;
       background:#c8c8c8;
       -webkit-user-select: none;  
       -moz-user-select: none;    
       -ms-user-select: none;      
       user-select: none;
      }
     </style>
     <script type="text/javascript">
      var alertBox = {
       fclick: function(){
        var div = document.getElementById("top");
        div.style.display = "block";
        alertBox.changeText();
       },
       fclose: function(){
        var div = document.getElementById("top");
        div.style.display = "none";
       },
       changeText: function(){
        document.getElementById("header_error").innerHTML = 'This is warning';
        document.getElementById("text_msg").innerHTML = 'go awayyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy';
       },
      }
     </script>
    </head>
    <body>
     <div id="divbody">
      <input type="button" value="text" onclick="alertBox.fclick()" />
     </div>  
     
    <script>
    topDiv=document.createElement("DIV");
    topDiv.id="top";
    topDiv.style.cssText="display:none;position: absolute;width: 100%;height: 100%; background: url('background.jpg');";
    divmsg=document.createElement("DIV");
    divmsg.id="divmsg";
    header=document.createElement("DIV");
    header.id="header";
    header_error=document.createElement("DIV");
    header_error.id="header_error";
    header_error.cssText="white-space:nowrap;width:6em;overflow:hidden;text-overflow:ellipsis;";
    header_error.innerHTML="ERROR";
    header_x=document.createElement("DIV");
    header_x.id="header_x"; 
    header_x.onclick=function(){alertBox.fclose()};
    p1=document.createElement("P");
    img1=document.createElement("IMG");
    img1.src="X.jpg";
    text_msg=document.createElement("P");
    text_msg.id="text_msg";
    text_msg.innerHTML="Client not specified !";
    text_msg.cssText="white-space:nowrap;width:15em;overflow:hidden;text-overflow:ellipsis;font-size:14px; margin:35px ; font-family:arial";
    div1=document.createElement("DIV");
    div1.className="ok";
    div1.onclick=function(){alertBox.fclose()};
    div1.cssText="font-size:14px; font-family:arial; font-weight:bold; color:7f8488";
    div1.innerHTML="OK";
    document.body.appendChild(topDiv)
    topDiv.appendChild(divmsg)
    divmsg.appendChild(header)
    divmsg.appendChild(text_msg)
    divmsg.appendChild(div1)
    header.appendChild(header_error)
    header.appendChild(header_x)
    header_x.appendChild(p1)
    p1.appendChild(img1)
    </script>
    </body>
    Last edited by DaveyErwin; 09-26-2013 at 08:27 PM.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    The alert box is not reusable because the title and content are hardcoded.

    Why not do this?

    PHP Code:
    var alertBox = {
        
    fclick: function (contenttitle) {
            var 
    div document.getElementById("top");
              
    div.style.display "block";
            
    //I don't think putting these in its own function is necessary
              
    document.getElementById("header_error").innerHTML title || 'Alert';
              
    document.getElementById("text_msg").innerHTML content;
          },
          
    fclose: function () {
            var 
    div document.getElementById("top");
              
    div.style.display "none";
          }
    //no trailing comma at the end (IE doesn't like it!)
    }; 
    Code:
    <input type="button" value="text" onclick="alertBox.fclick('Go awayyyyyyyyyyyyyy', 'This is warning')" />
    <input type="button" value="text" onclick="alertBox.fclick('How are you?', 'Greeting')" />
    <input type="button" value="text" onclick="alertBox.fclick('Hello there! This alert has a default title.')" />

  • #13
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post
    Quote Originally Posted by glenngv View Post
    It's confusing whether you want a native alert box using alert() or a custom alert box with HTML and CSS for styling.
    Just want to visualize error box like my first code.
    "DaveyErwin" thank you, i just started your code and this is it, hope my boss is like it. I just have to insert "ellipsis" and its done.
    "glenngv" i try your code but it doesn`t work , maybe i do something wrong.

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Quote Originally Posted by val10 View Post
    "glenngv" i try your code but it doesn`t work , maybe i do something wrong.
    Works here: http://jsfiddle.net/noypiscripter/kDecK/

  • #15
    New Coder
    Join Date
    Jul 2013
    Posts
    48
    Thanks
    9
    Thanked 1 Time in 1 Post
    Again disapproval. This method of showing the box is has to be a markup with show method. First think that i have in mind is to copy the code where is crete div and divs into fclick fuction. But is this a right think or you have something else in mind. This alert box is has to be use in other sites, just giving him the text for the fields.
    Last edited by val10; 09-27-2013 at 07:23 AM.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •