Rogtopia

Tablesorter Hover with Custom Widget

2009-11-03T09:24:00-08:00

I had a project recently that jQuery's tablesorter could be used for. However, after implementing the tablesorter script my custom jquery hover code gets destroyed when you paginate the table or sort it. After some research, I discovered that I could re-implement my hover code in a tablesorter widget.

 <script type="text/javascript">
$(document).ready(function () {
    // tablesorter widget to setup rollovers on table rows
    $.tablesorter.addWidget({
        id: "hover",

        format: function(table) {
            $('tr',$(table)).mouseover(function () {
                $(this).addClass('hover');
            }).mouseout(function () {
                $(this).removeClass('hover');
            });
        }
    });
    // then instantiate your tablesorter calling the hover widget
    $('.tablesorter').tablesorter({widthFixed: true, widgets: ['hover'] });
});
</script>

And there you have it. Now when you sort your table the hover events stay attached to the rows as they are reapplied by tablesorters format callback provided by the hover widget.

Need Photoshop Ideas for Articles.

2009-07-28T22:48:00-07:00

Hi Guys and Gals,

I am a little bit stumped about what to show you in photoshop. I mean.. plastic has been done a gazillion times, so has two tone effect, gradiants? done. It's going to be tough to come up with something that my readers can benefit from. I was thinking about getting into standard layout fundamentals such as proper margin, padding and typography.

I guess what I am getting to is this one question. What would you, the reader, like to see in terms of photoshop education for web layout?

Creating a Custom nextTab() for jQuery UI Tabs.

2009-07-21T10:39:00-07:00

