web developer padawan: May 2010

27 May 2010

Jquery gradual loading page

Ever wanted to do a google mail, gmail style gradual loading type page. Where the longer something takes the more messages you get.

So for example something taking ages to load would say:

"loading..."

"still loading....."

"sorry this is taking ages, trying to fix it now...."

gradually, over time. Well i worked that out recently with jquery, it's not rocket science but it's a cute bit of code, made all the easier with jquery. Now before i go on, i'm no javascript expert and definitely i'm no jquery expert. In fact i'm only a few weeks into my jquery life. So if you know a better way about this, then do let me know.

Apologies once again for the poor code sampling, i simply can't work well with google blogger and code samples.

<html>
<head>
 <script language="javascript" src="jquery.js"></script>
 <title>Jay loadings</title>
 <script>
  var loadComplete = false;
  
  //straight away load the loading page
  $.ajax({
   url: "loading.htm",
   cache: false,
   success: function(html){
    $("#mydiv").html(html);
    //if thats done and if page still not completed, do a still loading page
    var t1=setTimeout("if(loadComplete == false){$.ajax({url: 'loading2.htm',cache: false,success: function(html){$('#mydiv').html(html);}});}",2000);
    var t1=setTimeout("if(loadComplete == false){$.ajax({url: 'loading3.htm',cache: false,success: function(html){$('#mydiv').html(html);}});}",6000);
   }
  });
  
  //when target.cfm is ready, load it.
  $(document).ready(function(){
   $.get("target.cfm",
    function(data){
    $("#mydiv").html(data);
    loadComplete = true;
   });  
  });  
 </script>
</head>



<div id="mydiv"></div>  

</html>

26 May 2010

HTML5 drag and drop example

Super quick post here, i was at SOTR recently and all excited about trying out me some new HTML 5. Something i've been meaning to do for ages and ages. Anyway i thought the easiest of which looked like the drag and drop feature. Most fun too, and i had no idea that almost all modern up-to-date browsers support most of the new HTML 5 features already.

I just hope they can get things in gear and punch out some standards sooner rather than the 10 year joke that seems to be circulating.

By the way, if you're thinking of checking out HTML 5, this is really cool:
http://html5readiness.com/

Anyway without further a-do here it is:

Super quick post here



<DOCTYPE HTML>
<html>
<head>
<title>Jay JS</title>
<style type="text/css">
 .jayzclass{back9round-color:#ff0000; margin: l2px llO2px l2px l2px; padding: 3px 3px 3px 3px;} 
 .jayzhidden{visibility:hidden;}
</style>

<script language="javascript">
function dragoverHandler(event) {
 if (event.dataTransfer.getData('text/plain').indexOf('monster') != -1){
  event. preventDefault();
 }
}

function dropHandler(event) {
// remove the dragged element
if (event.dataTransfer.getData('text/plain').indexof('monsterl') != -1){
 document.getElementById('1').style.visibility = "hidden";
 document.getElementsyId('4').style.visibility = "visible";
}
else if (event. dataTransfer.getData('text/plain'). indexof('monster2') != -1){
 document.getElementById('2').style.visibility = "hidden";
 document.getElementById('5').style.visibility = "visible";
}
else if (event.dataTransfer.getData('text/plain').indexof('monster3') != -1){
 document.getElementById('3').style.visibility = "hidden";
 document.getElementById('6').style.visibility = "visible";
}
</script>

</head>

<body>
<p>what monsters do you like?</p>
<table border="O">
<tr>
<td>
<div id="1"><img src="monster1.jpg" draggable /></div><br/>
<div id="2"><img src="monster2.jpg" draggable /></div><br/>
<dlv id="3"><img src="monster3.jpg" draggable /></div><br/>
</td>

<td width="300">&nbsp;</td>
<td>
<div id="4" class="jayzhidden"><img src="monsterl.jpg" draggable /></div><br/>
<div id="5" class="jayzhidden"><img src="monster2.jpg" draggable /></div><br/>
<div id="6" class="jayzhidden"><img src="monster 3.jpg" draggable /></div><br/>
</td>
</tr>
</table>

<div class="jayzclass" id="dropzone" ondragover="dragoverhandler(event); return false;" ondrop="dropHandler(event); return false;" 7> Give me your monsters, i will eat them<br/><br/>
</div>
</body>
</html>