Posts

Build 6.1 released with new on the fly feed option

Create dynamic gallery feeds on the fly with "load more" helper function 😋😜 Example: http://jpmalloy.com https://github.com/zavistmedia/jpmpopup/blob/main/pop6.js Feel free to change for your site's requirements.

Build 6 is here

Enjoy! Many improvements: error handling.... slow loading connection discovery and handling due to packet loss, due to ISP backbone problems etc  https://github.com/zavistmedia/jpmpopup/blob/main/pop6.js http://www.jpmalloy.com Please report any problem in comments.

build 5.3 is here... Happy Holidays (updated)

Updated 12/31/2020 Have a happy new year! This is the most stable release as of today. Please update all older versions. The next few builds will include cleanup of the code, but no major structural changes. Got rid of the event problems. Also added a new flood protection and new end-transition function to get rid of the double event attachments. http://jpmalloy.com

Version 3 is here... new configuration

Version 3 is here... new configuration. After some brainstorming I came up with a condensed version of the configuration. As always, share with as many people as you want. http://jpmalloy.com 😝😜💪👌  Make sure to update to build 5.2, 5.1 had some issues with the drag feature. The drag attach and detach event elements were named wrong.. brain fart today Also, if you want to revert back to Version 1, please note the configuration changes. var jpmx = new jpmpopup({ 'container':'popup-container4', 'style' :'background-color:rgba(0, 0, 0, 0.85);width:100%;z-index:5', 'onclose' : function () { console.log(this); }, 'gallery':{ 'animation':'slide', 'container':'.gallery', 'thumbnav':'on', 'onclick': function(item) { console.log(this); // a thumbnail was clicked, do something // use ajax here to pull/get some comments about the image or

Overlay Version 2 is here with key events and iframe support

The Demo: http://jpmalloy.com/pop3/ Download: http://jpmalloy.com/jpmpop.zip Esc event added! : )) Note: I may in the future add non JavaScript support with link fallback. For example, < div class =" item ">     <a href=" city.mp4 "> < img src =" city.png " alt =" City " data-file =" city.mp4 " data-id ="video -1 " data-type =" iframe " data-about =" City " / ></a> </ div > Version 1 had swipe and drag events already. Also, I have added iframe type support. Just add the data-type="iframe" with your data-file="iframe src" and you got your new iframe pop-up! for example, < div class =" item ">      < img src =" city.png " alt =" City " data-file =" city.mp4 " data-id ="video -1 " data-type =" iframe " data-about =" City " / > </ div > Now with new data width, heigh

Using Perl to get HTTP request headers

Before PHP and many new-age web scripting languages there was Perl. Today you can still use Perl for web development and it is included in xampp's web development suite. In this post I will show you how to use the CGI module to get the HTTP request headers and then loop through them and print them out. This is handy if you want to know if a web visitor is using a proxy server etc. The first line of code you need is the path to the Perl interpreter. In XAMPP it is: #!C:\xampp\perl\bin\perl.exe Next we include/use/set the CGI module, error reporting etc use strict; use warnings; use CGI; Next we call a new instance of the CGI class and map the headers array. my $q = CGI->new; my %headers = map { $_ => $q->http($_) } $q->http(); Finally we loop through the array and print out the key/value results. print "Content-type:text/html\r\n\r\n"; print "Got the following headers:\n"; for my $header ( keys %headers ) {     print "$header: $headers{$header}\

Videos in your blog posts

Image
If you want to include a YouTube video in your blogger posts, then simply click on the video icon. Then click YouTube, search, paste the video URL, and then select it. You can also change the size of the video by clicking on the video and dragging a corner in the editor window. For example:  

Detect unique active visitors on your website

To track unique users using your website, you can use the code below. In the example below I am using jQuery to send the HTTP get request. The idea is to send a Ajax get request to record any mouse movement on the webpage. This helps to decrease the amount of bot traffic stats etc.  Just include the small JavaScript on every page and create a server-side page to record the hit. I use a PHP server-side script to insert the IP address and browser info of users visiting my website into a SQL database. var mousemoved = false; window.onload = function(){         document.body.onmousemove = function() {             if(! mousemoved ){                 $.ajax({type: "GET",url: "track.php",timeout: 180000,data: "ajax=true&req=somepage",dataType: "HTML",success: function(data) {},error: function(XMLHttpRequest, textStatus, errorThrown) {}});             }             mousemoved = true;         }            } A updated version is below, but it may not wo

A more in depth responsive wrapping layout with CSS Flex

In this example I will show you how to create a more in depth wrapping layout using CSS Flexbox. The way the code below works is that it has a two column layout. The first column will increase or decrease to fill the allocated space inside a 1200px box including the fixed width of the second column (sidebar). If the width of the first column is smaller then 280px, the columns will wrap. For the example, see: http://jpmalloy.com/flex.html  The flexbox code:     .first-column {         display: flex;         flex-direction: column;         flex: 2;         min-width: 280px;         background-color: pink;         box-sizing: border-box;         padding: 20px;     }     .second-column {         display: flex;         flex-direction: column;         flex: 1;         flex-basis: max-content;         max-width: 280px;         min-width: 280px;         background-color: hotpink;         box-sizing: border-box;         padding: 20px;     }     .container {         display: flex;         justif