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>

Friday, August 28, 2009

Replacing Checkbox and Radio buttons

I found this pretty cool website (Hieuuk) that had an example of how to replace the checkbox and radio buttons with images. I was thinking about using it until I read the comments about how it doesn't work with the keyboard.

Well, I was inspired to mess around with the script, so I started working on it!

Here is a demo of the result of my work...



But sadly, I guess it was just a nice exercise for me because I have no idea how to make it into a jQuery plugin and well as I just found out... it's already been done, twice LOL. *Note to self* search the net before spending hours on a project o.O

The other versions:
  • I'm not sure, but this version looks like it was made to work with the jQuery UI

  • I really like this plugin version since it animates the radio button look... toggling a switch on and off. It just looks cool :P
Oh well, I don't want to say it was time wasted, but I still sort of like my version ;)

Saturday, August 15, 2009

Auto-resizing background image

JQuery: I found a very nice jQuery plugin called Supersized that makes it very easy to add an auto-resizing background image to your website. And it includes a slideshow function!

Canvas: I recently started to teach myself how to use Canvas and I thought, hey.. I bet I could do that with canvas too! For those of you that don't know, you can easily draw (graphs), resize and rotate images with canvas. Here is a very nice demo of image manipulation.

So, I'm pretty sure this is an un-approved method of using canvas as it's meant for smaller sized images. But it works! :P Well, it works for all current browsers, except IE - you'll need this plugin called ExploreCanvas to make it work.
<canvas id="myCanvas" style="width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: -1;"></canvas>
<script type="text/javascript">
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
img = new Image();
img.src='http://i201.photobucket.com/albums/aa236/Mottie1/testsite/screenshots/bg1.jpg';
img.onload = function () {
context.drawImage(this,0,0,300,150);
};
</script>
*Note* The drawImage function of canvas needs to be 300 x 150 for this script as that is the default canvas size, which then gets stretched to 100% width and height using the CSS.

And the problem I discovered with both the jQuery plugin and the canvas script above is that you are limited to the content on the screen. Should you need to scroll the page down, the image scrolls up (I had to modify the jQuery plugin to discover that).

Wednesday, June 10, 2009

New and Improved jQuery Tooltips


A newer version of this plugin is now available!

The guild hosting site that I use recently stopped using the tooltip script from Dynamic Drive's Cool DHTML Tooltip due to it's interference with site functionality. The tooltips are now provided by an easier to use jQuery Tooltip script from cssglobe.com. It's a nice elegant script and very simple to use. But the tooltip goes out of bounds when it reaches the right and bottom edge of the browser window.

After reading through most of the comments on the jQuery Tooltip post and decided the script needed updating. I also wanted this script to still work with the tooltips that were made for the DHTML Tooltip "onmouseover" and "onmouseout" functions. And while working on this script, I added in a few improvements along the way! So here is the result...

jQuery Tooltips v.2:
  • Version 2 tooltips behaves like the original DHTML tooltips.

    • They will stay within the browser window at all times.
    • You can assign a width to each individual tooltip.
    • You can assign a background and text color to each individual tooltip.

  • Version 2 tooltips will work with the DHTML tooltip event actions:

    onmouseover="ddrivetip('tooltip content','color','width')" onmouseout="hideddrivetip()"

  • The original jQuery tooltips included image and site preview tooltips. These are now incorporated into this one script.

  • The version 2 tooltips can now have a specific CSS style assigned to them, both in the CSS and for each individual tooltip.

  • You can make the version 2 tooltips display content from a separate location on the page (display the content of any object in a tooltip)
Adding the Tooltips

