DocuView - document management system » jquery http://docuview.co.uk revolutionary web 2.0 document management system Fri, 25 Jun 2010 00:50:53 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 styling forms – the 21st century way http://docuview.co.uk/index.php/2009/08/styling-forms-the-21st-century-way/ http://docuview.co.uk/index.php/2009/08/styling-forms-the-21st-century-way/#comments Thu, 13 Aug 2009 18:09:18 +0000 Martin Korych http://docuview.co.uk/?p=354 Based on an amazing article from ZURB I recommend you have a look at I have revisited their technique to:

  • deliver the same solution in jQuery
  • use a bit more flexible CSS (at least in my view)
  • redesign our search box

Up until now we have been using a simple JavaScript solution:

<form id="search" action="/index.php" method="get">
<div>
<input class="search_string" type="text" name="search_string" id="search_string" onfocus="if (this.value == this.defaultValue) this.value = '';" onblur="if (trim(this.value) == '') this.value = this.defaultValue;" onmouseover="this.focus();" value="search DocuView" />
<input class="search_submit" type="submit" name="search_submit" id="search_submit" value="" />
<input class="hidden" type="hidden" name="page" value="search" />
</div>
</form>

It worked just fine. Displayed the desired value in the input field and on focus it’d replace it with cursor… We use that in combination with:

<body class="documents" onload="document.forms[0].elements[0].focus();">

which would automatically focus on the form’s search field upon loading the document AND:

function trim(string)
{
return string.replace(/^\s+|\s+$/g, '')
}

The sought after not built-in JavaScript trim function (there is a jQuery alternative, see below).

Since then I have also read this article on optimising and styling the submit/search button in IE6/IE7 or generally any browser not supporting text-indent on button elements.

Now for the NEW code

I have used more or less the same code as seen at ZURB.

<form id="search" action="/testing/label.php" method="get">
<div>
<label for="search-string" class="overlay"><span>search Docu<strong>View</strong></span></label>
<input class="search-string" type="text" name="search-string" id="search-string" value="search]" />
<input type="submit" name="search-submit" id="search-submit" value="search DocuView" />
</div>
</form>

I have used an id for the form to make the CSS specific, easier to insert and start using immediately. I have to admit I have tried to omit the extra class on the label but the jQuery code stopped working (and frankly I do not know why yet – I’m hoping some of you will help me shed some light on it/I’ll figure out why soon). Anywho…

Coding the form behaviour

I have used relative units (em) to ensure the form scales with the size of the font. Also our tweaked version of Eric Meyer’s Reset CSS is used. The result is acceptably similar in all major browsers (IE7/8, Firefox 3.5, Opera 9, Safari 4, Chrome 2, IE6 is having a problem displaying the submit button as defined – maybe some of you will know how to solve that). In Opera the input field is *slightly* lower than I’d like it to be. I have tried cheating it: converted all the values from relative to fixed (em -> px), using 16px font (.75em = 12px, .5em = 8px, .25em = 4px) + I had to add “invisible” (white) borders to both the search-string input field and the span contained in the label but to no avail. At this point there does not seem to be a way to achieve pixel perfect overlay between the input field and the span (in XHTML Strict). Yet!

Apart from converting the JavaScript from the Prototype to jQuery I have also added validating and styling the label when user deletes the contents of the input field OR loads the page with AutoFill/submitted form values in it. Also instead of using the not-yet-100%-supported opacity/transition all I’m changing is the color of the font in the span.

$(document).ready(function()
{
// Select all textboxes and assign them to an array
var input	=	$('#search-string');
var label	=	$('label.overlay');

if (!$.trim(input.val())	==	'')
{
label.addClass('focus').addClass('hastext');
}
else
{
label.removeClass('focus').removeClass('hastext');
}

// Fade the label back when a field gains focus
input.focus(function()
{
if ($.trim($(this).val())	==	'')
{
label.addClass('focus');
}
else
{
label.addClass('hastext');
}
});

// Fade the label back when the user starts to type
input.keyup(function(e)
{
//	empty? label->focused
if ($.trim($(this).val())	==	'')
{
label.removeClass('hastext').removeClass('focus').addClass('focus');
}
else
{
label.addClass('hastext');
}
});

// Check if a field is empty when the user switches out
input.blur(function()
{
if ($.trim($(this).val())	==	'')
{
label.removeClass('focus').removeClass('hastext');
}
});
});

