|
JavaScript - Javascript Stop Function
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. Similar TutorialsJavaScript 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. How do I stop the displaymessage function when i ==1 Code: <script type="text/javascript">
var i =0;
function one()
{
document.getElementById('control').innerHTML = 1;
i =document.getElementById('control').innerHTML;
}
function zero()
{
document.getElementById('control').innerHTML = 0;
i =document.getElementById('control').innerHTML;
}
function displaymessage()
//if (i==0)//this causes problems
{
alert("Hello World!");
}
</script>
<body onclick="javascript: displaymessage();">
<div id='control' onmouseover="javascript: one();" onmouseout="javascript: zero()">0</div>
I have some images rotating and I want to be able to stop the whole flow with another function. This function needs to be killed so it all disappears and I can choose which image gets to stay. jquery by the way. Code: function start() {
$("#t1").fadeIn('fast', function() {
$("#t1").fadeTo(2000, 1).slideUp('slow', function() {
$("#t2").slideDown('slow');
$("#t2").fadeTo(2000, 1).slideUp('slow', function() {
$("#t3").slideDown('slow');
$("#t3").fadeTo(2000, 1).slideUp('slow', function() {
$("#t4").slideDown('slow');
$("#t4").fadeTo(2000, 1).slideUp('slow', function() {
$("#t5").slideDown('slow');
$("#t5").fadeTo(2000, 1).slideUp('slow', function() {
$("#t1").slideDown('slow');
});
});
});
});
});
});
}
Is this possible? something like: function killstart(){ //some code that totally stops the start() function } 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,"");
}
}
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 ========= 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 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! 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) 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 ! 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! 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. Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) {
x.style.backgroundColor="transparent"
}
Function ActivationFuction()
{
activate.function="unhighlight"
}
thanks How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way. Any suggestions? PHP Code: <?php function phpQuery(){ $query = mysql_query("INSERT INTO mytable VALUES('','name','email')"); } ?> <script type="text/javascript"> function delayQueries() { timeoutID = window.setTimeout(doQueries, 2000); } function doQueries() { var runQuery = "<?php phpQuery(); ?>"; } </script> Hi, I have a webpage with a world clock. On the clock page are 12 buttons (World Cities). When the user clicks these buttons. The time for the relevant world city is displayed. (The time is updated by an on.click function for each individual button. That either subtracts or adds the hours from GMT. For example. If the time is GMT 18:00:00. The user clicks the Paris button and the function adds 1 hour to result in 19:00:00) However. If the GMT time is for example 21:00:00 and the user clicks the Tokyo button (GMT+9 hours). The time displayed is 30:00:00. So I have been trying to work out how I can stop the time adding past 23:59:59. This is probably so simple which is probably why I cant find any help online. It has stumped me and any help would be appreciated. I have copied and pasted my code below in the hope that helps. Thanks in advance if you can offer any advice. Code: <script>
function start() {
GMToffset = 0;
t=setInterval('digitalclock()',500);
}
function digitalclock()
{
var today=new Date();
var hours=today.getHours() + GMToffset;
var minutes=today.getMinutes();
var seconds=today.getSeconds();
minutes=checkTime(minutes);
seconds=checkTime(seconds);
hours=checkTime(hours);
document.getElementById('txt').innerHTML=hours+":"+minutes+":"+seconds;
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
function updatetime1() {
GMToffset = -3;
}
function updatetime2() {
GMToffset = -4;
}
function updatetime3() {
GMToffset = -7;
}
function updatetime4() {
GMToffset = -10;
}
function updatetime5() {
GMToffset = -11;
}
function updatetime6() {
GMToffset = -13;
}
function updatetime7() {
GMToffset = +9;
}
function updatetime8() {
GMToffset = +8;
}
function updatetime9() {
GMToffset = +7;
}
function updatetime10() {
GMToffset = +1;
}
function updatetime11() {
GMToffset = +0;
}
function updatetime12() {
GMToffset = +3;
}
</script>
<div align="center">
<input type="button" onclick="updatetime1()" value="Time in Buenos Aires" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime2()" value="Time in New York" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime3()" value="Time in San Francisco" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime4()" value="Time in Hawaii" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime5()" value="Time in Fiji" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime6()" value="Time in Sydney" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br><br>
<body onload="start()">
<div id="txt"></div>
</div>
<div align="center">
<input type="button" onclick="updatetime7()" value="Time in Tokyo" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime8()" value="Time in Hong Kong" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime9()" value="Time in Bangkok" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" /><br>
<input type="button" onclick="updatetime10()" value="Time in Rome" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime11()" value="Time in London" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
<input type="button" onclick="updatetime12()" value="Time in Moscow" style="color: #07c; font-family: Arial; font-size: 12px; height: 20px; width: 250px;" />
Hi everyone, I am pretty new at javascript OOP. I have a javascript file that has plenty of javascript functions, variables, arrays, etc. I need to convert this into an object. Here is an example: Code: var myvar1 = '';
var myvar2 = new array();
var myvar3 = new array();
var myvar4;
var myvar5 = 60;
var myvar6 = '';
function myfunc1(){
myvar1 = 'hello';
return myvar1;
}
function myfunc2(somenum=0){
myvar5 = somenum;
//calling myfunc1() from within this function.
//do something in here
}
function myfunc3(){
//calling myfunc1() from within this function.
for(i=0;i<somelength;i++){
myvar2 = myvar3[i]; (something to put into the array)
}
}
1. I need to create an object and put ALL the varibles (myvar1 - myvar5) in that object. 2. Then the first two functions "myfunc1 and myfunc2" inside the same object. 2. And the function myfunc3 needs to sit OUTSIDE my object as a regular javascript function. It calls on myfunc1 (which is inside the object) and also inserts data into myvar2 (which is classified inside the object) and myvar3 (which is classified inside the object as well). This is what i came up with, but it's not going well: Code: var myobj1 = function(){
this.myvar1 = '';
this.myvar2 = new array();
this.myvar3 = new array();
this.myvar4;
this.myvar5 = 60;
this.myvar6 = '';
var myfunc1 = function(){
this.myvar1 = 'hello';
return this.myvar1;
}
var myfunc2 = function(somenum=0;){
this.myvar5 = somenum;
//calling this.myfunc1() from within this function.
//do something in here
}
}
function myfunc3(){
//calling mynewobj.myfunc1() from within this function.
for(i=0;i<somelength;i++){
mynewobj.myvar2 = mynewobj.myvar3[i]; (something to put into the array)
}
}
var mynewobj = myobj1;
HELP.....!!!! i really want to get into object oriented world, so thanks in advance. If I use function or Function to create a javascript function, does it make any difference ? Whats the difference between two and in which situation shall I use either ? Likewise whats the difference between event and Event objects of JavaScript ? Thanks |
|||||||