Douglas on Web Applications

ClickTag in AS3

To build a ClickTag in Flash AS3 you need to first create the ActionScript:

 
clickTrackBTN.buttonMode=true; //using an MC for button so I need to declare it
clickTrackBTN.addEventListener(MouseEvent.CLICK,function():void { navigateToURL(new URLRequest(formatClickTag()),"_blank"); });
//the function
function formatClickTag():String {
  for (var key:String in root.loaderInfo.parameters) {
    if (key.toLowerCase()=="clicktag") {
      return root.loaderInfo.parameters[key];
    }
  }
  return "";
}
 

Remember to import any needed classes:

 
import flash.display.MovieClip;
import flash.events.*;
import flash.net.navigateToURL;
import flash.net.URLRequest;
 

Then, in the HTML:

 
..."flashvars",'clickTAG=http://www.yourdomain.com&clickTarget=_blank', ...
and
<param name='flashvars' value='clickTag=http://www.yourdomain.com&clickTarget=_blank' />
 

Random Photo on Page Load (jQuery)

 
function randomPhoto(){
  var photoArray=new Array()
  photoArray[1]="imgs/photo_video_guitar.jpg"
  photoArray[2]="imgs/photo_video_girl.jpg"
  photoArray[3]="imgs/photo_video_boy.jpg"
  var imagePosInArray=Math.floor(Math.random()*photoArray.length)
  if (imagePosInArray==0)
    imagePosInArray=1;
    $("div.tab-content#case-study img").attr("src",photoArray[imagePosInArray]);
}
 

Dropdown (Pulldown) Selectors & Manipulation

Clear a current dropdown selection

    $("#some-id-on-option option").attr({ selected: "selected" }).removeAttr("selected");

Now, select an option

    $("#some-id-on-option option:first").attr("selected");

That selects the first option. Or you can specify an option by index:

    $("#some-id-on-option eq:(2)").attr("selected");

However, that only selects the item but doesn't execute if there is an action (via listener) associated with that particular dropdown. To do so, use the following:

    $("#some-id-on-option").change();

Here's a real-world example. Let's say you have 3 dropdown menus. The first selects between two states and depending on the selection, one of two location dropdown menus will be displayed. The location dropdowns allow a user to select specific store in that state. By default, on page load one location dropdown will be hidden. Here is the code for the State dropdown menu:

$("#select-state").change( function () {
  //alert($(this).val())
  $("#locations-az").toggle();
  $("#locations-ca").toggle();
  $(".sLocations option").removeAttr("selected")
  if($(this).val()==1){ //cal
    $("#locations-ca option:eq(0)").attr("selected","selected");
	$("#select-locations-ca").change();
  }else{
    $("#locations-az option:eq(0)").attr("selected","selected");
	$("#select-locations-az").change();
  }
});

This ensures that the location dropdowns always revert back to the first option when the state dropdown is toggled. Notice the last line "$(this).change()". This executes the following listener on the active locations pulldown:

  $(".sLocations").change( function () { //we're using class in this case
      var newSrc =$(this).val();
      $('iframe#replace-iframe').replaceWith(newSrc);
  });

This takes the value on the location dropdown and replaces the current iFrame on the page with it. Because we are inserting Google Maps, we'll replace the whole iFrame rather than just trying to update it in order to avoid caching issues. Here's the HTML:

 
<select id="select-state" name="state">
    <option value="1">California</option>
    <option value="2">Arizona</option>
 </select>
<select id="select-locations-az" class="sLocations" name="selectlocations-az">
<option value="&lt;iframe  class=&quot;def-selection&quot; id=&quot;replace-iframe&quot; width=&quot;878&quot; height=&quot;600&quot;
 frameborder=&quot;0&quot; scrolling=&quot;no&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;  src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot; mce_src=&quot;http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4623+E+Elliot+Rd,+Ahwatukee,
