Dynamic Drive Forums - Blogs

Replacing iframe attributes with javascript (HTML5)

molendijk — Wed, 11 Jan 2012 20:12:00 GMT

I was working the other day on a script for setting the height of an iframe to match the height of its content and noticed that under certain circumstances the iframe gets its scroll bars 'back' when it shouldn't. This happens mainly when the iframe is given a very small width. Overflow: hidden solves the problem in Firefox (most of the time), but not in IE. This browsers needs scrolling="no", which also works in non-IE. However, attributes like scrolling="no" and frameborder="no", among others, are not valid in HTML5.
Searching the Internet for a solution, I found this script by jscheuer1 (http://www.dynamicdrive.com/forums/s...60454&page=2):

Code:

If you put this on a page containing one iframe, the scroll bars and frameborder are gone in both IE and non-IE.
But what about pages containing more than one iframe? I tested the following and observed that it works for all the iframes on a page:

Code:

Many thanks to John Scheuer, who showed how to replace iframe attributes with javascript.
Important: in HTML5, scripts having 'defer' must be external in order to validate.
===
Arie

Select boxes having javascript in the options

molendijk — Wed, 30 Nov 2011 23:28:33 GMT

In non-IE except Google Chrome, we can call functions from inside a select box by putting things like the following in the options:

etc.

This is not possible in IE and Google Chrome. In an earlier attempt to solve the problem, I created a script based on the idea that it should be possible to let the text of the values for the options determine what function (whether custom or inbuilt) should be called (see this). So I wanted things like the following to work:

etc.

Here's the script:

It should work in cases like the following:

Unfortunately, after a while I discovered that the last versions of certain modern browsers exhibit the following behavior pertaining to loading new pages in the 'same window':
Opera:
Although correctly executes the function given by the text of the value for the option, it makes the browser's history button do weird things.
Google Chrome:
doesn't always execute, or the new page loads very slowly.
Firefox:
Although correctly executes the function given by the text of the value for the option, it COMPLETELY DESTROYS the browser's history button. This is very strange, since this does not happen when loction.href=... is applied to other tags (other than the option-tag) like 'a', 'div' and 'span'.

THE SOLUTION:
I tried several second-versions of the original script. None of them worked. I then realized that, bearing in mind what has been explained above, the following should always work for cases in which we want to go to a new page in the same window:

And it does! So now we have a crossbrowser way to use the options of a selectbox to execute all sorts of functions, including those that open new pages in the 'same window'.

DEMO here.

Arie Molendijk.

Deferred document.write

molendijk — Mon, 31 Oct 2011 12:13:09 GMT

While surfing on the Internet I found this page on how to pass data from one page to another. After a while, I realized that the script used on the page actually contains a technique (implicitly) for deferring document.write. Just for the fun of it, I modified the script so as to have some easy ways of dynamically inserting internal and external content into a given div via document.write. Here it is:

Code:

Usage in non-IE:

Code:


include inner data



include via ajax



include via iframe

Usage in IE / Google Chrome:
Same as above, but if we have scripts in the external page(s), IE will rewrite the pages to something we cannot use (safety measure). We can solve the problem in a cross-browser way by moving the scripts written down in the head of the external page(s) to the head of the main page. If the external page(s) also have scripts in the body, there may be a problem as to where to put them in the main page. Note also that, except for document.writing strings given in the main page itself, this will not (always) work locally (on your hard disk) when you're using IE or Google Chrome. But there's no problem on the Internet.

Address bar:
This method for including content may produce very long lines in the address bar.

Removing the data:
We can remove included data by doing something like:

Code:

Remove data

What do we actually update?
If we use the technique described on this page, we don't update parts of the page but the whole page, to which content is added via the scripts and HTML above. That probably explains why adding content to a div is a little bit slow (especially in IE). But the advantage of the technique is that any external file can be repearedly added to the page. That's not always the case if we use other methods for including content. The flexmenu, for instance, cannot repeatedly be included on the page with preservation of code, or even included once via a simple onclick, unless we change the flexmenu-script in a specific way, see this thread.
===
DEMO here.

EDIT:
W'd better replace the occurrences of href=... above with something like style="cursor: pointer; text-decoration: underline" because using href mistakenly creates a new page in Firefox if used online.
===
Arie Molendijk

A better Iframe Shim

molendijk — Sun, 02 Oct 2011 22:47:32 GMT

The 'iframe shim technique' lets us overlay a div over windowed elements such as flash objects, select boxes and applets. The trick is to have the div accompanied by an iframe that must have exactly the same size and position as the div, whose z-index must be higher than the iframe's z-index. The windowed element itself must have a lower z-index and the iframe should have a background-color. Here's an example of how to have a div overlay a flash object:



iframe shim

This is fairly common knowledge (except for the iframe's background-color, so it seems). What many people don't realize is that the trick doesn't work anymore in IE after we click on the flash object playing a video (and it may fail in other cases too). After the click, the div is gone. Try for yourself (in IE).

There's an easy way to solve the problem. We put the following dummy div in the body:

and the body tag should look like this:

Try it in any browser you want: it seems to work everywhere.
===
Arie Molendijk.

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 FacyBox 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.

Broadcast your YouTube-playlists

molendijk — Tue, 19 Jul 2011 19:49:15 GMT

People using YouTube-playlists do so on their YouTube-channels, most of the time. But we don't need YouTube to broadcast our YouTube-playlists. We only need YouTube to create them and to determine our playlist-number(s). If you want to broadcast your playlists outside any channel, do the following.

Go to http://www.youtube.com/my_videos. (You have to create a YouTube account if you are 'new').
Create a playlist and add videos to it by clicking on 'add videos', or simply add new videos to an already existing playlist.
There's a link on your page that allows you to manage all your playlists. Click on it.
This will show your playlist(s) together with an option to edit it / them. Click on the edit button of a given playlist.
Click on the 'Share' button (of the playlist) that shows up. This yiels the URL of the playlist. At the end of the URL you have 'list=some number', where some number is something like PL19C52D08D0EF69FC.
Using this listnumber, you can play all the videos attached to it by using a (new) URL like:
http://www.youtube.com/embed/EYfd7HipW-Q?list=PL19C52D08D0EF69FC&start=0&autoplay=1&rel=0&showinfo=0&autohide=0
where EYfd7HipW-Q is the ID of the first video of the playlist having PL19C52D08D0EF69FC.
You can put the (new) URL in the address-bar, you can use it as the src of an iframe, etc.
Using it in an iframe would yield something like:

Code:

Of course you can use well-known methods for changing the URL of an iframe to dynamically produce any number of playlists you want. I made a quick example HERE.
===
Arie.

Updating Menu scripts for iPad/iPhone and Android devices

ddadmin — Wed, 29 Jun 2011 06:34:01 GMT

Mobile devices such as the iPad, iPhone or Android tablets are pretty on par with modern desktop browsers when it comes to rendering JavaScript, though that's not to say they do so without hiccups. One of the more crippling limitations is mobile devices' lack of support for the onmouseover/out events of JavaScript, which if you think about is more of a fundamental "shortcoming" of touch based devices in general rather than a deliberate act of omission. Regardless, this lack of support means many menu scripts on DD that rely on the onmouseover event to trigger the dropping down of a menu do not work in said devices. One way to overcome this so these menu scripts are at least functional in mobile devices is to modify them so when a mobile device is detected, the onclick event is used instead to trigger their associated drop down menus instead of the default onmouseover. I'm sure I'll be getting an earful on better ways to target mobile devices, for for now I'm using the following scheme:

Code:

var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

I'll be going through relevant menu scripts on DD to add in the necessary modification so they are functional in the major mobile devices. The first two to get the treatment are:

June 28th, 11

1) Anylink Drop Down Menu
2) Anylink CSS Menu

