SJPPLOG - Scotts jQuery PPLOG

Welcome to SJPPLOG - a custom version of PPLOG, with some added features. SJPPLOG simply means "Scotts jQuery PPLOG".

Download SJPPLOG (221kb)

Installation: see here
NOTE: For SJPPLOG, you must also set $config_wwwFolder.

Here are the added features:

- enable/disable change stylesheet from menu (uses cookies)
- enable/disable jQuery 1.4.1
- enable/disable lightboxes (requires jQuery)
- enable/disable code highlighting (requires jQuery)
- added [box] to bbcode for lightboxes (requires jQuery)
- added more setup options for file directories
- can install anywhere, even separated from main script
- fixed all spelling errors and typos
- updated layout a little bit in some places

I also added the following setup options:

$config_wwwFolder (webserver root)
$config_JSFilesFolder (javascripts folder)
$config_imgFilesFolder (main images folder)
$config_imgThumbsFolder (thumbnail images folder)
$config_enableStyleSelect (enables switch styles from menu)
$config_enableJQuery (enables jQuery)
$config_enableJQueryCodeHighlighting (highlighted code in [code] tags)
$config_enableJQueryLightboxes (lightbox popups in [box] tags)

All added features can be turned off, and only the required javascript files are loaded - depending on your settings - so there is no extra overhead if not using the added features.

With the added folders and folder config options, it is now also possible to install your main script in your cgi-bin, and all others files elsewhere.

If jQuery is not enabled, all features that depend on jQuery will be disabled as well. This should mean that I have a nice PPLOG, but with totally optional, extra features.

sc0ttman

Posted on 4 Mar 2011, 24:21 - Category: SJPPLOG
12 Comments - Edit - Delete


Highlighted Code

Here is an example of highlighted code:

VAR='string'; # comment

function echo_stuff (){
$1=$var;
echo "Var is $1"
exit 0
}
echo_stuff ("go away!")

Please note, that language detection needs to be automatic at this stage, and as such, highlighting of the code given may not be perfect.

The code can be highlighted by the the code bbtag. Click 'Edit' below to see the source of this post for more info.

Code highlighting can be disabled by editing this script and setting the $config_enableJQueryCodeHighlighting variable to 0.

If you want to change some highlighting options, open this site in a text editor, and scroll down to around line 360, where it says

