Saturday, September 26, 2009

imgHighLighter - jQuery Plugin


A newer version of this plugin is now available!

imgHighLighter is a jQuery plugin I wrote (my first!) that allows you to highlight a portion of an image when you hover over a link. In the image below, the mouse is hovering over the "Toolbar" link and you can see the toolbar portion of the image is highlighted (click on the image to go to the demo page).
I set up an example page here.

This is still an early version of this plugin but I know it works with IE8, FF and Chrome. Please leave me feedback if you any problems with how it works.

Setup
  • This plugin requires jQuery.
  • HoverIntent is an optional plugin, this plugin will use it's functionality if it is included.
  • Follow this basic template for each image you want to apply imgHighLighter functionality.

    CSS
    /* Image & descriptions */
    div.imgHL { width: 500px; margin:0 auto; }
    div.imgHL ul { text-align: center; }
    div.imgHL ul li { margin: 0; padding: 5px; list-style-type: none; float: left; }
    div.imgHL .descriptions { margin-top: 1em; clear: both; width: 450px; height: 2em; }
    div.imgHL .descriptions p {display:none;}
    
    /* General imgHighLight (overlay and highlight) */
    .imgHLOverlay { background: #000; opacity: .6; filter: alpha(opacity=60); }
    .imgHLDark, .imgHLLight, .imgHLOverlay { padding: 0; margin: 0; }
    
    /* imgHighLight Edit Mode CSS */
    .imgHLInfo { margin: 5px auto; }
    .imgHLCoords { margin: 5px auto; }
    
    HTML
    <div class="imgHL">
    <ul>
    <li><a href="#" rel="desc1:sx1,sy1,ex2,ey2">Link 1</a></li>
    <li><a href="#" rel="desc2:sx1,sy1,ex2,ey2">Link 2</a></li>
    <li><a href="#" rel="desc3:sx1,sy1,ex2,ey2">Link 3</a></li>
    </ul>
    <img class="imgHLMain" src="whole.jpg" alt="" />
    <div class="descriptions">
    <p id="desc1">Description for item #1</p>
    <p id="desc2">Description for item #2</p>
    <p id="desc3">Description for item #3</p>
    </div>
    </div>
    
    Javascript
    /* window load ensures all images are loaded */
    $(window).load(function(){
    $(".imgHL").imgHighLight();
    })
    
  • Highlights: The link's "rel" attribute contains all the information needed for the highlights.
    rel="desc1:sx1,sy1,ex2,ey2"
    desc1 = ID of the description that is associated with the highlighted area (do not include the "#")
    sx1 = Starting X position of the highlight box
    sy1 = Starting Y position of the highlight box
    ex2 = Ending X position of the highlight box
    ey2 = Ending Y position of the highlight box
    You can change the highlight properties using: borderColor, borderSize & borderType described below

  • Image: The script is set by default to find any image inside the main wrapper (.imgHL) as set by the function call
    $(".imgHL").imgHighLight();
    You can specify the exact image to modify by adding the imageID option (described below)

  • Descriptions: The wrapper class that contains the image highlight descriptions is set to "descriptions" by default. You can change this default using the descriptionWrapper option (described below). Each description within the wrapper is contained in a paragraph tag with a specific ID that matches the desc1 ID in the rel attribute.

  • Overlay: The overlay covers the image (darkens the background) to make the highlighted portion stand out more. You can adjust the opacity of this overlay in the CSS and you can turn off the overlay functi0nality (as it script does while in edit mode) by setting the overlay option.
Customizing / Options
This plugin has the following options:
$(".imgHL").imgHighLight({
borderColor: '#fff',                  // Color of the highlight border
borderSize: '2',                      // Thickness of highlight border
borderType: 'solid',                  // Type of highlight border
imageID: 'img',                       // Object or ID of the main image (e.g. #myimage or just img - if it's the only img inside the container)
descriptionWrapper: '.descriptions',  // Class wrapping all the descriptions
overlay: true,                        // Activate overlay (default = true)
editMode: false                       // Enable edit mode - on screen display of the image coords so you can get the info you need easier
})
Edit Mode
  • I've included an edit mode for this plugin which should make it easier for you to obtain and add the coordinates of the edges of the highlight box.

  • Edit mode can be activated in two ways:
    1. Using the editMode option when calling the plugin (described in the last section)
    2. Add a link along with the other highligh links. This method is the best as it allows you to activate and deactive edit mode.
      <li><a href="#" class="imgHLEdit">Edit Mode</a></li>
  • While in edit mode, additional information is added into the caption area... it displays the current cursor X and Y position.
    X = 0px, Y = 0px - Click to lock/unlock coordinates
  • If you click on the image while in edit mode, it locks the displayed coordinates so moving the mouse off the image won't change the display. Hopefully this will make it easier to edit your source document with the coordinates.

  • Additionally if you hover over a link, the highlight box will display (with overlay off) to allow better visualization of the highlight box.
Bugs / Suggestions
  • At this time, the options you chose will apply to all the imgHighlighter images on the page (to be fixed in future versions)
  • When the window is repositioned, the highlights may be off until it is refreshed again when you hover over a link (especially while in edit mode), and sometimes you'll need to reload the page.
  • Future versions will allow you to highlight the image from links located anywhere on the page.
  • To make suggestions or report any bugs please email me at wowmotty at g mail dot com. Additonally, this is my first plugin, so if you can help me out with any suggestions or tips on how to improve the code I would greatly appreciate it :)

