What is the Javascript for opening a video as used on...

argh.pirate · (#1 (**permalink**))

...Newgrounds? On Newgrounds.com they open their swf files in a new "window" not like with a close or minimize button but within the page and it darkens the background (the page before the link is clicked). It's hard to explain without seeing it. What part of Javascript do I need to learn to do this? What is it called? I want to open video instead of swf and also have the darkened background look.

trimagna · (#2 (**permalink**))

When you are on one of the selection pages, View > Source > Save As ...

Most of their navigation is Javascript but I did see a reference to Ajax. On the page which plays the video, the source code indicates some CSS (style sheet).

- - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Know Your Moves #1: Sexy Sleeper Hold Video - Heavy.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="M4ry31q38JLVtT92AGwIs14piRyjlRej2pO9yahUu ng=" />

<meta name="description" content="Learn the art of the sleeper hold, the SEXY way: with hot girls in bikinis!"/>
<meta name="keywords" content="Karate, Boxing, Sports, Fight, kick, bodog, martialarts, dudes, athlete, Know Your Moves #1: Sexy Sleeper Hold, Sports" />

<link rel="stylesheet" type="text/css" href="http://www.heavy.com/css/0712171640/base.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.heavy.com/css/0711121538/standard.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://www.heavy.com/css/0712121739/video_player_page.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.heavy.com/css/0705161611/forms.css" media="all" />

<script type="text/javascript">
// <![CDATA[
var gteIE5 = false
// ]]>
</script>

<script type="text/javascript">
// <![CDATA[
var Host = { CDN_URL:'http://www.heavy.com', COMMUNITY_URL:'http://www.heavy.com', PROFILE_URL:'http://my.heavy.com', VE_URLS:'http://ve.heavy.com', DOMAIN:'heavy.com' };
// ]]>
</script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0712121739/prototype.js"></script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0712181530/Heavy.js"></script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0709151305/SWFObject.js"></script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0705161610/round_corners.js"></script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0712121739/video_player.js"></script>
<script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0711161445/AdWrapper.js"></script>
<script type="text/javascript">
// <![CDATA[
AdWrapper.setSite("");
AdWrapper.setZone("");
// ]]>
</script>
<script type="text/javascript">
// <![CDATA[
sequenceData = '{"sequenceData":{"sequence_type":"CHANNEL","chann el_id":"71988","user_id":-1,"video_id":"15544","number_of_videos":40}}';

// ]]>
</script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0712171640/global.js"></script>
<script type="text/javascript">
// <![CDATA[
var TrackData = {s_account:'heavy2prod',sc_cid:'us_us-heavy_0',siteType:'Heavy',country:'US',events:'',p ageType:'PlayerPage',pageName:'VideoPlayer',pageSo rt:'Know Your Moves #1: Sexy Sleeper Hold'};
// ]]>
</script>
<script type="text/javascript" src="http://www.heavy.com/scripts/0712121739/tracking.js"></script>

<link rel="alternate" type="application/rss+xml" title="Bodog Fight" href="/rss/channel/71988" />

</head>
<body id="video_player" class="short_header" onload='MediaPlayerManager.init(0,15544, -1)'>

<div id="header">
<div class="top_nav" id='top_nav'>
<div id="top_nav_inner" style="visibility:hidden;">
<ul>
<li class="first-li"><a href="http://www.heavy.com/signup" class="signup" onclick="ComponentTracker.click(this, 'subnav', {linkName:'JoinLink'}); return false;" >join myheavy</a></li>
<li><a href="http://www.heavy.com/signup" class="signup" onclick="ComponentTracker.click(this, 'subnav', {linkName:'SignIn'}); return false;" >sign in</a></li>
<li class="last-li"><a href="http://www.heavy.com/contact" class="signup" onclick="ComponentTracker.click(this, 'subnav', {linkName:'FeedBack'}); return false;" >feedback</a></li>
</ul></div>
</div>
<div class="wrapper" id='ad_unit_wrapper'>

<div id="menu_bar">
<ul id="main_menu">
<li class="home"><a href="http://www.heavy.com/">home</a></li>
<li class="videos"><a href="http://www.heavy.com/videos/featured">videos</a></li>
<li class="channels"><a href="http://www.heavy.com/channels/featured">channels</a></li>
<li class="people"><a href="http://www.heavy.com/people/featured">people</a></li>
<li class="radio"><a href="http://www.heavy.com/radio">radio</a></li>
<li class="myheavy"><a href="http://www.heavy.com/myheavy">myheavy</a></li>
</ul>

<div id="simple_search">
<form name="simplesearch" action="http://www.heavy.com/search" method="get">
<div class="search_form">
<input id="search_action" type="hidden" name="action" value="videos">
<input name="tag" class="simple_search_input_text" type="text" value="enter search" onfocus="this.value =''" />
<div id="btn_search_button">
<a href="javascript:document.forms.simplesearch.submi t();" title="Search">Search</a>
</div>
</div>
</form>
</div>
<div id="search_select">
<ul id="menu-search">
<li id="search_select_videos"><a href="#" id="a-search-select-videos" class="selected" onclick="javascript:selectSearchOption('a-search-select-videos'); return false;">videos</a></li>
<li id="search_select_channels"><a href="#" id="a-search-select-channels" class="" onclick="javascript:selectSearchOption('a-search-select-channels'); return false;">channels</a></li>
<li id="search_select_people"><a href="#" id="a-search-select-people" class="" onclick="javascript:selectSearchOption('a-search-select-people'); return false;">people</a></li>
</ul>
</div>

<div id="sub_nav">
<ul>
<li class="first-li"><a href="http://www.heavy.com/videos/featured" class="featured" />featured videos</a></li>
<li><a href="http://www.heavy.com/videos/popular/week" class="popular" />most popular</a></li>
<li><a href="http://www.heavy.com/videos/rated/week" class="rated" />top rated</a></li>
<li><a href="http://www.heavy.com/videos/saved/week" class="saved" />most saved</a></li>
<li><a href="http://www.heavy.com/videos/recent" class="recent" />most recent</a></li>
</ul></div>

</div>
<script type="text/javascript">
checkNavigation('top_nav_inner'); // refreshes topnav by ajax call.
</script>

</div>
</div>

<div id="content">
<div class="wrapper">
<div id="videoPlayer"></div>
<div class="primary">
<div id="video_description_header_wrap">
<h3>Video Description</h3>
<iframe id="video_description_logo" scrolling="no" allowTransparency="true" marginheight="0" frameborder="0" >
</iframe>
</div>

<div id="video_info">
<div class="cbb" id="video_description_wrap">

<h1><a href="http://www.heavy.com/video/15544" class="title_link">Know Your Moves #1: Sexy Sleeper Hold</a></h1>
<div style="height: 23px">
<ul class="star_rating_static">

<li class="current_rating" style="width:60px;" title="already rated">Currently 4 Stars</li>
</ul>
<ul class="star_rating" id="video_rating" style="position: relative;top: -23px;margin-bottom:-23px;z-index:50;">
<li id="video_user_rating" class="video_user_rating" style="width:0px;" title=""></li>
<li><a href="javascript:RatingManager.rateVideo( '15544', 1 );" title="1 star out of 5" class="one_star">1</a></li>
<li><a href="javascript:RatingManager.rateVideo( '15544', 2 );" title="2 stars out of 5" class="two_stars">2</a></li>
<li><a href="javascript:RatingManager.rateVideo( '15544', 3 );" title="3 stars out of 5" class="three_stars">3</a></li>
<li><a href="javascript:RatingManager.rateVideo( '15544', 4 );" title="4 stars out of 5" class="four_stars">4</a></li>
<li><a href="javascript:RatingManager.rateVideo( '15544', 5 );" title="5 stars out of 5" class="five_stars">5</a></li>
</ul>

</div>

<ul class="video_info">
<li>Added: 06/21/2007</li>
<li>Total Video Views: 523,245</li>
<li>Uploaded By: <a class="profile_link" href="http://www.heavy.com/user/117" title="heavysan" rel="nofollow">heavysan</a></li>
<li>Category: <a href="/search?action=videos&tag=Sports" title="Sports">Sports</a></li> </ul>
<p class="see_more" id="see_more" style="display:none;">Click here to see more: <a class="channel_link" href="/play/channel/71988" title="Bodog Fight">Bodog Fight</a></p>
<p>Learn the art of the sleeper hold, the SEXY way: with hot girls in bikinis!</p>
</div>

<div class="cbb" id="video_link_wrap">

<h3>Video Direct Link</h3>
<label for="channel_link">Copy the URL below for a direct link to the video currently playing.</label>
<input readonly="1" type="text" name="channel_link" value="http://www.heavy.com/video/15544" id="channel_link" onfocus="this.select()" />

</div>

<div class="cbb" id="tag_wrap">

<h3>Tags</h3>
<p class="tag_list">
<a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=Karate" title="Karate">Karate</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=Boxing" title="Boxing">Boxing</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=Sports" title="Sports">Sports</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=Fight" title="Fight">Fight</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=kick" title="kick">kick</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=bodog" title="bodog">bodog</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=martialarts" title="martialarts">martialarts</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=dudes" title="dudes">dudes</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=athlete" title="athlete">athlete</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=Know+Your+Moves+%231%3A+S exy+Sleeper+Hold" title="Know Your Moves #1: Sexy Sleeper Hold">Know Your Moves #1: Sexy Sleeper Hold</a>, <a rel="nofollow" href="http://www.heavy.com/search?action=videos&tag=Sports" title="Sports">Sports</a> </div>

</div>
<div id="comments_header_wrap">
<h3>Comments</h3>
<iframe id="comments_logo" scrolling="no" allowTransparency="true" marginheight="0" frameborder="0" >
</iframe>
</div>

<div id="comments">
<div class="cbb" id="comment_wrap">

<a href="javascript:LoginManager.displayLogin(true)"> Sign in</a> to submit a comment for this video.
</div>

<div class="comment_post cbb alt_row">
<a href="http://my.heavy.com/lolza" title="lolza" rel="nofollow">
<img class="user_thumb" src="/images/gen/commentpod/000000/community/defaults/images/no_pic_sumo.jpg" width="60" height="60" alt="lolza" />
</a>
<div class="comment">
<h3><a class="profile_link" href="http://my.heavy.com/lolza" title="lolza" rel="nofollow">lolza</a></h3>
<p class="comment_post_date">Posted: December 14, 2007 @ 6:04am</p>
<div id="comment_text"> <a href="http://xstars.ilive.ro/"> nasty : X</a></div>
</div>
<div class="clear"></div>
</div>
<div class="comment_post cbb">
<a href="http://my.heavy.com/lolza" title="lolza" rel="nofollow">
<img class="user_thumb" src="/images/gen/commentpod/0c0c0c/community/defaults/images/no_pic_sumo.jpg" width="60" height="60" alt="lolza" />
</a>
<div class="comment">
<h3><a class="profile_link" href="http://my.heavy.com/lolza" title="lolza" rel="nofollow">lolza</a></h3>
<p class="comment_post_date">Posted: December 14, 2007 @ 6:04am</p>
<div id="comment_text"> <a href="http://xstars.ilive.ro/"> nasty : X</a></div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">cbb.init();</script>

<script type="text/javascript">
if(typeof(quantserve)!='undefined') _qacct="p-e0vX3BDLIMTBo";quantserve();
</script>
<noscript>
<img src="http://pixel.quantserve.com/pixel/p-e0vX3BDLIMTBo.gif" style="display: none" height="1" width="1" alt="Quantcast"/></noscript>


</div>
<div class="secondary">
<iframe id="Medium_Rectangle" scrolling="no" allowTransparency="true" marginheight=0 frameborder=0></iframe>

<span id="sequence_info">
<div id="channel_description_wrap" class="hide_me">
<h3>Channel Description</h3>
<img class="channel_thumb" src="/images/gen/sequencepod/video_assets/2007/06/2115/60f67596e1de95caa3d889cd093cfd67.jpg" width="135" height="100" alt="Bodog Fight" />
<div class="rss">
<a href="/rss/channel/71988" target="_blank">
<img src="/images/videos/rss_icon.jpg" width="21" height="21" alt="Rss Icon" />
</a><br/>
<a href="/rss/channel/71988" target="_blank">RSS FEED</a><br/>
</div>
<br clear="all" />
<h2>Bodog Fight</h2>

<a style="display:block;" href="javascript:SubscriptionManager.subscribeChan nel( '71988' );" title="Subscribe to Channel" class="channel_subscribe">SUBSCRIBE TO CHANNEL</a>
<div style="height: 23px;">
<ul class="star_rating_static">
<li class="current_rating" style="width:0px;" title="already rated">Currently 0 Stars</li>
</ul>
<ul class="star_rating" id="channel_rating" style="position: relative; top: -23px;margin-bottom:-23px; z-index: 50;">
<li id="channel_user_rating" class="channel_user_rating" style="width:0px;" title=""></li>
<li><a href="javascript:RatingManager.rateChannel( '71988', 1 );" title="1 star out of 5" class="one_star">1</a></li>
<li><a href="javascript:RatingManager.rateChannel( '71988', 2 );" title="2 stars out of 5" class="two_stars">2</a></li>
<li><a href="javascript:RatingManager.rateChannel( '71988', 3 );" title="3 stars out of 5" class="three_stars">3</a></li>
<li><a href="javascript:RatingManager.rateChannel( '71988', 4 );" title="4 stars out of 5" class="four_stars">4</a></li>
<li><a href="javascript:RatingManager.rateChannel( '71988', 5 );" title="5 stars out of 5" class="five_stars">5</a></li>
</ul>
</div>
<p class="see_more">Total Channel Views: 301,089</p>
<p>See hard-hitting clips from the world's best fighters, feel their passion and experience their pride.</p>
</div>

</span>

<iframe id="SideBottom" scrolling="no" allowTransparency="true" marginheight=0 frameborder=0></iframe>

</div>
</div>
</div>
<br clear="all" />
<div id="loginDiv">
<form action='javascript:LoginManager.logMeIn()'>
<input id='loginEmail' type='text'/>
<input id='loginPassword' type='password'/>
<input type='reset' value='' onclick='LoginManager.cancel();return false;' id='login_cancel'/>
<input type='submit' value='' id='login_submit'/>
<div id="loginError"></div>
<script type='text/javascript'>
document.write((gteIE5) ? "<img src='/images/spacer.gif' style='filter

rogid

XImageTransform.Microsoft.Al phaImageLoader(src=\"/images/login21.png\", sizingMethod='image')'/>" : "<img src='/images/login21.png'/>");
</script>
<a href='/signup' id='clickJoin'>NOT A MEMBER? CLICK HERE TO JOIN!</a>
</form>
</div>
<div id="_alert" style="display:none; position: absolute; z-index:20;">
<table width="400" height="235" border="0" cellpadding="0" cellspacing="0" bgcolor="#121212">
<tr>
<td height="95" align="center" >
<img src="/images/heavy_shield_logo.jpg" />
</td>
</tr>
<tr>
<td height="100" align="center" valign="top">
<span id="_alertmessage" style="color:#97C0D1; font-family:Arial; font-size:18px; font-weight:bold;">Success</span><br />
<img src="/images/notification/_space.gif" width="7" height="7" /><br />
<span style="color:#B6D3DF; font-family:Arial; font-size:12px; text-align: center;">
<span id="_alertsubmessage" style="color:#FFFFFF;"></span><br /></span>
</td>
</tr>
<tr>
<td height="40" align="center" valign="top">
<img style="display:none" id="_alertcancel" src="/images/notification/btn_cancel.jpg" width="52" height="22" border="0">
<img src="/images/notification/_space.gif" width="3" height="3" border="0">
<img id="_alertok" src="/images/notification/btn_ok.jpg" width="52" height="22" border="0">
</td>
</tr>
</table>
</div><div id="footer">
<div class="wrapper">
<iframe id="Leaderboard" scrolling="no" frameborder=0 marginwidth=0 allowTransparency="true">
</iframe>

<ul class="links">
<li><a href="http://about.heavy.com">About Heavy</a></li>
<li><a href="http://www.heavy.com/faq">FAQ</a></li>
<li><a href="http://www.heavy.com/safety">Safety Tips</a></li>
<li><a href="http://www.heavy.com/netiquette">Netiquette</a></li>
<li><a href="http://www.heavy.com/copyright">Copyright Tips</a></li>
<li><a href="http://www.heavy.com/privacy">Privacy Policy</a></li>
<li><a href="http://www.heavy.com/terms">Terms of Service</a></li>
<li><img src="http://www.heavy.com/images/rssimages/rss_small.png" alt="rss logo" />*<a href="http://www.heavy.com/rss">RSS</a></li>
<li><a href="http://www.heavy.com/contact">Contact Us</a></li>
<li><a href="http://www.heavy.com/advertising">Advertising</a></li>
<li><a href="http://www.huskymedia.com">Husky Media</a></li>
<li class="last"><a href="/sitemap">Sitemap</a></li>
</ul>

<p>© 2008, Heavy Inc.</p>
</div>
</div><div id="tracking">

<script type="text/javascript" src="http://www.heavy.com/scripts/0712121739/s_code.js"></script>
<script type="text/javascript">

</script>

<script type="text/javascript">
var _rsCI="us-heavy";
var _rsCG="0";
var _rsDN='//secure-us.imrworldwide.com/';
var _rsCC="1";
var _rsUT="1";
var _rsCL=0;
var _rsPLqt=0;
var _rsPLac=0;

// 'aff' or 'non' for affiliate or nonaffiliate, respectively
var affcode = Cookie.get_cookie('Land');

if(affcode != null && affcode != '' && affcode != 'nonaffiliate'){
_rsCG += '-'+affcode;
var _rsC0 = 'aff';
} else {
var _rsC0 = 'non';
}

// referral code
var refcode = Cookie.get_cookie('compRefcode');
if(refcode != null && refcode != '') {
var _rsC1 = refcode;
}

document.write('<script src="http://www.heavy.com/scripts/0712121739/v53.js">');
document.write('<\/script>');
</script>


<script type="text/javascript"
src="http://edge.quantserve.com/quant.js"></script>
<script type="text/javascript">
_qacct="p-e0vX3BDLIMTBo";quantserve();</script>
<noscript>
<a href="http://www.quantcast.com/p-e0vX3BDLIMTBo" target="_blank"><img
src="http://pixel.quantserve.com/pixel/p-e0vX3BDLIMTBo.gif" style="display:
none" border="0" height="1" width="1" alt="Quantcast"/></a></noscript>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-1995064-1";
urchinTracker();
</script>

</div><script type='text/javascript'>
MediaPlayerManager.video_id = '15544';
MediaPlayerManager.is_private = 0;
MediaPlayerManager.is_hidden = 0;
</script>
</body>
</html>

mawduce65 · (#3 (**permalink**))

That's not Java, It's flash. It's also worth noting that the website you mention was not built by amateurs. Someone with a degree built that website and did a very nice job. If you want to build websites like that, You will need an education, or a lot of time on your hands to learn flash.