+AZ&amp;mrt=all&amp;sll=35.224939,-114.036363&amp;sspn=0.013707,0.017231&amp;ie=UTF8&amp;hq=&amp;hnear=4623+E+
Elliot+Rd,+Phoenix,+Maricopa,+Arizona+85044&amp;ll=33.358707,-111.979523&amp;spn=0.014017,0.017231&amp;t=h&amp;z=14&amp;output=embed&quot;&gt;&lt;/iframe&gt;">Ahwatukee - 4623 E. Elliot Rd.</option>...(cont)
</select>
 

Minimum CSS Required to Clear Floats

Minimum required CSS to clear floats across all modern browsers:

<pre lang="css">

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  height: 0;
  content: " ";
  clear: both;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

</pre>

Unobtrusive Rollovers with jQuery

 
$(function() {
  $("#nav img").hover(function() {
    $(this).attr("src", $(this).attr("src").split(".").join("_over."));
  }, function() {
    $(this).attr("src", $(this).attr("src").split("_over.").join("."));
  });
});
 

 
<ul id="nav">
<li><a href="#"><img src="button1.gif" /></a></li>
<li><a href="#"><img src="button2.gif" /></a></li>
<li><a href="#"><img src="button3.gif" /></a></li>
</ul>
 

Codeingiter: Remove “Index.php” from URL

Way to remove index.php reference from URL:

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

and in config/config.php file...

RewriteEngine On
$config['index_page'] = "";

jQuery Basics

jQuery is a popular javascript framework simplifying cross-browser development. To get started, include the jQuery:

<script src="jquery.js" type="text/javascript"></script>

Since you will likely be manipulating the DOM, we need to wait until the page is fully loaded before executing our code. So we start by creating a statement to this affect:

$(document).ready(function(){
  //code goes here
});

jQuery is useful for applying CSS to elements on the page. This is useful when you would like to change an existing style. Here's a basic example.
First, create CSS:

 
<style type="text/css">
    .warning{ border:red 1px solid;padding: 8px; }
</style>
 

Now, we can apply it when a specific event occurs:

$(document).ready(function(){ $("a").click(function(){ $("#results").addClass("warning"); }); });

In the real world, clicking a link will cause the browser to navigate away from the page before the warning could be displayed. jQuery offers an easy solution to prevent this from occurring:

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    $("#results").addClass("warning");
  )};
});

Notice how we passed the event as an argument. Now this is all fine and dandy but what good is a warning without any explanation? So let's add some text within the results div:

$(document).ready(function(){
  $("a").click(function(event){
    event.preventDefault();
    $("#results").addClass("warning").html("Warning! You clicked a link!");
  }
});

jQuery adds a simple way to chain events by passing around the actual query object. This makes coding simpler and more compact.

Remote Directory Access on Linux

The path:

 
http://username:passowrd@domain.com/directory/
 

.htaccess should look something like:

 
AuthName "Password Protected Area"
AuthType Basic
AuthUserFile /usr/local/webpassword/wp001.dat
Require valid-user
Options +Indexes
 

Ajax Via jQuery

Ajax calls are made simple by using jQuery. Here's a few basics:

$.ajax({
  type: "GET",
  url: "somefile.php"
});

Let's add some variables:

$.ajax({
  type: "POST",
  url: "somefile.php",
  data: "id=123&action=add",
  success: function(msg){
    alert( "Data Saved: " + msg );
  }
});

If you would like to return HTML from the server or database:

 
$.ajax({
  url: "somefile.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Ajax calls through jQuery are automatically asynchronous (meaning multiple calls can be made before the other is completed). If you would prefer to make one at a time:

$.ajax({ url: "somefile.php", async: false });

You can apply local events to Ajax calls:

 
$.ajax({
  url: "somefile.html",
  cache: false,
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
});

You can apply local events to Ajax calls:

 
$.ajax({
  url: "somefile.html",
  cache: false,
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
});

Or apply global events to Ajax calls. The following listens for Ajax global events:

 
 $("#loading").bind("ajaxSend", function(){
   $(this).show();
 }).bind("ajaxComplete", function(){
   $(this).hide();
});

Forms - Radio Groups with jQuery

An easy way to select a radio button using jQuery:

 
$('input[name=packages]:radio')[0].checked = true; //first
 

Getting the value of the selected radio button in a group:

 
var checkedValue = $('input[name=packages]:radio:checked').val();