Tag: code example

IE8 Javascript external script execution order solution.

1 Comment The lack of posts lately has been due to the fact that I have had way too much going on around me. Fixing up one house to sell and adding a new room into my house has kept my out of work time to a minimum. That being said I came across an interesting problem the other day that I felt needed a small post about.

Problem:
Many ad serving networks rely on JavaScript to deliver their ad code to the page.   The method typically employed to generate the code to the page is document.write('the ad code');  Well this is fine if the code is all present on the page and not relying on external scripts.   What happens though when the ad itself relies on an external script in and embeds code inline.  For example:
<script language='javascript'>

document.write('<scr' + 'ipt type="text/javascript" src="http://domain.com/generated_external_script.php?param1=foo&param2=foobar"></script>');

 

document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">insertAdInto("ad-placeholder");</scr' + 'ipt'>');  

 

</script>
In this case the external script is a javaScript function that will render itself into an element that was passed. In this case it is an element we are dynamically adding to the page. In most browsers this will work because they will wait to run the JavaScript command after the external script has been loaded. Internet Explorer though runs JavaScript as it parse the page. This means when it encounters insertAdInto("ad-placeholder"); It may or may not exist which will create an error. (In most cases it will not exist.)

Solution:

I tried different solutions one involving the use of "defer" attribute as part of the script tag. (Which did not work). I decided to simply suffer the gross solution. Using the setInterval() method I need to keep checking the function until it exists. So it looks something like this. 
document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">insertAdInto("ad-placeholder");</scr' + 'ipt'>');  

</script>
Becomes: 
document.write('<div id="ad-placeholder">Here is my ad: <br/></div> <scr' + 'ipt language="javascript">nmSpace_itvlId = setInterval(function(){ if(typeof insertAdInto == "function"){ insertAdInto("ad-placeholder"); clearTimeout(nmSpace_itvlId); }}, 100);

</scr' + 'ipt'>');  

</script>
Or in a more readable manner: 

nmSpace_itvlId = setInterval(function(){
   if(typeof insertAdInto == "function"){
      insertAdInto("ad-placeholder");
      clearTimeout(nmSpace_itvlId);
   }
}, 100);
This allowed me to place ad code into dynamically created elements of from a document.write using a callback from an external JavaScript method. I tested this in all browsers and I hope it is useful to others.


Tags: , , , , , , ,

Saturday, November 14th, 2009 javascript, programming

MySQL 5.0 Triggers example usage setting fields conditionally.

No Comments

MySQL 5.0 added Triggers as a feature.  Though the documentation is there and usage is similar to triggers in other database systems, I am putting up my example for those who may be looking to do simple item tracking using a start and end time. In my simple example I want to update some timestamps on my data and deal with handling an item in my databases status.


CREATE TABLE test (
    'id' INT(10) NOT NULL AUTO_INCREMENT,
    'name' VARCHAR(100) DEFAULT NULL,
    'created' DATETIME DEFAULT NULL,
    'updated' DATETIME DEFAULT NULL,
    'start' DATE DEFAULT NULL,
    'end' DATE DEFAULT NULL,
    'status' varchar(10) DEFAULT 'active',
    PRIMARY KEY('id')
);

In this sample table you could add more fields with the data you need to store. For my purposes this will serve just fine for illustrating the triggers I intend to implement. In the table above start and end represent the date item is in an active state.

Triggers:


delimiter //
 
/* Insert Trigger for new items */
CREATE TRIGGER 't_insert_item' BEFORE INSERT ON 'test'
  FOR EACH ROW BEGIN
    SET NEW.updated = NOW();
    SET NEW.created = NOW();
    SET NEW.status = 'active';
 
    IF NEW.start > DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
       SET NEW.status = 'future';
    END IF;
    
    IF NEW.end < DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
       SET NEW.status = 'past';
    END IF;    
END
//
 