Thursday, September 24, 2009

Random Image by Date


A newer version of this plugin is now available!


The following script will show a random image depending on the date.

The frame below contains this script... you can view it directly by clicking this link. You can view the page source from there.
Setup

The set up is fairly simple. The page requires two things to work:
  1. jQuery installed (you can use Google's copy as seen in the page source)
  2. An <img> anywhere on your page with an ID of "todaysimage", if it doesn't exist, it will append it to the body.
Then you'll need to set up your image arrays as follows:
  1. In the javascript, add the template below.

    images.push (["DATES","IMAGE URL"]);

    DATES = The date range to display the image.
    IMAGE URL = Full path to your image.
  2. The DATES must follow this format:

    Dates
    Description
    0 Set image as a default (will only display if no date specific images are found).
    1/1 Dispaly image only on Jan 1st.
    1/1 - 1/5 Dispaly image from Jan 1st to Jan 5th (spaces are okay).
    7/20 - 8/20
    Display image from June 20th to August 20th.
    1/3rdMon Display image only on the 3rd Monday of Janurary.
    5/lastMon Display image only on the last Monday of May.
    11/3rdThur-11/4thThur Display image from the 3rd Thursday of Nov to the 4th Thursday of Nov.
    12/20-1/1stSun
    Display image from Dec 20th to the 1st Sunday of Janurary.

    IMPORTANT NOTES:

    • The dates that cross months (7/20-8/20) will display along with date specific images (added to the randomization).
    • Use slashes "/" to separate the month and day and dashes "-" to set a range (e.g., using 1-1 to 1-5 will break the script)
    • Using the last weekday (lastMon) of the month in the date has one restriction at this time... it'll only works for 30 day months for now. I may fix this in future versions.
    • When using the text in the date (e.g. 1st, 2nd, 3rd, last) don't spell these fully out ( first, second, third) as the script is looking for the number.
    • The weekday in the date must have at least 3 letters - these are okay: (Mon or Monday); these are not okay (M or Mo).
Troubleshooting
  • If you are noticing that one image isn't showing up or something just doesn't work right, you can try to trouble shoot the problem.
  • Look for the following lines in the script below the "Don't change anything below this line"

    var debug = false; /* for debugging purposes */
    var thismonth = (debug) ? 11 : date.getMonth() + 1;
    var thisday = (debug) ? 20 : date.getDate();
    var thisyear = (debug) ? 2009 : date.getFullYear();

    • Set the debug variable to "true" and then adjust the date (in blue) to manually adjust the date.
    • Run the script and you can see what the script gets for results from your variables.
    • The display will show images found for the current month (thismonth variable) and show the date it derived as well as if it's within the date range.

  • Additionally, you can access the debug mode from the address bar simply by adding the following (in blue) to the end:

    http://myurl.com/randomImage.htm#debug:12/31/2009

    • #debug - actives the debug mode
    • 12/31/2009 - sets the date you want to check (month/day/year)

    To prevent debug from working once you are done with your script, simply set the locked variable in the script to true:

    /* locks out debug mode from the URL*/
    var locked = true;
  • Sample debug output:

    Date used: 11/20/2009
    (11/11), derived range: 11-11 is NOT in range; image = veterans1.jpg
    (11/11), derived range: 11-11 is NOT in range; image = veterans2.jpg
    (11/11), derived range: 11-11 is NOT in range; image = veterans3.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving1.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving2.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving3.jpg
    (11/3rdThur-11/4thThur), derived range: 19-26 is in range; image = thanksgiving4.jpg

    # of currentImages = 4
    current random image = thanksgiving4.jpg

  • Try out these links to see the debug mode in action (my example script isn't locked):

    1. #debug:1.1.2010
    2. #debug:10/31/2009
    3. #debug - This will default to todays date, but edit mode is active

Saturday, September 19, 2009

MMORPG Server Status

I just started teaching myself php and figured out how to make a server status box for a couple of online games. So far I've added a server status for Aion, Lord of the Rings and Warhammer. These are free for anyone to use. I made it so you can add your own CSS and I added a few parameters to make them even more customizable!


Note: These server status boxes obtain information directly from their respective pages (see the source of the page). The information is cached every 10 minutes and hopefully that is enough to keep from aggravating the site admin and locking me out.

If you require more detailed instructions, click the appropriate link below.

Server Status Available000Space
Site
AionX
LOTRO - USX
LOTRO - EUX
WarhammerX*
WoW - USX
WoW - EUX

Update: The mirror site at motty.000space.com, well is almost a mirror site. I'm still working the bugs out of accessing the server status page for that site, so it's using the warhammer server status from heliohost.org.
Update #2: I ditched l4rge.com since it turned out to be so unreliable, sorry for the inconvenience; But I've found a newer and better hosting site with heliohost.org. The above post has been updated to reflect this information.

Friday, September 11, 2009

Chained Video Selection Box

This video box does two things.
(1) Videos are grouped and can be selected from a drop down menu.
(2) You can change the video size on the fly.

Click on the image below to see the demo page, view source for the full code.


Customizing

Setting up Groups
  1. To add a new group, you'll need to first add it to the group selector box - it looks like the example below. Add the new group option in whatever order you desire.

    <!-- Add New Groups below -->
    <!-- ******************** -->


    <option value="group1">The Guild</option>
    <option value="group2">Muppets</option>
    <option value="group3">Misc Videos</option>

    <!-- Add New Groups Above -->
    <!-- ******************** -->
    Add this for a new group:

    <option value="group#">GROUP NAME</option>
    Now replace the "group#" with the next number and the text in yellow with the group name.
  2. Now you'll need to add the group's box, follow this template:

    <div id="group#"><!--
    <option value="VIDEO #1 URL or Embed code">VIDEO #1 TITLE</option>
    <option value="VIDEO #2 URL or Embed code">VIDEO #2 TITLE</option>
    --></div>
    • Make sure the group# matches the number in the selector box
    • Replace the URL in orange with the video's URL or Embed code (*Note* read the "Video URL" section below before adding the URL)
    • Replace the text in purple with your Video's title.
  3. If you want to change the displayed text from "Select a group", "Select a video" or "<- select". I highlighted the text in teal so you can find it easier. *Note* < is the HTML code for the left bracket "<".
Video URL or Embed Code
  • Only certain sites have support for the URL shortcut versus using the entire embed code provided by the site, I could add more but it'll just make the code that much longer:


  • DailyMotion:

    <option value='http://www.dailymotion.com/video/x1bxhu_tunak-tunak-tun_fun'>Tunak Tunak (DailyMotion 4:3)</option>
  • Google Video:

    <option value='http://video.google.com/videoplay?docid=3034123062262825045'>Final Fantasy X-2 Intro (Google 4:3)</option>
  • Vimeo:

    SD: <option value='http://www.vimeo.com/5336440'>Blip (Vimeo 4:3)</option>
    HD:<option value='http://www.vimeo.com/hd#6235286'>The Forest (Vimeo 16:9)</option>
    <option title='hd' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>
    <option title='1.78' value='http://www.vimeo.com/6235286'>The Forest (Vimeo 16:9)</option>

    • All three of the HD examples are equivalent.
    • Note the "hd#" in the URL is specific for HD videos - so you could manually add this, but you may not get the HD version if it doesn't exist)
  • Yahoo:

    <option value='http://video.yahoo.com/watch/5292856/13959401'>Skateboarding Bulldog! (Yahoo 4:3)</option>
  • You Tube:

    SD: <option value='http://www.youtube.com/watch?v=qNfDzfhRgkU&fmt='>Alizee - I'm Fed Up! (YouTube 4:3)</option>
    HD: <option title='hd' value='http://www.youtube.com/watch?v=cKg6CVki5hk&fmt='>Wet - Trailer (YouTube 16:9)</option>
  • All other Video sites: I'm using Yahoo here, but it applies to any site that provides an embed code... make sure there are no single quotes (apostrophes) in the code... Replace these with a \' (backslash + apostrophe) if you have to.

    <option value='<div><object width="512" height="322"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" /><param name="allowFullScreen" value="true" /><param name="AllowScriptAccess" VALUE="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" type="application/x-shockwave-flash" width="512" height="322" allowFullScreen="true" AllowScriptAccess="always" bgcolor="#000000" flashVars="id=13959401&vid=5292856&lang=en-us&intl=us&thumbUrl=http%3A//l.yimg.com/a/i/us/sch/cn/video06/5292856_rnd9461b9a5_19.jpg&embed=1&ap=10513021" ></embed></object>'>Skateboarding Bulldog (using full embed code)</option>