Author Archives: admin

MySQL JOINS…

Different SQL JOINs

Before we continue with examples, we will list the types of JOIN you can use, and the differences between them.

  • JOIN / INNER JOIN : Return rows when there is at least one match in both tables
  • LEFT JOIN : Return all rows from the left table, even if there are no matches in the right table
  • RIGHT JOIN: Return all rows from the right table, even if there are no matches in the left table
  • FULL JOIN: Return rows when there is a match in one of the tables

MySQL UPSERT (Insert or Update)


     $sql = "INSERT INTO postcode
                        (postcode,
                         lat,
                         lon,
                         osEasting,
                         osNorthing,
                         osRef6)
                        VALUES ('" . str_replace(" ", "", $data[0]) . "',
                                '" . round($lat,6) . "',
                                '" . round($lon,6) . "',
                                '" . round($data[2]) . "',
                                '" . round($data[3]) . "',
                                '" . $osref . "'
                                )
                        ON DUPLICATE KEY UPDATE
                                postcode   = '" . str_replace(" ", "", $data[0]) . "',
                                lat        = '" . round($lat,6) . "',
                                lon        = '" . round($lon,6) . "',
                                osEasting  = '" . round($data[2]) . "',
                                osNorthing = '" . round($data[3]) . "',
                                osRef6     = '" . $osref . "'";


Check for Cookies enabled

<!-- Checking if cookies enabled -->   
<script type="text/javascript">
    document.cookie = "cookiesEnabled=true";
    if (document.cookie.indexOf("cookiesEnabled") == -1) {
        document.getElementById("noCookiesAlert").style.display = "block";
    }
</script>

jQuery from Google’s CDN, with local fallback

<!-- Add JQuery from googles CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- If it doesn't load, load it locally -->
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

<!-- Then your custom JS -->
<script src="/js/main.js"></script>

Shorthand AJAX examples


$.get("test.php", function(data){
  $('#myFormField').val(data);
});



$.load('myScript.php', function(data) {
    //fill a hidden textbox with your script output and reveal it
    $('#textBox').val(data).show();
)};


CSS (more) lifted corners

.lifted {
     border-radius:2px;
     position:relative;
     padding:1em;
     background:#fcfcfc;
     box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);
     -o-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 0px 1px 1px  rgba(0,0,0,0.2);
}   
   
.lifted:before, .lifted:after {
     content: "";
     position: absolute;
     z-index: -1;
     -ms-transform: skew(-3deg,-2deg);
     -webkit-transform: skew(-3deg,-2deg); /* Safari and Chrome */
     -o-transform: skew(-3deg,-2deg); /* Opera */
     -moz-transform: skew(-3deg,-2deg); /* Firefox */
     bottom: 14px;
     box-shadow: 0 15px 5px rgba(0, 0, 0, 0.3);
     height: 50px;
     left: 1px;
     max-width: 50%;
     width: 50%;
}
.lifted:after {
     -ms-transform: skew(3deg,2deg); /* IE 9 */
     -webkit-transform: skew(3deg,2deg); /* Safari and Chrome */
     -o-transform: skew(3deg,2deg); /* Opera */
     -moz-transform: skew(3deg,2deg); /* Firefox */
     left: auto;
     right: 1px;
}                       

Lifted corners

CSS Lifted corners

.drop-shadow {
    position:relative;
    float:left;
    width:40%;   
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}

.lifted {
    -moz-border-radius:4px;
    border-radius:4px;
}

.lifted:before,
.lifted:after {
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);  
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);   
    -moz-transform:rotate(-3deg);  
    -ms-transform:rotate(-3deg);  
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}

.lifted:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);  
    -moz-transform:rotate(3deg); 
    -ms-transform:rotate(3deg); 
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

example of the drop shadow

example of the drop shadow with lifted corners

Blog style post dates, using CSS


span.postDate          {display: block; position: relative; width: 60px; margin-bottom: 18px;
                    border: 1px solid #888885; -moz-border-radius: 5px; -webkit-border-radius: 5px;
/* day */               font: 24px/35px "Helvetica Neue", Arial, sans-serif; text-align: center;
                    letter-spacing: 0px; text-decoration: none; color: #666;
                    background: #fcfcfc url("images/date-day-bg.png") repeat-x left 17px;}

span.postDate sup          /* lift the suffix, so that the number is fully centered */
                    {position: absolute; padding-top: 4px;
                    font-size: 10px; line-height: 10px; letter-spacing: normal;}

/* year + month */
span.postDate abbr          {display: block; font: 10px Verdana, sans-serif; letter-spacing: normal; color: white;
                    -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;}
/* month */
span.postDate>:first-child     {width: 50px; margin: -1px 0 0 -1px; padding: 0 5px; border: 1px solid #832a28;
                    line-height: 16px; text-align: left; text-transform: uppercase;
                    background: #a33537 url("images/date-month-bg.png") repeat-x bottom left;}
/* year */
span.postDate sup+abbr     {position: absolute; top: 0; left: 0; width: 52px; padding: 0 3px;
                    border: 1px solid #a33537; border-bottom: 1px solid #832a28;
                    line-height: 14px; color: #eaa; text-align: right;}