/* Update trigger for existing */
CREATE TRIGGER 't_update_item' BEFORE UPDATE ON 'test'
  FOR EACH ROW BEGIN
    SET NEW.updated = NOW();
    SET NEW.status = 'active';
 
    IF NEW.start > DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
       SET NEW.status = 'future';
    END IF;
 
    IF NEW.end < DATE_FORMAT(NOW(),'%Y-%m-%d) THEN
       SET NEW.status = 'past';
    END IF;
END
//
delimiter ;

With these triggers when I am inserting new items or existing items are being rescheduled I no longer have to worry about timestamping UPDATE statements or adjusting the item’s status in the system. I can also do faster simpler searches on items. It could allow for a one query command to update all item’s status in the system. 


UPDATE test SET updated = DATE_FORMAT('%Y-%m-%d') WHERE status <> 'past';

This updates all the active ads and future ads with a new timestamp and updates their status automatically.

I hope this information is of use to someone and if you have questions about triggers in general feel free to comment. I hope to get back to working on combining my 2 previous posts PHP Flickr Parser and ExtJS Image Effects into a combined example.

Tags: , , , ,

Tuesday, September 1st, 2009 MySQL, programming

Javascript: ExtJS Image Effects Example

No Comments

I have been working with ExtJS library, a free very useful javascript library.  It is rather heavy due to it's size but has many great things built right into it.  You can check out for yourself above and look at some of the visual examples they have posted on the site.  That being said I have been working on my own experimentation (rather simple at the moment) for use in one of my own personal projects.  One particular issue I looked into was element handling and their FX library.

I have seen some fancy photo galleries out there well I wanted to just create a simple effect to get my hands a little dirty.   The code you see below utilizes a few different aspects of ExtJS Core library.

I will not go into great details about how the code works because its not too hard to follow. If anyone has questions post it in the comments and I will do what I can to help though I am guessing most will just read or copy/paste and mess with it on their own.

Just click the image in the demo to see it work.

** Please do not link to my site to get the extjs libraries download them and install locally or on your own server. I have basic hosting and do this as a hobby and if you are getting significant traffic it could slow my site down.

You can see this working here Simple Image Rotate Example 


  <body class="ext-gecko ext-gecko3" style="background-color: black;">
  <style>
   #box {
     width: 125px;
     height: 125px;
     background-color: white;
     position: absolute;
     left: 200px;
     top: 100px;  
      overflow: hidden;
      border: 1px solid red;
      cursor: hand; cursor: pointer;   
   }
   
   #box2 {
     width: 50px;
     height: 50px;
     background-color: white;
     position: absolute;
     left: 100px;
     top: 100px;  
      border: 1px solid red;
      cursor: hand; cursor: pointer;      
      opacity:0.25;
      filter:alpha(opacity=25);
   }
   
  </style>
  <div style="left:0px; top:0px; width: 800px%; height: 800px;" id="plane">   
       <img src="images/images.jpg" align="middle" id="box">
       <img src="images/images2.jpg" align="middle" id="box2">
  </div>
  <script language="javascript">
  ImageRotate = Ext.extend(Ext.util.Observable, {
      constructor: function(oConfig){
         this.name = oConfig.name;
         this.listeners = oConfig.listeners;
         
         this.addEvents({
            "summon_new": true
         });
 
         this.elBox = Ext.get("box");
         this.elBox2 = Ext.get("box2");    
   
         this.elBox.on('click', function(e, t, o){          
            this.elBox.shift({
               opacity: .25, 
               duration: 1,
               easing: 'easeOut',
               x: this.elBox.getX() + 150,
               y: this.elBox.getY(),
               height: this.elBox.getHeight() * .50,
               width: this.elBox.getWidth() * .50
            });
         
            this.fireEvent("summon_new");
         }, this);
         
         ImageRotate.superclass.constructor.call(oConfig);  
         
         this.on("summon_new", function(){
            this.elBox2.shift({
               opacity: 1, 
               duration: 1,
               easing: 'easeIn',
               x: 200,
               y: this.elBox.getY(),
               height: 125,
               width: 125
            });
         });                
      }   
  });  
  
  Ext.onReady(function(){
      oImageRot = new ImageRotate({ name: 'image_test' });
  });   
  </script> 
</body>

Tags: , , , , ,

Monday, July 27th, 2009 javascript, programming, projects

Javascript: Figuring out daylight savings time.

9 Comments Updated 11/2/2009: Fixed bug with code pointed out by comment.

A while back I had been dealing with the different timezones across the US.  I needed to know whether or not the central timezone was in daylight savings time or not using my current timestamp from my computer. While this ultimately ended up not mattering because I switched everything to a GMT timestamp and use that for comparisons I did write a small bit of javascript code to determine this information for me. So below you will see the rough code I hacked together which should accurately determine if we are currently in daylight savings time based on the current dates set by the US government. 


function isDaylight() {

 

    // 2nd sunday of march

    oDate = new Date();

    var dstStartDate = new Date();

    dstStartDate.setMonth(2);

    dstStartDate.setDate(1);

    dstStartDate.setYear(2009);

    

    dateIdx = dstStartDate.getDay() ? 8 - dstStartDate.getDay() : 1;

    dstStartDate.setDate(dateIdx + 7);

 

    // first sunday of november

    var dstEndDate = new Date();

    dstEndDate.setMonth(10);

    dstEndDate.setDate(1);

    dstEndDate.setYear(2009);

    

    dateIdx = dstEndDate.getDay() ? 8 - dstEndDate.getDay() : 1;

    dstEndDate.setDate(dateIdx);

  

    if ((oDate.getMonth() > dstStartDate.getMonth()) && (oDate.getMonth() < dstEndDate.getMonth())) {

        bInDST = true;

    } else if (oDate.getMonth() == dstStartDate.getMonth()) {

        if (oDate.getDate() >= dstStartDate.getDate()) {

            bInDST = true;

        } else {

            bInDST = false;

        }

    } else if (oDate.getMonth() == dstEndDate.getMonth()) {

        if (oDate.getDate() < dstEndDate.getDate()) {

            bInDST = true;

        } else {

            bInDST = false;

        }

    } else {

        bInDST = false;

    }

    return bInDST;

}
Show Me
Click the button to see the code working.

Tags: , , , , ,

Thursday, April 30th, 2009 interesting, javascript, programming, tech

Search

 

Comments