First make sure you have jQuery installed on your site, download the latest version from jQuery. Then add the following CSS and script to your site, or you can download the script here.
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
color:#dddddd;
background:#222222;
border: 1px solid #333333;
padding:5px;
opacity: 0.9;
filter: alpha(opacity=90);
text-align:left;
display:none;
}
</style>
<script src="http://dl.dropbox.com/u/1510510/misc/tooltip.js" type="text/javascript"></script>
Using the Tooltips
  • Basic Tooltip
    Link (a)<a class="tooltip" href="#" title="Tooltip (a) Content" rel="100">Link (a)</a>
    Link (div)
    <div class="tooltip" title="Tooltip (div) Content" rel="150,#9bff8f;color:#333333;">Link (div)</div>
    <img class="tooltip" src="IMG URL" title="Tooltip (img) Content" rel="200,#808080;color:black;">
    Link (span)<span class="tooltip" title="Tooltip (span) Content" rel="250,#008080;color:#dddddd;">Link (span)</span>


    • class="tooltip" (required) - This class activates the tooltip

    • title="TOOLTIP CONTENT" (required) - The title attribute should contain whatever you want to display inside the tooltip. This can include HTML or a pointer to content to display in the tooltip (discussed in the advanced tooltips section). Note: Do NOT use quotes in the content. If you are using HTML tags, replace the quotes with single quotes, e.g. <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif'>. If you must use quotes to surround some text, use the HTML escape code &quot; - this text has &quot;quotes&quot; around it.

    • rel="100,#222222;color:#dddddd" (optional) - the rel attribute contains the tooltip width & CSS

      • The width of the tooltip must be at the beginning of the rel attribute (in red). Do not include the "px" at the end, it is added by the script.

      • The tooltip CSS follows the width and is separated by a comma. The first hex code "#222222" is for the background color of the tooltip. You can add any additional CSS (in standard CSS format) separated by a semi-colon.

  • Preview Tooltips

    <a class="preview" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs_MbmvuIXcAIkb321oORrIa-hKZR1cU109fkvi2nPgtIuENriE2MF38U1adLV2ozSVdVDY889yYQe1ESsl0s4XccpAs55TSL7BylQNDCgGUc_oE0YmVyZpG8Au6kbVKclaHFlC4l6Png/s320/Help-Site.png" title="<center>Help Site</center>"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif"></a>


    • class="preview" (required) - This class activates the tooltip which puts the linked image (from the href) into a tooltip. The tooltip size is adjusted automatically to fit the image.
    • href="URL" (required) - URL to the image, for previewing in the tooltip and the URL you go to when you click on the image.
    • title="TOOLTIP CONTENT" (optional) - This content becomes the image caption located below the image inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags,
      replace the quotes with single quotes, e.g. <img
      src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif'>.
      If you must use quotes to surround some text, use the HTML escape code
      &quot; - this text has &quot;quotes&quot; around it.

    • <img src="URL_THUMBNAIL"> (required) - This will be the thumbnail of the URL image (in orange), or you can pick any image as I did here. Or you can replace the <img> with text.

  • Screenshot Tooltips
  • LMYC<a class="screenshot" href="http://www.guildportal.com/Guild.aspx?GuildID=194525&TabID=1643295" title="<center>Loch Modan Yacht Club</center>" rel="http://www.axiomfiles.com/Images/Spotlight/194525.jpg">LMYC</a>
    Google<a class="screenshot" href="http://www.google.com" title="<center>Google</center>" rel="#">Google</a>
    • class="screenshot" (required) - This class activates the tooltip that gets the site screenshot image from the rel attribute (in light blue)

    • href="URL" (required) - URL to your desired website

    • title="TOOLTIP CONTENT" (optional) - This content becomes the screenshot (image) caption inside the tooltip. Note: Do NOT use quotes in the content. If you are using HTML tags,
      replace the quotes with single quotes, e.g. <img
      src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdOsFaiNIiNqDl5RhAACLxqpiShH9pnrYBFSZqPUpn2hzCiUT8yo99KC8xKqcQMwKywNN6S1jq9bjJRZ-YULgjR-lYdf10O0-dtosiT7UfhBXJnwRuVIKgDZuc0bgkOf4tUoRag0Pp3SA/s320/Nax2-10.gif'>.
      If you must use quotes to surround some text, use the HTML escape code
      &quot; - this text has &quot;quotes&quot; around it.

    • rel="URL_SCREENSHOT" or rel="#" (required)

      This attribute can contain either the URL to the screenshot image of the site to which you have the link pointing. Yes, you do have to take, resize and upload the screenshot image yourself.

      *UPDATED (8/29/09)*

      You can now use rel="#" to have Websnapr.com generate a thumbnail of the site for you
    • text or image (required) - Text or image that becomes the clickable link to the site.

  • Advanced Tooltips


    Hover me
    <a class="tooltip" rel="300" title="###tt1" href="#"><div id="tt1" style="display:none">This Tooltip is from a <div> that is inside a link</div>Hover me</a>
    Hover me

    <div class="tooltip" rel="300" title="###tt2">Hover me</div>
    <div id="tt2" style="display:none">This tooltip is from a <div> that can be put anywhere on the page</div>


    • class="tooltip" (required) - This activates the tooltip

    • rel="300" (optional) - sets the tooltip width. You can also add CSS as described in the basic tooltip section

    • title="###tt1" (required) - The title is broken up into two parts: the tooltip object flag and the id of the object whose contents will be shown in the tooltip.

      • The "###" is the tooltipObjFlag. In the script is set to a default value of "###". So the script will look for this specific pattern in the title. If it finds this pattern, it will then load the tooltip content from the ID that follows the flag.

      • The "tt1" is ID of the object (a <div> in the example above) that contains the tooltip contents. Each tooltip you add in this way should have a unique ID. So the next tooltip should be "tt2", etc...

      • So "###tt1" tells the script to load the tooltip from an object instead of the title, and that object has an ID of "tt1".

      • This was added so you could display content on your site that varies.

    • <div id="tt1" style="display:none">TOOLTIP CONTENT GOES HERE</div> (required) - This div (or any object like <span>, <table>, etc.) can be located anywhere on the page. It can contain anything inside of it without worrying about quotes, single quotes or embeded video. Note that the style="display:none" must be included so that it won't show on the page (unless you want it to).

    • If your tooltip content just happens to contain a lot of #'s then you can change the tooltipObjectFlag to anything you want. But you must avoid using the following characters in the flag:

      . $ ^ { [ ( | ) * + ? \
      Add the new tooltipObjectFlag as follows (replace the text in teal to whatever flag you want):
      <script type="text/javascript">
      var tooltipObjFlag = "@@@";
      </script>

Tooltip CSS

You can edit the CSS that is included with the code to modify your overall tooltip look. This CSS should be added into the Footer HTML because GuildPortal added the tooltip CSS after the Custom CSS which makes it override the definitions in the Custom CSS.
  • Change the font color by modifying the text (in blue) - color:#dddddd;

  • Change the background color of the tooltip (in blue) - background:#222222;

  • Change the tooltip border thickness, style and color (red and blue) - border: 1px solid #333333;

  • You can remove or change the semi-transparent tooltips by changing the opacity setting. The "filter" is IE specific. Make sure the opacity is a deminal equivalent of the filter opacity ( 0.9 = 90% )

    opacity: 0.9;
    filter: alpha(opacity=90);
  • Additionally you can add a soon to be supported CSS class called border-radius which makes your tooltip have rounded edges. The "-moz-border-radius" is specific to Firefox browsers and is currently working.

    border-radius: 1em;
    -moz-border-radius: 1em;
    The "1em" means to make the size equal to 100% of the height of the current font size.

  • The last thing you can modify with the script is it's display speed. This really isn't part of the CSS, but I'm lazy and didn't feel like adding another section LOL. The display speed tells the script how long it should take to show the tooltip. Add the following anywhere ABOVE the tooltip.js script link.

    <script type="text/javascript">
    var tooltipSpeed = 600;
    </script>
    The default speed is 300 milliseconds. You can't use negative values (no going back in time!!) and I wouldn't recommend going above 1000 milliseconds or your site users will begin to hate you.

Wednesday, June 3, 2009

Extracting URL parameters with Javascript

I found this very nice script over at Netlobo.com that will extract the desired parameter from browser URL (see the article here). Maybe I can explain this better with examples.

Here is a basic browser URL
http://www.somegame.com/character.php?realm=MyRealm&name=Motty
You can extract out the realm or the name value using the script
var myStr = 'http://www.test.com/character.php?realm=MyRealm&name=Motty';
document.write ( gup('name', myStr) );
// outputs: Motty

document.write ( gup('realm', myStr) );
// outputs: MyRealm
Here is the modified code:
function gup(n,s){
n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
return (p===null) ? "" : p[1];
}

Tuesday, June 2, 2009

Convert jQuery RGB output to Hex Color

Please see my updated post:
Convert RGB(A) output to Hex Color


My current project uses Farbtastic which is a fantastic jQuery plugin which allows users to visually choose a color for an element. The problem I ran into was loading a default color from the element:

jQuery returns the element color in RGB format
document.write( $('#myElement').css('background-color') );
// outputs: rgb(34, 34, 34)

but Farbtastic uses the hex color format, just like the CSS.
#myElement { background-color: #222222 }
I found this really nice script (by R0bb13) which converts RGB to hex. This script requires the input variable to be in an array "[34,34,34]". In order to make the script use an RGB format "rgb(34,34,34)", I had to add one line to the script to remove the "rgb" and parenthesis and then convert (split) the result into an array...

Update #2 (allows entering an rgba value - opacity is ignored)

Updated (removing internal function):
//Function to convert hex format to a rgb color
function rgb2hex(orig){
 var rgb = orig.replace(/\s/g,'').match(/^rgba?\((\d+),(\d+),(\d+)/i);
 return (rgb && rgb.length === 4) ? "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : orig;
}
Here is an example of how to use this code with jQuery:
document.write( rgb2hex($('#myElement').css('background-color')) );
// outputs: #222222
Here is the original code from this post (not nearly as efficient as the updated script):
//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
  var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  }
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Monday, June 1, 2009

Design Resources

I haven't started working on the layout of my new blog, but I do have a list of design resources that I wanted to share! Hopefully you will find something useful here.

Sunday, May 31, 2009

Welcome

Welcome to my blog!

Who I am: I'm a self-taught amateur site designer/improver/manipulator. I know a little bit of HTML, javascript and jquery, but I've dabbled in lots of other things. I don't profess that I am the best at what I do, but it's a hobby and I like to explore my limits and try new things. Basically it's better than being bored! I also enjoy helping people. I've been told that I have the patience of a saint, but I also have the temper of a tiger LOL - rawr. It's why my avatar is almost always a cat o.O

How I started: I started working on my World of Warcraft guild site, but sadly after all my work the site was left unused (for two different guilds!). So, I figured I was cursed with guild sites, so I started helping people on the admin site. I was soon overwhelmed with questions for help. I set up a test-site to show other users examples of page content and to post instructions. It's just gone on from there...

Why I made this blog: I hope that some of the scripts and instructions I post here will benefit people that aren't using a specific web site. Basically, I'm trying to help a broader range of people. It's what I enjoy doing *shrug*... and you thought you were demented! Ha ha ha ha