July 1st, 11

1) Flex Level Popup Menu

July 2nd, 11

1) Flex Level Drop Down Menu

July 17th, 11

1) All Levels Navigational Menu

I'll update this list each time another menu script is updated. In general only the .js file in each case is affected unless noted otherwise. Feedback, suggestions, fire away!

A Strange Menu-Include

molendijk — Tue, 24 May 2011 21:16:41 GMT

I was playing around with some code recently and discovered - more or less by accident - that we can include any fully functioning standalone menu by doing the following. The scripts and styles belonging to the external file will be preserved after inclusion:
1. We put this script just before the closing body-tag of the external file:

Code:

2. We remove the scripts and styles belonging to the head of the external file and put them in the head of the document in which we want to include the file.
3. We put the following in the head of the (main) document, above the scripts and styles that we already put there (see 2 above):

Code:

Very strange. DEMO here.
===
Arie Molendijk.

(Beginners) Easy ways to speed up your web pages

Beverleyh — Fri, 15 Apr 2011 18:19:29 GMT

This week I was asked to look at and offer opinions on a student's website project.

Now, its been a while since I was in student-shoes but it brought back memories of the mistakes that I made myself back when I was first learning how to make websites so I thought I'd create my first blog about the easy mistakes and easy fixes that can really help improve loading times.

