|
JavaScript - Audio With Controls
Heya peeps
So I'm in the process of building a website where audio can be purchased and downloaded. I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle. Is there a way of doing it? All I want is a basic play/pause/stop button. To control a piece of sound. Thanks Similar TutorialsHi, excuse I'm not a js coder..I need to control the end of a gallery made with mootools and noobslide (http://www.efectorelativo.net/laboratory/noobSlide/). I need the autoplay gallery to end in another way: Solution 1(difficult): After the last image, the gallery starts again from the first image without that "backward" effect. I'd like the first image to be placed after the last one, so the gallery loops without let the user know that it is starting again Solution 2 (easy, I suppose) : gallery stops at the last image Please HELP ME!! TY Hi guys, I am able to create some of the dynamic controls but having trouble to order them in one column.. i have this view : field1 field2 field3 what i want is : field1 field2 field3 below is my code : function AddLevel2() { //var mainContainer2 = document.getElementById('mainContainer2'); var newDiv = document.createElement('div') newDiv.style.width = "560px"; newDiv.style.backgroundColor= projbgGr; newDiv.style.position = "relative"; newDiv.style.left = "245px"; var BUDDL = document.createElement('select'); // size lenght of the DDL for both IE or Firefox BUDDL.setAttribute("style","width:100px"); //firefox BUDDL.setAttribute("width","100px"); BUDDL.style.width = "100px"; BUDDL.id = 'BU' + b ; BUDDL.setAttribute('name','BU' + b); BUDDL.style.position = "relative"; BUDDL.style.left = "5px"; BUDDL.onchange=show; // filling the DDL by ITEM array Elements var i=0; for (i=0;i<=4;i++) { objOption = document.createElement('option') objOption.text = "BU" + i; //objOption.value=ITEM1[i]; BUDDL.options.add(objOption); } var j =1; var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e"; //add Description Unit Description = document.createElement( 'INPUT' ); Description.id = 'D' + b ; Description.setAttribute('name','D' + b); Description.size=2; // size lenght of the Comment for both IE or Firefox Description.setAttribute("style","width:300px"); //firefox Description.setAttribute("width","300px"); Description.style.width = "300px"; Description.onblur = show; //Description.style.backgroundColor= bgc; //end Description //number of testers NumberTesters = document.createElement( 'INPUT' ); NumberTesters.id = 'T' + b; NumberTesters.setAttribute('name','T' + b ); NumberTesters.size=2; // size lenght of the Comment for both IE or Firefox NumberTesters.setAttribute("style","width:40px"); //firefox NumberTesters.setAttribute("width","40px"); NumberTesters.style.width = "40px"; NumberTesters.onblur=show; //NumberTesters.style.backgroundColor= bgc; //number of testers // Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.style.position = "relative"; newDelButton.style.left = "7px"; // Append new text input to the newDiv newDiv.appendChild(BUDDL); newDiv.appendChild(Description); newDiv.appendChild(NumberTesters); newDiv.appendChild(newDelButton); //newDiv.appendChild(newAddButton2); //Append newDiv input to the mainContainer div mainContainer.appendChild(newDiv); //Add a handler to button for deleting the newDiv from the mainContainer newAddButton.onclick = AddLevel22; //newAddButton.onclick = AddNewRecord; //newAddButton2.onclick = AddLevel3; newDelButton.onclick = function() { var answer = confirm ("You have to delete all UATs under this BU first\n \tIs this done ?\t") if (answer) {alert ("Now you can delete it"); mainContainer.removeChild(newDiv);} else alert ("Then please check all UATs under this BU first and delete them"); } b++; document.form1.NumberOfBU.value = parseInt(b-1); //alert(document.form1.NumberOfBU.value); //AddLevel3; for (UATCounter = 1 ; UATCounter<=limit; UATCounter++) { //var newDiv = document.createElement('div') // // newDiv.style.width = "250px"; // newDiv.style.backgroundColor= projbgVi; // newDiv.style.position = "relative"; // newDiv.style.left = "350px"; var bgc = "##C8BBD0" //mauve light ; //"##D4F1B9" green light; //"##b2d47e"; newMDate = document.createElement( 'INPUT' ); newMDate.id = 'M'+ (b-1) + '_' + UATCounter ; newMDate.setAttribute('name','M'+ (b-1) + '_' + UATCounter); newMDate.setAttribute('type', 'Date'); newMDate.size=7; newMDate.style.backgroundColor= bgc; //newMDate.onfocus=Calend; // function Calend () // { // fnInitCalendar(this, this.getAttribute('id'), 'style=calendar.css,close=true'); // } newMDate.onblur = show; //Frontline Hours FLHours = document.createElement( 'INPUT' ); FLHours.id = 'FL'+ (b-1) + '_' + UATCounter ; FLHours.setAttribute('name', 'FL'+ (b-1) + '_' + UATCounter); FLHours.size=2; // size lenght of the Comment for both IE or Firefox FLHours.setAttribute("style","width:40px"); //firefox FLHours.setAttribute("width","40px"); FLHours.style.width = "40px"; //NumberTesters.style.backgroundColor= bgc; //Frontline Hours MGRHours = document.createElement( 'INPUT' ); MGRHours.id = 'MG'+ (b-1) + '_' + UATCounter ; MGRHours.setAttribute('name', 'MG'+ (b-1) + '_' + UATCounter); MGRHours.size=2; // size lenght of the Comment for both IE or Firefox MGRHours.setAttribute("style","width:40px"); //firefox MGRHours.setAttribute("width","40px"); MGRHours.style.width = "40px"; //NumberTesters.style.backgroundColor= bgc; //Frontlne Hours //Create buttons for creating and removing inputs var newAddButton = document.createElement('input'); newAddButton.type = "button"; newAddButton.value = " + "; var newDelButton = document.createElement('input'); newDelButton.type = "button"; newDelButton.value = " - "; newDelButton.style.position = "relative"; newDelButton.style.left = "7px"; //newDiv.appendChild(ProjDDL3); newDiv.appendChild(newMDate); newDiv.appendChild(FLHours); newDiv.appendChild(MGRHours); mainContainer.appendChild(newDiv); } } Hello, I have a slide some on my page which contains some images. It scrolls through images fine but i would like to add some control buttons such as pause/play and scroll back Can anyone tell me how i could do this? i have inc my code cheers Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}
.boxed {
position:absolute;
left:25%;
border: 2px black;
border-style: plain;
width: 700px;
height: 800px;
}
.boxed1 {
position:absolute;
left:25%;
border: 1px blue;
border-style: dotted;
width: 700px;
height: 350px;
text-align:center;
float: left;
padding:2px;
background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
float:left;
}
.image2 {
border: 1px blue solid;
width: 200px;
height:100px;
float:right;
}
.image3 {
border: 1px blue solid;
width: 200px;
height:100px;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 3px;
left: -1000px;
border: 0px;
visibility: hidden;
color: blue;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>
<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat3.jpg" width="198px" height="98px" border="0" /><span><img src="sat3.jpg" /><br />Navigon 8450 Live</span></a>
</div>
<br>
<br>
</br>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="iphone.jpg" width="198px" height="98px" border="0" /><span><img src="iphone.jpg" /><br />iPhone 4</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="bbt.jpg" width="198px" height="98px" border="0" /><span><img src="bbt.jpg" /><br />Blackberry torch</span></a>
</div>
<div class="image2">
<a class="thumbnail" href="#thumb"><img src="gphone.jpg" width="198px" height="98px" border="0" /><span><img src="gphone.jpg" /><br />google HTC phone</span></a>
</div>
<br>
<br>
</br>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="cod.jpg" width="198px" height="98px" border="0" /><span><img src="cod.jpg" /><br />Call of duty: Black ops</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="fifa.jpg" width="198px" height="98px" border="0" /><span><img src="fifa.jpg" /><br />Fifa 2011</span></a>
</div>
<div class="image3">
<a class="thumbnail" href="#thumb"><img src="f1.jpg" width="198px" height="98px" border="0" /><span><img src="f1.jpg" /><br />Formula 1 2010</span></a>
</div>
<br>
<br>
</br>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>
I am brand new to Javascript, have been studying on Lynda.com for almost a week trying to get the hang. I found a cool scrolling effect with controls here at the very bottom of the page, and have built a page just trying to duplicate the html and js below. Unfortunately, it doesn't work. The CSS seems to be there, however no scrolling, any help would be greatly appreciated. PHP Code: <title>Untitled Document</title> <style type="text/css"> #footersponsors ul { list-style-type:none; } #footersponsors { float:left; padding-top:5px; position:relative; width:980px; } #footersponsors #buttons { border:1px solid #777777; margin-bottom:5px; width:955px; } #footersponsors #buttons a { color:#6699CC; margin:10px; } #footersponsors .prev { float:left; } #footersponsors .next { float:right; } #footersponsors .prev img { border:0 none; padding-top:30px; text-decoration:none; } #footersponsors .next img { border:0 none; padding-top:30px; text-decoration:none; } #footersponsorsitems { float:left; margin-left:9px; overflow:hidden; width:895px; } #footersponsorsitems ul { padding-left:2px; width:3900px; } #footersponsorsitems li { float:left; height:90px; line-height:90px; margin:0 2px; width:179px; } </style> </head> <script type="text/javascript" language="javascript"> <!-- jQuery.easing.easeOutQuart = function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }; jQuery().ready(function() { var intval = 2600;//how often to autoscroll (in milliseconds) - This is set with a var to enable trigger functions below jQuery('#footersponsorsitems').serialScroll( { items:'li', prev:'#footersponsors a.prev', next:'#footersponsors a.next', start:0, duration:700, force:true, stop:true, lock:false, interval:intval, //autoscroll set here cycle:true, //pull back once you reach the end easing:'easeOutQuart', //use this easing equation for a funny effect jump: false, //click on the images to scroll to them exclude: 4 //stop scrolling when there are 4 items left as not to pull the others off the screen }); $('#footersponsorsitems').hover(function(){ $(this).trigger('stop'); },function(){ $(this).trigger('start'); }); $('#footersponsorsitems li').hover( function(){ $(this) .stop() .fadeTo(250, 1.0) .siblings() .stop() .fadeTo(500, 0.15); }, function(){ $('#footersponsorsitems li') .stop() .fadeTo(500, 1.0); }); }); // --> </script> <div id="footersponsors"> <input type="hidden" name="ctl26$hfCurrentPage" id="ctl26_hfCurrentPage" value="0" /> <a class="prev" href="#"><img src="/images/buttons/sponsor_select_left_off.gif" alt="<"></a> <div id="footersponsorsitems"> <ul id="ctl26_ulFooterSponsors" style="width:13725px;"> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> <li><a href="http://www.nhra.com/points/kn-horsepower.aspx" title="" target="_blank"><img src="/assets/footersponsor/KN-HorsePowerChallenge_4c1.gif" alt="" /></a></li> <li><a href="http://www.nhra.com/streetlegal/default.aspx" title="Street Legal Drags" target="_blank"><img src="/assets/footersponsor/NHRA_StreetLegal.gif" alt="Street Legal Drags" /></a></li> <li><a href="http://www.promodchallenge.com/" title="" target="_blank"><img src="/assets/footersponsor/promod.gif" alt="" /></a></li> <li><a href="http://www.nhra.net/yes/" title="Youth and Education Services" target="_blank"><img src="/assets/footersponsor/YESarmy_20th.gif" alt="Youth and Education Services" /></a></li> <li><a href="http://www.coca-cola.com/" title="Coke" target="_blank"><img src="/assets/footersponsor/Coke-official1.gif" alt="Coke" /></a></li> <li><a href="http://www.dasani.com/" title="Dasani" target="_blank"><img src="/assets/footersponsor/Dasani-official.gif" alt="Dasani" /></a></li> <li><a href="http://www.fullthrottleenergy.com/" title="Full Throttle" target="_blank"><img src="/assets/footersponsor/Full-Throttle-Official.gif" alt="Full Throttle" /></a></li> <li><a href="http://www.powerade.com/" title="POWERade" target="_blank"><img src="/assets/footersponsor/Powerade-official.gif" alt="POWERade" /></a></li> <li><a href="http://www.budweiser.com/" title="Budweiser" target="_blank"><img src="/assets/footersponsor/Bud-official.gif" alt="Budweiser" /></a></li> <li><a href="http://www.cat.com/" title="" target="_blank"><img src="/assets/footersponsor/Cat_official.gif" alt="" /></a></li> <li><a href="http://www.fordracing.com/" title="" target="_blank"><img src="/assets/footersponsor/ford1.gif" alt="" /></a></li> <li><a href="http://www.fram.com/" title="Fram" target="_blank"><img src="/assets/footersponsor/FRAM--Official.gif" alt="Fram" /></a></li> <li><a href="http://www.goodyeartires.com/" title="Goodyear" target="_blank"><img src="/assets/footersponsor/Goodyear_Official_4c.gif" alt="Goodyear" /></a></li> <li><a href="http://www.harley-davidson.com/" title="Harley-Davidson" target="_blank"><img src="/assets/footersponsor/HarleyOfficial-4c.gif" alt="Harley-Davidson" /></a></li> <li><a href="http://www.hurstjaws.com/" title="Hurst" target="_blank"><img src="/assets/footersponsor/HURST-tool-official.gif" alt="Hurst" /></a></li> <li><a href="http://www.lucasoil.com/" title="Lucas Oil" target="_blank"><img src="/assets/footersponsor/Lucas-official.gif" alt="Lucas Oil" /></a></li> <li><a href="http://www.maingateinc.com/" title="Main Gate" target="_blank"><img src="/assets/footersponsor/Main-Gate-Logo-NHRA.gif" alt="Main Gate" /></a></li> <li><a href="http://www.motel6.com" title="" target="_blank"><img src="/assets/footersponsor/Motel-6logo-Official1.gif" alt="" /></a></li> <li><a href="http://www.okuma.com/" title="Okuma" target="_blank"><img src="/assets/footersponsor/OKUMA_rev.gif" alt="Okuma" /></a></li> <li><a href="http://www.prestone.com/" title="Prestone" target="_blank"><img src="/assets/footersponsor/Prestone-official.gif" alt="Prestone" /></a></li> <li><a href="http://www.racingelectronics.com/" title="Racing Electronics" target="_blank"><img src="/assets/footersponsor/RE-official.gif" alt="Racing Electronics" /></a></li> <li><a href="http://www.siouxcitykenworth.com/" title="Sioux City Truck and Trailer" target="_blank"><img src="/assets/footersponsor/Sioux-City-TT.gif" alt="Sioux City Truck and Trailer" /></a></li> <li><a href="http://www.summitracing.com/" title="Summit" target="_blank"><img src="/assets/footersponsor/Summit_Official_4C.gif" alt="Summit" /></a></li> <li><a href="http://www.vpracingfuels.com/" title="VP Racing Fuels" target="_blank"><img src="/assets/footersponsor/VPofficial.gif" alt="VP Racing Fuels" /></a></li> <li><a href="http://www.wyotech.edu/" title="WyoTech" target="_blank"><img src="/assets/footersponsor/WyoTechOfficial_large_4C.gif" alt="WyoTech" /></a></li> </ul> </div> <a class="next" href="#"><img src="/images/buttons/sponsor_select_right_off.gif" alt=" />"></a> </div> </div> </body> </html> Hello, Is there any way I can prevent IE from displaying the "active X controls and script prevention message" when I load my web page into the browser. Firefox, Safari and Chrome, allow my scripts to run without displaying the message when the page is loaded into the respective browsers. Any tips would be really useful. Many thanks Nonye Hello all, I am currently working on a site for a friend and have reached a navigational problem I cannot figure out how to achieve... He has a list of products that link to relevant individual pages which also have next and previous buttons to browse all the product pages on the site (only 10 so no big deal). However, he wants to add additional lists that recommend products by category preference? So for example; 4 products may appeal to a particular category, but when you click the link to view one of the products shown the next and previous buttons scroll through the entire products pages! and not only the ones recommended?? IS it possible using Javascript to define which pages are linked to as next previous without having to create lots more html copies of content pages? I have a basic knowledge of Javascript but cannot find a workable answer or example using google. Any help would be much appreciated. Thanks in advance... Hey everyone, I've looked around quite a bit and can't seem to find anything but I was wondering if there is some open source software offering a text editor/input field similar to the one used on this forum when submitting a comment or thread? Where you can click a bold button or Italic button or URL button to structure it? Thanks Josh Hi, Im having a weird issue... I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable... And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float [it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...] Code: <script language="javascript" type="text/javascript">
var floating_header = function() {
this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];
this.getXY = function(o) {
var y = 0;
var x = 0;
while (o != null) {
y += o.offsetTop;
x += o.offsetLeft;
o = o.offsetParent;
}
return { "x": x, "y": y };
}
this.setheader = function() {
if (window.header == undefined) {
floating_header();
}
var screenpos = this.scrollTop;
var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
if (screenpos > window.theady - 100 && screenpos < theady_max) {
window.header.style.position = 'absolute';
window.header.style.top = this.offsetTop;
window.header.style.display = 'block';
window.headerOffsetTop = this.offsetTop;
}
else {
if (screenpos != undefined && window.header != undefined) {
window.header.style.position = '';
window.header.style.top = '';
window.headerOffsetTop = undefined;
window.header = undefined;
}
else {
if (window.headerOffsetTop) {
window.header.style.position = 'absolute';
window.header.style.top = window.headerOffsetTop;
window.header.style.display = 'block';
}
}
}
}
document.getElementById("divcn").onscroll = this.setheader;
this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
};
floating_header();
</script>
Hello, I'm trying to make a slide show for a website that has simple controls on it. I've attached this example so you can see what i mean.... http://www.bigw.com.au/bigw/home.jsp As you can see they use 3 images, and they have controls to go between images easily. Can someone please help me with this code urgently?? Thanks, S. I have just about every thing all set up on my blog now just the way I like it but a few bits of code are not working exactly like I'd want them to. I have a blog: http://thezombiesurvivalist.tumblr.com/ which is using this js: http://static.tumblr.com/ur6r7hb/FoY...ider-jquery.js to allow the mousewheel to scroll the screen right and left rather than up and down. I think the mouse wheel code would all just be in this part: Code: (function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
$.event.special.mousewheel = {
setup: function() {
if (this.addEventListener){for(var i=types.length;i;){this.addEventListener(types[--i], handler, false );}}
else {this.onmousewheel = handler;}
},
teardown: function() {
if (this.removeEventListener )
for ( var i=types.length; i; ){{this.removeEventListener(types[--i],handler,false);}}
else{this.onmousewheel = null;}
}
};
$.fn.extend({
mousewheel: function(fn) {return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");},
unmousewheel: function(fn) {return this.unbind("mousewheel", fn);}
});
function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the arguments
args.unshift(event, delta);
return $.event.handle.apply(this, args);
}
})(jQuery);
I would like the js to force vertical scrolling to be default first, then if then is no vertical scrolling or if it runs out then the horizontal scrolling takes over. Currently it seems to occur in reverse order. For example if you go to one of the posts individual pages that are long: http://thezombiesurvivalist.tumblr.c...esh-in-n-y-l-a then it will scroll left and right before scrolling up and down. I'd rather it be the other way around. Is this code able to be changed to accommodate my desires? I've got this JavaScript code that I'm using to play audio on my site made specifically for iPhones, iPods, and whatnot. However, my only problem is, that I can only pick one audio file to play from, no matter what. Can someone tell me what I'm doing wrong? I really need this specific code cause it allows me to play audio without going into the Media Player on the iPhone and iPod. Here's what I have in the head section: Code: <script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag').play();
}
</script>
And the body: Code: <div id="audio">
<audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio>
</div>
And now to actually play the audio: Code: <a href="javascript:play_single_sound();">Play audio</a> I can play audio fine, but I'm only limited to one audio file per page. Is there anyway around this?? Can anyone please help integrating these two javascripts? http://milesich.com/ and http://javascript.internet.com/forms...-controls.html I want to allow visitors too choose as many dates as they want but when I try to integrate these two script timepicker stops working... Can anyone please help? Thanks in advance Hi, I worked on this website : http://www.kesslercareers.com/index.html and cannot find out why it does not work in IE while it works in other browsers. The small video does not play while the sound does. As far as I can see it works fine in FF and Chrome. Anybody any idea? Thanks Purmar Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout? http://www.javascriptkit.com/script/....shtml#current So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video. What could I possibly be doing wrong? Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4 JS: http://xonicgames.com/video/?i=6 Thanks Hey guys, i havent got any code and im not asking for any! just wondering if anyone knows some good tutorials on vectors and how i can use them to store audio files! thanks in advance!
hey there, i am making a slideshow site, a user can add effects to pictures using a drop down menu and choose a sound to accompany picture when the slideshow runs. i have hit a snag, my function is taking in the choice from the user for both sounds, but playing them over one another, i think its something silly im missing out. here is the function where i think im going wrong: Code: function EvalSound()
{
var sound1 = document.getElementById("sound1");
var choice = sound1.options[sound1.selectedIndex].value;
var sound2 = document.getElementById("sound2");
var choice2 = sound2.options[sound2.selectedIndex].value;
var pic1 = document.getElementById("first_pic");
var pic2 = document.getElementById("second_pic");
soundManager.play(choice);
soundManager.play(choice2);
}
Thanks for any help Hi everyone, I'm an animator just beginning to learn the unity game engine. In other words, I know almost no JavaScript and would like to learn the basics in parallel with working on my project. I would ultimately like to create a scene in which I can use the spectrum of a sound track to drive certain properties of objects in the scene. I started off by following this spectrumAnalyser tutorial which I then expanded for 21 cubes. This was working pretty well, but the higher frequencies looked like they needed much more of the spectrum than the lower. I asked a coder colleague (more proficient in c# than js) for his help in expanding the code to analyse the full spectrum. He showed me a really nice way to assign various parts of the spectrum to each cube in the scene using a fibonacci sequence to gradualy assign more and more of the spectrum to the cubes that were to be driven by those frequencies. So as you can see I commented out some chunks of now redundant code (its a bit of an unfinished mess but I've left them in so you can kind of see what i was trying to do). However this new technique now doesn't actually drive the cubes anymore and my friend doesn't understand why. Maybe somthing to do with the AudioListener.GetSpectrumData? I was wondering if any of you guys could point me in the right direction. This is what we have now: ----------------------------- #pragma strict function Start () { } function Update () { //var Audio : AudioListener; //var spectrum : float [] = Audio.GetOutputData; //AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming); var spectrum : float[] = AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming); var cubeList : float []; cubeList[0] = spectrum[1]; cubeList[1] = spectrum[2]; cubeList[2] = spectrum[3]; var index : int = 3; var fibonacci : int = 1; var fibonacciIncrease : int = 1; for(var i : int = 3; i < 21;++i) { cubeList[i] = 0; var maxIndex : int = index + fibonacci; while (index < maxIndex) { cubeList[i] = cubeList[i] + spectrum[index]; ++index; } fibonacci = fibonacci + fibonacciIncrease; fibonacciIncrease++; } /* var c6 : float = spectrum[7] + spectrum[8] + spectrum[9] + spectrum[10]; var c7 : float = spectrum[11] + spectrum[12] + spectrum[13] + spectrum[14] + spectrum[15] + spectrum[16] + spectrum[17]; var c8 : float = spectrum[18] + spectrum[19] + spectrum[20] + spectrum[21] + spectrum[22] + spectrum[23] + spectrum[24] + spectrum[25] + spectrum[26] + spectrum[27] + spectrum[28]; var c9 : float = spectrum[29] + spectrum[30] + spectrum[31] + spectrum[32] + spectrum[33] + spectrum[34] + spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40] + spectrum[41] + spectrum[42] + spectrum[43] + spectrum[44]; var c10 : float = spectrum[66] + spectrum[67] + spectrum[68] + spectrum[69] + spectrum[70] + spectrum[71] + spectrum[72] + spectrum[73] + spectrum[74] + spectrum[75] + spectrum[76] + spectrum[77] + spectrum[78] + spectrum[79] + spectrum[80] + spectrum[81] + spectrum[82] + spectrum[83] + spectrum[84] + spectrum[85] + spectrum[86] + spectrum[87]; var c11 : float = spectrum[18] + spectrum[19]; var c12 : float = spectrum[20] + spectrum[21] + spectrum[22]; var c13 : float = spectrum[23] + spectrum[24] + spectrum[25]; var c14 : float = spectrum[26] + spectrum[27] + spectrum[28]; var c15 : float = spectrum[29] + spectrum[30] + spectrum[31]; var c16 : float = spectrum[32] + spectrum[33] + spectrum[34]; var c17 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c18 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c19 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c20 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c21 : float = spectrum[1000] + spectrum[1001] + spectrum[1002] + spectrum[1003] + spectrum[1004] + spectrum[1005] + spectrum[1006] + spectrum[1007] + spectrum[1008] + spectrum[1009] + spectrum[1010] + spectrum[1011];*/ var cubes : GameObject[] = GameObject.FindGameObjectsWithTag("CubeTag"); for(var k = 0; k < cubes.length; k++) { switch (cubes[k].name) { case 'c1': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c2': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c3': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c4': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c5': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c6': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c7': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c8': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c9': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c10': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c11': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c12': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c13': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c14': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c15': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c16': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c17': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c18': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c19': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c20': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c21': cubes[k].transform.localScale.y = cubeList[k]*10; break; } } } ------------------------------ Many thanks for any help you can give, i'm off to learn some basics! Hi there, I am just writing to see if I can receive some help regarding an issue I'm having? I have written this application: http://bit.ly/dOHwhp - It allows the user to make melodies and change the speed of playback. It uses HTML5 and JavaScript. What I'd really like to do is have the ability for the user to save the melody in some respect. At the moment, I am using a parse harsh method. I thought potentially the user could save the #... and then load it from the URL. I have a method of loading it from the URL but no current way of 'saving' it and loading the saved version, as such. I have a feeling it would be far more advanced but, I would love to have a download feature like they have on this site: http://patternsketch.com/ Could anyone help out? This is my JavaScript file as it stands (although all files can be discovered in the source code of the page) Code: // ===== VARIABLES =====
var isPlaying = false;
var curNote = 0;
var curTempo = 100;
// ===== FUNCTIONS =====
// playTune: Play the next note!
function playTune() {
if (isPlaying !== false) {
var nextNote = 60000 / curTempo / 4;
// Turn off all lights on the tracker's row
$("#tracker li.track").removeClass("active");
// Light up the tracker on the current track
$("#tracker li.track.col_" + curNote).addClass("active");
// Find each active note, play it
var tmpAudio;
$(".playBar[id^=control] li.track.active.col_" + curNote).each(function(i){
tmpAudio = document.getElementById($(this).data('sound_id'));
if (!tmpAudio.paused) {
// Pause and reset it
tmpAudio.pause();
tmpAudio.currentTime = 0.0;
}
tmpAudio.play();
});
// Move the track forward
curNote = (curNote + 1) % 16;
} // if (isPlaying)
} // playTune
// Make a new hash
function buildHash() {
// Start it
var newhash = '';
// For each track, check and add in a 0/1 as appropriate
$(".playBar[id^=control] li.track").each(function(i){
newhash += $(this).is('.active') ? '1' : '0';
});
// Separate it
newhash += '|';
// Now, toss in the note
newhash += $('#temposlider').slider('value');
// Check and see if we really need to update
if (location.hash != '#' + newhash) location.hash = newhash;
} // buildHash
// Read in our hash
function parseHash() {
if (location.hash.length > 0) {
// Split it up, work it out, removing the actual hashmark
var pieces = location.hash.substring(1).split('|');
// Set the lights
var lights = pieces[0];
$(".playBar[id^=control] li.track").each(function(i){
// Make sure we haven't exceeded
if (i >= lights.length) return false;
// Check our location, turn on class if need be
if (lights.charAt(i) == '1') {
$(this).addClass('active');
}
});
// Set the tempo
if (typeof pieces[1] !== 'undefined') {
$('#temposlider').slider('value', parseInt(pieces[1]));
$('#tempovalue').innerHTML = pieces[1];
curTempo = parseInt(pieces[1]);
}
}
} // parseHash
// Clear it!
function clearAll() {
$(".playBar[id^=control] li.active").removeClass('active');
}
// Run on DOM ready
$(document).ready(function(){
// Process each of the audio items, creating a playlist sort of setup
$("audio").each(function(i){
// Make a self reference for ease of use in click events
var self = this;
// Make a sub-list for our control
var $ul = $('<ul id="control_' + this.id + '" class="playBar">');
$ul.append('<li class="header">' + this.title + '</li>');
// Add 16 list items!
for (j = 0; j < 16; j++) {
var $li =
$('<li class="track col_'+j+'">'+self.id+'</li>')
.click(function(){
$(this).toggleClass('active');
buildHash();
})
.data('sound_id', self.id);
$ul.append($li);
} // for (i = 0; i < 16; i++)
// Append it up
$('<li>').append($ul).appendTo('#lights');
});
// Bind up a click for our button
$("#soundstart").click(function(){
if (isPlaying === false) {
// Start the playing!
curNote = 0;
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
// Change our display
this.innerHTML = "Stop";
} else {
clearInterval(isPlaying);
isPlaying = false;
$("#tracker li.track").removeClass("active");
$("audio").each(function(){
this.pause();
this.currentTime = 0.0;
});
this.innerHTML = "Play";
}
});
$('#clearall').click(clearAll);
$('#reload').click(parseHash);
// ===== Misc =====
// Build or read the hash
if (location.hash == '') {
// I was building this at load - but now, no, just to be safe
//buildHash();
} else {
parseHash();
}
// Show our value, now that we've built off of the hash
$('#tempovalue').html(curTempo);
// Make our tempo slider
$('#temposlider').slider({
'value': curTempo,
'min': 30,
'max': 170,
'step': 2,
'slide': function(e, ui) {
curTempo = ui.value;
$('#tempovalue').html(curTempo);
if (isPlaying !== false) {
clearInterval(isPlaying);
isPlaying = setInterval(playTune, 60000 / curTempo / 4);
}
},
'stop': function(e, ui) {
buildHash();
}
});
});
|
|||||||