I have recently been working on a project using jQuery UI tabs (http://jqueryui.com/demos/tabs/). After sifting through the documentation, I could not find any particular method for just calling the next tab in my own custom navigation. There is a lot of great events that you can hook into by creating callbacks, and a lot of great properties and methods; even one for selecting a tab. However, there is no nextTab() or next().

Well, here is nextTab() that works with UI Tabs:

<script type="text/javascript">
function nextTab(_tab_selector) {
  var num_tabs = $('#tabs li',$(_tab_selector)).length;
  var current = $(_tab_selector).tabs('option','selected');
  var next = ((current + 2)>num_tabs) ? 0 : current + 1;
  $(_tab_selector).tabs('select',next);
}
</script>

This function will continue through a tab system until it reaches the end and continue to the beginning. Simply call it from your own custom link such as:

<a href="javascript:" onclick="nextTab('#mytabs');">Next Tab</a>

Or, you could bind them to the click event of a class selector:

<a href="#mytabs" class="next-tab">Next Tab</a>

<script type="text/javascript">
$('.next-tab').bind('click', function() { 
  nextTab($(this).attr('href'));
});
</script>

Of course, you could easily create a previous tab method by modifying the increments to decrements. You could even create some custom callback events that could be triggered. However, this is a minimalistic nextTab method that does it's job just fine. Happy coding

Creating a Custom Themed jQuery UI.

2009-07-19T23:15:00-07:00

jQuery is a great way to add flare to your site easily with a vast array of utilities to animate, perform ajax calls, modify the DOM, retrieve JSON calls, and various other tasks usually tedious with native javascript. Today, we are going to look at jQuery’s UI library and how you can customize it’s widgets to suit the look and feel of your website.

jQuery UI - http://ui.jquery.com/

jQuery UI will provide you with themed user interface widgets such as modals and dialogs, tab systems, date pickers, accordian menus and more. The beauty of it all, is that you can customize the look of these widgets with an easy to use themer from their website called ThemeRoller.

Simply go through the theme setup and click the download link to use what widgets you would like to include with your jQuery UI javascript frameworking.

A Quicky, Effecient Sample

Visit jQuery UI in a Dialog

<script type="text/javascript">
// the caller
$('.pop-link').poplink();

// the jquery mini-plugin
// finds all anchor elements matching selector and applies a custom click event
// -- takes the href and loads it in a dialog's iframe with showSite().
$.fn.poplink = function() {
  return this.each(function () {
    var _url = $(this).attr('href');
    $(this).bind('click', function(event) {
      event.preventDefault();
      showSite(_url);
    });
  });
}

// the showSite function
var showSite = function (_url) {
  // configure this dialogs defaults
  $('#dialog').dialog({
   'bgiframe':true,
   'modal':true,
   'resizable':false,
   'draggable':false,
   'autoOpen':false,
   'width':980,
   'height':620,
   'title':'Forwarded to ' + _url,
   'buttons' : {
     'close' : function () { $(this).dialog('destroy'); },
     'forward' : function () { history.go(1); },
     'back' : function () { history.go(-1); }
    }
  });

  // empty the dialog and set it's html to the current _url in the iframe
  $('#dialog').empty().html('<iframe src="' + _url + '" marginwidth="0" marginheight="0" style="width:100%;height:100%;" scrolling="auto" frameborders="no"></frame>').dialog('open');
}
</script>

Anyways, Go configure your custom theme and try jQuery UI for yourself. Fun times to be had by everyone!

Well Rounded - Rounding without JS or graphics.

2009-07-19T18:59:00-07:00

Creating a rounded edge site can be a tedius chore when you are required to use javascript or images, background graphics to create your desired layout effect. Well, if you are willing to leave Internet Explorer users in a squared environment, you can do it merely via CSS.

Here's how:

<style type="text/css>
div {
  border-radius : 10px;
}
</style>

The above CSS declaration is defined in CSS 3 and is supported by all modern browsers except Internet Explorer; including Version 8.

Now we want to support earlier mozilla-based and webkit-based browsers by including the following:

<style type="text/css>
div {
  border-radius : 10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
}
</style>

The above should produce something like below if we were to include a background-color : #ccc;.

This is a rounded div box!

Oh, and I know from time to time, I would totally avoid borders on rounded edges due to all the limitations with javascript implementations or tedious work involved from the graphical side. Well, just add border:

<style type="text/css>
div {
   border-radius : 10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
  border : 2px solid #000;
}
</style>

This is a rounded div box with border enabled!

So, avoid adding extra weight to your project in terms of productivity and document size with all the fun hacks required to make it look the same in all browsers.. mhhmm.. well, hacks just for IE :(

Creating a Color Scheme with Kuler

2009-07-19T16:38:00-07:00

Have you ever had difficulty trying to find a set of colors to apply to your website? Possibly you have tried to create your own color schemes without a knowledge of color theory. Well, Adobe has an online solution for us!

Adobe has a fantastic color theming application available through a site called Kuler. With this application you can create color schemes based on theories such as Split complimentary, Triad, Monochromatic and much more. Find the perfect colors for your site with this neat tool.

Adobe Kuler - http://www.adobe.com/kuler/

See this Avatar? jQuery did that.

2009-07-19T15:36:00-07:00

Important Update: Just discovered that you can put html in the Date Prefix value under your blog settings. Although, this was a neat hack to get what I wanted done, I have removed it as I have accomplished this effect through the blog component markup and CSS.

Well, I am up and running with the new site and I should fill out some of the new sections with some content.

See the avatar of me here on the posted line? I accomplished this with jQuery!

// update viviti blog author markup
$('.blog_post .date').addClass('author');
$('.blog_post .date_prefix').remove();
$('<div>Posted by <span title="Roger Riche, Web Developer">Roger</span></div>').prependTo('.author');

This chunk of jQuery takes each blog post date section and adds the css class of author to it. I also remove the date_prefix div that contains the default text of Posted. Then I add a new div tag that contains custom 'Posted' text including my name and title :)

Just one of the many things you can accomplish with jQuery

I am still here..

2008-11-12T13:39:00-08:00

Hey, I know it's been a while since my last post but Bravenet has been keeping me pretty busy and haven't had much time at home. Will be updating this blog over the weekend with new tips and tricks for Viviti! I think we should have a look at jQuery (http://www.jquery.com) and what we can do with it.

EDIT: So much for getting anything done that weekend. lol. However, I assure you I have something cooking that I am hoping will be a great resource for front-end web developers.

Changing your Favicon on Viviti

2008-08-03T15:51:00-07:00

IMPORTANT UPDATE: As Quoted from Shawn on the Viviti Team:

12 Shawn September 17, 2008 12:29PM

Hi Roger, thanks for this.

With the latest release, on Sep 15th, you can now just go into "My Website" (on the toolbar), and then "Website Settings" and add the favicon.ico file right in there. No need to edit the theme source code!

Just updated rogtopia.com to use a custom favourite icon by editing my default html template and by uploading a favicon.ico to use for the shortcut link.

To update your Viviti site with a custom icon, find or create a new favicon.ico file and upload it using "Files" from your Viviti toolbar. I created mine from my logo as a PNG file and used an online tool to convert it to an ICO file.

After you have uploaded your file, it will be available from your viviti domain within the path of /files/others/favicon.ico. Update your default.html with the following code in the <head></head> section of the document.

<link rel="shortcut icon" href="http://your.viviti.com/files/others/favicon.ico">

Don't forget to replace your.viviti.com with your actual viviti host.

There is nothing at all wrong with the Viviti favicon that gets injected; in fact, it's very elegant and precise. But for those of you that want something different or custom to your theme, then the above should work for you. Happy Coding.

Toying with Viviti CSS

2008-08-03T00:07:00-07:00

Been getting deeper into my base stylesheet for this site and have found it pretty easy to customize any element with Firefox and Firebug. A combination of the Firefox Browser and Firebug developer tool, you can easily find a specific element on the page simply by right-clicking it and selecting "Inspect Element".

In the screenshot to your right, I am right-clicking the comments section used for my blog entries. This will allow me to figure out what CSS declaration to use to customize that piece of a Viviti blog component.

The Firebug Workspace

Firebug Debugging Tool (http://getfirebug.com/) allows you to expose not only the markup that wraps the contents of your website, but all the generated HTML that may be dynamically injected via javascript.

Above, we see what has happened after choosing to Inspect Element on the comments area. The containing element with class of metadata (<div class="metadata">..</div>) was selected in the Firebug HTML window and the element itself is highlighted on the page. Now we can easily figure out how to target that with our CSS selector.

The Comments CSS Selector

In this screenshot, we are viewing Firebug's Style inspector/editor which shows the CSS declaration used to add that subtle rounded edge bar.

Since the DIV metadata container was contained within a post_wrapper parent, I kept the CSS selector down to .post_wrapper .metadata. { .. }. If you step back through the markup, the master parent of each blog is conveniently classified as blog_post. So your selector could even be .blog_post .metadata { // your css properties; }

Whatever you choose to do with your Viviti website and/or blog, Firebug is an invaluable tool for any web geek of any skill level. Later on, let's discuss some hidden javascript gems that the Viviti system ships to your website.

Guinness too many

2008-08-01T10:06:00-07:00

Got out last night with some co-workers and really had a blast. Was nice to get away from the World of Rogtopia (Warcraft) and face the real world. Save for the scary cougar that was hitting on us, it was alot of fun. 3 timmy hoes this morning seems to have cured me for the most part but I doubt I will do that again mid-week.

UPDATE: Feeling better now and ready to go ROCKIN again tonight. See.. I am sporting rock fingers and wearing shades. How cool is that. Tonight the adventure continues.

Photo taken by Mike Haugland

blog hater no more

2008-07-30T20:41:00-07:00

I have never really had an interest in blogging before until I started toying with the Viviti System. Being a developer and a designer, I really hate to use systems that give me no control over the markup structure ( or scary markup is ouputted ) and or stylesheets. Some do, but most have horrible interfaces for applying customizations.

Who wants to go through lines of a config file defining separate RGBs for various obscurely named variables. Who really wants to have to use some sorta bloated web-based system that essentially does the same. Dumps style variables into databases and then uses that for theming.

I love how I have full control to creating my own template that can be imported and used by the Viviti system. Even if something isn't documented, finding out how to style a new component or a blog component is as simple as looking at the HTML output and applying new CSS declarations to your templates CSS file.

I will get into how to customize components in a later post. I went off on a tangent; I HATED BLOGGING. Now I think I might be able to tolerate it using a system such as this with all the neat components that one can use.