jQuery Tutorial: Scroll UI dialog boxes with the page as it scrolls

Comments 14 Standard

Do you have a jQuery UI modal dialog box that you want to scroll down as the page scrolls? I tried searching for someone who’d figured out a way to do it but I couldn’t find anything so I did the grunt work myself and thought I’d share it with you. This will scroll the dialog and the modal overlay so they stay correctly positioned on the page even if the user moves the browser window scroll bar with their mouse pointer or a mouse scroll wheel.

Scroll UI Dialog With the Page

$(document).ready(function() {

        if ($(".ui-widget-overlay")) //the dialog has popped up in modal view
            //fix the overlay so it scrolls down with the page
                position: 'fixed',
                top: '0'

            //get the current popup position of the dialog box
            pos = $(".ui-dialog").position();

            //adjust the dialog box so that it scrolls as you scroll the page
                position: 'fixed',
                top: pos.y

Demo and Code

Want to see how it works? Try the working JSFiddle demo and see for yourself.

Linux Tutorial: Blocking IP Addresses From Your Server

Comments 5 Standard

Every time I need to remember how to do this I find myself looking it up so I figured it’s about time I just put my fingers to my keyboard and write it down. These commands will work on most *nix machines. If you’re not logged in as the root or have admin permissions then you’ll need to add sudo to each of the commands below. In each of these examples you’d replace xx.xx.xx.xx with the IP address in question.

How To List Your Existing IP Address Rules

If you want to know what your iptables looks like before you get started then this will list your current rules.

iptables -L

If you’re looking for the help docs on the iptables you can see the manual entries here:

iptables -h

How To Block an IP Address

To block a specific IP address you would use the following command. Then to save your changes to the iptables you’ll need to save the new rules in your config file, otherwise the rules will be lost if your server restarts. Replace xx.xx.xx.xx with the IP address you want to block.

iptables -A INPUT -s xx.xx.xx.xx -j DROP
service iptables save

How to Block an IP Address for a Specific Port

Replace yy with your port number and xx.xx.xx.xx with the IP address.

iptables -A INPUT -s xx.xx.xx.xx -p tcp --destination-port yy -j DROP

How To Unblock an IP Address

Now let’s say you block the wrong IP address or you need to take one off for some reason. In order for the change to be permanent you then have to save the updated rules to the config file. Replace xx.xx.xx.xx with the IP address:

iptables -D INPUT -s xx.xxx.xx.xx -j DROP
service iptables save

How To Remove All IP Table Rules

This will only remove all of your IP table rules temporarily unless you save the changes afterwards using service iptables save. Otherwise all of your rules will return to normal when you restart.

iptables -F

How To Block A Range of IP Addresses

This is useful if you want to block specific locations (ie countries) or specific internet providers or users who are assigned an IP from a range pool. You can block 8, 16 or 24 ranges. You can find what IP block an IP is contained within by using the WHOIS lookup at ARIN. Replace xx.yy.zz with the correct portions of the IP address depending on how much you want to block.

Block 8 Range from x.y.z.0 to x.y.z.255

iptables -A INPUT -s xx.yy.zz.0/8 -j DROP

Block Range 16 from x.y.0.0 to x.y.255.255

iptables -A INPUT -s xx.yy.0.0/16 -j DROP

Block Range 24 from x.0.0.0 to x.255.255.255

iptables -A INPUT -s xx.0.0.0/24 -j DROP

References & Resources


PHP Function: Posted Time Ago – Facebook Style

Leave a comment Standard

So I won’t claim credit to this but I was browsing DevNetwork and I found a function that is both useful, succinct and awesome all rolled up into one. Using a php lookup table you can calculate the time since something was posted in PHP ie “so and so posted x time ago” facebook style.

function time_passed($timestamp)
     $diff = time() - (int)$timestamp;

     if ($diff == 0) 
          return 'just now';

     $intervals = array
         1                   => array('year',    31556926),
         $diff < 31556926    => array('month',   2628000),
         $diff < 2629744     => array('week',    604800),
         $diff < 604800      => array('day',     86400),
         $diff < 86400       => array('hour',    3600),
         $diff < 3600        => array('minute',  60),
         $diff < 60          => array('second',  1)

      $value = floor($diff/$intervals[1][1]);
      return $value.' '.$intervals[1][0].($value > 1 ? 's' : '').' ago';

Javascript: Charts, Graphs and Data Visualization for the Web

Comments 2 Standard

I was searching for some graphing, charting and data visualization libraries and I thought it might be helpful to share my finds and my favorite. Enjoy!

  • High Charts – Best looking, easiest to use and by far has the most features. The downside… it’s also the most expensive. A developer license will run you around $400 and an unlimited developer license is $3,600. They also have a stock ticker version. Nice stuff and my first choice if you can afford it.
  • jqPlot – is the best freeware, open source library out there in my opinion. It allows you to customize the colors and axis labels and has support for bar, scatter, bubble, pie and area graphs. It’s not as easy to use but it will get the job done if need be.
  • JSCharts -a JavaScript based chart generator that requires little or no coding. Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is ready. Free version watermarked. Paid versions range from $79 – $169 commercial license and $39 – $89 non-profit license.
  • dygraphs – an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them.
  • InfoVis – provides tools for creating Interactive Data Visualizations for the Web. Freeware.
  • g.raphael – Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web and G.Raphaël is specifically for charts. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Very simplified js commands to create graphs and charts. Freeware.
  • sigma – Web network visualization. Freeware. Lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to display interactively static graphs exported from a graph visualization software and display dynamically graphs that are generated on the fly.
  • JSXGraph – JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, VML, or canvas. JSXGraph is easy to embed and is less than 100 KByte if embedded in a web page. Freeware.
  • Bluff – Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies; the only third-party scripts you need to run it are a copy. Freeware.
  • Visualization Free – an easy-to-use, no software download Web-based charting and visualization application. Not for commercial use.
  • Timeline – Interactive widget for visualizing temporal data. Freeware.
  • PlotKit – a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is a complete rewrite of CanvasGraph. It is better structured and supported. Freeware, requires MochiKit 13 or higher.
  • Flot – JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. Freeware.
  • Sparklines – generates small inline charts directly in the browser using data supplied either inline in the HTML, or via javascript.
  • MilkChart – This library will generate a graph similar to Microsoft Excel. Freeware.
  • Canvas 3D Graph – this is the only 3D graphing software I could find. Freeware.
  • TufteGraph – make graphs using jQuery. Configuration is by dynamic functions, allowing for a really compact API (very few options). Non-core layout is done via CSS rather than code. Freeware.
  • MooChart – is a mooTools plugin to draw bubble graphs on the canvas.
  • Protovis – Protovis composes custom views of data with bars and dots. Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Freeware.
  • Rickshaw – an open source javascript toolkit for creating interactive time series graphs
  • Google Charts – not exactly perfect but sometimes the KIS (keep it simple) rule works best.
  • Protochart – open source library using Prototype and Canvas to create good looking charts. This library is highly motivated by Flot, Flotr and PlotKit libraries.