Dynamic Drive Forums - Blogs - jscheuer1

FaceScroll - my take

jscheuer1 — Sat, 13 Oct 2012 20:32:39 GMT

Adds altScrollTo method to scroll to coordinates, element, or keyword position in the scroller. Adds optional callback for real time updates of the scroller's position. Fixes behavior of bi-directional scrollers in IE 8 and less. Now compatible to and including IE 6. Adds automatic console logging of missing helper scripts in browsers with console logging. Instates selector element return value for normal jQuery chaining of methods. Alters the mouseout behavior for default style scrollers to avoid jumpiness when still dragging a scrollbar.

Applies to:

FaceScroll Custom scrollbar

This is a dropin replacement for FaceScroll Custom scrollbar that enables an altScrollTo method for scrolling to any given point within a scroller via top and/or horizontal coordinates, or via an element with an id within a scroller, or via the keywords 'begin', 'middle', or 'end' to scroll to those positions respectively.

It also adds an option for real time updates of the scroller's postion for use as you see fit.

It corrects the scroller's behavior in IE 8 and less down to and including IE 6, especially IE 7 and 6 which were previously excluded form this script. IE 8 only had problems with bi-directional scrollers. And adds the previously missing common jQuery object return value for its primary function so that it may be chained from in the normal manner that users of jQuery are accustomed to.

For non-touch screen browsers it changes the behavior for default style scrollers, the ones where the scrollbars are hidden on mouseout. If the user is still dragging the scrollbar on mouseout, it will remain visible and functional until the mouseup event that releases it. In the original version it would disappear and the scroller could jump or do other odd things depending upon the browser.

Demo:

http://home.comcast.net/~jscheuer1/s...oll/demo-2.htm

You may use your browser's view source to see the syntax used in the demo, which is the same as the original, just with the added option and function.

Script (right click and 'Save As', requires the same helper scripts as does the original version):

http://home.comcast.net/~jscheuer1/s.../facescroll.js

From the release notes in the updated script:

"Allows for an optional scrolldatato(data) function that returns the scroll
position in real time vertically and horizontally of that scroller's content. It's data argument returns
an object with that faceScroll scroller's top and left positions as negative floating point numbers.
Example syntax for using scrolldatato(data) which is used as an option during initialization:
Code:
	$('#demo1').alternateScroll({'scrolldatato': function(data){
			$('#dat-top').val(Math.abs(Math.round(data.top)));
			$('#dat-left').val(Math.abs(Math.round(data.left)));
		}
	});
The above example will populate the text inputs with id's of 'dat-top' and 'dat-left' with the $('#demo1')
FaceScroll scroller's top and left scroll positions respectively. These will be updated in real time as
the scroller scrolls. Using the Math.abs and Math.round methods will translate the negative floating
point values to positive whole integers.

Adds an an altScrollTo() function as a jQuery method to scroll vertically
and/or horizontally to a positive integer pixel destination or to a jQuery selector of an element within
the content. The altScrollTo() function returns its selector object and the alternateScroll() function
now does so too. These are in accordance with jQuery convention to allow for chaining.
The available syntaxes for altScrollTo() are:
Code:
	$('#selector').altScrollTo(80); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to 80 pixels vertical, unless the scroller only scrolls horizontally, in which case it will
		// scroll to 80 pixels horizontal.

	$('#selector').altScrollTo(80, 50); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to 80 pixels vertical, 50 pixels horizontal, unless that scroller scrolls only horizontally,
		// in which case it will only scroll to 50 pixels horizontal, or unless that scroller only scrolls
		// vertically, in which case it will only scroll to 80 pixels vertical.

	$('#selector').altScrollTo('#selector2'); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to the element within it with the id of 'selector2'.

	$('#selector2').altScrollTo(); // a shortcut method for $('#selector').altScrollTo('#selector2'); will scroll
		// the FaceScroll scroller that contains the element that has the id of 'selector2' to that element.
		// Be careful here, if two scrollers contain the same selector, unexpected results may occur.

	$('#selector').altScrollTo('end'); // will scroll the FaceScroll scroller initialized on $('#selector')
		// to the end both vertically and horizontally, or only one or the other if that scroller only
		// scrolls in that one direction. Other available keywords are 'middle', and 'begin'.
If as can be done, multiple scrollers were initialized under one selector, one may use either a selector
for the specific scroller one wants to scroll, or the shortcut method which will find the scroller that
contains that id selector in it's content.