My first observation is with the common development path that a lots of new-starters take when making their first website (me included, back in the day);

Priority 1 >> Find an easy-to-use package software that creates a web page for me - all I want to do is point-and-click and drag-and-drop.
(Mistake 1 >> Not fully understanding the basic structure of a web page or HTML)

Priority 2 >> Making the page look nice with lots of eye-catching elements
(Mistake 2 >> Not understanding web-suitable media formats and the extra impact that all embedded elements/scripts/animations have on the speed of a website or impression they make on visitors)

Priority 3 >> Getting Priority 1 and 2 finished with as quickly as possible so content can be added.
(Mistake 3 >> Not realising that visitors wont hang around to read your content, buy your goodies or comment on your articles, or that they're unlikely to want to come back, because the pages take too long to load)

So it seems that while we're in the learning stages, a student web developer's key goal is to just get a nice-ish looking website online as quickly as possible at (seemingly) any cost.

The students I cross paths with do have a basic understanding of web page structure - they know that a very basic web page is laid out like this�

Code:

�And they are also familiar with the �code view� in their web page builders, so if you�re not, turn it on now and have a look at what�s there - you're going to need to know what the and sections are for points 4 and 5.

So taking one student's website under my wing and using it to illustrate some easy improvements, we set to work on fixing things up.

Now the tips I list below are basic common sense things so it's unlikely that I'll be covering any new ground - I'm just bringing a few thoughts together here so other newbies can try them out and see how they work for them. They're all really easy to do but just require a bit of extra thought, time and effort - collectively their effects can be quite dramatic so it really is worth trying them out if you don't do them already.

1 - Scale images prior to putting them in a web page
When putting things on the web, the idea is to make things as small as possible so they download quicker and save on bandwidth. For most media this refers to physical file size on disk rather than physical dimensions, but for images it's a double-whammy, so I thought it was worth covering early :)
If your image only needs to be 100 x 150 pixels when it's on the web page, resize it to 100 x 150 pixels in Photoshop or GIMP before you put it there rather than rely on drag-and-drop visual scaling with your web page builder.

2 - Use the right image format for the job

Use .jpg/jpeg for photos or detailed images that require a lot of colours. Also try .png-24 as you can often get more savings with them over .jpg/.jpegs.
Use .gif for simple, small animations, logos, diagrams and images that require 1-bit transparency, which means a pixel is either transparent or it isn�t (no middle-ground). .Gif only supports 256 colours so you may notice speckling after saving in this format.
You might also like to try substituting .gif for .png-8 as in most of my tests, .png-8 offers a higher compression with, on average, a 7-12% saving over the .gif format.
Use .png-24 for images that require lots of colours and alpha-transparency (pixels can be varying degrees of transparency)

3 - Optimise images
If you're saving images directly from something like Photoshop, make sure you select the option to "save for the web". This will reduce the dpi and quality of the image to strip out all the in-between colours that the human eye can't really differentiate between, leaving you with an image file that takes up much less physical disk space on the web that downloads much faster. Even saving at 60% quality will produce an image that is almost indistinguishable from the original.

You can also try DD's image optimising tool here: http://tools.dynamicdrive.com/imageoptimizer/

When optimising, there will always be a trade-off between size and quality so you'll need to do a bit of fiddling to find the best-fit settings for you.

4 - Use an external CSS stylesheet (and condense multiple stylesheets into one and minify)
Web page builders often insert styles in the section of every web page meaning that a browser has to download extra code to view that web page, and then download the whole lot again when the visitor moves on to page 2.

Taking all the CSS out of the section and putting it into an external stylesheet will make it cachable by the web browser so the stylesheet is downloaded once and then sits ready and waiting in reserve to style the next page (minus the need to download it again).

It's also worth minifying it to take out all the comments and unnecessary whitespace. I've had mixed results with online minification tools so I find that doing it manually is often more reliable. To minify by hand, just do this;

Code:

h1{color:red;text-align:center;font-size:18pt;}
p{color:black;text-align:left;font-size:10pt;}

instead of this;

Code:

h1
{
color:red;
text-align:center;
font-size:18pt;
}

p
{
color:black;
text-align:left;
font-size:10pt;
}

How to use an external stylesheet: http://www.w3schools.com/css/css_howto.asp

5 - Use an external javascript file (and condense multiple js files into one and minify)
Same cachable reason as point 4.

You should only really merge multiple files if they are common to all/most pages of your website. If you have a page that utilises a one-off javascript file, particularly if its quite large, you should probably only include it in the page that actually needs it to avoid unecessary load-time on your initial home page.

You can argue that downloading a script before it's actually needed can create the impression of faster load-times elsewhere around the website, but that's something to be considered for each website.

To create an even bigger impression of faster load-time you can also put javascripts at the bottom of your web page (above the closing tag) but this depends on what the javascripts are needed for (e.g. if the script uses document.write to insert some content, it can't be moved to the bottom of the page) so for the purpose of keeping things simple, lets just stick with merging and minifying.

How to make an external javascript file: http://javascript.about.com/library/bltut13.htm
Online minification tool: http://jscompress.com/

6 - Spread files over other domains
All the files, scripts and images that make up your web page can be downloaded faster if they are spread over a few different domains. This is because browsers are limited to the number of files that they can download at any one time from one domain, putting subsequent files in a queue to download later. If you are able to put files under other domains, a browser can download them in parallel, resulting in shorter queues and more files being downloaded at the same time.

For a more detailed explanation of this, please refer to this article: http://yuiblog.com/blog/2007/04/11/p...search-part-4/

7 - Stream-line your content
(OK, so this is heavily linked to usability and accessibility, as well as SEO, but I still think it's relevant for page-load times so I'll continue.)

Obviously if you're writing a medical blog you'll be using lots of fancy sounding, scientific terms, but for general everyday web-talk, try and keep things simple.

People tend to visit websites to find information and achieve a goal in the shortest times possible so why make them wade through reams of content to find what they want?

Keeping things short and simple will allow people to find the information they want quickly, and also help to stream-line your web page content and allow things to load a bit faster.

Only use pictures that are relevant to your content.
Use animation *sparingly* to highlight areas of importance
Try not to auto-play videos and music - allow users the choice to play or ignore.
Write shorter sentences/paragraphs (and cut out the jargon). If you need to provide a lot more information on one particular matter, consider providing an additional document for download that the user can take away and read at their leisure.
Use bullet lists to get key points across quickly.

OK, as I said at the start of this post, these are all easy steps for new web-developers to take to speed up web page - no revelations, just common sense considerations. Anyway, I hope its of use to somebody :)

To be covered in my next blog post >> �Further ways to speed up web page loading times with php�

The YouTube version3 player

molendijk — Mon, 29 Nov 2010 14:51:51 GMT

The player used on http://www.youtube.com/watch?v=VIDEO_ID is YouTube's version3 player. If you want to use it directly (without the watch?v= part) you can do, for instance: http://www.youtube.com/v/EUSsXdhxFIM?version=3. (You may have to press CTRL if you want this to work in IE).

The advantage of the version3-player over other versions is that a click on a playing video doesn't open a new YouTube window containing all sorts of information that you may not be interested in. The click event just pauses the video.

You can include a version3-video with something like:

Code:

As soon as I understood this, I decided to write a script allowing us to load videos (that use the version3 player) with the help of a javascript function.
Demos and explanations HERE.
===
Arie.

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:

Quote:

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.

Stretching an iframe or an object with pixel precision

molendijk — Thu, 17 Jun 2010 21:35:20 GMT

Code:












absolute; left:60px; top: 60px; right: 60px; bottom: 60px; border: 1px solid black">
absolute; width: 100%; height: 100%; ">

Works also with an object. I got the idea from http://www.alistapart.com/articles/c...olutepositions
===
Arie.

"Drop Up" option for Anylink and Anylink CSS Menu

ddadmin — Tue, 01 Jun 2010 08:19:18 GMT

Quite a few members have asked for the ability to have a menu drop upwards (instead of the default downwards) for either Anylink Menu and Anylink CSS Menu. With that said, use the below attached modified versions of the respective .js files for the two scripts to achieve this. Then, inside the HTML markup for the anchor link of a menu, to get the menu to drop up for it, make use of the data-dir attribute:

Code:

data-dir="up">Default Example

The presence of the attribute in red in combination with the modified .js file will cause the menu for that anchor to drop upwards.

Enjoy!

Attached Files

	anylinkmenu.js (12.5 KB, 4026 views)
	anylinkcssmenu.js (11.1 KB, 4012 views)

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;
}