JavaScript - Stop Video Through Javascript
I am using joomla, and have a tabbed menu at the top, which has different articles embedded within. I have embedded a flash video inside each article. The problem is that if i play a video and then switch to the other tab (article) without pausing the video, the video keeps on playing. And if i try to play the video in the other article, then both videos start playing.
I want to stop the first video from playing as soon as I switch to the new tab. There are a lot of different files which are included in the page, so If I know where to place a particular code within the source of the final rendered webpage, I will be able to place it at the right point in a particular file. thanks the website link is: http://tinyurl.com/ycg4tcm Similar Tutorialsis there a way to stop a flash video with jQuery?? I'm using a html5 video with flash fallback.. i'm using the video on a modal pop up.. when i try to hide the video, the flash video doesn't stop... so before i hide the mask, i must stop or pause the video, then hide.. i tried various ways, but i can't seem to make them work.. Code: <video id="480p" width="848" height="480" controls="controls" poster="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/poster.jpg"> <source src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test-H264_480p.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test.ogg" type='video/ogg; codecs="theora, vorbis"' /> <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. --> <object id="480pfallback" class="480p" width="848" height="480" type="application/x-shockwave-flash" data="flowplayer/flowplayer-3.2.7.swf"> <param name="movie" value="flowplayer/flowplayer-3.2.7.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"playlist":["New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/poster.jpg", {"url": "New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_Mcray_Test-H264_480p.mp4","autoPlay":false,"autoBuffering":false}]}' /> <!-- Image Fallback. Typically the same as the poster image. --> <img src="New_Test_Encodes_7-31-11/Test_Encode_Desktop_7-31-11/Marie_McCray_A_O_poster.jpg" width="848" height="480" alt="Poster Image" title="No video playback capabilities." /> </object> </video><!--480p--> Hi Guys, Quick question, is there a way to stop a JavaScript from validating after a certain point of the code. I've been "googling" like crazy and cant find a solution. I had to add a Checkbox validation last second and there was existing validation and I'm not good enough to alter all of it to reflect the checkbox part so what I did was I checked to see if at least one of the checkboxes was selected, if yes, do nothing and finish the rest of the validation. If no, prompt them with an error. The problem is after it prompts them for an error, it continues to run the rest of the validation and at the end it allows the end user to print. I cannot allow the end user to print until everything is filled in. Here is my code: Code: function validateFields() { var fieldsToVerify = [ ["PrincipalInvestigator"], ["ContactEmailAddress"], ["RFAward"], ["Sponsor"], ["AwardTitle"], ["BudgetStartDate"], ["BudgetEndDate"], ["SectionII"], ["ProjectRole"], ["EmployeeName"], ["DatesofAppointment"], ["EffortonProject"], ["Date"], ["PrintName"], ["Date2"], ["PrintName2"], ]; var emptyFields = []; var notFullFields = []; for (var i=0; i<fieldsToVerify.length; i++) { var f = this.getField(fieldsToVerify[i][0]); if (f==null) { console.println(fieldsToVerify[i][0] + " not found."); continue; } if (f.valueAsString=="") { emptyFields.push(f.name); } else if (fieldsToVerify[i].length>1 && f.valueAsString.length<fieldsToVerify[i][1]) { notFullFields.push([f.name,fieldsToVerify[i][1]]); } } for (var i in nonRequiredFieldsToVerify) { var f = this.getField(nonRequiredFieldsToVerify[i]); if (f==null) { console.println(nonRequiredFieldsToVerify[i] + " not found."); continue; } if (f.valueAsString!="" && f.valueAsString.length<f.charLimit) { notFullFields.push([f.name,f.charLimit]); } } if (this.getField("CheckBox1").value=="Yes" || this.getField("CheckBox2").value=="Yes" || this.getField("CheckBox3").value=="Yes" || this.getField("CheckBox4").value=="Yes" || this.getField("CheckBox5").value=="Yes" || this.getField("CheckBox6").value=="Yes" || this.getField("CheckBox7").value=="Yes") {} else app.alert("Select a Checkbox in Section I before printing") if (emptyFields.length==0 && notFullFields.length==0) { this.print(); } else { var msg = ""; if (emptyFields.length>0) { msg += "The following fields must be filled-in:\n"; for (var i in emptyFields) msg += emptyFields[i]+"\n"; } if (notFullFields.length>0) { if (msg!="") msg+="\n\n"; msg += "The following fields are not filled-in completely:\n"; for (var i in notFullFields) msg += notFullFields[i][0] + " (required length: " + notFullFields[i][1] + ")\n"; } app.alert(msg,""); } } I am very new to Javascript - as in this is the first day I'm using it. I am using a code I got offline to fade three pictures together, but when it gets to the last image, it loops back to the first. How do I code it so that when it gets to the last image, it stops? Here is the code - sorry if its messy. Javascript: /***** Image Cross Fade Redux Version 1.0 Last revision: 02.15.2006 steve@slayeroffice.com Please leave this notice intact. Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html *****/ window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so _init); var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; function so_init() { if(!d.getElementById || !d.createElement)return; // DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT! // http://slayeroffice.com/code/imageCrossFade/xfade2.css css = d.createElement("link"); css.setAttribute("href","xfade2.css"); css.setAttribute("rel","stylesheet"); css.setAttribute("type","text/css"); d.getElementsByTagName("head")[0].appendChild(css); imgs = d.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout(so_xfade,3000); } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1]?current+1:0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[nIndex].style.display = "block"; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,3000); } else { setTimeout(so_xfade,50); } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; } } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <div class="container"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="slideshow.js"></script> <title>Diamonds in the Rough</title> </head> <body> <div id="container"> <img src="images/top2.jpg" usemap="#Map2"/> <map name="Map2" id="Map2"> <area shape="rect" coords="69,56,145,84" href="invite.html" rel="nofollow" target="_self" alt="The Gala" /> <area shape="rect" coords="171,53,356,87" href="diamonds.html" rel="nofollow" target="_self" alt="Diamonds in the Rough" /> <area shape="rect" coords="377,52,498,87" href="mariama.html" rel="nofollow" target="_self" alt="Speaker Mariama Elliot" /> <area shape="rect" coords="525,52,636,86" href="contact.html" rel="nofollow" target="_self" alt="Get Involved" /> </map> <div id="imageContainer"> <img src="images/index.jpg"/> <img src="images/index2.jpg"/> <img src="images/invite.jpg"/> </div> <div id="container2"> <img src="images/BOTTOM.jpg"/> </div> </body> </html> Thanks for your help! Hi all. I have this simple javascript that initiates a flash player. Code: <script type="text/javascript"> function add_content(filedesc,filepath,whatarget) { var output = "" + filedesc + "</b><br />"; output += "<object type='application/x-shockwave-flash' data='mp3player.swf'>"; output += "<param name='movie' value='mp3player.swf'>"; output += "<param name='wmode' value='transparent'>"; output += "<param name='FlashVars' value='mp3=" + filepath + ">"; output += "</object></div>"; output += "" + whatarget + ""; document.getElementById("" + whatarget + "").innerHTML = output; } </script> and this takes care of the onclick event: Code: <a href="javascript:void;" onclick="javascript:add_content('Hello1','../m_music/omd.mp3','target1');">Omd</a><div id='target1'></div> <a href="javascript:void;" onclick="javascript:add_content('Hello2','../m_music/blondie.mp3','target2');">blondie</a> <div id='target2'></div> page and vars are going to be dynamic. My question is: if I press 'target1' it plays. When I press 'target2' second player plays in its div layer. How can I start one player while stopping another (I am guessing 'target1' must be hidden). I am going to have many mp3 files and I want each player to be in its rightful place. I've looked for functions, but I am not that experienced with JV syntax. Thank you. Thanks to Old Pedant , in this forum, I am using this basic code for a slideshow he posted: Code: var slides = [ [ "abc.jpg", 3000 ], [ "xyz.png", 5000 ], [ "foo.gif", 1500 ] ]; var curSlide = 0; function nextSlide( ) { document.getElementById("thePicture").src = slides[curSlide][0].src; setTimeout( nextSlide, slides[curSlide][1] ); curSlide = ( curSlide + 1 ) % slides.length; } function setUp( ) { for ( var s = 0; s < slides.length; ++s ) { var image = new Image(); image.src = slides[s]; slides[s] = image; } nextSlide( ); } window.onload = setUp; which works just fine. But I can't find a way for it to play one round of the slides then stop. Could someone please help me with the right bit of code to stop the show? I know the code is a bit basic (no fades etc) but I have been unable to find a similar slideshow product that gives variable time delays for each slide. I've googled endlessly but nothing could i find.... TIA Richard ========= Hello and thank you for you help, we have a problem in our currently built website, in chrome+firefox the website works great but in IE 7+8+9 the javascript stops working after few seconds or after several commands a user do in the website. the url is : http://www.triver.co.il if any one know what can be the issue it will be great thank you ! Code: top.window.moveTo(0, 0); if (document.all) { top.window.resizeTo(screen.availWidth, screen.availHeight); } else if (document.layers || document.getElementById) { if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) { top.window.outerHeight = screen.availHeight; top.window.outerWidth = screen.availWidth; } } function gcd(a, b) { return (b === 0) ? a : gcd(b, a % b); } var i = 0; var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (; i < data.length; i + 1) { var dataString = data[i].string, dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) !== -1) { return data[i].identity; } } else if (dataProp) { return data[i].identity; } } return data[i].identity; }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index === -1) { return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); } }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] }; var version; if (dataString.indexOf(dataBrowser.versionSearch) !== -1) { version = parseFloat(string.indexOf(dataBrowser.versionSearch), 1); } else { version = parseFloat(string.indexOf(dataBrowser.identity), 1); } BrowserDetect.init(); if (dataBrowser.identity === "Chrome") { if (version >= 8) { document.location.replace("main/index.htm"); } else if (version >= 3) { document.location.replace("meh/index.htm"); } else { document.location.replace("http://www.browserchoice.eu/"); } } else if (dataBrowser.identity === "Safari") { if (version >= 5) { document.location.replace("main/index.htm"); } else if (version >= 3) { document.location.replace("meh/index.htm"); } else { document.location.replace("http://www.browserchoice.eu/"); } } else if (dataBrowser.identity === "Opera") { document.location.replace("http://www.google.com/"); } else if (dataBrowser.identity === "Firefox") { document.location.replace("http://www.google.com/"); } else if (dataBrowser.identity === "Mozilla") { document.location.replace("http://www.yahoo.com/"); } else if (dataBrowser.identity === "Explorer") { if (version >= 8) { document.location.replace("meh/index.htm"); } else { document.location.replace("http://www.browserchoice.eu/"); } } For some reason, this script was working before I put in the if statements, but after the if statements were placed in, it stopped auto maximizing as well, and no if statements were added around this. Does anyone know what the problem is? (It's supposed to redirect by browser to one of 3 sites based on how good they are) I am very new to javascript and cannot find any info anywhere regarding the following problem: On my website I have around 100 pages containing an action form. Occasionally it is necessary to cancel the action throughout the 100 pages which is very time-consuming. Then the action has to be reinstated once again for all the 100+ pages. I thought the solution would be to use javascript to change the action from a .js file which would mean only one page, the .js file, would require alteration: The action that appears on all 100+ pages several times that I am trying to change or stop happening by overwriting the "form action": <form action="http://www.changenamecart.com/" method="post"> <input type="hidden" name="userid" value="1234567"> <input type="hidden" name="return" value="http://www.thehomepage.co.uk/index.htm"> <input type="image" src="http://www.changenamecart.com/images/pic.gif"> </form> My efforts to date a The change .js file: function change() { var myChange = form action; if(myChange == form action){ document.write("form xction"); } } The html file in the header: <script src="change.js" type="text/javascript"></script> I am afraid that my knowledge of programming is very small and I would welcome any help to solve this problem. Is there a way to stop a form submit after hitting submit? Refresh wouldn't realy be an option. Is abort() what I'm looking for?
I have created a small file where I check if the passwords entered in the code match or not, if they do not match, the button that links to the next webpage should not work(allow them to go to the next wepage). ive tried various websites to help me try and solve this but I just dodont understand what they are doing. I'm very new to programming btw here is some example code: Code: !doctypeHTML <html> <script> //lets just pretend that ive already done all the .getelement by id stuff to get the code things //suppose the person did not write anything in the form, an error will get pushed(alerted basically) if(!form['password'].value) error.push('Missing Password'); <form> <label>Password<br><input type="password" name="password"></label> <label>Confirm Password<br><input type="password" name="confirm"</label> </form> </html> now how would I make the submit button not submit if there are errors? please be as simple as possible, I am new to this! JavaScript Code: window.addEvent('domready',function(){ //SAMPLE 8 var handles8_more = $$('#handles8_more span'); var nS8 = new noobSlide({ box: $('box8'), interval: 5000, autoPlay: true, items: $$('#box8 h3'), size: 900, handles: $$('#handles8 span'), handle_event: 'mouseenter', addButtons: { previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') }, onWalk: function(currentItem,currentHandle){ //style for handles $$(this.handles,handles8_more).removeClass('active'); $$(currentHandle,handles8_more[this.currentIndex]).addClass('active'); //text for "previous" and "next" default buttons $('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML); $('next8').set('html',this.items[this.nextIndex].innerHTML+' >>'); } }); //walk to item 0 witouth fx nS8.walk(0,false,true); }); html Code: <div class="slider sample8"> <p class="buttons" id="handles8"> <span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span> </p> <div class="mask1"> <div id="box8"> <div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();"> </div> </div> </div> <p class="buttons"> <span id="prev8"><< Previous</span> | <span id="next8">Next >></span> </p> <p class="buttons"> <span id="playback8">< Playback</span> <span id="stop8">Stop</span> <span id="play8">Play ></span> </p> </div> All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again. Hey all. I want to figure out how to make a new video pop up like this site I'm about to show you. Go to this link, then click on "Watch HD Video". You see how a new video pops up in the same window? Basically I want to do EXACTLY that. I've taken a good hour trying to figure it out for myself; viewing their source codes, looking at their java scripts, but I just couldn't get it to work. If any of you know how to achieve the exact same thing on that site, please share your knowledge with me! I'm using some free javascript for my website and I'm trying to edit it slightly to behave the way I want on my site. Right now it works fine apart from one thing... It remembers the last active div that was open... then when you visit the site again or refresh the page... that div stays open and doesn't close when toggling the other animated divs like it is supposed to. How would I remove the last active div function or get it to close again when toggling other animated divs.. Thanks so much if you can help Here is the site: www.gjoob.terryarchonship.com here is where the last active div java is Code: showhide:function(divid, action){ var $divref=this.divholders[divid].$divref //reference collapsible DIV if (this.divholders[divid] && $divref.length==1){ //if DIV exists var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any) if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first this.slideengine(divid, 'show') targetgroup.lastactivedivid=divid //remember last active DIV } else{ this.slideengine(divid, action) } } } here is the entire javascript: Code: var animatedcollapse={ divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage} divgroups: {}, //structu {groupname.count, groupname.lastactivedivid} lastactiveingroup: {}, //structu {lastactivediv.id} preloadimages: [], show:function(divids){ //public method if (typeof divids=="object"){ for (var i=0; i<divids.length; i++) this.showhide(divids[i], "show") } else this.showhide(divids, "show") }, hide:function(divids){ //public method if (typeof divids=="object"){ for (var i=0; i<divids.length; i++) this.showhide(divids[i], "hide") } else this.showhide(divids, "hide") }, toggle:function(divid){ //public method if (typeof divid=="object") divid=divid[0] this.showhide(divid, "toggle") }, addDiv:function(divid, attrstring){ //public function this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring}) this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,) return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found } this.currentid=divid //keep track of current div object being manipulated (in the event of chaining) return this }, showhide:function(divid, action){ var $divref=this.divholders[divid].$divref //reference collapsible DIV if (this.divholders[divid] && $divref.length==1){ //if DIV exists var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any) if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first this.slideengine(divid, 'show') targetgroup.lastactivedivid=divid //remember last active DIV } else{ this.slideengine(divid, action) } } }, slideengine:function(divid, action){ var $divref=this.divholders[divid].$divref var $togglerimage=this.divholders[divid].$togglerimage if (this.divholders[divid] && $divref.length==1){ //if this DIV exists var animateSetting={height: action} if ($divref.attr('fade')) animateSetting.opacity=action $divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){ if ($togglerimage){ $togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open) } if (animatedcollapse.ontoggle){ try{ animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display')) } catch(e){ alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.") } } }) return false } }, generatemap:function(){ var map={} for (var i=0; i<arguments.length; i++){ if (arguments[i][1]!=null){ //do not generate name/value pair if value is null map[arguments[i][0]]=arguments[i][1] } } return map }, init:function(){ var ac=this jQuery(document).ready(function($){ animatedcollapse.ontoggle=animatedcollapse.ontoggle || null var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc]) var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc') var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet) persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object this.$divref=$('#'+this.id) if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none' } else{ var cssdisplay=this.getAttr('hide')? 'none' : null } if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID cssdisplay='block' //set div to "block", overriding any other setting } else if (urlparamopenids[0]=="none"){ cssdisplay='none' //set div to "none", overriding any other setting } this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay])) this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')])) if (this.getAttr('group')){ //if this DIV has the "group" attr defined var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded } } }) //end divholders.each jQuery.each(ac.divgroups, function(){ //loop through each group if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none" ac.divholders[this.lastactivedivid].$divref.show() }) if (animatedcollapse.ontoggle){ jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display')) }) } //Parse page for links containing rel attribute var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]" $allcontrols.each(function(){ //loop though each control link this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc] if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image) animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined) $togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine() ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open) } $(this).click(function(){ //assign click behavior to each control link var relattr=this.getAttribute('rel') var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array if (divids.length>0){ animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function return false } }) //end control.click })// end control.each $(window).bind('unload', function(){ ac.uninit() }) }) //end doc.ready() }, uninit:function(){ var opendivids='', groupswithpersist='' jQuery.each(this.divholders, function(){ if (this.$divref.css('display')!='none'){ opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc' } if (this.getAttr('group') && this.getAttr('persist')) groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc' }) opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '') groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '') this.setCookie('acopendivids', opendivids) this.setCookie('acgroupswithpersist', groupswithpersist) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value, days){ if (typeof days!="undefined"){ //if set persistent cookie var expireDate = new Date() expireDate.setDate(expireDate.getDate()+days) document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString() } else //else if this is a session only cookie document.cookie = name+"="+value+"; path=/" }, urlparamselect:function(){ window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc return (RegExp.$1!="")? RegExp.$1.split(",") : [] }, preloadimage:function(){ var preloadimages=this.preloadimages for (var i=0; i<arguments.length; i++){ if (arguments[i] && arguments[i].length>0){ preloadimages[preloadimages.length]=new Image() preloadimages[preloadimages.length-1].src=arguments[i] } } } } Hi, I was wondering if there is anyone who could help me! I'm creating a Javascript slideshow, I have 'back' & 'next' functions which work. However, I'm not sure how to create a 'start' and 'stop' function (have to be separate functions), here is my current code below? IS there a genius out there who can help?! ------------------------------------------- <div id="slideshow"> <div class="mainimage"> <img height="300px" src="images/homemainimage.jpg" width="300px" height="300px" name="photoslider"/> <script language="JavaScript1.1"> var photos=new Array() var which=0 photos[0]="images/css3.svg" photos[1]="images/cloudcomputing.png" photos[2]="images/Rss.jpg" photos[3]="images/html5.png" photos[4]="images/jQuery.png" photos[5]="images/firewall.png" function swapImage(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } setTimeout("swapImage()",10000); } window.onload=swapImage; function backward(){ if (which>0){ window.status='' which-- document.images.photoslider.src=photos[which] } } function forward(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } } </script> <input type="button" value="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" name="B1" onClick="forward()"><br> --------------------------------------------------------- Thanks in advance!! Reply With Quote 01-20-2015, 09:56 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts It would be easier if you used setInterval rather than setTimeout as then you just need to use clearInterval to stop and setInterval to restart. Note also that both setTimeout and setInterval expect a function as their first parameter and not a string (except for IE3) and so the way you have it coded it has to eval() the string to convert it to a function. Also the language attribute on the script tag was replaced by a type attribute about 15 years ago. Also most browsers don't allow JavaScript to access window.status any more for security reasons. I am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration - returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks Hi all, How can I insert ads on html5 video tag before the main video plays? Now, I need make a sample allow: - play first advertisment video - play second ad video - play main video after 10 mins (half of duration) . pause main video . and play ad video. after that. continue the main video playback. Can you help me please? Thank you very much! I have a website where I am using a numbers counter and on the same page I have a video, I can't get both of them to work on the same page, Only one will work which is the numbers ticker. I have setup an example of it on a page, you can see he http://www.wordpressconnect.net/testing.php you can see the numbers ticker but at the bottom you can't see the video load. I have tested it with just the video and it works by itself. Is anyone able to help out pleaseeeeee, I've never coded javascript before so Im not sure how to fix this. thank youu hi, I have created a flash video that work on a php table (like php-nuke), this is seen well on my PC, instead with various screen the video size is not good. ON screen big the video is small, on screen small the video is big... How i can made a script that change the dimension of flash video ? any idea ? please help me.. Hello, I want to run video at our website at a specified time only,like i might want my video to be played at 9.00a.m exactly . how can i do it using javascript. Plz do revert back ASAP. Thanks, Revathi srikrishna |