Posts

Free Pop-up / Overlay Script

I created a cool little script to help you create custom pop-up screens for your website. For example: http://jpmalloy.com/popup.html All you need to do is add the JavaScript at the bottom of your webpage's source code, before the closing </body> and create a div container like below. Also, don't forget the CSS. There is an ability to create new instances of popups via the JavaScript mode too. View the source code for the example at  view-source:http://jpmalloy.com/popup.html or download the JavaScript file here: http://jpmalloy.com/popup.js Feel free to modify the script and use however you want, but leave credit intact. Thanks.  <div id="popup-container2" data-header="Example 2" data-style="background-color:lightblue;width:80%;margin-top:40px;z-index:2" style="display:none">     <div style="padding:0px 20px 20px 20px;">     content goes here     </div> </div>  If I update the script, I will let ...

Using JavaScript to get a users local time and difference and display as time ago

We are going to use Timeago, a jQuery plugin to display the users time with a fuzzy timestamp. For example, "about 1 day ago". You can download it here: http://timeago.yarp.com    First we create our time HTML element: <time class="timeago" datetime=""></time> To get the timestamp calculation of a user, use the following for the timezone difference between UTC and Local Time and getTime to return the number of milliseconds since 1970-01-01 from the instance of the Date class. <script> var x = new Date(); var stamp = (x.getTime() + x.getTimezoneOffset()*60*1000)/1000; // You could then store this timestamp in a database or something and select it later for use to display the time ago like below. // For demo purposes, I am going to next set the time element with a datetime attribute to hold our timestamp as ISO 8601 UTC $("time.timeago").attr("datetime":stamp);  // Lastly we update the time element with our fuzzy time....

How to write a Redirect rule for an IIS web server inside a web.config file

The first important part is the "rule" element. Everything inside the opening and closing tags of this element describe what your rule does. The rule has a few attributes setup for the rule's name, pattern syntaxing, processing, and if it's enabled. <rule name="Redirect to https" enabled="true" patternSyntax="Wildcard" stopProcessing="true"> </rule> The next child element is the start of our rule. Using the wildcard * inside the "match" element's url attribute tells the server to match any character found in your website's URL. <match url="*" negate="false" /> Next we have the "conditions" element that lets the web server know to ignore any patterning matching for HTTPS requests.  <conditions logicalGrouping="MatchAny">      <add input="{HTTPS}" pattern="off" />  </conditions> Lastly we have the "action...

An example of chaining jQuery Ajax request callbacks

Chaining is a great way to separate your Ajax request callbacks' code and run multiple commands/functions on one element in a row. The fail callback function is a must for finding out if anything goes wrong with the HTTP request. I recommend the below code for alerting your user of anything going wrong with a request. You can have the error posted to any notification system you have. For demo purposes, I am using the vanilla alert function. As a bonus, I have added comments to the code for explanation. $.ajax({     // request information goes here }).done(function(data,textStatus,jqXHR){     // handling of successful requests goes here      // please note this will not fire if there is a failed request, use the always chain for that }).fail(function(jqXHR, exception) {     // handling of bad requests goes here     if (jqXHR.status === 0) {         alert('Could not connect to the s...

Rewrite rules for IIS web server inside a web.config file

I am going to show you the entire XML file upfront and then break down the important parts that make the magic happen. With that said, here is the XML file: <?xml version="1.0" encoding="UTF-8"?> <configuration>     <system.webServer>         <rewrite>             <rules>                 <rule name="profileurl1" enabled="true">                     <match url="^([^/]+)/?$" />                     <conditions>                         <add input="{REQUEST_FILENAME}...

Creating hashtag hyperlinks on the fly for your website

In this post I am going to show you how to take any string of text containing hashtags and convert them into clickable URLs, AKA "hyperlinks". Okay, to get started we will first need some text containing hashtags. $text = 'You can find #programming help at my #blog.'; Now we will use the following regular expression pattern to find all hashed words in the string. $pattern = "/\#([A-Za-z0-9_-]*)/is"; It's important to note, that with this pattern, if you include anything inside the brackets, like a period after the 9, it will find the period with the word. With this pattern we can pass it into the PHP preg_replace_callback function. The callback function will return our matches found and replace all hashtags with clickable URLs. $text = preg_replace_callback($pattern,      function($matches){           $nohash = str_ireplace('#','',$matches[0]);           return '<a href="?tag='.$nohash.'" target="_self"...

How to execute a PHP file via the command line and output the results

Today I am going to show you how to execute a PHP file via a command line interface and output the result to the terminal. You will also learn how to pass in arguments to the PHP file. The first step is to test to see if the global "argv" variable is set. If it is, then we can run our program and get the array of arguments passed to our script.  if(isset($argv)) { Side note, you can read the history behind ARGV here: https://flatironschool.com/blog/a-short-explanation-of-argv The next step will be to slice our argument's array into a string and populate our $_GET array with the new key value variables we have passed in. parse_str(      join( "&", array_slice( $argv, 1 ) ), $_GET ); Lastly, we will print out the new array to see the results.      echo "\n";      print_r($_GET);      echo "\n"; } To test this script you will need to find the full path to your command line PHP executable file. You can then open up a comma...

A handy command to find a files location on a Linux machine

One of my old favorite commands to find a file on a Linux machine is the following: find / | grep "somefile.ini" It will use the find command along with grep to find all files matching "somefile.ini". If you want it not to be case-sensitive, you can add the -i option in front of the file name you are searching for. For example: find / | grep -i "somefile.ini"   This example is searching from the root directory of your server. It will output all found matches to your terminal.

Using phpinfo() to find out error reporting settings

Image
When things go wrong, every programmer needs to know for development purposes where to look to debug the problem. The PHP function phpinfo() is the first place to look to find out how PHP is reporting errors. The following will print out all of PHP settings, directives and their values.  echo phpinfo();   The "error_log" directive will let you know where errors are being written to. You can set the local value at run time inside your script or by editing your PHP configuration file "php.ini". For example, to set the local value via your PHP script:  ini_set('error_log','error.log'); Two other directives are also important. The "log_errors" should be set to On and "error_reporting" to  E_ALL Make sure for production (site going live) you turn off "display_errors" and "display_startup_errors" or they will show on your live site.

A simple example of responsive wrapping layout with CSS Flex

If you have been living under a rock, then you probably have not heard about CSS Flexbox and Grid layouts. The old days of float layouts are over for responsive design! Now you can create simple responsive wrapping layouts with CSS Flex.  So, without further ado, here is the example: <style> div.container {     display: flex;     ju stify-content: left;     align-items: center;     flex-wrap: wrap;     column-gap: 10px; } </style> <div class="container">      <div>Item 1</div>      <div>Item 2</div> </div> There you go, an example on how to wrap child div elements or anything for that matter inside the parent container using Flex.