Monthly Archives: Sep 2017

Microsoft Excel – Hide all text in a cell but leave the formatting

Sometimes, you may want to hide all of the text inside a cell when using an Excel workbook.  This is handy if you are doing things like measured works.  It allows you to have a few columns adding up to a total where 0’s produce a red cell and 1’s produce a green cell.  The final column can then be a total and go green when you have filled all of the other cells in with a 1.

To hide the text inside the cells, just highlight the cells you want to affect, select “formatting” and then choose custom.  In the custom box, type ;;; (that’s 3 x semi-colons).

Share this post:
read more

How to un-shrink a woollen jumper (or other woollen items)

wooley-jumper

I have absolutely no idea if this works but always worth a shot.  Please let me know if you have tried this and whether it works or not!

Share this post:
read more

Disable a dynamically created Bootstrap button onClick

There might be times when you need to produce a dynamic list of things that you don’t want to happen twice, like updating the status of something, but in particular only wanting to act as a single use event on that line.  You can use jQuery to send a post request to perform the action, but it’s handy to be able to disable the button as well.  Doing so will guarantee the end user won’t be able to click again before the page/div/section refreshes,  even if you do update those above in the background.

If you have a button producing loop like this:

while([something happens to produce $row(for example)]){
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
  <button class="btn btn-default btn-xs" id="dynamicBtn'.$row['id'].'" onClick="buttonFunction(this.id)>Disable Me</button>
}

Ignore the weird formatting on this thin blog page.

onClick calls a function and takes the ID value of the row to send to the said JavaScript method.  This, in turn, can then be used to disable (or anything else you need it to) the buttons on that line.  It’s quite generic actually and can be tailored for many different uses if you need it to do specific things to anything with the ID you are sending.

The JavaScript looks like this:

function buttonFunction(rowID) {
  $('#dynamicBtn'+rowID).prop("disabled", true);
  // Then do anything you need to do in the background if required
}

If the “do something in the background” is performing an AJAX request, you can make part of the “success” attribute re-enabling the button and giving an appropriate error message if something goes wrong.

You could also do this backwards and make disabling the button part of the AJAX success, but it leaves open the option of clicking several times if the request takes a few seconds to process.

It’s not good practice to be using jQuery lower than version 1.6 at the point of writing this, however, if you do, then switch out the newer “prop” method for “attr” to achieve the same thing.

Share this post:
read more

Turn off the predictive text on CAT B25 and B30 Mobile Phones

cat-b30-mobile-phone

This post is one of my random entries, but after seeing somebody struggling to turn off the predictive text on a CAT B30 mobile phone, I had a look into how to do it.  The CAT B25/30 phones are great rugged little phones if you want something basic. However, the predictive text on them is utterly useless.

It can be turned off, but for some reason, they neglect to put it in their instruction manuals.

To turn off predictive text, press and hold the # key before you start typing.  Doing so will bring up a little menu that includes:

  • EN – English predictive
  • Abc – Normal keyed entry with capitalised sentences
  • abc – As above but without the capitalisation
  • 123 – Numerical entry

There are a few more, but the above four are the important ones.

cat-b30-mobile-phone CATB25-Mobile Phone

Link to the phones on the CAT website HERE

 

Share this post:
read more

Using FPDF – Basic commands and explanations to suit

Creating PDF’s with PHP using FPDF.  This will get added to over time.

First, include the FPDF class.

require('fpdf.php');

Set up the page:

$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);

Add a cell to the page.  Cells contain the elements on the page:

$pdf->Cell(20,10,"Some text to display on the page");

One thing to watch for is that this:

$pdf->Cell(20,10,"C1");
$pdf->Cell(20,10,"C2");
$pdf->Cell(20,10,"C3");
$pdf->Cell(20,10,"C4");

Will produce: C1    C2    C3    C4

To add some line breaks:

$pdf->Cell(20,10,"C1"); 
$pdf->Ln();
$pdf->Cell(20,10,"C2"); 
$pdf->Ln();
$pdf->Cell(20,10,"C3"); 
$pdf->Ln();
$pdf->Cell(20,10,"C4");

You can also add custom spacing to the line breaks:

$pdf->Ln(10);

So far we have:

require('fpdf.php');
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Cell(20,10,"Some text to output to the PDF");
$pdf->Ln();
$pdf->Cell(20,10,"Some more text to output to the PDF");

Now we need to output the PDF to something.  Browsers can be a bit fickle when displaying PDF’s on the screen:

$pdf->Output('../../temp/file.pdf','F');

The “F” flag tells the script to output the PDF as a file called file.pdf (temp is just the directory I’m using for testing and has no relevance to FPDF).

Flags also include “D”, which is to force a file to the browser with a download trigger and “I” which outputs the PDF inline.  I have found inline display of PDF’s from FPDF work best with the <object> flag within HTML.

Share this post:
read more

Get the text or value of a HTML select option using jQuery

Short and sweet.  How to grab the value of an element using jQuery.

If you have the element shown below, for example.

<select id="selectFruit">
    <option value="1">Orange</option>
    <option value="2">Apple</option>
    <option value="3">Bannana</option>
    <option value="4">Peach</option>
    <option value="5">Grape</option>
</select>

There are two parts to this that can be grabbed using jQuery.

To assign the “value” of the selected option to the variable “fruit” (for example):

var fruit = $("#selectFruit").val();

To assign the text element of the selected option:

var fruit = $("#selectFruit option:selected").text();