Don’t forget to include the jQuery library! I have devised a demo and have started implementing this throughout our software. As ZURB warned: do not overuse it. I was happy to find semantically friendlier and in a way much better solution than we have used so far.

Finally: the CSS

body { font-size: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 1.5; }
strong { font-weight: bold; }
#search { width: 20em; color: white; background-color: black; margin: 2em; }
#search div { position: relative; height: 3em; }
#search input { border: 0 none; font-family: Helvetica, Arial, sans-serif; font-size: 100%; }
#search label { position: absolute; left: .5em; top: .5em; width: 19em; height: 2em; background: white; z-index: 1; font-size: 100%; }
#search span { color: black; display: block; padding: .25em 0 0 .25em; border: 0 none; /*border-left: 1px solid white;*/ /*border-top: 2px solid white;*/ }
#search .focus span { color: #ccc; }
#search .hastext span { color: white; }
#search #search-string { position: absolute; z-index: 10; top: .5em; left: .5em; width: 87%; height: 2em; background: none; padding: .25em 0 0 .25em; /*border-top: 2px solid white;*/ }
#search #search-submit { background: transparent url(http://img.docuview.co.uk/sprite/search.png) no-repeat center center; height: 100%; width: 13%; font-size: 0; text-indent: -9999px; line-height: 0; display: block; position: absolute; top: 0; right: 0; z-index: 10; overflow: hidden; }

Thank you, ZURB guys, for the inspiration, I absolutely love the idea! I hope you find the implementation as useful as I have.

]]> http://docuview.co.uk/index.php/2009/08/styling-forms-the-21st-century-way/feed/ 0 fluid CSS steps – this is how it’s done :) http://docuview.co.uk/index.php/2009/07/fluid-css-steps-this-is-how-its-done/ http://docuview.co.uk/index.php/2009/07/fluid-css-steps-this-is-how-its-done/#comments Sun, 12 Jul 2009 01:06:28 +0000 Martin Korych http://docuview.co.uk/?p=257 I have had Cody Lindley’s technique for CSS steps in the back of my head for soooo long and finally got around making my own version of it. My aim was to create a flexible fluid version of Lindley’s wizard menu. And I’ve succeeded. Here’s how:

Approach

Whether you decide to use <ul> or <ol> is entirely up to you. Do consider <dl> as well. In my example I have used <ol>. I was hoping to achieve semantically correct markup (read: not use tables – because that’s too easy and in a way cheating a bit) and create a solution that naturally stretches over the whole screen – so a block element.

Consider how many steps you are going to use in your CSS steps (wizard menu): 2, 3, 4, 5… more? Is more really necessary? Two, four and five steps are easy. You are going to end up with

  • two steps both 50% wide (class “two_steps”)
  • four steps each 25% wide (class “four_steps”)
  • five steps each 20% wide (class “five_steps”)

But what about 3? Since a floating point (decimals) is not 100% supported by all browsers and 33.3 × 3 ≠ 100, we have to cheat a little. I have decided to give the current element a width of 34%, leaving the other two at 33% (+ class “three_steps”). To users’ eye hardly noticeable, to me achieving what I set out to do in the first place. You could use similar technique when working with 6 step menu: 5×16% + 1×20% OR 5×17% + 1×15%.

/*	STEPS WIDTH	*/
#progress-bar.two_steps li { width: 50%; }
#progress-bar.three_steps li { width: 33%; }
#progress-bar.three_steps .current { width: 34%; }
#progress-bar.four_steps li { width: 25%; }
#progress-bar.five_steps li { width: 20%; }

Yes, one could argue I could simplify by omitting the #progress-bar, the choice is yours.

No matter how many steps you are using there are 5 (essentially 4) classes utilised: “current”, “previous”, “done”, “last” and empty.

  • current – for the active element
  • previous – for the element just completed – preceding immediately the “current” class
  • done – for the element dealt with two (or more) steps back – for the element preceding immediately the “previous” class
  • last – for the very last element – used in conjunction with current

Here is the CSS for the whole progress bar, I’ll go through each line separately:

