Full Screen jssor Slider Exact Window Width & Height

I’ve been working on a program for my side job that is supposed to have lots of slider like features between content with LOTS of content.  My favorite slider libray, because it’s got SO much functionality for devs is jssor.

One thing I could not find a proper solution for was making a full screen slider that would work on any screen or device (with a modern browser).  So, I thought and thought and came up with a solution.

So there’s no way to set jssor height by percentage or parent height and keep the width proportional.  I tried everything I could but it absolutely must be pixels.  There are some options that set it but the width is then off.  Seriously, I tried everything.

So What If We Set It By Pixels?

I mean, it is a php site.  So I came up with an interesting solution.  It’s not bullet proof, especially if the user resizes the window, but it works.

My php starts with this:

session_start();
if( isset( $_REQUEST['wslides'] ) ) {
   $_SESSION['wslides'] = $_REQUEST['wslides'];
   $_SESSION['hslides'] = $_REQUEST['hslides'];
}
if( !isset( $_SESSION['wslides'] ) || isset( $_REQUEST['reset'] ) ) {
   header( "Location: set-dimensions.php" );
}

Here we start a session, then, we see if there’s a query variable called ‘wslides.’  If there is, then we have ‘wheight’ too and we know what pixels to set for our slider.  Bam!

So How Do We Get Those Pixel Dimensions?

Look at the next ‘if’ statement.  If we don’t have a session set for width and height we forward to a page called ‘set-dimensions.php’.  Here’s the full code of that page:

<html>
<head>
   <title>Loading</title>
   <script language="javascript" type="text/javascript">
      window.location.href='index.php?wslides=' + window.innerWidth + '&hslides=' + window.innerHeight;
   </script>
</head>
<body></body>
</html>

It’s just used to set dimensions of window very fast then send back with the query variables.  Now we can build our slider to the window’s width!

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: <?php echo $_SESSION['wslides']; ?>px; height: <?php echo $_SESSION['hslides']; ?>px;">
 <!-- Slides Container -->
 <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: <?php echo $_SESSION['wslides']; ?>px; height: <?php echo $_SESSION['hslides']; ?>px;">
  <div id="slide-welcome">hello</div>
  <div id="slide-goodbye">goodbye</div>
 </div>
</div>

The WP Crowd Podcast: Level’ing Up as a WordPress Developer

I’ve joined the team over at The WP Crowd for the most recent podcast.  I’ll also be blogging over there as well, so keep an eye out for my articles!

Episode 029: Level’ing Up as a WordPress Developer

 

WordPress Admin JS Errors Galore: Load-Scripts.php

When moving to nginx for the first time I had the lovely idea to put all 8 sites from my personal centos 6.5/apache 2 server into technology I’ve never used before.

Lots of small issues were encountered immediately but they all seemed to have quick google-able fixes.  Until the load-scripts.php errors began happening.  After a couple weeks of slowly tweaking the new server and trying not to break it, it broke.  I don’t know which tweak of mine caused it as I didn’t notice it until doing some plugin upgrades on one of my sites.  Then it started popping up more and more.  Unexpected ending in my javascript, this error was showing all over the place with different sources.

After a lot of debugging including some Tiger Woods Bobble Head debugging, I found a pattern.  When load-scripts was pulling in a bunch of libraries it would just stop loading at seemingly random points.  Error logs were showing permission errors to /var/lib/nginx.  A light came on, I had recently changed the default user www-data; line in nginx.conf to user ftpuser; in an attempt to have WordPress and my ftp user able to write to the server.

Switched it back to www-user and everything was fixed.  Now I just need to really dive in to users/groups and permissions on nginx and do it the right way.

Max File Size Uploads on a WordPress Multisite Install

I had a client with a fairly large multisite.  He needed the size limits for new media uploads to be around 8 megs.  I tried adjusting php.ini

upload_max_filesize = 8M
poas_max_size = 8M

Nope, still limited.  I tried adding define(‘WP_MEMORY_LIMIT’, ‘8M’); to the wp-config.php file, still limited to 1MB when trying to upload.  Well, it’s simple.  In the WP Network Admin go to Network Settings, scroll to the bottom and voila:
Site upload space Limit total size of files uploaded to “Max upload file size” set in KB’s.  Just changed that to 8000 and everything was a go!