For non-touch screens improves behavior on mouseout while still scrolling a Facescroll element with 'hide-bars': true"

Comments are welcome but will be moderated until approved.

If you want help with this though, please post a new thread in the Dynamic Drive Scripts help section. Link to this blog entry in your post.

Crawler Interim Updates

jscheuer1 — Mon, 08 Oct 2012 15:39:28 GMT

Adds: persistence option, oncontentinit option, auto detect of a single table with a single row for optionally randomizing its td's, code efficiencies.

Applies to:

Text and Image Crawler v1.5

What many people don't know about Crawler is that it makes a duplicate train of its text and/or images so that they may be looped/viewed in a continuous manner without spaces or jumpiness.

That's fine as long as you're not trying to initialize that content to another script like a lightbox.

Some people have expressed a desire to have Crawler remember (persist) its state (position and direction) when refreshed and when the same Crawler is on different pages.

This is a drop-in replacement for the current version 1.5 crawler.js file. It adds the ability to run a callback function once the crawler divisions have been populated and made a part of the DOM. Example:
Code:
marqueeInit({
	uniqueid: 'mycrawler2',
	style: {
		'padding': '2px',
		'width': '700px',
		'height': '240px'
		
	},
	inc: 20, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 3,
	neutral: 150,
	savedirection: true,
	random: false,
	initcontent: function(contentarray){
		var $ = jQuery;
		if(typeof $ !== 'undefined' && typeof $.fn.fancybox === 'function'){
			$(contentarray[1]).find('a[rel=example_group]').attr('rel', 'example_group2');
			$("a[rel^=example_group]").fancybox({
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
				}
			});
		}
	}
});
The contentarray contains two items, contentarray[0] and contentarray[1], which each contain one of the now two trains of images and/or text of the Crawler as HTML code on the page. One or both of these may be used to initialize that content to another script. The keyword this (not used in the above example) would refer to the Crawler instance.

Persistence is easy to add. Example:
Code:
marqueeInit({
 uniqueid: 'art',
 direction: 'right',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
	'width': '60%',
	'height': '235px',
	'background-color': '#ddd',
	'border': '1px solid #111',
	'margin': '2ex auto 0 auto'},
 inc: 6, //speed - pixel increment for each iteration of this marquee's movement
 moveatleast: 4,
 persist: true,
 mouse: 'cursor driven' //mouseover behavior ('pause' 'cursor driven' or false)
});
Here's the updated script (right click and 'Save As'):

crawler.js

It also enhances the script's ability to run in Quirks Mode in IE. And if you choose to make your Crawler's content a single table with a single row, and choose the random option, it will randomize the td's.

Comments are welcome, but will be held back until I determine they're not spam.

If you want help with this code, please post a new thread in the Dynamic Drive Scripts Help section:

http://www.dynamicdrive.com/forums/f...e-scripts-help

and post a link to this Blog entry in your message. Use the word Crawler in your title.

Edit: Oct/9/12 added auto detect table, code efficiencies, details and updated attached script.

BG Carousel Links

jscheuer1 — Tue, 24 Jul 2012 03:12:34 GMT

I found a fairly easy way to add optional links to the Dynamic Drive Script:

Background Image Carousel

First a demo:

BG Carousel Links - Demo

Now, how to:

Using a text only editor like NotePad, add this highlighted style as shown to the bottom of the on page styles (modified from Step 1 on the demo page):
Code:
 . . . ctedslide div.desc{ /* CSS for currently selected slide's desc div */
}

div.slide div.desc h2{
font-size:150%;
margin:0;
}

div.slide div.desc a{
color:yellow;
text-decoration:none;
}

div.slide a.linkinbgcaroulsel { /* CSS Styles for whole image links */
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	text-decoration: none;
}
Use this updated version of the script (right click and 'Save as'):

bgcarousel.js

Which also includes bug fixes:

for all browsers where after the cycles played out, manual navigation would result in two slides per click

for Opera where the controls wouldn't always function

