Show div after sending form?

[nashsaint]

Hi,

 

It's one of those twitter effects again, it's driving me mad for days.  If you are using twitter then you noticed that everything you send a message, a div (i think it is) appears for 2 seconds on the very top of the page then disappears.  I like this effect.  Does anyone here know or have any idea how to do this? Cause I have a form and I'd like that effect to appear as soon as Submit button is pressed.

 

Thanks in advance for any help.

 

 

[lupld]

do you know anything about javascript? I think what you're looking for is a div that covers the whole page with the style set to invisible, and then when you click the submit button, an onclick="function();" sets the div to visible, "getElementByID("ID").style.visibility = true", pauses, and then sets the same thing to false.

 

I haven't messed around with web design for about 6 months, so I know some of what I told you isn't right, but it might be enough to point you in the right direction...

 

You could use firefox with the firebug add-on to find out what javascript twitter calls and look for the code I talked about. Then again, there might be a way easier way to do this and someone else would be a better help.

 

I don't use twitter, but I'll go see if I can find what you mean.

[lupld]

It also sounds like twitter might be putting this div up while it's sending an ajax request (just guessing, I honestly have no idea what you want other than to show and hide a div), during the ajax request set the div to visible with javascript, and then set it to invisible after you get a reply.

 

Also, I'm guessing cause you're asking, either you don't know javascript and want an exact code example to make fit on your page, or I don't get what you're asking and it's above me at the moment.

 

I'm not good at writing javascript, but if you zip and post the source of a twitter page I'll look through the source see if I can find what you want.

[nashsaint]

thanks for the idea.  this is what i done so far.

 

Function:

<script type="text/javascript">

function showMagicDiv() {

document.getElementById( "magic_div" ).style.display = 'block';

setTimeout("hideMagicDiv()", 2000);

}

 

function hideMagicDiv() {

document.getElementById( "magic_div" ).style.display = 'none';

}

</script>

 

and the HTML

<div id="container">

<div id="magic_div">Am a Div with Timeout</div>

</div>

 

<form name="form1" method="post" action="">

  <label>Note

    <input type="text" name="text" id="text">

  </label>

  <label>

    <input type="button" name="btn" id="btn" value="Submit" onClick="showMagicDiv();">

  </label>

</form>

 

It works so far. ill have to add CSS yet.

[nashsaint]

well, the effects work fine but when i actually sent the input to sql the timeout seems to speed up.  instead of 2 seconds it's now only displays half a second.

 

this is the code that does the sql update:

if (!function_exists("GetSQLValueString")) {

function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

{

  if (PHP_VERSION < 6) {

    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

  }

 

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

 

  switch ($theType) {

    case "text":

      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

      break;   

    case "long":

    case "int":

      $theValue = ($theValue != "") ? intval($theValue) : "NULL";

      break;

    case "double":

      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";

      break;

    case "date":

      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";

      break;

    case "defined":

      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;

      break;

  }

  return $theValue;

}

}

 

$editFormAction = $_SERVER['PHP_SELF'];

if (isset($_SERVER['QUERY_STRING'])) {

  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);

}

 

$ts = time();

if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form2")) {

  $updateSQL = sprintf("UPDATE jobs_tbl SET job_no=%s, job_date=%s, week_no=%s, job_country=%s, job_status=%s, job_result=%s, time_stamp=%s, job_notes=%s WHERE jobs_id=%s",

                      GetSQLValueString($_POST['job_no'], "text"),

                      GetSQLValueString($_POST['job_date'], "text"),

                      GetSQLValueString($_POST['week_no'], "text"),

                      GetSQLValueString($_POST['job_country'], "text"),

                      GetSQLValueString($_POST['job_status'], "text"),

                      GetSQLValueString($_POST['job_result'], "text"),

                      GetSQLValueString($ts, "text"),

                      GetSQLValueString($_POST['job_notes'], "text"),

                      GetSQLValueString($_POST['jobs_id'], "int"));

 

  mysql_select_db($database_jobCon, $jobCon);

  $Result1 = mysql_query($updateSQL, $jobCon) or die(mysql_error());

 

}

 

help please. thanks.

[nashsaint]

and this is the input:

<input type="submit" id="btn" value="Update" onclick="showMagicDiv();"/>

[lupld]

Hey, if you still want help with this, IM me sometime, I get carried away and forget to check back here a lot. I'm guessing the sql query is making the browser stop the pause early? I love how sometimes the most simple code can have such varying results.