Block & Disable All New User Registrations & Comments Completely

I have one website that must have some malicious back door in the theme or plugins.  I don’t use the site much and haven’t maintained it well but this is also not the first time I’ve had comments turned off and anyone can register turned off and STILL got flooded with spam accounts and (unapproved) comments littering my database.  This plugin removes the ability to register or comment completely, back doors and all.

Edit: Now live in WordPress.org Repo: https://wordpress.org/plugins/block-disable-all-new-user-registrations-comments-completely/

Feel free to try it out here: http://whoischris.com/DABARACC.zip

Download Raw HTML Form Importer for Gravity Forms BETA

It’s working well from what I can tell.  I’ve added a couple of small features such as setting name and description and the ability to copy the input fields name to the label.  I have not got the radio button import yet… feel free to try it out!

http://whoischris.com/better-html-form-importer.zip

It’s Alive! Importing Raw HTML Forms into Gravity Forms

I was inspired to do this project because my job at USF Sarasota-Manatee requires moving old code over to WordPress.  We have a very large legacy site that has loads of hard coded, sloppy HTML, so moving it hasn’t been easy.  One of the worst parts is the long forms which there are still a few lingering.  So I had an idea and it is actually working.

Our system is moving to Gravity Forms.  As of now we have a mixture of google forms, hard coded forms and contact form 7 forms.  This tool should simplify centralizing them all into gravity forms big time.

In my previous post I had managed to create some results by scraping and pulling labels for the inputs that were pretty close.  I’ve formatted it into a proper plugin and at this point I’ve managed to get it importing into Gravity Forms.  Feels good, man.  Heck of a challenge, but nothing feels better than seeing your idea blossom into reality.  Feel free to take a look at the code and even try it out, it’s getting there but still a ways to go and many features to add.

https://bitbucket.org/MrFlannagan/better-html-form-importer

Building an HTML Form Importer for WordPress

Git: https://bitbucket.org/MrFlannagan/better-html-form-importer

I was working on a project for work recently where I had to take an old, terribly-coded, ASP.NET processed HTML form and move it over to WordPress.  This thing had a lot of inputs, selects and such.  Did a quick search for a tool that might help simplify the process.  For one thing, it would save some real time and for another, I HATE doing monotonous tasks.

Well, I had no luck finding anything to help me so I thought, “What if I could build it?”  I love toying with building scrapers and parsers.  I knew this would be sloppy as every crappy HTML form has completely different code, different structures, different mark-up and more times than not broken HTML.

I sketched a few concepts and settled on something that would work with <div> layouts, <table> and whatever else.  Will it work perfect? I knew right away that was not the case, but if I could get 80%, hell 60% right on most then it would save some real time.  And if I built some tools to help simplify fixing the errors, well hell, we saving some serious time, baby!

So what I settled on was this:

  • Recursively loop through all nodes in a block of HTML using DOMDocument.
  • Save current element if it’s just text/characters.
    This part gave me some issues.  I tried using preg_replace to remove all white space and detect if the element is a word but it just wasn’t catching them all.  So I decided to split the whole thing into individual characters.  If looping through encountered a character then it breaks and uses that node as the current element.  Basically this just bypasses any strange white space characters.

    if( 3 == $node->nodeType ) {
        $allchars = str_split( $nValue );
        foreach( $allchars as $achar ) {
            if( ctype_alnum ( $achar ) ) {
                $prevText = $nValue;
                break;
            }
        }
    }
  • If the element is a form input of some sort, create a label input with value of previous textual element (saved as current element in previous step), create an element name input,  and finally create a duplicate of current element with it’s value in a table row and display it.

This way every form element would be displayed with a label best guessing its previous label and allow that to be edited easily.  It would also display an editable field for the name of the element and one for its value.

So far, I’m really happy with the results.  (https://bitbucket.org/MrFlannagan/better-html-form-importer)

My plan is to finish all the different types of inputs (checkboxes, file uploads, etc.) and then add a way to drag and sort them, create additional elements and more.  I’ll give users the option to create a shortcode where they can display it, set if it emails/stores results in database and finally I’m hoping to make use of the Gravity Forms API and allow it to import there and other form plugins I can figure out.