/*	PROGRESS BAR	*/
#progress-bar { text-transform: capitalize; margin-bottom: .25em; height: 3.5em; }
#progress-bar li { float: left; height: 3.5em; color: #ccc; background-color: #efefef; background-image: url(../img/steps/default.png); background-position: right center; background-repeat: no-repeat; }
#progress-bar a { display: block; padding: .25em; height: 3.5em; line-height: 150%; text-decoration: none; }
#progress-bar em { display: block; font-style: normal; font-weight: bold; }
#progress-bar span { display: block; }

#progress-bar .current { color: white; background-color: #369; background-image: url(../img/steps/current.png);  }
#progress-bar .current a { color: white; }
#progress-bar .last { background-image: none; }
#progress-bar .done { color: white; background-color: #c8e9ed; background-image: url(../img/steps/done.png); }
#progress-bar .previous { color: white; background-color: #c8e9ed; background-image: url(../img/steps/previous.png); }

I have sat down earlier and thought of the colours my progress bar is going to be. I wanted grey for bits that have not happened yet, the teasing (used #efefef as it is very light yet recognised as grey with #ccc for the colour of the text). Something stronger, bolder for the current element: #369, text white. And the previous and dealt-with parts: lighter blue perhaps, text white too? I used #c8e9ed as the background colour.

At this point I should maybe mention the four different background images we will be using to create the illusion of one step leading to another. According to the classes mentioned before I created four images that I will use as backgrounds of the li – list items. Here they are:

defaultpreviousdonecurrent

The first one: default – as in the first step all steps but the first are yet to happen, the two transitions we will be witnessing is between the elements with grey background and the current element with the dark-blue background into the grey again. Every step after the current one – unless the current is the last step – is a little unknown (blue into grey) – the blend is obvious and easy. In the case where current IS the last step we combine it with the “last” class – which disables the background image yet preserves the background colour. The “previous” class transitions from lighter blue (has happened) immediately into “current” element – light-blue into dark-blue transition. And the last: “done”: both done and previous steps have happened, hence only a transition between light-blue AND light-blue. Easy, right? :)

Since there is always going to be only one instance of the progress bar and since an id has more gravity as a selector than a class I named my little experiment “progress-bar”. I suppose the only important rule in the first line is the height of the whole thing. If you are trying to fit in more: change it.

Rather than using “li { display: inline; }” I floated the list items, the height matches the parent element and the important bit: the background. Since we are assigning the aforementioned background arrows to <li>s themselves, rather than explicitly writing the rule every time it occurs I defined the background-position and background-repeat for all the elements here. It doesn’t change throughout the steps and saves couple of bytes :) No really..

Used <em> (emphasis) and <span> to describe the steps, rather than floating and clearing each other I used display: block on both. The rest deals with each step by changing the default background and the colour of the text to allow users to easily distinguish between what has happened and what is still ahead. The .current a { color: white; } rule is there to overwrite an existing one higher in the stylesheet, you might choose to leave it out.

As mentioned before: striving for semantically correct markup I have used <ol> – ordered list – they are steps in the end that happen in a particular order – so it only makes sense to use that. There is a link within each li, note that NOT ALL OF THE LINKS have a “href” attribute. The code for the first step is fairly simple – I have used an example from our day-to-day programming:

<ol id="progress-bar" class="four_step">
<li class="current"><a href="#nogo" title="description"><em>step one &raquo;</em><span>description</span></a></li>
<li><a title="members"><em>step two &raquo;</em><span>members</span></a></li>
<li><a title="folder access"><em>step three &raquo;</em><span>folder access</span></a></li>
<li class="last"><a title="confirmation"><em>step four &raquo;</em><span>confirmation</span></a></li>
</ol>

This is what it the first step looks like formatted in real life:

form-steps

Second step:

form-steps2

Third step:

form-steps3

Fourth step:

form-steps4

Voila!

Believe it or not I have been searching for a similar solution all over the internet on and off for over a year. As I mentioned earlier the main credit goes to Cody, his awesome solution inspired me in the first place. I was excited implementing the solution in the latest DocuView and testing: successfully in IE6+ (hell) – Win, FF 2+ Win & Mac, Safari 3+ Win & Mac, Chrome 1+ Win and lets not forget Opera 9.5+ both Win & Mac.