$.SyntaxHighlighter.init({'

Here you can enable or disable features such as showing line numbers, word wrap, alternate line colours and a few others.

Posted on 4 Mar 2011, 23:36 - Category: SJPPLOG
No comments - Edit - Delete


Lightboxes

Here are some examples of lightbox popups:

Show an uploaded image, with thumbnail:


(In the above example, 'desktop.jpg' has been uploaded to $config_imgThumbsFolder, and a smaller 'desktop.jpg' in $config_imgThumbsFolder)


Show a youtube video:
http://www.youtube.com/watch?v=44E-lW3aYhM


Show a QuickTime movie (with dimensions):
http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&height=360


Show a whole website:
http://google.com?iframe=true&width=100%&height=100%


To see what other URLs you can add to your lightboxes, please visit the prettyPhoto homepage: Prettyphoto - a jQuery lightbox clone

To see how the lightboxes are added using bbcode (in this case the box tag) then click 'Edit', to see the source code of this post.

Posted on 4 Mar 2011, 23:36 - Category: SJPPLOG
No comments - Edit - Delete


Switch Stylesheet

Look at the menu on the left - at the top is the header 'Change Styelsheet' and below it are the CSS stylesheets for this site, found in your default styles folder ($config_currentStyleFolder).

Click on any a style to enable it. The selected style will be saved in a cookie, your settings are remembered as your browse the site.

You may notice the stylesheets chosen are appended by a timestamp - this ensures they are considered new, so that all stylings on the page are refreshed.

Note, all stylesheets in $config_currentStyleFolder must be named 'style.css', 'style1.css', 'style2.css' (and so on) to be found.

Any files or images used by your stylesheets should go in a sub folder, in $config_currentStyleFolder and linked to accordingly in your style*.css files.

Posted on 4 Mar 2011, 23:36 - Category: SJPPLOG
No comments - Edit - Delete


Project Complete

I have completed my updates of PPLOG. I am very happy with it. I have added these updates:

- enable/disable change stylesheet from menu (uses cookies)
- enable/disable jQuery 1.4.1
- enable/disable lightboxes (requires jQuery)
- enable/disable code highlighting (requires jQuery)
- added [box] to bbcode for lightboxes (requires jQuery)
- added more setup options for file directories
- fixed all spelling errors and typos
- updated layout a little bit in some places

All added options can be turned off, and only the required javascript files are loaded - depending on your settings - so there is no extra overhead if not using the added features.

With the added folders and folder config options, it is now also possible to install your main script in your cgi-bin, and all others files elsewhere.

If jQuery is not enabled, all features that depend on jQuery will be disabled as well. This should mean that I have a nice PPLOG, but with totally optional, extra features.

Posted on 4 Mar 2011, 23:36 - Category: SJPPLOG
No comments - Edit - Delete


Useful sites for web programming

While building my jQuery-enabled PPLOG, I have been hunting around for solutions to various problems, as well as nice functions and snippets that can help me.

I found a number of websites, whichc were of great help to me - some well known, others not so much. Here is the list:

stackoverflow.com - ask programming questions, experts answer
troubleshooters.com/codecorn/ - useful, easy articles on PERL, JavaScript, etc
thesitewizard.com - easy how tos on scripting and web design
regular-expressions.info - lots of easy and useful guides, downloads
google.com - of course!

Posted on 4 Mar 2011, 14:14 - Category: Web Design
No comments - Edit - Delete


PPLOG lightboxes

I've been trying to get the jQuery lightbox 'prettyPhoto' to work in PPLOG. So far so good.

I created an additional bbcode tag, to be used in the editor, which adds lightboxes. So far, I have the following:

[ box ] filename.jpg [ /box ]

Using this, it will then display the thumbnail, as a link to the lightbox of the full size image.

Note: my PPLOG will search for the given filename in both $config_imgFilesFolder and $config_imgThumbssFolder. Obviously this means, you must have uploaded both the full size image and the thumbnail for it to work correctly.

I have also managed to catch youtube URLs, and show the video in a lightbox popup. So on my PPLOG, the bbcode below will display the given youtube video in a lightbox.

http://www.youtube.com/watch?v=44E-lW3aYhM

I am still working on making all other URLs work with the [box] tag, but that should be the next step and will be done soon.

I've tested on the [img] tag, and have it working with local files, and whole URLs. This matches the whole URL:

https?:\/\/.*?.*?

But this matches only http://, apparently :

https?:\/\/.*?


Posted on 4 Mar 2011, 23:41 - Category: SJPPLOG
No comments - Edit - Delete


PPLOG upgrades

I have taken a sideways turn in my PPLOG development. I have now started using jQuery for the following reasons:

- I want one framework, providing all additional features
- jQuery is the only framework with plugins that fit all my needs (highlighting of html entities, multimedia lightboxes, etc)

I have updated the style selector, and integrated it more heavily with the PERL backend, so it reads the .css files found in $config_currentStyleFolder. I used the javascript found here: http://stackoverflow.com/questions/2011176/changing-a-stylesheet-using-jquery

I also added the following setup options:

$config_wwwFolder (root of webserver)
$config_JSFilesFolder (dir with all js files)
$config_imgFilesFolder (dir with all images)
$config_imgThumbsFolder (dir with all thumbnails)
$config_enableStyleSelect (enable/disable stylesheet changing)
$config_enablejquery (enable/disable jQuery)


I have also added a [box] bbcode, that enables lightbox popups, using the [box] bbcode tag, plus a new button 'box' for the editor.

I had to update the regular expression which converts the [img] and [box] tags, using (?:.*\/)?(.+?) instead of just (.+?), to return only the filename.


Currently the [box] bbcode only works with images, as the HTML generated looks in $config_imgFilesFolder and $config_imgThumbsFolder for the given image.

However, I plan to update this a little, to allow for more other uses, videos especially. How to do this yet remains a mystery.


Posted on 4 Mar 2011, 23:38 - Category: SJPPLOG
No comments - Edit - Delete


PPLOG style selector

I have added a very simple CSS stylesheet switcher to my PPLOG, using some javascript found here:
http://www.codelifter.com/main/javascript/changestyles.html

Styles must be stored in the styles directory named in the main script, and named style1.css, style2.css and so on.

The menu links are hard coded for now, but I hope to add some PERL to the main PPLOG script, which will list all .css files found in the default styles directory.

EDIT: I stopped using this one and updated to another method as this one clears all stylesheets before applying the new one - not good if you use multiple stylesheets - and I was, for the added syntax highlighting.

Posted on 4 Mar 2011, 23:35 - Category: SJPPLOG
No comments - Edit - Delete


jQuery Syntax Highlighter

I have been looking online for a JavaScript based syntax highlighter, to use on this blog, and I have found this:
http://balupton.com/projects/jquery-syntaxhighlighter

I have managed to get it working on this blog, so that it now supports code highlighting so when I post some code, it will be nicely highlighted in various colours, making it easier to read.

I have noticed that PPLOG requires the following from any js-based syntax highlighter:

- support for highlighting of HTML entities
- automatic language detection
- custom CSS styling

This is because bbcode is limited to certain formats, and I do not have the required regular expression skills to create any advanced formatting of the [code] tag.

Other options, which seem to match the requirements above are:

- Highlight.js
- JUSH (requires jQuery)
- chilli (requires jQuery)

I don't want to use jQuery if I don't have to, so hopefully, Highlight.js will be good enough, and I can make it work.

Posted on 5 Mar 2011, 11:44 - Category: SJPPLOG
No comments - Edit - Delete


Pages: [1] [2] [3]