This is really handy with a change function so that the selected option can be grabbed when the status of the selector changes:

$("#selectFruit").on("change", function(){
  var fruit = $(this).val();
  // Do something with your newly assigned fruit variable
});

Just as an aside, you see that we have used “this” instead of telling jQuery which element we are talking about.  Because the value we are assigning is within the change function on the selectFruit element already, we can just refer to it within the function as “this”.

So this (pardon the pun):

var fruit = $(this).val();

Works as though we have written this:

var fruit = $("#selectFruit").val();

Within the context of this particular change function, on this particular element.

 

Share this post:
read more

Really easy registration form with JavaScript validation for Bootstrap

Easy to use registration form with some validation.

This works for me and the site I am using it on, some styling/tweaking may be required for others.

The HTML:

<form action="" method="post" id="fileForm" role="form">
    <fieldset>
      <div class="form-group">
        <label for="email"><span class="req">* </span> Email Address: </label>
        <input class="form-control" required type="text" name="email" id="email" onchange="email_validate(this.value);" />
        <div class="status" id="status"></div>
      </div>

      <div class="form-group">
        <label for="username"><span class="req">* </span> User name:</label>
        <input class="form-control" type="text" name="username" id="txt" minlength="6" onkeyup="Validate(this.value)" placeholder="minimum 6 letters" required autocomplete="off" />
        <div id="errLast"></div>
      </div>

      <div class="form-group">
        <label for="password"><span class="req">* </span> Password: </label>
        <input required name="password" type="password" class="form-control inputpass" minlength="4" maxlength="16" id="pass1" /> </p>

        <label for="password"><span class="req">* </span> Password Confirm: </label>
        <input required name="password" type="password" class="form-control inputpass" minlength="4" maxlength="16" placeholder="Enter again to validate" id="pass2" onkeyup="checkPass(); return false;" />
        <span id="confirmMessage" class="confirmMessage"></span>
      </div>

      <div class="form-group">

        <input type="checkbox" required name="terms" onchange="this.setCustomValidity(validity.valueMissing ? 'Please indicate that you accept the Terms and Conditions' : '');" id="field_terms">   <label for="terms">I agree with the <a href="terms.php" title="You may read our terms and conditions by clicking on this link">terms and conditions</a> for Registration.</label>
        <span class="req">* </span>
      </div>

      <div class="form-group">
        <input class="btn btn-success" type="submit" name="submit_reg" value="Register">
      </div>
    </fieldset>
  </form>
  <!-- ends register form -->

  <script type="text/javascript">
    document.getElementById("field_terms").setCustomValidity("Please indicate that you accept the Terms and Conditions");
  </script>

The JavaScript:

function checkPass()
{
    
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
   
    var message = document.getElementById('confirmMessage');
    
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
    }
} 
function validatephone(phone) 
{
    var maintainplus = '';
    var numval = phone.value
    if ( numval.charAt(0)=='+' )
    {
        maintainplus = '';
    }
    curphonevar = numval.replace(/[\A-Za-z!"£$%^&,*+_={};:'@#~,.Š/<>?|`¬][]/g,'');
    phone.value = maintainplus + curphonevar;
    maintainplus = '';
    phone.focus;
}

function Validate(txt) {
    txt.value = txt.value.replace(/[^a-zA-Z-'nr.]+/g, '');
}

function email_validate(email)
{
var regMail = /^([_a-zA-Z0-9-]+)(.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+.)+([a-zA-Z]{2,3})$/;

    if(regMail.test(email) === false)
    {
    document.getElementById("status").innerHTML    = "<span class='warning'>Please enter a valid email address.</span>";
    }
    else
    {
    document.getElementById("status").innerHTML	= "<span class='valid'>Email address valid</span>";	
    }
}

function dob_validate(dob)
{
var regDOB = /^(d{1,2})[-/](d{1,2})[-/](d{4})$/;

    if(regDOB.test(dob) === false)
    {
    document.getElementById("statusDOB").innerHTML	= "<span class='warning'>DOB is only used to verify your age.</span>";
    }
    else
    {
    document.getElementById("statusDOB").innerHTML	= "<span class='valid'>Thanks, you have entered a valid DOB!</span>";	
    }
}

function add_validate(address)
{
var regAdd = /^(?=.*d)[a-zA-Zsd/]+$/;
  
    if(regAdd.test(address) === false)
    {
    document.getElementById("statusAdd").innerHTML	= "<span class='warning'>Address is not valid yet.</span>";
    }
    else
    {
    document.getElementById("statusAdd").innerHTML	= "<span class='valid'>Thanks, Address looks valid!</span>";	
    }
}

 

Share this post:
read more

Only perform a JavaScript function a set number of seconds after the last keypress

“keyup” functions are handy when working with user input as they save the user having to hit submit, or click off the input to get something validated.  However, it can be annoying to be making a million database calls everytime you hit the button.  Sometimes, it is better to wait a little while after the last key press before anything happens.  This little throttle function can help with that.

First, create the throttling script.

function throttle(f, delay){
    var timer = null;
    return function(){
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = window.setTimeout(function(){
            f.apply(context, args);
        },
        delay || 1000);
    };
}

The throttling function can then be added to the keyup function with the delay specified in the “delay” section.

An example of a keyup that it can be added to:

$('#someInput').keyup(throttle(function(){
  // Only do something after "delay" milliseconds have passed  
}));

 

Share this post:
read more