If you have any suggestions, if you think I could have done it easier or differently or if this too is what you have been looking for leave me a comment below.

Now I’m onto turning this (the MAC-like dock that is) into a semantically correct solution, one that works in IE6. And when I do, you will hear about it here. Make sure you subscribe to our feed to get the all the updates!

At both W this point I should maybe mention the four different background images we will be using to create the illusion of one step leading to another.
]]> http://docuview.co.uk/index.php/2009/07/fluid-css-steps-this-is-how-its-done/feed/ 1 swfobject alternative for the latest jQuery (v1.3.2) http://docuview.co.uk/index.php/2009/05/swfobject-alternative-for-the-latest-jquery-v132/ http://docuview.co.uk/index.php/2009/05/swfobject-alternative-for-the-latest-jquery-v132/#comments Thu, 21 May 2009 10:40:02 +0000 Martin Korych http://docuview.co.uk/blog/index.php/2009/05/swfobject-alternative-for-the-latest-jquery-v132/ Last time I had to emebed flash the discussions about the importance of valid code were still young :) We used SWFObject and various codes even Adobe suggested back then, long before I knew about jQuery, long before I cared for embedding more than I had to (understand: deliver project, optimise later).

Facing the same task now I quickly browsed to jQuery plugin repository to find… nothing! Nothing I’m happy with!

So half an hour later on Google I found (and implemented) this: http://jquery.thewikies.com/swfobject/.. It is indeed a jquery swfobject alternative to embed flash/swf without invalidating one’s code.

Hope it helps others too!

]]> http://docuview.co.uk/index.php/2009/05/swfobject-alternative-for-the-latest-jquery-v132/feed/ 0 jQuery – customised tooltips displaying the title of the link http://docuview.co.uk/index.php/2009/05/jquery-customised-tooltips-displaying-the-title-of-the-link/ http://docuview.co.uk/index.php/2009/05/jquery-customised-tooltips-displaying-the-title-of-the-link/#comments Fri, 08 May 2009 22:33:27 +0000 Martin Korych http://docuview.co.uk/blog/?p=87 Just finished implementing tooltips for a client. The idea was to display the description used in the title of the link (<a href=”" title=”this part we are interested in and want to use”>we did consider using the text too, but stick with the title afterwards</a>) of the country/town in which our client has a branch.

The idea is simple: loop through the links contained in the wrapper, read the unique title, append the content in divs (absolutely positioned, but I’ll get to that later) and display on hover over the elements.The two most obvious solutions were: jQuery plugin library (most popular) and Google. The results on jQuery brought me to qTips, which both visual- and function-wise seemed to have been doing the trick. Upon closer inspection though I have discovered that the way qTips is written (and with my understanding of jQuery) I wouldn’t be able to achieve what I was hoping for: qTips either picked up the first or the last title and duplicated it for all the links – not displaying unique results. I tried looping through links using .each(), functions with auto-increments, amending source file…

I was tweaking the js but after about 15 mins of trying I a) realised it wasn’t happening b) moved on to second choice :) Google answered with kriesi.at.

Christian “Kriesi” Budschedl devised his own way of dealing with the matter though working with unique titles/elements form the very beginning and in very few lines he’s managed to answer my questions. All down to styling now :)

I kinda liked the style of the qTips and the functionality of Kriesi’s solution and combined their effort into my own solution. Firstly the amended JS:

//    jquery - qTips/simple tooltip - eurocopter world
function simple_tooltip(target_items, name)
{
$(target_items).each(function(i)
{
$("body").append("&lt;div class='"+name+"' id='"+name+i+"'&gt;&lt;p&gt;"+$(this).attr('title')+"&lt;/p&gt;&lt;/div&gt;");
var my_tooltip = $("#"+name+i);

var height = $('#' + name + i).height();
var width = $('#' + name + i).width();

var top  = $(this).offset().top - (height + 10);
var left = $(this).offset().left + ($(this).width() / 2) - (width / 2);

$(this).removeAttr('title').mouseover(function(){
my_tooltip.css({opacity:0.8, display:'none'}).fadeIn(400).css('left', left).css('top', top);
}).mousemove(function(kmouse){
my_tooltip.css({left:kmouse.pageX-125, top:kmouse.pageY-35});
}).mouseout(function(){
my_tooltip.fadeOut(400);
});

});
}

