Dynamic Drive Forums - Blogs

Prevent users to open a video on the video-providing site (in a new window)

molendijk — Thu, 19 Nov 2009 09:51:12 GMT

Inserting these two lines to your include code for video's:

prevents flash apps from running scripts or having outbound links.

This is a very handy method for preventing users to open the video on the video-providing site (in a new window) when they accidentally click on the video screen.

Demo HERE (a click on the playing video will not cause it to open in a new window, but will simply pause it).

Arie Molendijk.

Document Resizer

Nile — Sat, 31 Oct 2009 23:50:03 GMT

Just a little script I made to make the document size bigger. :)

Quote:

Originally Posted by Nile

Ok:

Code:

Javascript Document Resizer

HTML Ipsum Presents

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.


#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}

The highlighted are the parts you need. Place the first highlighted text into the part of your document, and the second highlighted text in any part of the tag in your document you want.

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.stickmanlabs.com/lightwindow/

Ultimate Fade Home:

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

HTML 4.01 Strict Video Include & Chopping Parts from YouTube video's

molendijk — Sun, 27 Sep 2009 21:07:37 GMT

Perhaps many of you already knew this. I didn't.
HTML 4.01 Strict Video Include:

Code:

Chopping parts from YouTube video's. Including:

Code:

http://swf.tubechop.com/tubechop.swf?vurl=YouTube_ID&start=some_value&end=some_value

Chopping parts from YouTube video's. Direct URL:

Code:

http://swf.tubechop.com/tubechop.swf?vurl=YouTube_ID&start=some_value&end=some_value

Demo and explanations HERE.
===
Arie Molendijk

YouTube Chromeless Player

molendijk — Wed, 26 Aug 2009 18:29:57 GMT

It's not directly obvious from this how we can:
- start a movie on page load (question asked by some people on different forums);
- specify the dimensions and position of the movies in percentages;
- make good use of the ytplayer functions.

Autoplay: something like

Code:

function so_start()
{
loadNewVideo('lKq9_kk3Zbc', 20);
}
//IE needs some time
window.onload=setTimeout('so_start()',2000)

Size of movie in percentages (sort of):

Code:

Something like:
var width_of_movie=screen.availWidth/1.33+"px"
var height_of_movie=screen.availHeight/1.79+"px"

and then:
// width_of_movie, height_of_movie, "8", null, null, params, atts);
     //]]>

Left and top of movie:

Code:



You need Flash player 8+ and JavaScript enabled to view this video.




etc.

ytplayer functions in a menu:

Code:

Mary Stuart
(direct start at 10 secs)


Zarathustra
(button start at 80 secs)


Lisitsa plays the piano

DEMO here. See source for (manipulations of) other ytplayer functions, like the stop function (not so good in the original), functions for fast forward / backward, functions for going to the beginning / the end of the video.
===
Arie.

Using the Select Box as a Navigation Tool

molendijk — Mon, 10 Aug 2009 00:04:54 GMT

If we want the select box to function as a genuine menu, then a click on a given option (of the select box) must give us the same range of possibilities as does a click on the items of a normal menu. So a click should allow us to go to a new page, to open a popup window, to produce an alert etc.

We can achieve this with the help of a function that has the following general form:

Code:

var which="";
function DoSomethingWithOptionvalue(which) {
var optionValue = document.getElementById(which).options[document.getElementById(which).selectedIndex].value;
var optionValueWithSplit = optionValue.substring(0,[optionValue.indexOf('|')]);
var url = optionValue.substring(optionValue.indexOf('|')+1, optionValue.length);
if (optionValue=="bla") {some function()}
if (optionValueWithSplit=="blo") {some function()}
}

For if (optionValue=="bla") {some function()} and if (optionValueWithSplit=="blo") {some function()} we could have, for instance:

Code:

if (optionValue=="none") {}
else if (optionValue=="alarm") {alert('This is an alert.')}
else if (optionValue=="red background") {document.body.style.background='red'}
else if (optionValueWithSplit=="popup") {window.open(url,'','toolbar=1, location=1, directories=1, status=1, menubar=1, scrollbars=1, resizable=1, width=600px, height=350px, top=50px, left=100px');}
else location.href=url

which could operate on select boxes like the following

Code:

It is preferable to use a select box menu having size="0" (or "1", or no size at all, which is the same as size="0"), because we want our menu to be able to appear outside of the control window over other windows and to stay within the visible part of the screen without having to do any specific scripting.

It is also a good idea to anchor a select box (used as a navigation tool) to another element, which shows/hides the box when the mouse moves over the anchor (show) or out of it (hide). This gives us some freedom in positioning the select box on the screen.

Showing a select box having 'display:none' is a simple matter. But hiding it in a proper way is another matter. Its complexity has to do with the fact that different browsers require different ways to hide select boxes. For instance, if, in the select tag, we put onmouseout="this.style.display='none'", then, if we move the mouse out of the select tag, the entire select box hides in non-IE - except Opera - and in IE>6, but in IE6 and in Opera, only the first option (or the one having 'selected') goes away, etc.

Fortunately, these crossbrowser problems can be overcome (added some lines ensuring that the select box 'maintains' its selected option):

Code:

Coding in the head:

//Div needed for showing and hiding select boxes. Background needed for IE6 (and possibly higher versions). We hide the background with opacity
document.write('')

var which="";

/* This hides the selected option in non-Opera when the select box folds out, ensuring that you don't see the selected option twice. You have to give the selected option of each menu: class="dynamicStyle". Doesn't work in IE, and must not apply to Opera, because it would mess up the select box. */
if(!window.opera){
document.write('