Kod:
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Patrick Hunlock | http://www.hunlock.com/Licensed under: Public Domain
*/
function getElementsByClass (searchClass) {
// This function returns an array of all HTML objects with the
// specified className. Tag is optional
var returnArray = [];
var els = ********.getElementsByTagName('*');
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (var i = 0; i < els.length; i++) {
if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
}
return returnArray;
}
function popVideo(vid, darken) {
// This function accepts a division ID (vid), either a string or the actual
// object itself. vid is mandatory. darken is optional, if it's true
// the page will be greyed out under the video.
var videos = getElementsByClass('video'); // Get all the videos on the page.
var isplaying=null;
for(i=0; i<videos.length; i++) { // Loop through all the videos
if (videos[i].style.display=='block') { // This video is playing
isplaying=videos[i].id; // remember its name
var tmp=videos[i].innerHTML; // Get the division contents
videos[i].innerHTML=''; // destroy the contents
videos[i].style.display='none'; // Terminate the video.
videos[i].innerHTML=tmp; // rebuild the contents.
}
}
// This handles the darkening of the background while a video is playing.
// First we see if the dark layer exists.
var dark=********.getElementById('darkenScreenObject');
if (!dark) {
// The dark layer doesn't exist, it's never been created. So we'll
// create it here and apply some basic styles.
var tbody = ********.getElementsByTagName("body")[0];
var tnode = ********.createElement('div'); // Create the layer.
tnode.style.backgroundColor='rgb(0, 0, 0)'; // Make it black.
tnode.style.opacity='0.7'; // Set the opacity (firefox/Opera)
tnode.style.MozOpacity='0.70'; // Firefox 1.5
tnode.style.filter='alpha(opacity=70)'; // IE.
tnode.style.zIndex='1'; // Zindex of 50 so it "floats"
tnode.style.position='absolute'; // Position absolutely
tnode.style.top='0px'; // In the top
tnode.style.left='0px'; // Left corner of the page
tnode.style.overflow='hidden'; // Try to a**** making scroll bars
tnode.style.display='none'; // Start out Hidden
tnode.id='darkenScreenObject'; // Name it so we can find it later
tbody.appendChild(tnode); // Add it to the web page
dark=********.getElementById('darkenScreenObject'); // Get the object.
}
dark.style.display='none';
if ((isplaying==vid)||(/^close$/i.test(vid))) { return false; }
if (typeof(vid)=="string") { vid=********.getElementById(vid); }
if (vid&&typeof(vid)=="object") {
if (darken) {
// Calculate the page width and height
if( window.innerHeight && window.scrollMaxY ) {
var pageWidth = window.innerWidth + window.scrollMaxX;
var pageHeight = window.innerHeight + window.scrollMaxY;
} else if( ********.body.scrollHeight > ********.body.offsetHeight ) {
var pageWidth = ********.body.scrollWidth;
var pageHeight = ********.body.scrollHeight;
} else {
var pageWidth = ********.body.offsetWidth + ********.body.offsetLeft;
var pageHeight = ********.body.offsetHeight + ********.body.offsetTop;
}
//set the shader to cover the entire page and make it visible.
dark.style.width= pageWidth+'px';
dark.style.height= pageHeight+'px';
dark.style.display='block';
}
// Make the video visible and set the zindex so its on top of everything else
vid.style.zIndex='100';
vid.style.display='block';
var scrollTop = 0;
if (********.********Element && ********.********Element.scrollTop)
scrollTop = ********.********Element.scrollTop;
else if (********.body)
scrollTop = ********.body.scrollTop;
// set the starting x and y position of the video
vid.style.top=scrollTop+Math.floor((********.********Element.clientHeight/2)-(vid.offsetHeight/2))+'px';
vid.style.left=Math.floor((********.********Element.clientWidth/2)-(vid.offsetWidth/2))+'px';
}
return false;
}
// This portion will allow the video to be dragged and dropped
var savedTarget=null; // The layer being moved
var orgCursor=null; // The original mouse style so we can restore it
var dragOK=false; // True if we're allowed to move the element under mouse
var dragXoffset=0; // How much we've moved the element on the horozontal
var dragYoffset=0; // How much we've moved the element on the verticle
function moveHandler(e){
// This function moves the layer when the mouse is moved.
// it's called automatically by the onmousemove handler
if (e == null) { e = window.event }
if (e.button<=1&&dragOK){
savedTarget.style.left=e.clientX-dragXoffset+'px';
savedTarget.style.top=e.clientY-dragYoffset+'px';
return false;
}
}
function cleanup(e) {
// This is called when the user releases the mouse
// it clears out the move and mouseup event handlers
// and resets the cursor.
********.onmousemove=null;
********.onmouseup=null;
savedTarget.style.cursor=orgCursor;
dragOK=false;
return false;
}
function dragHandler(e){
// This is called when the user clicks on the page
// It checks to see if the click happened over an
// element with a class name of "video", if if it
// did, it sets up move and mouseup handlers.
var cursorType='-moz-grabbing';
if (e == null) { e = window.event; cursorType='move';}
var target = e.target != null ? e.target : e.srcElement;
if (target.className=="video") {
orgCursor=target.style.cursor;
savedTarget=target;
target.style.cursor=cursorType;
dragOK=true;
dragXoffset=e.clientX-parseInt(target.style.left);
dragYoffset=e.clientY-parseInt(target.style.top);
********.onmousemove=moveHandler;
********.onmouseup=cleanup;
return false;
}
}
//This next line will call dragHandler whenever
//the user clicks the mouse button on the page.
//Draghandler will check to see if the mouse is over
//a layer with the classname of 'video' and if so
//set up the drag and drop events.
********.onmousedown=dragHandler;
</script>
<h2>Check these videos</h2>
<ul>
<li><a href="http://www.youtube.com/watch?v=LUcB-TLLg40" onclick='return popVideo("vid1")'>Alan Meckler, Chairman and Chief Executive Officer, Jupitermedia Corporation</a> [4:19]</li>
<li><a href="http://www.youtube.com/watch?v=YRDtwcGrGyM" onclick='return popVideo("vid2")'>How to Install a Testing Server on Your PC</a> [10:16]</li>
</ul>
<!-- Place this at the bottom of your Web page, before the closing BODY tag. -->
<div id='vid1' class='video' style='position: absolute; display: none; padding: 10px; background-color: #dfdbc3; border: 1px solid black'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LUcB-TLLg40&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/LUcB-TLLg40&autoplay=1" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="344"></embed>
</object>
<br><br>
<a href="#" onclick='return popVideo("close")' style='float: left; color: #000;'>» close window «</a>
</div>
<div id='vid2' class='video' style='position: absolute; display: none; padding: 10px; background-color: #dfdbc3; border: 1px solid black'>
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/YRDtwcGrGyM&hl=en&fs=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/YRDtwcGrGyM&autoplay=1" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="344"></embed>
</object>
<br><br>
<a href="#" onclick='return popVideo("close")' style='float: left; color: #000;'>» close window «</a>
</div>