Now you can optionally add actual link tags to the on page new bgCarousel() call. Example (also modified from Step 1 on the demo page, additions highlighted):
Code:
var firstbgcarousel=new bgCarousel({
	wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
	imagearray: [ //["image_path", "optional description", "optional link tag"]
		['autumnpark.jpg', 'Autumn DayThe sun peaks through the trees, a knife that cuts through the chill, crisp air.'],
		['chime.jpg', '', ''],
		['girlportrait.jpg', 'The scent of spring invigorates her as she inhales whilst the warm breeze brings a wave of tranquility.'],
		['redbench.jpg', 'Alone and Lonliness- Peaceand Inner Struggle', ''] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
	navbuttons: ['left.gif', 'right.gif', 'up.gif', 'down.gif'], // path to nav images
	activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
	orientation: 'h', //Valid values: "h" or "v"
	persist: true, //remember last viewed slide and recall within same session?
	slideduration: 500 //transition duration (milliseconds)
});
You can still have descriptions and/or links in the descriptions if you like.

Comments are welcome, but I will hold them back pending the determination that they're not spam.

If you want help on this, please post a thread in the:

Dynamic Drive scripts help

section and include the words:

BgCarousel and Links

in the title of your thread. It would help to also include a link to this blog posting and to your page. And of course describe the problem you are having.

Version 5 Events

jscheuer1 — Thu, 05 Apr 2012 05:12:50 GMT

In javascript there are basically two types of events that can be assigned to elements and objects. I classify them as version 4 events (those that were available in Netscape 4 and IE 4), and version 5 events, those that became available starting with IE 5 and presumably NS 5, but the earliest I'm aware of them in NS was NS 6 (I don't recall ever seeing a NS 5 browser).

Version 4 events are still available in today's browsers and are usually the first ones folks learn about, examples:
Code:
Some Page
Code:
Some Page
These both have the same effect. When one clicks on the link it will alert its href and then switch to the somepage.htm page. If we want them to stay on the current page and not switch, we can add a return false:
Code:
Some Page
Here's an example of the same thing as a version 5 event:
Code:
Some Page
It's also know as the standard event model and e in this case represents the event. Instead of return false, we prevent the event's default as shown.

It works in all currently used browsers except for IE 8 and less, which use a different syntax that uses a a global event object called event and doesn't use a function to set the return action and doesn't pass the element to its function as 'this'. It can be made to do that though via the use of call(), and we can use its event's returnValue property to set the return. so adding that to what we already had:
Code:
Some Page
An advantage of doing it this way is that even if the element already had an onclick (whether version 4 or 5), this will be added to it instead of overwriting it. And even if another script comes along later and adds a version 4 event to it, ours will still be there. Because of that most advanced scripts use it so as not to interfere with or be interfered with by any events already assigned on the page. It's particularly helpful when adding an onload or load event to the page, it won't interfere with any existing ones for the page.

A disadvantage is that we cannot read the event. With a version 4 event we could do:
Code:
alert(document.getElementById('myid').onclick);
and it would tell us the event, like for #1 or #2 at the beginning of this article, it would say:

function click(){alert(this.href);}

But our version 5 edition of that same event will alert null or perhaps some other falsey value like undefined or nothing at all. The only information we can glean from it is if we add and/or attach another click event to it. Then during the execution of the added event we can query whether or not it has been defaultPrevented or has a returnValue of false.

With the standard event model this is simple:
Code:
el.addEventListener('click', function(e){alert(e.defaultPrevented);}, false);
But with IE less than 9 we need to:
Code:
el.attachEvent('onclick', function(){alert(event.returnValue);});
To make matters more complicated, in the standard event model we simply have to add this new event after the one we want to know about. However, in IE less than 9 we must add it before, as the events in IE less than 9 get executed in reverse order to that in which they were assigned. (The documentation says it's a random order, but in my experience it's simply 'last in first out', at least in most cases). So we can do:
Code:
Some Page
This is all good information to have, especially when you're working in an environment with other scripts.

It should also be noted that script libraries like jQuery, Prototype, Dojo, and others generally assign events in this way. So unless an author using one of those libraries specifies a version 4 syntax when assigning events, they will be assigned as version 5 events.

Extra Buttons for Ultimate Fade-in slideshow

jscheuer1 — Tue, 30 Aug 2011 20:52:50 GMT

The product of many requests as regards Ultimate Fade-in slide show (currently at v2.4, but should work for any Ultimate Fade-in slideshow in the 2.x series) for a button to do this or that, stop or go, pause/play, and individual numbered or thumbnail buttons with or without special effects, with onclick or onmouseover for these individual buttons. This script (right click and 'save as'):

extrabuttons.js

