|
JavaScript - Custom Youtube Api And Inter-browers Functionality
Hey, I was talking to a coding friend about some work I have and he thought some JavaScript or JQeury would be able to help me out. However I really have no idea where to begin.
In it's simplest form, I want to have a button on a page that can pause and play an embedded YouTube video. I believe YouTube has customizable API's but this button needs to be separate from the video itself. Why does it need to be separate? Because I want the button to exist by itself on one webpage, and the YouTube video to exist by itself on a second webpage. So the idea is that I can be looking at my computer in one corner of the room and my friend can be looking at his, and I can pause the video he's watching from where I'm sitting. ...any ideas? Similar TutorialsHello, well i am having this annoying issue from previous 3 months and its a very long story to tell but i will try to make it small, well i am interested in using a popup to show flash games in it, so i did then my interest went to make all games playable in full screen so i did that too and got success, but i am facing issues due to wmode, if you visit my this site link http://www.bloghuts.com/2010/11/13-days-in-hell.html and click on play game for other browsers while using google chrome browser, you will see the error there will be blocks appearing in the game, while if click on play for google chrome then this error is not there, its just because of WMODE, for google chrome button i am using wmode while for all other browsers i am not doing this. the reason for not using wmode to my other browser play button is that if i add wmode to the games then the performance of the game is highly damaged in fireforx and internet explorer, and also to some extent in other browsers including google chrome. WHAT DO I NEED FROM YOU PEOPLE? it is that i want to get rid of this wmode=opaque thing as it makes the game slow even in google chrome which is effecting game playing quality, i used window,transparent too but nothing good came out of it. Only google chrome is asking for the wmode, while our step child internet explorer is happy with it, hehehehe Please someone help me out i am literally taking out my hair, lol some more information i would like to provide so that things work fast, i am using blogger blog, i have knowledge of html,xhtml,css, and for java or jquery its hint and trial. thanks for reading the long story and giving me time, if you can help please help me out, and i don't have money to pay for your service of help, otherwise why would i try to make blog xD. thank you Regards. Cryoffalcon. Looking for this. In PS you press CTRL+T on new layer. 9 handles appears an then you can stretch/rotate/move that layer. Looking just for that stretch & rotate functionality with dotted/dashed retangle outline. That is, there should be 8 handles on rectangle boundarys and then rectangle should be rotated & stretched via those points. & moved via nineth center point. Any that kind of js outthere ? I am trying to code a piece of JavaScript that queries the Internic for whois information (using either a domain or an IP address) and puts the results into a JSON object with separate fields for each piece of information.
Hi all, I need something analogous to Java's HashMap (or any kind of map, actually). I have read in other forums that an Object() can be used as a map like this: var object = new Object() object.var1 = "blah"; object.var2 = anotherObject; alert("This is how I can get the value: " + object.var1); However, the way I see it this only works for static key-names. What if I need to have many dynamically-generated entries in the object? For example: // this does not work the way I want it to var key = "aaaaa"; object.key = anObject; key = "bbbbb"; object.key = anotherObject; when running this, instead of having something like: object.aaaaa --> anObject object.bbbbb --> anotherObject I have: object.key --> anotherObject If you get the picture, how can I have a dynamically-generated hashmap-like entity with entries that are generated dynamically through a for-lopp for example? Thanks! Hi, I want to make a button which if pressed works as if F11 key on keyboard is pressed. For button html would be like this (I think) <button type="button" onclick="some function">FullScreen</button> Now I don't know what function would go in that onclick as I don't have the JS. One more thing that would be nice if the text 'FULLSCREEN' changes to 'NORMAL WINDOW' when the button is pressed, so that the user could realize that they have to press the same button again to get out of fullscreen, it would be like toggle at every click text changes from 'FULLSCREEN' to 'NORMAL WINDOW' and then if pressed again changing to 'FULLSCREEN'. Hey, I have been using a tr onclick function in my tables to change the color of the most recently clicked row, it works fine. I have recently added sorttable http://www.kryogenix.org/code/browser/sorttable/ to my table with the simple <table class="sortable"> Making the table sortable has overwritten my tr onclick functions, which are now dead. Any ideas/thoughts? Heres a quick sample of what it looks like: Code: <table class="sortable"> <thead><th scope="col">Header 1</th> <th scope="col">Header 2</th></thead> <tr onclick="doSomething(this);"><td>Some data</td><td>Some more</td></tr> </table> http://mybestmaterial.blueeyedpandahosting.com/cep/1/ Works exactly as expected (and all the code is built into the source code view of the page.) What happens is 2 timers are set up. 1 is running when user clicks the Start/Stop link. The second is started when the user clicks the Laughter Start/Stop link. So the sequence should be User -- Start click then after that -- laughter-start-stop click... You will see both timers start running. The laughter click will be clicked multiple times as the app is designed to time how much laughter a comedian or speaker is getting relative to the amount of time on stage. So click the laughter start stop multiple times before clicking the START-STOP the last time. Then a PAR score is generated - which is a simple percent of the time laughter happened, vs the time on stage. The link above works like a charm. THE PROBLEM is -- on my SPRINT TREO 700p --- when I click the laughter start/stop click it stops all the timers. I think for some reason the TREO won't allow the second NEW DATE() to be declared or something... because when I comment those two lines out --- line 166 and 167 in Dreamweaver version of the file -- (if you copy full source into dreamweaver...) Then the clicking doesnt' stop the main timer -- but it also doesn't work!! ANY THOUGHTS on how to decloare the SCOPE fo the NEW DATE() so it only effects that one function? OR any other suggestions? Code pasted below Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Comedy Analyzer - Simple</title>
</head>
<script type="text/javascript">
var flagclock = 0;
var flagstop = 0;
var stoptime = 0;
var currenttime;
var splitdate = '';
var output;
var clock;
function startstop()
{
//var startstop = document.getElementById('startstopbutton');
var startdate = new Date();
var starttime = startdate.getTime();
if(flagclock==0)
{
flagclock = 1;
counter(starttime);
}
else
{
if(laughter_flagclock==1) {
laughter_startstop();
}
flagclock = 0;
flagstop = 1;
splitdate = '';
//total laughter === running_total_laughter_time;
//total time == running_total_time;
var par_score = (Math.round(running_total_laughter_time/running_total_time*100))/100;
var par_score_percent = par_score*100;
//var par_score = running_total_laughter_time/running_total_time;
laughter_output.value = "PAR SCORE = " + par_score_percent;
}
}
var running_total_time;
function counter(starttime)
{
output = document.getElementById('output');
clock = document.getElementById('clock');
laughter_output = document.getElementById('laughter_output');
currenttime = new Date();
var timediff = currenttime.getTime() - starttime;
if(flagstop == 1)
{
timediff = timediff + stoptime
}
if(flagclock == 1)
{
clock.value = formattime(timediff,'');
running_total_time = timediff;
refresh = setTimeout('counter(' + starttime + ');',10);
}
else
{
//start and stop the running counter while adding the values to the next deal.
window.clearTimeout(refresh);
stoptime = timediff;
}
}
function formattime(rawtime,roundtype)
{
if(roundtype == 'round')
{
var ds = Math.round(rawtime/100) + '';
}
else
{
var ds = Math.floor(rawtime/100) + '';
}
var sec = Math.floor(rawtime/1000);
var min = Math.floor(rawtime/60000);
ds = ds.charAt(ds.length - 1);
if(min >= 60)
{
startstop();
}
sec = sec - 60 * min + '';
if(sec.charAt(sec.length - 2) != '')
{
sec = sec.charAt(sec.length - 2) + sec.charAt(sec.length - 1);
}
else
{
sec = 0 + sec.charAt(sec.length - 1);
}
min = min + '';
if(min.charAt(min.length - 2) != '')
{
min = min.charAt(min.length - 2)+min.charAt(min.length - 1);
}
else
{
min = 0 + min.charAt(min.length - 1);
}
return min + ':' + sec + ':' + ds;
}
function resetclock()
{
if(flagclock == 1)
{
//alert("if side of reset clock");
var resetdate = new Date();
var resettime = resetdate.getTime();
counter(resettime);
}
else
{
//alert("ELSE side of reset clock");
clock.value = "00:00:0";
}
flagstop = 0;
stoptime = 0;
splitdate = '';
laughter_resetclock();
window.clearTimeout(refresh);
output.value = '';
}
</script>
<script type="text/javascript">
var laughter_flagclock = 0;
var laughter_flagstop = 0;
var laughter_stoptime = 0;
var laughter_currenttime;
var laughter_splitdate = '';
var laughter_output;
var laughter_clock;
var count = 0;
function laughter_startstop()
{
var laughter_startdate = new Date();
var laughter_starttime = laughter_startdate.getTime();
if(laughter_flagclock==0)
{
laughter_flagclock = 1;
laughter_counter(laughter_starttime);
laughter_number_text = document.getElementById('laughter_number');
count++;
laughter_number_text.value = count;
}
else
{
laughter_flagclock = 0;
laughter_flagstop = 1;
laughter_splitdate = '';
}
}
var running_total_laughter_time;
function laughter_counter(laughter_starttime)
{
laughter_clock = document.getElementById('laughter_clock');
laughter_currenttime = new Date();
var laughter_timediff = laughter_currenttime.getTime() - laughter_starttime;
if(laughter_flagstop == 1)
{
laughter_timediff = laughter_timediff + laughter_stoptime
}
if(laughter_flagclock == 1)
{
laughter_clock.value = laughter_formattime(laughter_timediff,'');
running_total_laughter_time = laughter_timediff;
//laughter_output.value += "-- laughter -- "+running_total_laughter_time;
laughter_refresh = setTimeout('laughter_counter(' + laughter_starttime + ');',10);
}
else
{
window.clearTimeout(laughter_refresh);
laughter_stoptime = laughter_timediff;
}
}
function laughter_formattime(laughter_rawtime,laughter_roundtype)
{
if(laughter_roundtype == 'round')
{
var laughter_ds = Math.round(laughter_rawtime/100) + '';
}
else
{
var laughter_ds = Math.floor(laughter_rawtime/100) + '';
}
var laughter_sec = Math.floor(laughter_rawtime/1000);
var laughter_min = Math.floor(laughter_rawtime/60000);
laughter_ds = laughter_ds.charAt(laughter_ds.length - 1);
if(laughter_min >= 60)
{
laughter_startstop();
}
laughter_sec = laughter_sec - 60 * laughter_min + '';
if(laughter_sec.charAt(laughter_sec.length - 2) != '')
{
laughter_sec = laughter_sec.charAt(laughter_sec.length - 2) + laughter_sec.charAt(laughter_sec.length - 1);
}
else
{
laughter_sec = 0 + laughter_sec.charAt(laughter_sec.length - 1);
}
laughter_min = laughter_min + '';
if(laughter_min.charAt(laughter_min.length - 2) != '')
{
laughter_min = laughter_min.charAt(laughter_min.length - 2)+laughter_min.charAt(laughter_min.length - 1);
}
else
{
laughter_min = 0 + laughter_min.charAt(laughter_min.length - 1);
}
return laughter_min + ':' + laughter_sec + ':' + laughter_ds;
}
function laughter_resetclock()
{
//alert("laughter_resetclock called");
if(laughter_flagclock == 1)
{
var laughter_resetdate = new Date();
var laughter_resettime = laughter_resetdate.getTime();
laughter_counter(laughter_resettime);
}
else
{
laughter_clock.value = "00:00:0";
}
laughter_flagstop = 0;
laughter_stoptime = 0;
laughter_splitdate = '';
count = 0;
laughter_number_text.value = count;
window.clearTimeout(refresh);
laughter_output.value = '';
//window.clearTimeout(refresh);
output.value = '';
}
</script>
<body>
Running Time :: <input id="clock" type="text" value="00:00:0" style="text-align: center;" size="14"readonly><br />
Laughter Time :: <input id="laughter_clock" type="text" value="00:00:0" style="text-align: center;"size="14" readonly><br />
Laugh Count :: <input id="laughter_number" type="text" value="0" style="text-align: center;" size="4" readonly><br />
<div id="start_button"><a href="javascript:startstop();">Timing Start/Stop</a></div>
<div id="laughter_start_button"><a href="javascript:laughter_startstop();">Laughter Start/Stop</a></div>
<textarea id="laughter_output" style="height: 90%;" cols="40" rows="1"></textarea><br />
<a href="javascript:resetclock();">Full-Reset</a><br /><br />
</body>
</html>
I'm having a little bit of trouble with setting up a Google map to add markers for events venues. The page is dynamically created using postcodes from a database which is why the code might look a little strange, but it's the only way I could find to make it work. However, I'm struggling to add any further functionality to the page. As you will see from the code attached I would like to add buttons to reset the map to it's initial state, plus buttons to show only the "O" markers or the "E" markers. Also, I would ideally only like to see the "O" markers when the page first loads. I know this is a lot to ask but could anyone please help. Thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HPB Open days and Exhibitions Locator</title>
<style type="text/css">
html {
}
body {
margin: 0;
padding: 0;
height: 100%;
background-color:#000;
}
#map {
width: 980px;
height: 580px;
z-index:1;
position:relative;
margin:25px auto;
}
.controls {
background-color:#597681;
padding:10px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.controls p {
margin:0;
padding:0;
color:#FFF;
font-size:12px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.introtext {
position:absolute;
top:10px;
left:0px;
width:425px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.introtext h2 {
margin:0;
padding:10px 20px;
background-color:#000;
color:#FFF;
font-size:24px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-style:italic;
font-weight:normal;
}
.introtext p {
margin:0;
padding:10px 20px;
background-color:#BF443A;
color:#FFF;
font-size:12px;
font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}
.introtext h2 strong {
font-weight:bold;
}
#postcode {width:150px; color:#999;}
</style>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
function doBlur() {
if (document.getElementById('postcode').value == '') { document.getElementById('postcode').value = 'Postcode'; document.getElementById('postcode').style.color = '#999'; }
};
function doFocus() {
if (document.getElementById('postcode').value == 'Postcode') { document.getElementById('postcode').value = ''; document.getElementById('postcode').style.color = '#000'; }
};
function doSwitch() {
if (document.getElementById('postcode').value == 'Postcode') {alert('Valid postcode required');} else { usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint); }
};
</script>
</head>
<body>
<div id="map">
</div>
<script type="text/javascript">
var map;
var localSearch = new GlocalSearch();
var icon = new GIcon();
icon.image = "markers/yellow_MarkerO.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(10, 0);
var icon2 = new GIcon();
icon2.image = "markers/blue_MarkerE.png";
icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon2.iconSize = new GSize(20, 34);
icon2.shadowSize = new GSize(37, 34);
icon2.iconAnchor = new GPoint(10, 34);
icon2.infoWindowAnchor = new GPoint(10, 0);
var icon3 = new GIcon();
icon3.image = "http://www.google.com/mapfiles/marker.png";
icon3.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon3.iconSize = new GSize(20, 34);
icon3.shadowSize = new GSize(37, 34);
icon3.iconAnchor = new GPoint(10, 34);
function usePointFromPostcode(postcode, callbackFunction) {
localSearch.setSearchCompleteCallback(null, function() {
if (localSearch.results[0]) {
var resultLat = localSearch.results[0].lat;
var resultLng = localSearch.results[0].lng;
var anotherpoint = new GLatLng(resultLat,resultLng - 1.20000);
var point = new GLatLng(resultLat,resultLng);
callbackFunction(point, anotherpoint);
}
else
{
alert("Postcode not found!");
}
});
localSearch.execute(postcode + ", UK");
}
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker4 = new GMarker(point,icon);
GEvent.addListener(marker4, "click", function() {
marker4.openInfoWindowHtml(html, {
noCloseOnClick: false
});
});
return marker4;
}
function createMarker2(point2,html) {
var marker2 = new GMarker(point2,icon2);
GEvent.addListener(marker2, "click", function() {
marker2.openInfoWindowHtml(html, {
noCloseOnClick: false
});
});
return marker2;
}
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(53.80000, -8.41387), 6);
map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)));
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
function placeMarkerAtPoint(point, anotherpoint) {
var marker3 = new GMarker(point,icon3);
map.addOverlay(marker3);
map.setCenter(anotherpoint, 8);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#map").append("<div class='introtext'><div class='controls'></div></div>");
$("#map > .introtext").prepend("<h2>Forthcoming <strong>shows</strong></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris eros, sollicitudin in rhoncus in, pharetra a lorem. Nunc semper lectus ut libero interdum ut pharetra ipsum mattis.</p>");
$("#map > .introtext > .controls").append("<p>Find a show</p><input type='text' id='postcode' size='10' value='Postcode' onFocus='doFocus();' onBlur='doBlur();' /><input type='submit' value='Search' onClick='doSwitch();' id='yourlocation' /><input type='submit' value='reset' id='iliketoreset' /><input type='submit' value='set E' id='ionlywantex' /> <input type='submit' value='set O' id='ionlywantod' />");
});
</script>
<script type="text/javascript">
var localSearchBH193HG = new GlocalSearch();
localSearchBH193HG.execute("BH19 3HG, UK");
localSearchBH193HG.setSearchCompleteCallback(null,
function() {
map.addOverlay(createMarker(new GLatLng(localSearchBH193HG.results[0].lat,localSearchBH193HG.results[0].lng),'<h2>O Venue 1</h2>'));
});
</script>
<script type="text/javascript">
var localSearchSY79LT = new GlocalSearch();
localSearchSY79LT.execute("SY7 9LT, UK");
localSearchSY79LT.setSearchCompleteCallback(null,
function() {
map.addOverlay(createMarker(new GLatLng(localSearchSY79LT.results[0].lat,localSearchSY79LT.results[0].lng),'<h2>O Venue 2</h2>'));
});
</script>
<script type="text/javascript">
var localSearchRG46UT = new GlocalSearch();
localSearchRG46UT.execute("RG4 6UT, UK");
localSearchRG46UT.setSearchCompleteCallback(null,
function() {
map.addOverlay(createMarker2(new GLatLng(localSearchRG46UT.results[0].lat,localSearchRG46UT.results[0].lng),'<h2>E Venue 1</h2>'));
});
</script>
<script type="text/javascript">
var localSearchPE36GA = new GlocalSearch();
localSearchPE36GA.execute("PE3 6GA, UK");
localSearchPE36GA.setSearchCompleteCallback(null,
function() {
map.addOverlay(createMarker2(new GLatLng(localSearchPE36GA.results[0].lat,localSearchPE36GA.results[0].lng),'<h2>E Venue 2</h2>'));
});
</script>
</body>
</html>
Hi all, I have been using a border-fading script to give the impression of onmouseover fading underline, and I wish to tweak it a bit to give a slightly different effect I have two scripts that do virtually the same thing, although the second has a display bug in FF both have their advantages and I don't have my heart set on using either one, although Vic's scripts are being used all over the page i'm creating so his has first dibs here they are, and I will describe what I need to do below: first script: Code: startColor = "FFFFFF"; // MouseOut link color
endColor = "000000"; // MouseOver link color
stepIn = 20; // delay when fading in
stepOut = 30; // delay when fading out
var fading=new Array();
fading['now']=startColor;
function initLinkFade() {
var links = document.getElementById('pageHolder').getElementsByTagName('A');
for(var i=0;i<links.length;i++){
links[i].onmouseover = domouseover;
links[i].onmouseout = domouseout;
}
}
if(document.getElementsByTagName){
window.onload = initLinkFade;
document.write("<style type='text/css'>#pageHolder a{text-decoration:none}</style>");
}
function domouseover() {
var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement;
if(target.nodeName!='A')return;
for(var i=0;i<fading.length;i++)
clearTimeout(fading[i]);
if(fading['el']!=target && fading['el']){
fading['el'].style.borderBottom = "1px solid #"+startColor;
linkFade(startColor,endColor,target,stepIn);
}
else
linkFade(fading['now'],endColor,target,stepIn);
}
function domouseout() {
var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement;
if(target.nodeName!='A')return;
for(var i=0;i<fading.length;i++)
clearTimeout(fading[i]);
if(fading['el']!=target && fading['el']){
fading['el'].style.borderBottom = "1px solid #"+startColor;
linkFade(endColor,startColor,target,stepOut);
}
else
linkFade(fading['now'],startColor,target,stepOut);
}
function hex(i) {
var s=Math.floor(i).toString(16);
return s.length==2?s:"0"+s;
}
function linkFade(s,e,element,step){
fading['el']=element;
var sr=parseInt(s.substr(0,2),16);
var sg=parseInt(s.substr(2,2),16);
var sb=parseInt(s.substr(4,2),16);
var er=parseInt(e.substr(0,2),16);
var eg=parseInt(e.substr(2,2),16);
var eb=parseInt(e.substr(4,2),16);
for(var i = 0; i <= step; i++) {
var r=hex((sr*(step-i)+er*i)/step);
var g=hex((sg*(step-i)+eg*i)/step);
var b=hex((sb*(step-i)+eb*i)/step);
fading[i]=setTimeout("fading['now']='"+r+g+b+"';fading['el'].style.borderBottom = '1px solid #'+fading['now']",i*step);
}
}
What I like about this one is that you can specify both the fade in and fade out speeds, allowing you a bunch of flexibility in how it looks also, I like how it allows you to set it to 'apply to all links in a given div... however that can have certain downfalls you can seethis script in action he www.enviromark.ca/head/YPP.htm the second script Code: <!--
// by Vic Phillips (04-September-2006) http://www.vicsjavascripts.org.uk
function zxcMseOver(zxcobj,zxcd){
var zxcp=zxcobj;
if (!zxcp.oop){ return; }
clearTimeout(zxcp.oop.to);
zxcp.oop.d=zxcd||0;
zxcp.oop.cng();
}
function zxcInit(zxccls,zxccol1,zxccol2,zxcstps){
var zxclks=document.getElementsByTagName('BODY')[0].getElementsByTagName('A');
for (var zxc0=0;zxc0<zxclks.length;zxc0++){
if (zxclks[zxc0].className==zxccls){
zxcStyle(zxclks[zxc0],{borderBottom:'solid '+zxccol1+' 0px;'});
zxclks[zxc0].oop=new zxcOOP(zxclks[zxc0],zxccol1,zxccol2,zxcstps);
}
}
}
var zxcCnt=0;
function zxcOOP(zxcd,zxccol1,zxccol2,zxcstps){
this.obj=zxcd;
this.ary=zxcSTxtColors([zxccol1,zxccol2],zxcstps||10);
this.cnt=0;
this.d=1
this.to=null;
this.ref='zxcoop'+zxcCnt;
window[this.ref]=this;
zxcCnt++;
}
zxcOOP.prototype.cng=function(){
if ((this.d>0&&this.cnt<this.ary.length-1)||(this.d<0&&this.cnt>0)){
this.obj.style.borderBottom='solid #'+this.ary[this.cnt+=this.d]+' 1px';
this.setTimeOut("cng();",100);
}
else if (this.d<0) {
this.obj.style.borderBottom='0px';
}
}
zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}
function zxcStyle(zxcele,zxcstyle){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
return zxcele;
}
function zxcSTxtColors(zxcc,zxcnu){
var zxcary=[];
zxcc1=zxcc[0].replace('#',''); zxcc2=zxcc[1].replace('#','');
var zxcr=zxcHexToInt(zxcc1.substring(0,2));
var zxcg=zxcHexToInt(zxcc1.substring(2,4));
var zxcb=zxcHexToInt(zxcc1.substring(4,6));
var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
var zxcrstep=Math.round((zxcr2-zxcr)/zxcnu);
var zxcgstep=Math.round((zxcg2-zxcg)/zxcnu);
var zxcbstep=Math.round((zxcb2-zxcb)/zxcnu);
for (zxc0=0;zxc0<zxcnu;zxc0++){
zxcary[zxc0]=zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
}
zxcary[zxcnu-1]=zxcc[1].substring(1);
return zxcary;
}
function zxcIntToHex(zxcn){
zxcn=(zxcn>255)?255:(zxcn<0)?0:zxcn;
var zxcresult=zxcn.toString(16);
if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
return zxcresult;
}
function zxcHexToInt(zxchex){
return parseInt(zxchex,16);
}
//-->
activated by:
<body onload="zxcInit('mainLinks','#FFFFFF','#000000',15);">
...
<a class="mainLinks" href="#advantagesRisks" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);"><img src="images/EN_advantages_risks.gif" name="imageLinkNoTouchy"></a>
I like this script because it allows you to set the fade on a per-link basis, not on a per-div basis... more control alrighty, here are the minor modifications I am hoping to get help with The fade-out effects stop when a second link is onmouseover'd. I would like to be able to set both the fade-in and fade-out delays (like in the first script), but have the fade-out continue for "Link A" even if "Link B" is onmouse'd over. Basically getting the smooth-fade effect seen he www.enviromark.ca/head/ --> the gray icons. When a link is clicked, I would like the top border of the link to fade in and stay solid until another link is clicked. When another link is clicked, I would like it's top border to fade in (like the first link) a have the first link's top border fade out. Again you can see the effect I'm going for at the link above by clicking on a few of the vertical links and seeing it's effect on the horizontal images I know this might be a lot to ask, so I suppose I could live with the script I have... but I figured there was no harm in asking A little difficult to explain, but here goes: I've combined a couple different jquery scrollable functions to a webpage that I'm creating. This: http://flowplayer.org/tools/demos/sc...one-sized.html for my horizontal scrolling. And this: http://flowplayer.org/tools/demos/sc.../vertical.html for my vertical. The problem with the vertical scrolling function is that it relies on the mousewheel and mouse clicks for scrolling and I don't feel it's immediately apparent that the text scrolls. But I really like the effect, so I've added arrows and tried to get the functionality from the vertical scrolling example, but it's not working, except for the down arrow in the content in the very last tab. When you click on an arrow, it currently takes you to the previous or next horizontal section. I know the answer is in there somewhere, but I'm not sure where to look for it. Here's the javascript file that controls the functionality: http://www.chevalia.net/js/jquery.tools.min.js And the link to the page: http://www.chevalia.net/chevalia/index2.html The CSS for the scrollable: Code: #flowtabs {
/* dimensions */
width:425px;
height:31px !important;
margin:0 !important;
padding:0;
/* IE6 specific branch (prefixed with "_") */
_margin-bottom:-2px;
}
/* single tab */
#flowtabs li {
float:left;
margin-left:7px;
padding:0;
text-indent:0;
list-style-type:none;
}
/* a- tag inside single tab */
#flowtabs li a {
display:block;
height: 31px;
padding:30px 12px 10px 0;
margin:0px;
/* font decoration */
text-align:center;
text-decoration:none;
}
/* style for horizontal flow */
#flowpanes {height:468px; width:924px; position:relative; overflow:hidden; clear:both;}
#flowpanes ul.items {width:20000em; position:relative; clear:both; margin:0; padding:0;}
#flowpanes ul li {float:left; display:block; width:924px;}
/* style for vertical flow */
/* root element for scrollable */
.vertical {
/* required settings */
position:relative;
overflow:hidden;
/* vertical scrollers have typically larger height than width */
height: 450px;
width: 611px;
}
/* root element for scrollable items */
.vert_items {
position:relative;
width: 600px;
float:left;
/* this time we have very large space for height */
height:5000em;
margin: 0px;
}
.actions {
width:15px;
height:auto;
float: right;
margin:auto;
}
.actions a {
cursor:pointer;
}
.nextPage {
float:right;
margin-top:38px;
}
.prevPage {
float:right;
margin-top:200px;
}
Anyone care to take a stab at this puzzle? Many thanks in advance. Hello Everyone, I am in the process of creating a billboard script for our company front page which will switch between two images. I am using the following script as a base: http://tympanus.net/codrops/2009/12/...query-and-css/ I am eager to learn coding, but am still a novice at it so I was wondering if anyone could assist me with adding the following functionality: 1. Rather than (or perhaps in addition to) having the two images change based on a timer, I'd like to be able to insert a "next" arrow. Therefore I will need assistance in coding a button to change the images from "ad_1" to "ad_2" which is currently done automatically by the interval timer 2. I'd like to make the images clickable with unique destinations (so when you click on "ad_1" it will take you to "link 1", "ad_2" will take you to "link 2" Below is my current code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Rotating Billboard with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
</head>
<body>
<div class="palmtrees"></div>
<div class="powerline"></div>
<div class="city"></div>
<div class="container">
<div class="ad">
<div id="ad_1" class="ad_1">
<img class="slice_1" src="ads/ad1_slice01.jpg"/>
<img class="slice_2" src="ads/ad1_slice02.jpg"/>
<img class="slice_3" src="ads/ad1_slice03.jpg"/>
</div>
<div id="ad_2" class="ad_2">
<img class="slice_1" src="ads/ad2_slice01.jpg"/>
<img class="slice_2" src="ads/ad2_slice02.jpg"/>
<img class="slice_3" src="ads/ad2_slice03.jpg"/>
</div>
</div>
</div>
<div class="billboard"></div>
<a class="back" href="http://tympanus.net/codrops/2009/12/16/creating-a-rotating-billboard-system-with-jquery-and-css/"><a>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script>
$(function() {
$('#ad_1 > img').each(function(i,e){
rotate($(this),500,10000,i);
});
function rotate(elem1,speed,timeout,i){
elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
var other;
if(elem1.parent().attr('id') == 'ad_1')
other = $('#ad_2').children('img').eq(i);
else
other = $('#ad_1').children('img').eq(i);
other.animate({'marginLeft':'0px','width':'266px'},speed,function(){
var f = function() { rotate(other,speed,timeout,i) };
setTimeout(f,timeout);
});
});
}
});
</script>
</body>
</html>
And here is a working example: http://www.santamarinas.com/RS/Tests/Billboard/ Thank you in advance for your help!! Is there a way to use google anayltics to track how many people clicked onto my video from my site to watch it? how long they stayed on the video, where they came from, ect?
Can anyone help me modify this script to be able to view feeds of type media rather apps? I want it to work as it does for a channel rather than all of youtube. I've tried changing the settings at the top and a lot of other stuff but no luck so far... getting desperate here. I'm willing to pay at this point but I don't have much. I neeeeeed this script. It could be in PHP even. However it must be completely dynamic and allow me to make searches against the channel. Code: var quvic = {};
quvic.MAX_RESULTS_LIST = 50;
quvic.THUMBNAIL_WIDTH = 124;
quvic.THUMBNAIL_HEIGHT = 93;
quvic.PLAYER_WIDESCREEN_WIDTH = 720;
quvic.PLAYER_STANDARD_WIDTH = 540;
quvic.PLAYER_HEIGHT = 405;
quvic.VIDEO_LIST_CSS_CLASS = 'videolist';
quvic.PREVIOUS_PAGE_BUTTON = 'previousPageButton';
quvic.NEXT_PAGE_BUTTON = 'nextPageButton';
quvic.STANDARD_FEED_URL_TOP_RATED =
'http://gdata.youtube.com/feeds/api/standardfeeds/top_rated?';
quvic.STANDARD_FEED_URL_MOST_VIEWED =
'http://gdata.youtube.com/feeds/api/standardfeeds/most_viewed?';
quvic.STANDARD_FEED_URL_MOST_POPULAR =
'http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?';
quvic.STANDARD_FEED_URL_RECENTLY_FEATURED =
'http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?';
quvic.VIDEO_FEED_URL =
'http://gdata.youtube.com/feeds/api/videos?';
quvic.QUERY_URL_MAP = {
'top_rated' : quvic.STANDARD_FEED_URL_TOP_RATED,
'most_viewed' : quvic.STANDARD_FEED_URL_MOST_VIEWED,
'most_popular' : quvic.STANDARD_FEED_URL_MOST_POPULAR,
'recently_featured' : quvic.STANDARD_FEED_URL_RECENTLY_FEATURED,
'search' : quvic.VIDEO_FEED_URL
};
quvic.nextPage = 2;
quvic.previousPage = 0;
quvic.previousSearchTerm = '';
quvic.previousQueryType = 'search';
quvic.jsonFeed_ = '';
quvic.appendScriptTag = function(scriptSrc, scriptId, scriptCallback) {
var oldScriptTag = document.getElementById(scriptId);
if (oldScriptTag) {
oldScriptTag.parentNode.removeChild(oldScriptTag);
}
var script = document.createElement('script');
script.setAttribute('src',
scriptSrc + '&v=2&alt=jsonc&callback=' + scriptCallback);
script.setAttribute('id', scriptId);
script.setAttribute('type', 'text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);
};
quvic.listVideos = function(queryType, searchTerm, page) {
quvic.previousSearchTerm = searchTerm;
quvic.previousQueryType = queryType;
var queryUrl = quvic.QUERY_URL_MAP[queryType];
if (queryUrl) {
queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
'&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
if (searchTerm != '') {
queryUrl += '&q=' + encodeURI(searchTerm);
}
quvic.appendScriptTag(queryUrl,
'searchResultsVideoListScript',
'quvic.listVideosCallback');
quvic.updateNavigation(page);
} else {
alert('Unknown feed type specified');
}
};
quvic.PresentVideos = function(queryType, searchTerm, page) {
quvic.previousSearchTerm = searchTerm;
quvic.previousQueryType = queryType;
var queryUrl = quvic.QUERY_URL_MAP[queryType];
if (queryUrl) {
queryUrl += 'max-results=' + quvic.MAX_RESULTS_LIST +
'&format=5&start-index=' + (((page - 1) * quvic.MAX_RESULTS_LIST) + 1);
if (searchTerm != '') {
queryUrl += '&q=' + encodeURI(searchTerm);
}
quvic.appendScriptTag(queryUrl,
'searchResultsVideoListScript',
'quvic.listVideosCall');
quvic.updateNavigation(page);
}
};
quvic.listVideosCall = function(json) {
quvic.jsonFeed_ = json.data;
var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
var items = json.data.items || [];
var html = ['<dl class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
var duration = json.data.items[i].duration;
html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
html.push('<span class="duration">',getDurationTime(duration),'</span>');
html.push('</span>');
html.push('<br/>', title.substr(0,37), '</dt>');}
html.push('</dl><br style="clear: left;"/>');
jQuery(div).fadeTo(500, 1.0);
document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
if (items.length > 0) {
loadVideo(json.data.items[0].id);
}
};
function loadVideo(videoID) {
swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "?version=3&enablejsapi=1&playerapiid=ytplayer&fs=1&autohide=1",
'player', quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT, '9.0.0', false, false, {allowScriptAccess: 'always',allowfullscreen: 'true'});
}
quvic.listVideosCallback = function(json) {
quvic.jsonFeed_ = json.data;
var div = document.getElementById(quvic.VIDEO_LIST_CSS_CLASS);
while (div.childNodes.length >= 1) {
div.removeChild(div.firstChild);
jQuery(div).fadeTo(0, '.01');
}
var items = json.data.items || [];
var html = ['<dl class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
var duration = json.data.items[i].duration;
html.push('<dt><span class="video_thumb thumbbox"><a href="javascript:playVideo(\''+videoID+'\',\''+addslashes(title)+'\')">');
html.push('<img src="',thumbnailUrl,'" width="',quvic.THUMBNAIL_WIDTH,'" height="',quvic.THUMBNAIL_HEIGHT,'" onmouseout="mouseOutImage(this)" onmouseover="mousOverImage(this,\'',videoID,'\',1)"></a>');
html.push('<span class="duration">',getDurationTime(duration),'</span>');
html.push('</span>');
html.push('<br/>', title.substr(0,37), '</dt>');}
html.push('</dl><br style="clear: left;"/>');
jQuery(div).fadeTo(500, 1.0);
document.getElementById(quvic.VIDEO_LIST_CSS_CLASS).innerHTML = html.join('');
};
quvic.updateNavigation = function(page) {
quvic.nextPage = page + 1;
quvic.previousPage = page - 1;
document.getElementById(quvic.NEXT_PAGE_BUTTON).style.display = 'inline';
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).style.display = 'inline';
if (quvic.previousPage < 1) {
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = true;
} else {
document.getElementById(quvic.PREVIOUS_PAGE_BUTTON).disabled = false;
}
document.getElementById(quvic.NEXT_PAGE_BUTTON).disabled = false;
};
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("player");
ytplayer.addEventListener("onError", "onPlayerError");
}
function playVideo(videoID,title){
if(document.title)
document.title = title;
ytplayer.loadVideoById(videoID);
}
function HDPlayer() {
resizePlayer(quvic.PLAYER_WIDESCREEN_WIDTH, quvic.PLAYER_HEIGHT);
}
function HQPlayer() {
resizePlayer(quvic.PLAYER_STANDARD_WIDTH, quvic.PLAYER_HEIGHT);
}
function resizePlayer(width, height) {
var playerObj = document.getElementById("player");
playerObj.height = height;
playerObj.width = width;
}
function addslashes(str) {
str=str.replace(/\'/g,'\\\'');
str=str.replace(/\"/g,'');
return str;
}
function stripslashes(str) {
str=str.replace(/\\'/g,'\'');
return str;
}
var imname;
var timer;
function mousOverImage(name,id,nr){
if(name)
imname = name;
imname.src = "http://img.youtube.com/vi/"+id+"/"+nr+".jpg";
imname.style.border = '3px solid silver';
nr++;
if(nr > 3)
nr = 1;
timer = setTimeout("mousOverImage(false,'"+id+"',"+nr+");",1000);
}
function mouseOutImage(name){
if(name)
imname = name;
imname.style.border = '3px solid #fff';
if(timer)
clearTimeout(timer);
}
function getDurationTime(sec)
{
var sec_div = ''+((sec%60) | 0);
if(sec_div.length == 1)
sec_div = '0'+sec_div;
return ((sec/60) | 0)+':'+sec_div;
}
This draws on jQuery JavaScript Library v1.4.2 and swfObject; A similar script providing this functionality would also be acceptable. I am looking to create a Stylesheet for YouTube, to make it look nicer and customise it completely I wanted to change the logo, but its a graphic. I was wondering if it would be possible to do this by linking to one hosted on Flickr? Or is there another trick? I have used this tool in order to display all my youtube videos. http://www.php-help.ro/mootools-12-j...ched-playlist/ When you go over the thumbnail of one of the videos, you can see the title of each video (the title of the specific video in youtube). I want this title to be displayed before the thumbnail (above it). Can someone tell me please how can I do it? There are 4 JS files, 1 CSS and a small html code (all on the link provided). Thanks! Hi, I started with the template on this site: http://www.pupinc.com/videobox/ However, I have about a dozen videos with more to come so I added a vertical scrollbar to navigate through the thumbnails. My problem is I don't know how to separate the main video player so that it doesn't scroll with the thumbnails. HTML: Code: <div id="middle4">
<div class="videobox" style="height: 360px; overflow-y: scroll;">
<ul>
<li><a href="http://www.youtube.com/watch?v=iFGEHtqNZis">TRS 50X35</a></li>
<li><a href="http://www.youtube.com/watch?v=9CaN2KBYpo8">98X104 Automobile Shredder</a></li>
<li><a href="http://www.youtube.com/watch?v=BWHXX6u3tVk">60x60 Aluminum</a></li>
<li><a href="http://www.youtube.com/watch?v=ZiWDKtdfqWQ">60X60 System</a></li>
<li><a href="http://www.youtube.com/watch?v=VMbbXcFju9E">Portable Shredding System</a></li>
<li><a href="http://www.youtube.com/watch?v=WEn5xtJwtu4">60X85 System</a></li>
<li><a href="http://www.youtube.com/watch?v=1cOxYQB5icg">60X60 White Goods</a></li>
</ul>
</div>
</div>
JS: Code: // Videobox object
VideoBox = Class.create();
VideoBox.prototype = {
// Initialize object.
initialize: function(index, item) {
this.index = index;
this.item = item;
this.item.addClassName('videoboxjs');
this.list = this.item.getElementsBySelector('ul')[0];
// Create div.bigvideo and add it just before the ul.
this.bigvideo = document.createElement('div');
Element.addClassName(this.bigvideo, 'bigvideo');
this.item.insertBefore(this.bigvideo, this.list);
// Create array of videothumbs.
this.thumbs = new Array;
// Opera 9 doesn't like 'li a' in getElementsBySelector, so you
// have to break it apart.
var links = this.item.getElementsBySelector('li');
for (var i=0; i < links.length; i++) {
this.thumbs[i] = new VideoThumb(index, i, links[i].getElementsBySelector('a')[0]);
}
// Load up the first video.
this.swap(0);
},
// Replace existing video with new one.
swap: function(index) {
// IE 6 won't show the video unless something else is in the box.
// I chose to add a <br /> which I hide via CSS.
this.bigvideo.innerHTML = '<br /><object width="425" height="350"><param name="movie" value="' + this.thumbs[index].video + '"></param><param name="wmode" value="transparent"></param><embed src="' + this.thumbs[index].video + '" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>';
// Deselect all the thumbnails.
this.thumbs.invoke('deselect');
// Select the current thumbnail.
this.thumbs[index].select();
}
};
// Videothumb object
VideoThumb = Class.create();
VideoThumb.prototype = {
// Initialize object.
initialize: function(boxindex, index, link) {
this.boxindex = boxindex;
this.index = index;
this.item = link;
this.href = this.item.getAttribute('href');
// Extract the v querystring value from the href. Youtube uses this
// value for everything.
this.videocode = this.href.toQueryParams().v;
// Direct link to the video for use in the object/embed
this.video = 'http://www.youtube.com/v/' + this.videocode;
// Create thumbnail image and append it inside the list item
var img = document.createElement('img');
img.src = 'http://img.youtube.com/vi/' + this.videocode + '/default.jpg';
img.alt = this.item.innerHTML;
img.title = this.item.innerHTML;
this.item.innerHTML = "";
this.item.appendChild(img);
// Observe the click event.
Event.observe(this.item, 'click', this.swap.bindAsEventListener(this));
},
swap: function(evt) {
// Call the swap method of the parent videobox with the thumbnail
// thumbnail index as a parameter.
aVB[this.boxindex].swap(this.index);
// Stop the event so the browser doesn't follow the link.
if (evt) {
Event.stop(evt);
}
},
select: function() {
this.item.addClassName('current');
},
deselect: function() {
this.item.removeClassName('current');
}
};
// Don't do anything if we're using Opera 8 or earlier.
if (!Prototype.Browser.Opera || (Prototype.Browser.Opera && navigator.userAgent.toLowerCase().charAt(navigator.userAgent.toLowerCase().indexOf('opera') + 6) > 8)) {
// Create array of videoboxes so you can have more than one on a page.
var aVB = new Array;
$$('div.videobox').each ( function(videobox, index) {
aVB[index] = new VideoBox(index, videobox);
});
}
Hi all. I'm new comer here and i have no idea to find the way how to create youtube like content locker. Is possible to lock / hide content for visitor until they liked video on youtube ? I'm very basic using javascript and i don't know how to start coding. I would to thanks to all who answering my questions. Regards Just to let you know if you don't know how to do this is the code I use: It will solve the problem of the clip scrolling over text etc. <embed wmode="transparent" src="youtube URL" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="280" height="240"></embed> (mods, do with this as you please). I am using a javascript replace code to embed youtube videos in my forum. It works fine except users on iPhone or iPad can't see the videos. I would like to added the url to the video under the embed code - so these users can just click the link and see the vid on youtube. Here is the script in question: Code: z[x].innerHTML = z[x].innerHTML.split("[YOUTUBE]").join("<iframe width=560 height=410 src='").split("/watch?v=").join("/v/").split("[/YOUTUBE]").join("' frameborder=0 allowfullscreen></iframe>");
I am not very good with the split & join functions. Can someone help me out.. I would like the code to place the you tube video link like so: Code: z[x].innerHTML = z[x].innerHTML.split("[YOUTUBE]").join("<iframe width=560 height=410 src='").split("/watch?v=").join("/v/").split("[/YOUTUBE]").join("' frameborder=0 allowfullscreen></iframe>< br><a href="youtube video link">View on YouTube</a> ");
hello Devs, i have a website that has lots of videos on it, the other day i saw a mouse over that showed a snippet of the youtube video, it had microsoft across the front it's since been deleted so i cannot show you an example, does anyone know where i can obtain this script please?
|
|||||||