effect

Effect may refer to: read more at WikiPedia

  • Browser Javascript tips and tricks for improving Your business application GUI
    All credits to original authors....

    All theses examples have to be put in the body onload="" tag of Your pages....

    More in the javascript section....
    •  How to deactivate the F5 button (RELOAD page) IEonly
      function avoidF5key(){
      if (document.all) {
      document.onkeydown = function (){
      var key_f5 = 116; // 116 = F5
      if (key_f5==event.keyCode) {
      event.keyCode=0;
      return false;
      }
      return true;
      }
      }
      }
    • How to deactivate the back button (SUPPR or history back) All

      function disableBackButton(){
      history.forward(); }

    • How to change images when the user hover on them All


      usage:

      <img src="image1.jpg" hsrc="image2.jpg">

      function changeImageOnHover() {

      if (!document.getElementById) return
      var imgOriginSrc;
      var imgTemp = new Array();
      var imgarr = document.getElementsByTagName('img');
      for (var i = 0; i < imgarr.length; i++) {
      if (imgarr[i].getAttribute('hsrc')) {
      imgTemp[i] = new Image();
      imgTemp[i].src = imgarr[i].getAttribute('hsrc');
      imgarr[i].onmouseover = function() {
      imgOriginSrc = this.getAttribute('src');
      this.setAttribute('src',this.getAttribute('hsrc')) }
      imgarr[i].onmouseout = function() {
      this.setAttribute('src',imgOriginSrc) }
      }
      }
      }

    • How to deactivate the contextual menu (Right-Click) All

    • How to display a moving slider which distract user during long server operations

      Method1
      Usage:


      Put this code anywhere in Your page:

      <DIV ID="splashScreen" STYLE="position:absolute;z-index:5;top:30%;left:35%;">
      <TABLE BGCOLOR="000000" BORDER=1 BORDERCOLOR="000000"
      CELLPADDING=0 CELLSPACING=0 HEIGHT=100 WIDTH=100>
      <TR>
      <TD WIDTH="10%" HEIGHT="10%" BGCOLOR="CCCCCC" ALIGN="CENTER" VALIGN="MIDDLE">
      <BR><BR>
      <IMG SRC="/ofev/wait/rotatinghpvlogo.gif"><BR><FONT FACE="Helvetica,Verdana,Arial" SIZE=3 COLOR="000066"><B>Page Loading. Please wait...</B></FONT><BR><IMG SRC="/ofev/wait/wait.gif" BORDER=1 WIDTH=75 HEIGHT=15><BR><BR>
      <BR><BR> </TD>

      </TR>
      </TABLE>
      </DIV>

      Put this code in your submit function:

      function myubmit(MyForm){ startPleaseWait(); document.forms[MyForm].submit();}
      }


      put this code in your Body onload:

      onload=stopPleaseWait();


      Code:


      //autodetection of browser
      // IE 5 and up, NS 6 and up
      if(document.getElementById) { var upLevel = true; }
      else // Netscape 4
      if(document.layers) { var ns4 = true; }
      else


      //IE 4
      if(document.all) { var ie4 = true; }

      function showObject(obj) {
      if (ns4) { obj.visibility = "show"; }
      else


      if (ie4 || upLevel) { obj.style.visibility = "visible"; }
      }
      function hideObject(obj) {
      if (ns4) { obj.visibility = "hide"; }
      else
      if (ie4 || upLevel) { obj.style.visibility = "hidden"; }
      }


      //start the please wait popup windows
      function startPleaseWait()


      {
      if(upLevel) {
      var splash = document.getElementById("splashScreen");
      }
      else if(ns4) {
      var splash = document.splashScreen;
      }
      else if(ie4) {
      var splash = document.all.splashScreen;
      }
      if (splash != null)


      showObject(splash);
      }


      //stop the please wait popup windows
      function stopPleaseWait()


      {
      if(upLevel) {
      var splash = document.getElementById("splashScreen");
      }
      else if(ns4) {
      var splash = document.splashScreen;
      }
      else if(ie4) {
      var splash = document.all.splashScreen;
      }
      if (splash != null)


      hideObject(splash);
      }

      // avoid refresh of page (key F5) only working in IE
      function avoidF5key()


      {
      if (document.all) {

      document.onkeydown = function (


      {
      var key_f5 = 116; // 116 = F5
      if (key_f5==event.keyCode)


      {
      event.keyCode=0;
      return false;
      }
      return true;
      }
      }
      }



    • Let the user minimize/maximise some part of Your GUI to have more space on demand
    • Working in all browser
    •  Use cookieJar script also in this section

    Method to put in Your <HEAD> html document:

    var CookieJar = new TDCookieJarObj();  CookieJar.setPath("/"); function FoldByName(iImageID, sMenuID) {
    if (document.getElementById(sMenuID).style.display == 'none') {
    document.getElementById(sMenuID).style.display = 'block';
    document.images[iImageID].src='up.gif';
    document.images[iImageID].alt='Minimize';
    document.images[iImageID].title='Minimize';
    CookieJar.setCookie(sMenuID,"open");
    } else {
    document.getElementById(sMenuID).style.display = 'none'; document.images[iImageID].src='down.gif'; document.images[iImageID].alt='Maximize'; document.images[iImageID].title='Maximize';
    CookieJar.setCookie(sMenuID,"close");
    } }


    Example of use, here I want to hide the title on demand because it take a lot of space....The user has now a switch on-switch off icon where He can minimize on demand  this part of the GUI
    <a href="javascript:FoldByName('TITLE','TITLE2');"><img name='ButtonExpand' id='TITLE' src='down.gif' alt='hide the title' align='AbsMiddle' style='border-width:0px;' /></a> <div class=smallText id='TITLE2'>
    <H1> This is an Example</H1> </div> <script language='Javascript'>cookie = CookieJar.getCookie("TITLE2");if ( cookie == "close" )FoldByName('TITLE','TITLE2');</script>
  • Overlib
    overLIB is a JavaScript library created to enhance websites with small popup information boxes (like tooltips) to help visitors around your website. It can be used to provide the user with information about what will happen when they click on a link.
    You want to see this free script in action? more here at the official Homepage

  • all credits to Authors

    keywords

    table html scrolling rows body

    Purpose

    If you want to create a table with a fixed header row and a scrolling body.

    Links:

     Using Iframe

    http://www.htmlcodetutorial.com/frames/_IFRAME.html
    Changing color of slider (using css)

    body {
    background-color:777777;
    scrollbar-arrow-color: 9f632b;
    scrollbar-base-color: 555555;
    scrollbar-darkshadow-color: 555555;
    scrollbar-track-color: 777777;
    scrollbar-face-color: 555555;
    scrollbar-shadow-color: aaaaaa;
    scrollbar-highlight-color: 666666;
    scrollbar-3dlight-color: 666666;
    }

    • W3C compliant but as usual not working in IE ;-)NS4  VIEW HERE
    • Fixed table head - scrollable table body IE NS4VIEW HERE
    • M$ way as in windows updateIE onlyVIEW HERE
    • Using overflow-y in tableIE NS4VIEW HERE
    • Showing or Hiding row in a table (Javascript)IE NS4VIEW HERE 
    • Showing or hiding a bloc of dataIE NS4
    • Using css to change position of a second table (one table is the header the other is the content)
    • Using css and fixed columns width to create 2 table, one fixed, and one using overflow-yVIEW HERE
    • Others: contact me to submit your code here to help other web developer :-)