Cyberactiva web development and optimisation » javascript http://www.cyberactiva.com Every day's life about programming and webmarketing Wed, 21 Oct 2009 11:33:00 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Select tag clickable under the above transparent div layer http://www.cyberactiva.com/2009/10/select-tag-clickable-under-the-above-transparent-div-layer/ http://www.cyberactiva.com/2009/10/select-tag-clickable-under-the-above-transparent-div-layer/#comments Fri, 02 Oct 2009 08:34:36 +0000 Claudio Barba http://www.cyberactiva.com/?p=34 It bothers me a lot, when I can’t find a solution for a problem that do not depend on me… Anywway here is the problem and the work-around solution I found.

Let’s say you have a form on the page, with some <select> tags.

Now, you want that on the onclick event of the submit,  a semi [...]]]> It bothers me a lot, when I can’t find a solution for a problem that do not depend on me… Anywway here is the problem and the work-around solution I found.

Let’s say you have a form on the page, with some <select> tags.

Now, you want that on the onclick event of the submit,  a semi transparent DIV appears above the form, in order to block the user to change the data on the form.

The .html (or whatever you are using) should be like:

<script language=”JavaScript”>
function show(layer_ref) {

  if (document.all) { //for IE 4 or 5 (or 6 beta)
    eval( “document.all.” + layer_ref + “.style.display = ‘block’”);
  }
  if (document.layers) { //for NETSCAPE 4 or below
    document.layers[layer_ref].display = ‘block’;
  }
  if (document.getElementById &&!document.all) {
    myel = document.getElementById(layer_ref);
    myel.style.display = ‘block’;
  }
}
</script>
<div id=”form1″>
 <form>
  <select name=”test”>
   <option>test</option>
  </select>
  <input type=”submit” onclick=”javascript:show(’waiting’);”>
 </form>
</div>
<div id=”waiting” style=”display:none;”>
</div>

In the css, you should put

#waiting {
 position:absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 background: #cccccc;
 z-index:2;
 -moz-opacity:0.5;
 opacity:0.5;
 filter: Alpha(opacity:80);

}

The problem will immediately appear when you launch the page and click on the submit…

Actually, the select tag will remain active, even if it is under the “waiting” layer.

The only solution I found, is to hide the DIV form1… so, from the above code you should change only:

onclick=”javascript:show(’waiting’);hide(’form1′);”

and of course add the new hide javascript function (just change ‘block’ with ‘none’):

function hide(layer_ref) {

  if (document.all) { //for IE 4 or 5 (or 6 beta)
    eval( “document.all.” + layer_ref + “.style.display = ‘none’”);
  }
  if (document.layers) { //for NETSCAPE 4 or below
    document.layers[layer_ref].display = ‘none’;
  }
  if (document.getElementById &&!document.all) {
    myel = document.getElementById(layer_ref);
    myel.style.display = ‘none’;
  }
}

I am very curious to know if somebody could solve this issue differently, LET ME KNOW!!!

]]> http://www.cyberactiva.com/2009/10/select-tag-clickable-under-the-above-transparent-div-layer/feed/ 1 AJAX example http://www.cyberactiva.com/2009/09/ajax-example/ http://www.cyberactiva.com/2009/09/ajax-example/#comments Tue, 29 Sep 2009 12:28:12 +0000 Claudio Barba http://www.cyberactiva.com/?p=27 There are tons of places on the net where you can find some ajax tutorial on how to make hidden calls to the server. Anyway, I put here a basic javascript function (may be more for my reference). For instance I have to send three parameters v1,v2,v3 to the checkdate.php server page and receive back a [...]]]> There are tons of places on the net where you can find some ajax tutorial on how to make hidden calls to the server.
Anyway, I put here a basic javascript function (may be more for my reference). For instance I have to send three parameters v1,v2,v3 to the checkdate.php server page and receive back a code. If the code is equal to 1, then I show the errors’ layer and hide the buttons’ layer.

function ajaxsend (v1,v2,v3)
{
var xajax = null;

if(window.XMLHttpRequest) xajax = new XMLHttpRequest();
else if(window.ActiveXObject) xajax = new ActiveXObject “Microsoft.XMLHTTP”);
else return(false);

var str = “chky=”+v1+”&chkm=”+v2+”&chkd=”+v3;
xajax.open(”POST”,”./checkdate.php”,false);
xajax.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”);
xajax.send(str);

if(xajax.readyState == 4) {
if (xajax.responseText==”1″) { //<15years
hide(’buttons’);
show(’errors’);
}
}
}

Just to be complete, here are the two functions hide and show, written in a “browser independent” way:

function show(layer_ref) {

  if (document.all) { //IS IE 4 or 5 (or 6 beta)
    eval( “document.all.” + layer_ref + “.style.display = ‘block’”);
  }
  if (document.layers) { //IS NETSCAPE 4 or below
    document.layers[layer_ref].display = ‘block’;
  }
  if (document.getElementById &&!document.all) {
    mylayer = document.getElementById(layer_ref);
    mylayer.style.display = ‘block’;
  }
}

function hide(layer_ref) {

  if (document.all) { //IS IE 4 or 5 (or 6 beta)
    eval( “document.all.” + layer_ref + “.style.display = ‘none’”);
  }
  if (document.layers) { //IS NETSCAPE 4 or below
    document.layers[layer_ref].display = ‘none’;
  }
  if (document.getElementById &&!document.all) {
    mylayer = document.getElementById(layer_ref);
    mylayer.style.display = ‘none’;
  }
}

I hope you will find this example useful!

]]> http://www.cyberactiva.com/2009/09/ajax-example/feed/ 1