can do any or virtually all (some things you wouldn't want to combine in one slideshow) of these things. In fact, I combined more than anyone would probably want for the second demo:

Demo_1 - garden

Demo_2 - enhanced default show from script's demo page

To set it up on your page, download the extrabuttons.js script (see above), and add it's tag (highlighted) between fadeslideshow.js and the on page portion of the script (from the second demo):
Code:
Configure some options (some examples highlighted in the above) and/or add some markup to the toggler division and you're all set.

To see the full source code of either demo, use your browser's 'view source'.

Here's usage instructions for the options and markup that can be used. It also describes two new callback functions and other features that may be utilized:

Extra Buttons Usage

Edit: Sept 4 2011 - add second demo, update script and usage instructions with extrabuttons.navbutonly property/option. Updated the version of fadeslideshow.js to one that actually uses the loading image. Preloaded the loading image on the demo pages. Updated fadeslideshow.js script available here (this may be updated further as the need arises - none of the changes are required for extrabuttons to work, they're just unofficial bug fixes):

fadeslideshow.js

Edit: Sept 9 2011 - update extrabuttons.js to run the onpauseplayswitch function (if valid and present) on init, remove hard coded value pause/play status from demos to better demonstrate use of this new code, change order of demos in this blog posting, label demos

Edit: Oct 27 2011 - update fadeslideshow.js for more bug fixes see bottom of:

http://www.dynamicdrive.com/forums/s...88&postcount=1

for more info. One spelling error corrected.

Comments are welcome but will be held back until I have a chance to check them for spam or requests for help. If you want help with this, please post in the forum and refer back to this blog entry. Use a title for your post that includes the word ExtraButtons.

I'm working on more demos, as they evolve, they will be posted here, and the extrabuttons.js script and usage details linked to above may be updated. Notes will be made to that effect.

Lightbox Bad, SlimBox Good

jscheuer1 — Tue, 09 Aug 2011 15:55:14 GMT

The title overstates the point. Both these scripts in their latest versions are pretty darn good as are many of the other Lightbox type scripts out there (see end for two others or Google Lightbox for more, though not all are as good as those mentioned here, many including the original Lightbox mentioned in the title of this blog entry are).

Here's the real story -

Some time ago Dynamic Drive's Lightbox by Lokesh Dhakar was added to the Dynamic Drive official scripts. It uses the Prototype/Scriptaculous script libraries.

However, since then so many of the scripts on Dynamic Drive now use the jQuery script library. And more are being converted over to it. Lightbox can be made to work on pages with jQuery based scripts, but it's often difficult. It can require updates to Lightbox, and is finicky even when it does not.

Slimbox2:

http://www.digitalia.be/software/slimbox2

does almost everything the Lightbox version from Dynamic Drive does, and it's based on jQuery so it's better for use on pages already using the jQuery library. The only thing it doesn't have is the linked title option added to the DD version by Dynamic Drive, and that may be added easily to Slimbox2.

When using only jQuery based scripts on a page, it greatly cuts down on potential conflicts and also saves time and bandwidth for the page. Just be sure to use only one version of jQuery on the page. Ideally, and in most cases you only need one external script tag for it for the entire page, placed before all the other scripts that use jQuery.

For even more flexibility with Slimbox2, surpassing even the latest Lightbox version (Lightbox 2.05 at this writing), you may use your own code block for loading, replacing its native "AUTOLOAD CODE BLOCK".

Here's one that gives Slimbox2 a few new powers:
Code:
// Live invocation for use with other scripts, image maps, AJAX, etc. - also skips duplicates when forming groups
// Uses the rev attribute of the tag for a caption, freeing up the title for other uses or to be blank.
// Remove the AUTOLOAD CODE BLOCK if using this, or replace it with this code.
// Live Load Script (c)2011 John Davenport Scheuer - for use with Slimbox 2.04
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
(function($){
	if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
		$('*[href][rel^=lightbox]').live('click', function(e){
			var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
			if(rel === 'lightbox'){
				$.slimbox(t.href, t.getAttribute('rev') || '', { /* Options */ });
			} else {
				$('*[href][rel="' + rel + '"]').each(function(){
					if($.inArray(this.href, hrefs) < 0){
						if(t.href === this.href){index = hrefs.length;}
						hrefs.push(this.href);
						links.push([this.href, this.getAttribute('rev') || '']);
					}
				});
				$.slimbox(links, index, {loop: true /* , Aditional Options */ });
			}
			e.preventDefault();
		});
	}
})(jQuery);
It will work on rel="lightbox" and rel="lightbox[groupname]" links, even if they are imported to the page after page load. This makes it good with AJAX and with scripts that change the DOM after it's loaded.
It uses the rev attribute of the link for the title/caption, so complex HTML may be used without unsightly tool tips appearing on hover of the lightbox link, ex:
HTML Code:
"some.jpg" rel="lightbox" rev="my caption">Whatever
It also, when the rel="lightbox[groupname]" syntax is used, allows for looping back to the beginning from the end and visa versa. This may be turned off by setting the red true in the above to false.

It effectively removes duplicate images from groups by never including them in the first place. Lightbox is supposed to do this, but stopped working in that regard a few versions back.
If you want even more flexibility and know jQuery, you can come up with your own code blocks for loading Slimbox2, or use something like ColorBox or FancyBox which have the ability to show other types of content, from the page or external on site pages, even from around the web. And they're also jQuery based.

Comments are welcome but will be held back until I have a chance to check them for spam or requests for help. If you want help with this, please post in the forum and refer back to this blog entry. Use a title for your post that includes the word Slimbox or Lightbox.

Sticky Tooltip script Unofficial Update

jscheuer1 — Tue, 09 Nov 2010 16:49:41 GMT

The Sticky Tooltip script has some room for updating as I've outlined here:

Sticky Tooltip script - not sticky

and here:

Sticky Tooltip script - no dock in IE 7- for image map

In those threads I offer piecemeal solutions, the first of which above is the most problematic:

Originally Posted by jscheuer1

Even on the demo page, if the tip is in sticky mode and one mouses over one of the other triggers, the tip changes position and content. Also in sticky mode, if one mouses out of the trigger and back over it, the content remains the same but the position changes.

There is also another issue:

Since when sticky, clicking outside the box is what dismisses it, and the mouse is probably still over the trigger or may now be over another anchor link or area tag, if that tag links to another page, it will fire, taking the user away from the page when all they wanted to do was dismiss the sticky tip.

This last and the first might actually be desirable in some cases, usually not.

Since all three are worth updating, I've made a combined script that addresses all three and includes two new options to allow the first and second to be toggles:
Code:
/*
* Sticky Tooltip script (v1.0)
* Created: Nov 25th, 2009. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Unofficial Modifications 11/2010:
* Allows for optional disabling of links on the page while sticky is in sticky mode
* Allows for optional extremesticky behavior to override the original codes 'bug' in stickiness
* Fixes sticky on right click for image maps in IE 6 and 7
*/

var stickytooltip={
	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
	fadeinspeed: 200, //duration of fade effect in milliseconds
	rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
	stickybordercolors: ['black', 'darkred'], //border color of tooltip depending on sticky state
	stickynotice1: ['Press "s"', 'or right click', 'to sticky box'], //customize tooltip status message
	stickynotice2: 'Click outside this box to hide it', //customize tooltip status message
	stickykillclicks: true, //while tooltip is sticky, should links on the page be temporarily disabled?
	extremestick: true, //while tooltip is sticky, should all other triggers be temporarily disabled?

	//***** NO NEED TO EDIT BEYOND HERE
The stickykillclicks option apparently does not disable links in the sticky tip, which is a good thing. I just haven't figured out why yet.

The extremestick option prevents all the triggers from taking over and moving and/or changing the sticky tip when in sticky mode.

The IE 6 and 7 issue for image maps is dealt with and obviously needs no toggle.

Anyways, here's the code (right click and 'save as'):

stickytooltip.js

It's a drop in replacement for the original script, everything else remains the same as instructed on the demo page.

Edit: 12/10 - Added another update: script will now properly follow border color changes using the stickybordercolors configuration. The original only changed the background of the bottom panel.

Styling Descriptions for Ultimate Fade-in slideshow (v2.1)

jscheuer1 — Tue, 18 May 2010 10:33:32 GMT

There are actually 4 css selectors that can figure in this. Only three of them really matter. If you only have one show on your page, you only need to think about the last two. The selectors are:

The id of the show, #fadeshow1, for example.

.fadeslidedescdiv - the class for all description containers.

.descpanelbg - the class for all description backgrounds.

.descpanelfg - the class for all description foregrounds.

Though it can be used for some things, you can safely ignore .fadeslidedescdiv in almost all cases. The background panel controls the background color and opacity of the background color for the descriptions. Any background color or opacity you want to enforce here must use the !important keyword in order to override the script's internal styles for these. The foreground panel may be used to style the color and font of the description. It's font styles need no override, but it's color styles do.

So, for example, if you wanted to change the background to red, the color to black and the font to Comic Sans MS:
Code:
.descpanelbg {
	background-color: red!important;
}
.descpanelfg {
	font-family: 'comic sans ms', sans-serif;
	color: black!important;
}
You can change the font-size, line-height, pretty much anything you want. And the above method of using the selectors will work fine as long as you either have only one slide show on the page, or wish to style the descriptions in all slide shows on the page in the same manner.

In cases where there are more than one show on the page and you want your customization to apply to only one show, use its wrapper id as a prefix, ex:
Code:
#fadeshow1 .descpanelfg {
	font-family: 'comic sans ms', sans-serif;
	color: black!important;
}

Get Style

jscheuer1 — Thu, 04 Mar 2010 14:37:47 GMT

Sometimes we want to get the style of something. But, since it wasn't set inline or via javascript, or perhaps was set in a stylesheet using the:
Code:
!important
keyword that overrides inline and javascript assignments, we cannot access it. Here is a fairly robust script that will allow us to do so in many cases:
Code:
Hi
You may pass it an element's id and property to get that element's style property value as currently viewed by the browser. Or, use null and a property to get the body's style property value for that property.

This works in IE 5.5+ and virtually all modern browsers.

You may use the hyphenated or the camel style notation for properties which require them. For properties that are bundled, like border, margin, etc. You may have to ask for specific components of those styles. For instance:

border-left-width

not just border or border-left.

If a property is undefined, you may get an empty string or 'undefined', or perhaps even some other 'falsey' value. It depends upon whether or not the browser sees the property as having a default value or not, and if not, how it chooses to express that. Pixels and other position/dimension units may be converted to other valid units representing the same position/dimension in some browsers, and color values may be expressed in any of their various equivalent values (text, hex, decimal). That depends upon the browser and sometimes how (if at all) the value was assigned.

For most things though, you will get what you expect. In other cases, some tweaking of the property asked for, and/or tweaking of the interpretation of the result may be required.

Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0

jscheuer1 — Wed, 07 Oct 2009 15:10:41 GMT

I've found that this actually can work. It makes an interesting use of the slide show's undocumented oninit feature, and how well the slide show is written visa vis jQuery's No Conflict mode. I would generally advise using two scripts which work off of the same script library, rather than two different script libraries. However, in this case both scripts are so robust, who can resist?

That said, all you need to do to set up a demo is to follow the instructions for Ultimate Fade on its demo page. Then replace the second slide show's script code with this script code (additions/changes highlighted):
Code:
var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "http://stickmanlabs.com/images/kevin_vegas.jpg", "lightwindow::true::title::Waiting for the show to start in Las Vegas::author::Jazzmatt::caption::Mmmmmm Margaritas! And yes, this is me...", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

mygallery2.setting.oninit = function(){
	this.setting.$gallerylayers.find('a[target]').each(function(){
		var t = this.target.split('::'), o = {}, i = 2;
		if(t.length > 1 && t[0] === 'lightwindow' && t[1] === 'true'){
			o.href = this.href;
			for(i; i < t.length; ++i)
				o[t[i++]] = t[i];
			jQuery(this).bind('click', function(e){myLightWindow.activateWindow(o);if(e && e.preventDefault){e.preventDefault();}else return false;});
		}
	});
};
After the closing script tag for the above code, add your Lightwindow files, and make sure they are available to the page:
Code:
	. . . 
One other thing, you will need to up the z-indexes in the lightwindow.css file in three spots:
Code:
#lightwindow_overlay {
	/* REQUIRED */
	display: none;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 10000;
	/* REQUIRED */
}
and:
Code:
#lightwindow {
	/* REQUIRED */
	/* Of Note - The height and width of this element are set to 0px */
	display: none;
	visibility: hidden;
	position: absolute;
	z-index: 10001;
	line-height: 0px;
	/* REQUIRED */
}
and:
Code:
#lightwindow_loading {
	/* REQUIRED */
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 10001;
	position: absolute;
	/* REQUIRED */
	background-color: #f0f0f0;
	padding: 10px;
}
After you've done these things, simply click on the first image in the second slide show and watch the Lightwindow open up.