$(document).ready(function(){
simple_tooltip("#eurocopter-world a","tooltip");
});

The CSS wasn’t hard to optimise and adjust, I kept qTips’ graphics and styling, optimised, renamed classes and elements and applied:

/*    TOOLTIP    */
div.tooltip { z-index: 999; text-align: center; position: absolute; font-size: .9em; width: 250px; background: transparent url(../img/arrow.png) no-repeat scroll center bottom; color: white; padding-bottom: 5px; display: none; }
div.tooltip p { background-color: #333; padding: 5px; font: normal normal .9em/1em Arial, verdana, sans-serif; text-transform: capitalize; }

I am now playing with the idea of introducing more colours, play with the opacity.. That’s it. Hope it helps others too.

]]> http://docuview.co.uk/index.php/2009/05/jquery-customised-tooltips-displaying-the-title-of-the-link/feed/ 0 upgrade to latest jquery (v1.3.2) and thickbox photo gallery stops working http://docuview.co.uk/index.php/2009/04/upgrade-to-latest-jquery-v132-and-thickbox-photo-gallery-stops-working/ http://docuview.co.uk/index.php/2009/04/upgrade-to-latest-jquery-v132-and-thickbox-photo-gallery-stops-working/#comments Mon, 20 Apr 2009 20:04:35 +0000 Martin Korych http://docuview.co.uk/blog/index.php/2009/04/upgrade-to-latest-jquery-v132-and-thickbox-photo-gallery-stops-working/ That’s exactly what happened to us today. New jQuery = faster, better, stronger, but ThickBox hasn’t been updated since August 2007 and it looks as though the new JS library got rid of some code/function Thickbox have been built around.

Here’s the way how to deal with it: http://codylindley.com/thickboxforum/comments.php?DiscussionID=1791&page=1#Item_5. As easy as removing the “@” on the 79th line of the thickbox.js, which as of jQuery version 1.3 is deprecated as explained in this post: http://adipalaz.awardspace.com/thickbox_jquery13-en.html.

Cody Lindley: can we have ThickBox 4, please? :) We love ThickBox, we think it makes internet a better nicer place and we would love an update. Extended functionality. Documentation. Support. Maybe even a price..

]]> http://docuview.co.uk/index.php/2009/04/upgrade-to-latest-jquery-v132-and-thickbox-photo-gallery-stops-working/feed/ 0 display PDF in Thickbox v3 (+jquery) – finally working! http://docuview.co.uk/index.php/2008/07/display-pdf-in-thickbox-v3-jquery-finally-working/ http://docuview.co.uk/index.php/2008/07/display-pdf-in-thickbox-v3-jquery-finally-working/#comments Fri, 25 Jul 2008 14:26:49 +0000 Martin Korych http://docuview.co.uk/blog/?p=55 Hi all!

I’m super excited and would like to let you all know – especially the ones that have been stuck with a similar issue for some time: we have ThickBox working and running with DocuView and… DISPLAYING AUTOMATICALLY GENERATED PDFs (AS WELL AS NORMAL PDFs) IN MODAL WINDOW (and it works in FireFox 2+, IE6+, IE7, Opera 9.51, Safari Win… Mac testing follows successfully completed).

The link that helped me: http://codylindley.com/thickboxforum/comments.php?DiscussionID=303&page=1

I am still trying to get my head around the fact that the solution is as easy as adding all seven (7) characters: .show(). The forum member was solving displaying Flash, but it applies to PDF too.

*NEW UPDATE! I’m really really chuffed, pleased and ecstatic, hope it helps, by all means check the edited thickbox javascript file. The changes occur on lines #196 and #199, one is meant to append the aforementioned “.show()” at the end of each occurrence of “</iframe>” in the code.

Drop me a line should you struggle, drop me a line if it worked for you! Now we’re down to cracking generating PDF through COM (OpenOffice) via PHP.

Till then :)

]]> http://docuview.co.uk/index.php/2008/07/display-pdf-in-thickbox-v3-jquery-finally-working/feed/ 19