Demo (click on first image in second slide show):

http://home.comcast.net/~jscheuer1/side/ufade21_lw2/

Lightwindow Home:

http://www.p51labs.com/lightwindow/

Ultimate Fade Home:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

Compact Cookie Unit

jscheuer1 — Wed, 24 Jun 2009 00:50:26 GMT

Cookies are often confusing. Much of the confusion can be eliminated if you know that all cookies are strings. If you want to store an array, function, number, or an object in a cookie, you must convert it to a string before storage and upon retrieval change it back into the object/array/function/number that it was. Cookies are therefore best used for string storage and retrieval. This unit doesn't pretend to eliminate all of the possible confusions that can arise from "when and where in my code is the best place to set/read/delete the cookie". However, it does greatly simplify those actions:
Code:
var cook = {
	set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
		if(d){var dt = new Date(); 
			dt.setDate(dt.getDate() + d);
		d = '; expires=' + dt.toGMTString();}
		document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
	},
	get: function(n){ // cook.get takes (name)
		var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
		return c? unescape(c[2]) : null;
	},
	kill: function(n){ // cook.kill takes (name)
		cook.set(n, '', -1);
	},
	killall: function(){ // cook.killall takes no parameters
		var cookies = document.cookie.split(';'), i = cookies.length - 1;
		for (i; i > -1; --i){
			cook.kill(cookies[i].split('=')[0]);
		}
	}
};
Usage is indicated in the comments. For example, to set a cookie named 'bob' to a value of 'your uncle' to persist for 2 days:
Code:
cook.set('bob', 'your uncle', 2);
To read said cookie (it will return its string value if set, null if not set) - no semicolon follows the example because it will most often be a part of an if or variable assignment statement.
Code:
cook.get('bob')
To wit:
Code:
if(cook.get('bob'))
  do one thing
else
  do another thing
To erase said cookie:
Code:
cook.kill('bob');
That's it!

Edit: July 2010 - changed the name of the object to cook from cookie as this was giving errors in some browsers. Added killall function.

Swiss Army II

jscheuer1 — Sat, 28 Mar 2009 14:09:53 GMT

I just wanted to Blog this info to make it easy to find. It regards the Swiss Army Slide Show script:

http://www.dynamicdrive.com/dynamici...army/index.htm

Because many people want even more flexibility than it originally provided, I've updated it (script only, right click 'save as'):

http://home.comcast.net/~jscheuer1/s...les/swiss_2.js

This is a drop in replacement for swissarmy.js and requires no changes in the on page code other than to use this new external script in place of the original external script.

However - It adds the following style hooks (some were already there in the original version but undocumented on its demo page):

#outer$ - outer division containing the show images.
#master$ - division directly nested in #outer$, contains the two divisions that hold the tables that hold the images.
#canvas$_0 - one of the two divisions that holds a table that holds the images.
#canvas$_1 - the other of the two divisions that holds a table that holds the images.
#desc$ - outer division containing the descriptions (holds the description prefix text, if used, and the below description span).
#imgdsc$ - span that holds the descriptions.
#counter$ - outer division holding the counter.
#thecnt$ - span updated with actual image counter.
#controls$ - outer division for the controls, if using images for buttons, this is actually a table.
#prev$ - input button for previous image.
#gostp$ - input button that starts or stops the slide show (a toggle).
#next$ - input button for next image.
#goto$ - text input for jumpto feature.
#go$ - input button "GO" button for jumpto feature.

Each slideshow on your page has a number. The first one is 0, the second one is 1 and so on. If you only have one slideshow, it's 0. So to style the description's outer container for it, use a style rule like (for example, replacing the $ with the number corresponding to the slideshow):
Code:
#desc0 {
 position: relative;
 top: - 5px;
}
The script also adds the following optional configuration properties:

slides#.previous_value - defaults to ' << '
slides#.next_value - defaults to ' >> '
slides#.move_desc_up - set to 1 to move descriptions up for shorter images, requires position:relative; and z-index:100; for #imgdsc$ style selector.
slides#.desc_pic_width - set to 1 for description container (#desc0) width to follow changing image widths
slides#.count_prefix - text to prefix the count, defaults to 'Viewing Image: '
slides#.count_sep - text to separate the two count numbers, defaults to 'of'
slides#.once - Stop after one revolution? Use 1 for stop at last slide, 2 for stop at first slide. Omit or use 0 for continuous slide show.

Edit: Amended to include slides#.once property 8/10
Add precision in the description of this update 9/10