JavaScript - Modifying A Popup Script
I am trying to modify a popup script to popup a lightbox on page load instead of a new window. The script identifies if the user is a new visitor and displays the popup only to new visitors.
Typically, the lightbox is triggered by an a:link. I would like to trigger it using this script so that the lightbox pops up automatically for new visitors only. Here is the popup script: Code: <SCRIPT LANGUAGE="JavaScript"> <!-- function GetCookie(name) { var arg=name+"="; var alen=arg.length; var clen=document.cookie.length; var i=0; while (i<clen) { var j=i+alen; if (document.cookie.substring(i,j)==arg) return "here"; i=document.cookie.indexOf(" ",i)+1; if (i==0) break; } return null; } var visit=GetCookie("COOKIE1"); if (visit==null){ var expire=new Date(); window.name = "thiswin"; newwin=open("http://www.pccmedia.net/P25_60sec.php", "dispwin", "width=350,height=350,scrollbars=yes,menubar=no"); expire=new Date(expire.getTime()+7776000000); document.cookie="COOKIE1=here; expires="+expire; } // --> </SCRIPT> I want to replace the newwin=open... command with something that will trigger the lightbox. The section of the lightbox script that receives the trigger and variables is.... Code: Mediabox.scanPage = function() { // $$('#mb_').each(function(hide) { hide.set('display', 'none'); }); var links = $$("a").filter(function(el) { return el.rel && el.rel.test(/^lightbox/i); }); $$(links).mediabox({/* Put custom options here */}, null, function(el) { var rel0 = this.rel.replace(/[[]|]/gi," "); var relsize = rel0.split(" "); return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1])); }); }; window.addEvent("domready", Mediabox.scanPage); An example of the typical HTML tag that triggers the lightbox and feeds the variables is Code: <a href="http://www.pccmedia.net/other/P25_60sec.mp4" rel="lightbox[set 720 405]" title="Project 25" onClick="stop1()"/> The rel=lightbox... is the trigger for the lightbox. The stop1() function refers to a separate script that plays background music on the website. This also needs to be included in the new visitor popup script, but is a separate issue..... I'm not familiar enough with JS to be able to figure this out. Any help would be GREATLY appreciated. Similar TutorialsHere is the style and js for my menu that I got from Dynamic Drive. I have it working as it is suppose to on my site. But I need my menus to have submenus and even have a couple of sub-submenus. Can someone help me with this. Code: YOffset=150; // no quotes!! XOffset=0; staticYOffset=30; // no quotes!! slideSpeed=20 // no quotes!! waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuBGColor="black"; menuIsStatic="yes"; //this sets whether menu should stay static on the screen menuWidth=180; // Must be a multiple of 10! no quotes!! menuCols=2; hdrFontFamily="verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#170088"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="15"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#FFFF99"; linkTarget="_top"; linkAlign="Left"; barBGColor="#FF0000"; barFontFamily="Verdana"; barFontSize="3"; barFontColor="white"; barVAlign="center"; barWidth=45; // no quotes!! barText="Menu Navigation"; // <IMG> tag supported. Put exact html for an image to show. /////////////////////////// // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header ssmItems[0]=["Menu"] //create header ssmItems[1]=["About Our Diocese", "http://www.ptdiocese.org/about-us/about-us.shtml, ""] ssmItems[2]=["Parishes", "http://www.ptdiocese.org/parishes/parish.shtml",""] ssmItems[3]=["Schools", "http://www.ptdiocese.org/schools/schools.shtml", ""] ssmItems[4]=["Ministries", "http://www.ptdiocese.org/christian-formation/christian-formation.shtml", "_new"] ssmItems[5]=["Clergy and Religous", "http://www.ptdiocese.org/clergy-religious/clergy-religious.shtml", ""] ssmItems[6]=["Protecting God's Children", "http://www.ptdiocese.org/protecting-children/protecting-children.shtml", ""] ssmItems[7]=["For Those In Need", "http://www.ptdiocese.org/in-need/in-need.shtml", ""] ssmItems[8]=["Tribunal", "http://www.ptdiocese.org/tribunal/tribunal.shtml", ""] ssmItems[9]=["Contact Us"] //ssmItems[7]=["Tribunal", "http://www.ptdiocese.org", "", 1, "no"] //create two column row //ssmItems[8]=["Contact Us", "http://www.ptdiocese.org", "",1] ssmItems[10]=["External Links", "", ""] //create header ssmItems[11]=["Test", "http://www.javascriptkit.com", ""] ssmItems[12]=["Test", "http://www.freewarejava.com", ""] ssmItems[13]=["Test", "http://www.codingforums.com", ""] buildMenu(); //--> NS6 = (document.getElementById&&!document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") tempBar='';barBuilt=0;ssmItems=new Array(); function truebody(){ return (document.compatMode!="BackCompat")? document.documentElement : document.body } moving=setTimeout('null',1) function moveOut() { if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)} else {clearTimeout(moving);moving=setTimeout('null',1)}}; function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} function moveBack1() { if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)} else {clearTimeout(moving);moving=setTimeout('null',1)}} function slideMenu(num){ if (IE) {ssm.pixelLeft += num;} if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";} if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}} function makeStatic() { if (NS||NS6) {winY = window.pageYOffset;} if (IE) {winY = truebody().scrollTop;} if (NS6||IE||NS) { if (winY!=lastY&&winY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - YOffset + staticYOffset);} else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));} else {smooth=0} if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) bssm.pixelTop+=smooth; if (NS6) bssm.top=parseInt(bssm.top)+smooth+"px" if (NS) bssm.top=parseInt(bssm.top)+smooth lastY = lastY+smooth; setTimeout('makeStatic()', 1)}} function buildBar() { if(barText.indexOf('<IMG')>-1) {tempBar=barText} else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}} document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')} function initSlide() { if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style; bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";} else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style bssm.visibility = "visible";} else if (NS) {bssm=document.layers["basessm1"]; bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"]; bssm2.clip.left=0;ssm.visibility = "show";} if (menuIsStatic=="yes") makeStatic();} function buildMenu() { if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">'); for(i=0;i<ssmItems.length;i++) { if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1} else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1); if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')} if(!ssmItems[i][1]){ document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')} else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget; document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')} if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1} if(ssmItems[i][4]!="no"){document.write('</TR>')}} document.write('</table>') if (NS6){document.write('</TD></TR></TABLE>')} if (IE||NS6) {document.write('</DIV></DIV>')} if (NS) {document.write('</LAYER></ILAYER></LAYER>')} theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)} Hi, I am using this image rotation tool on my website but I would like to alter it slightly http://www.zurb.com/playground/orbit...y-image-slider See the small navigation dots under the images to select individual pages there are 4 of them (more if you add more images) - on 1 horizontal line. I would like to alter the code if possible so that the dots are in pairs going down the page (I wont bore you with the reason why) ie: o o o o o o o o etc The code the handles the dots is this: Code: // ================== // ! BULLET NAV // ================== //Bullet Nav Setup if(options.bullets) { var bulletHTML = '<ul class="orbit-bullets"></ul>'; orbitWrapper.append(bulletHTML); var bullets = orbitWrapper.children('ul.orbit-bullets'); for(i=0; i<numberSlides; i++) { var liMarkup = $('<li>'+(i+1)+'</li>'); if(options.bulletThumbs) { var thumbName = slides.eq(i).data('thumb'); if(thumbName) { var liMarkup = $('<li class="has-thumb">'+i+'</li>') liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"}); } } orbitWrapper.children('ul.orbit-bullets').append(liMarkup); liMarkup.data('index',i); liMarkup.click(function() { stopClock(); shift($(this).data('index')); }); } setActiveBullet(); } //Bullet Nav Execution function setActiveBullet() { if(!options.bullets) { return false; } else { bullets.children('li').removeClass('active').eq(activeSlide).addClass('active'); } } The CSS for this is: Code: /* BULLET NAV ================================================== */ .orbit-bullets { position: absolute; z-index: 1000; list-style: none; bottom: 150px; left: 0%; margin-left: 0px; padding: 0; } .orbit-bullets li { float: left; margin-left: 5px; cursor: pointer; color: #999; text-indent: -9999px; background: url(bullets.png) no-repeat 4px 0; width: 13px; height: 12px; overflow: hidden; } .orbit-bullets li.active { color: #222; background-position: -8px 0; } .orbit-bullets li.has-thumb { background: none; width: 100px; height: 75px; } .orbit-bullets li.active.has-thumb { background-position: 0 0; border-top: 2px solid #000; } The image file for the small dots is this: I'm afraid I'm not a Java person at all and know little about it so I would be very grateful if you could help me out with it... if it's possible. Thanks. PP. Hi, I want to take this redirect script and modify it so that it rotates a banner image instead of sending the user to another page. The script works so that if the window is out of focus for 10 seconds, it redirects. The images are defined in an external style sheet so I guess I'll have to move that into the document. Also, I want it to be able to work more than once with multiple images, like if the user opens a new tab, comes back, goes to a different tab, the image should change twice. Here's the script: Code: <script type="text/javascript"> var xScroll, yScroll, timerPoll, timerRedirect, timerClock; function initRedirect(){ if (typeof document.body.scrollTop != "undefined"){ //IE,NS7,Moz xScroll = document.body.scrollLeft; yScroll = document.body.scrollTop; clearInterval(timerPoll); //stop polling scroll move clearInterval(timerRedirect); //stop timed redirect timerPoll = setInterval("pollActivity()",1); //poll scrolling timerRedirect = setInterval("location.href='http://www.google.com",10000); //set timed redirect } else if (typeof window.pageYOffset != "undefined"){ //other browsers that support pageYOffset/pageXOffset instead xScroll = window.pageXOffset; yScroll = window.pageYOffset; clearInterval(timerPoll); //stop polling scroll move clearInterval(timerRedirect); //stop timed redirect timerPoll = setInterval("pollActivity()",1); //poll scrolling timerRedirect = setInterval("location.href='http://www.google.com'",10000); //set timed redirect } //else do nothing } function pollActivity(){ if ((typeof document.body.scrollTop != "undefined" && (xScroll!=document.body.scrollLeft || yScroll!=document.body.scrollTop)) //IE/NS7/Moz || (typeof window.pageYOffset != "undefined" && (xScroll!=window.pageXOffset || yScroll!=window.pageYOffset))) { //other browsers initRedirect(); //reset polling scroll position } } document.onmousemove=initRedirect; document.onclick=initRedirect; document.onkeydown=initRedirect; window.onload=initRedirect; window.onresize=initRedirect; </script> The image is defined in Code: <div id="home" style="background: url(images/banner.png) no-repeat;"></div> I'm thinking I should replace banner.png with a variable or array name that has the image names defined somewhere and using a loop to choose the next image in the array. I took a C++ class but I don't know any JS, sorry for not doing homework. Thanks for reading this Hi all, I found a small fading script online which suits my needs though I need some help changing it around a bit as it seems to only work once in a page (i.e. a second occurance of the code doesn't work though the first one continues). Also, I'm not quite sure how to put it into a .js external page and then call the specific function as many times as I want in the body and have it all work. Please advise on this issue (i.e. Putting the code in an external file and then calling the fadeIn() function as many times as I want in the body). Thanks. BTW, the concept is a fixed imaged with the js fading another image over the top of that first image in and out over and over again. All the images and application of the js will be the same for all occurrences on the page (don't know if that's relevant to the solution I'm asking for but throwing it in there just in case). Here is the code: Code: <html> <body style="background:#000;"> <div style="float:left;"> <img style="float:left;" id="me" src="fade_arrow2.png"/> <img style="float:left;margin-left:-44px;" src="fade_arrow1.png"/> <script type="text/javascript"> var element = document.getElementById('me') ; var duration = 4000; /* 1000 millisecond fade = 1 sec */ var steps = 20; /* number of opacity intervals */ var delay = 5000; /* 5 sec delay before fading out */ /* set the opacity of the element (between 0.0 and 1.0) */ function setOpacity(level) { element.style.opacity = level; element.style.MozOpacity = level; element.style.KhtmlOpacity = level; element.style.filter = "alpha(opacity=" + (level * 100) + ");"; } function fadeIn(){ for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + i + ")", i * duration); } setTimeout("fadeOut()", delay); } function fadeOut() { for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + (1 - i) + ")", i * duration); } setTimeout("fadeIn()", duration); } /* start the effect */ fadeIn(); </script> </div> </body> </html> Hello, I have a script that makes a link a different color on click, i would like to add a hover color to the links that are NOT active. Script below. Thanks in advance! Code: function activate(el) { var links=document.getElementsByTagName("a"); for(i=0;i<links.length;i++) { if(links[i].className=="toggle") { links[i].style.color="#999"; } } el.style.color="#DF8700"; } Hi everyone, I have a countdown script I'd like to modify so that the countdown ends at a specific hour, and not on a particular day at midnight. I'm new to coding (Ruby), so still trying to get the hang of Javascript: Code: var current="Expired" var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function countdown(yr,m,d){ theyear=yr;themonth=m;theday=d var today=new Date() var todayy=today.getYear() if (todayy < 1000) todayy+=1900 var todaym=today.getMonth() var todayd=today.getDate() var todayh=today.getHours() var todaymin=today.getMinutes() var todaysec=today.getSeconds() var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec futurestring=montharray[m-1]+" "+d+", "+yr dd=Date.parse(futurestring)-Date.parse(todaystring) dday=Math.floor(dd/(60*60*1000*24)*1) dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) if(dday==0&&dhour==0&&dmin==0&&dsec==1){ document.getElementById('counter').style.display='none'; document.getElementById('expired').style.display='block'; return } else{ document.getElementById('countdown_day').innerHTML=dday; document.getElementById('countdown_hour').innerHTML=dhour; document.getElementById('countdown_min').innerHTML=dmin; document.getElementById('countdown_sec').innerHTML=dsec; setTimeout("countdown(theyear,themonth,theday)",1000) } } //MODIFY THIS LINE: enter the count down date using the format year/month/day //e.g. countdown(2009, 03, 23); countdown(2011, 12, 24); I've tried to play with it by changing the following in green: Code: function countdown(yr,m,d, h ){ theyear=yr;themonth=m;theday=d; thehour=h . . . setTimeout("countdown(theyear,themonth,theday, thehour )",1000) . . countdown(2011, 12, 24, 10 ) But I don't seem to be getting anywhere. Any tips or pointers to push me in the right direction is much appreciated. Thanks! Hi all, I have been using a border-fading script to give the impression of onmouseover fading underline, and I wish to tweak it a bit to give a slightly different effect I have two scripts that do virtually the same thing, although the second has a display bug in FF both have their advantages and I don't have my heart set on using either one, although Vic's scripts are being used all over the page i'm creating so his has first dibs here they are, and I will describe what I need to do below: first script: Code: startColor = "FFFFFF"; // MouseOut link color endColor = "000000"; // MouseOver link color stepIn = 20; // delay when fading in stepOut = 30; // delay when fading out var fading=new Array(); fading['now']=startColor; function initLinkFade() { var links = document.getElementById('pageHolder').getElementsByTagName('A'); for(var i=0;i<links.length;i++){ links[i].onmouseover = domouseover; links[i].onmouseout = domouseout; } } if(document.getElementsByTagName){ window.onload = initLinkFade; document.write("<style type='text/css'>#pageHolder a{text-decoration:none}</style>"); } function domouseover() { var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement; if(target.nodeName!='A')return; for(var i=0;i<fading.length;i++) clearTimeout(fading[i]); if(fading['el']!=target && fading['el']){ fading['el'].style.borderBottom = "1px solid #"+startColor; linkFade(startColor,endColor,target,stepIn); } else linkFade(fading['now'],endColor,target,stepIn); } function domouseout() { var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement; if(target.nodeName!='A')return; for(var i=0;i<fading.length;i++) clearTimeout(fading[i]); if(fading['el']!=target && fading['el']){ fading['el'].style.borderBottom = "1px solid #"+startColor; linkFade(endColor,startColor,target,stepOut); } else linkFade(fading['now'],startColor,target,stepOut); } function hex(i) { var s=Math.floor(i).toString(16); return s.length==2?s:"0"+s; } function linkFade(s,e,element,step){ fading['el']=element; var sr=parseInt(s.substr(0,2),16); var sg=parseInt(s.substr(2,2),16); var sb=parseInt(s.substr(4,2),16); var er=parseInt(e.substr(0,2),16); var eg=parseInt(e.substr(2,2),16); var eb=parseInt(e.substr(4,2),16); for(var i = 0; i <= step; i++) { var r=hex((sr*(step-i)+er*i)/step); var g=hex((sg*(step-i)+eg*i)/step); var b=hex((sb*(step-i)+eb*i)/step); fading[i]=setTimeout("fading['now']='"+r+g+b+"';fading['el'].style.borderBottom = '1px solid #'+fading['now']",i*step); } } What I like about this one is that you can specify both the fade in and fade out speeds, allowing you a bunch of flexibility in how it looks also, I like how it allows you to set it to 'apply to all links in a given div... however that can have certain downfalls you can seethis script in action he www.enviromark.ca/head/YPP.htm the second script Code: <!-- // by Vic Phillips (04-September-2006) http://www.vicsjavascripts.org.uk function zxcMseOver(zxcobj,zxcd){ var zxcp=zxcobj; if (!zxcp.oop){ return; } clearTimeout(zxcp.oop.to); zxcp.oop.d=zxcd||0; zxcp.oop.cng(); } function zxcInit(zxccls,zxccol1,zxccol2,zxcstps){ var zxclks=document.getElementsByTagName('BODY')[0].getElementsByTagName('A'); for (var zxc0=0;zxc0<zxclks.length;zxc0++){ if (zxclks[zxc0].className==zxccls){ zxcStyle(zxclks[zxc0],{borderBottom:'solid '+zxccol1+' 0px;'}); zxclks[zxc0].oop=new zxcOOP(zxclks[zxc0],zxccol1,zxccol2,zxcstps); } } } var zxcCnt=0; function zxcOOP(zxcd,zxccol1,zxccol2,zxcstps){ this.obj=zxcd; this.ary=zxcSTxtColors([zxccol1,zxccol2],zxcstps||10); this.cnt=0; this.d=1 this.to=null; this.ref='zxcoop'+zxcCnt; window[this.ref]=this; zxcCnt++; } zxcOOP.prototype.cng=function(){ if ((this.d>0&&this.cnt<this.ary.length-1)||(this.d<0&&this.cnt>0)){ this.obj.style.borderBottom='solid #'+this.ary[this.cnt+=this.d]+' 1px'; this.setTimeOut("cng();",100); } else if (this.d<0) { this.obj.style.borderBottom='0px'; } } zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){ this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd); } function zxcStyle(zxcele,zxcstyle){ if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); } for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; } return zxcele; } function zxcSTxtColors(zxcc,zxcnu){ var zxcary=[]; zxcc1=zxcc[0].replace('#',''); zxcc2=zxcc[1].replace('#',''); var zxcr=zxcHexToInt(zxcc1.substring(0,2)); var zxcg=zxcHexToInt(zxcc1.substring(2,4)); var zxcb=zxcHexToInt(zxcc1.substring(4,6)); var zxcr2=zxcHexToInt(zxcc2.substring(0,2)); var zxcg2=zxcHexToInt(zxcc2.substring(2,4)); var zxcb2=zxcHexToInt(zxcc2.substring(4,6)); var zxcrstep=Math.round((zxcr2-zxcr)/zxcnu); var zxcgstep=Math.round((zxcg2-zxcg)/zxcnu); var zxcbstep=Math.round((zxcb2-zxcb)/zxcnu); for (zxc0=0;zxc0<zxcnu;zxc0++){ zxcary[zxc0]=zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb); zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep; } zxcary[zxcnu-1]=zxcc[1].substring(1); return zxcary; } function zxcIntToHex(zxcn){ zxcn=(zxcn>255)?255:(zxcn<0)?0:zxcn; var zxcresult=zxcn.toString(16); if (zxcresult.length==1){ zxcresult="0"+zxcresult; } return zxcresult; } function zxcHexToInt(zxchex){ return parseInt(zxchex,16); } //--> activated by: <body onload="zxcInit('mainLinks','#FFFFFF','#000000',15);"> ... <a class="mainLinks" href="#advantagesRisks" onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);"><img src="images/EN_advantages_risks.gif" name="imageLinkNoTouchy"></a> I like this script because it allows you to set the fade on a per-link basis, not on a per-div basis... more control alrighty, here are the minor modifications I am hoping to get help with The fade-out effects stop when a second link is onmouseover'd. I would like to be able to set both the fade-in and fade-out delays (like in the first script), but have the fade-out continue for "Link A" even if "Link B" is onmouse'd over. Basically getting the smooth-fade effect seen he www.enviromark.ca/head/ --> the gray icons. When a link is clicked, I would like the top border of the link to fade in and stay solid until another link is clicked. When another link is clicked, I would like it's top border to fade in (like the first link) a have the first link's top border fade out. Again you can see the effect I'm going for at the link above by clicking on a few of the vertical links and seeing it's effect on the horizontal images I know this might be a lot to ask, so I suppose I could live with the script I have... but I figured there was no harm in asking Hello all, Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it. I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent. The script in action can be seen on the script writer's site he http://sandbox.leigeber.com/dropdown-menu/index.html and the script is: Code: var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(this.n+'.st('+i+',true)'); h.onmouseout=new Function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0]; clearInterval(c.t); c.style.overflow='hidden'; if(f){ p.className+=' '+a; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0} if(c.mh==c.offsetHeight){c.style.overflow='visible'} else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)} }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetHeight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }(); with Code: var menu=new menu.dd("menu"); menu.init("menu","menuhover"); used on my html page to call the script. I'm using the script exactly as written and exactly as it is on the dude's demo page for it. However, some of my sub-menu items are wider than their parent items and in IE7 this means they are bound to the width of the parent until the animations have finished, and then pop-out to their full width (NB not an issue in FF3). I'm actually not too fussed about either the fade in or expand out effects (they'd be nice, but not at the expense of the IE7 bug) so I simply wanted to know what I should do to the script to turn off the effects, or make them instant - ie reduce the length of the effect to as short as possible. I understand I can get rid of the bug by specifying a width for the ul element in my css, but I'd rather not do that if I can help it. I'd appreciate anyone's insight on this. Thanks Tom i need blog popup java script can help me? i have premium account blog and i use some adf.ly links so i need auto popup window java script!
Total newbie, I (almost) know just basic HTML. I have my own website and I'm trying to find out how to make a popup window work from clicking on a part link in a parent window table so that my clients can make an inquiry. I have about 300 parts on 10 pages total and would like it to be something I can just enter the new varibles on the parent page and the code takes care of the rest. I would like the popup to have the part info as a variable from the table as a variable in the inquiry page header and also part description as a variable the hidden subject line. I have included the code I already have and I'm looking for the script to bring it all together. Example for header may read "Part 1" for example and the hidden subject variable to read "0001 Part 1 $20" for example. I hope this is possible and I hope I made sense. I really need help me with this. Parent page Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Parts Page</title> <link rel="stylesheet" type="text/css" href="../styles.css" /> <style type="text/css">body{font-family: Verdana, sans-serif;font-size: 14px;font-style: normal;line-height: normal;font-weight: normal;color: #000000;}</style> </head> <body> <div align="center"><table width="90%" style="border-collapse:collapse;" border="1" cellpadding="2"> <tr><td width="15%"><h2 align="center">Item #</h2><p align="center">Click to inquire</p></td> <td width="60%"><h2 align="center">Description - Used OEM Parts*</h2><p align="center">*Unless described differently</p></td> <td width="15%" valign="top"><h2 align="center">Coverage</h2><p align="center">*Sorted by Year</p></td> <td width="10%" valign="top"><h2 align="center">Price</h2></td></tr> <tr><td align="center"><a href="mailto:myemail@myweb.com?subject=0001 - My Part 1 - $20"><font size="2">0001</font></a></td><td align="left"><font size="2">My part 1</font></td><td align="center"><font size="2">1960-61</font></td><td align="center"><font size="2">$20</font></td></tr> <tr><td align="center"><a href="mailto:myemail@myweb.com?subject=0002 - My Part 2 - $25"><font size="2">0002</font></a></td><td align="left"><font size="2">My part 2</font></td><td align="center"><font size="2">1960-61</font></td><td align="center"><font size="2">$25</font></td></tr> </table></div> </body> Popup window Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Parts Inquiry</title> <link rel="stylesheet" type="text/css" href="../styles.css" /> <style type="text/css">body{font-family: Verdana, sans-serif;font-size: 14px;font-style: normal;line-height: normal;font-weight: normal;color: #000000;}</style> </head> <body> <form action="http://www.myweb.com/cgi/FormMail.pl" method="post"> <input type="hidden" name="recipient" value="myemail@myweb.com" /> <input type="hidden" name="subject" value="variable 2" /> <input type="hidden" name="redirect" value="http://myemail@myweb.com/used_parts/thank_you6.html" /> <input type="hidden" name="required" value="realname, email" /> <input type="hidden" name="env_report" value="REMOTE_HOST, HTTP_USER_AGENT, REMOTE_USER, REMOTE_ADDR " /> <div align="center"><table width="90%" border="0"> <tr><td align="center"><h1>variable 1</h1> <p align="center"><font size="2" color="#FF0000">"*" Indicates required field.</font></p> <p><font>Fill out the form below to find out more about this this part.</font></p> </td></tr></table></div> <div align="center"><table width="50%" border="2" bgcolor="#99CCFF"> <tr><td align="right" width="50%"><font color="#FF0000">*</font>Your Name : </td> <td align="left" width="50%"><input type="text" size="35" maxlength="256" name="realname" /></td></tr> <tr><td align="right" width="50%"><font color="#FF0000">*</font>Email Address : </td> <td align="left" width="50%"><input type="text" size="35" maxlength="256" name="email" /></td></tr> <tr><td align="right" width="50%">Phone Number : </td> <td align="left" width="50%"><input type="text" size="14" maxlength="256" name="Phone" /></td></tr> <tr><th colspan="2">Please type your question(s) in the space below: <textarea name="Question(s)" rows="5" cols="70"></textarea></th></tr></table></div><br /> <div align="center"><table width="90%" border="0"> <tr><td align="center"> <input type="submit" value="Submit Form" /> <input type="reset" value="Clear Form" /> </td></tr></table></div></form> </body> I also have some parameters for the desired popup window size and position. Code: width=625,height=450,left=275,top=100,resizable=no,status=no,toolbar=no,menubar=no,location=no'); Any other suggestions for the popup window parameters would be welcome! Thanks, John Hi, I adjusted a javascript code which was a clickable popup to an autoloading popup. Basicly when someone visits the page I want the popup to appear. It's working fine but Firefox doesn't display the popup on page load, only when clicked. (newsletter signup) Im just starting out on JavaScript. Can anyone help? here's the code Code: $(document).ready(function() { // Here we will write a function when link click under class popup var rel = popuprel3; // Here we will describe a variable popupid which gets the // rel attribute from the clicked link var popupid = $(this).attr('rel'); // Now we need to popup the marked which belongs to the rel attribute // Suppose the rel attribute of click link is popuprel then here in below code // #popuprel will fadein $(popuprel3).fadeIn(); // append div with id fade into the bottom of body tag // and we allready styled it in our step 2 : CSS $('body').append('<div id="fade"></div>'); $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); // Now here we need to have our popup box in center of // webpage when its fadein. so we add 10px to height and width var popuptopmargin = ($(popuprel3).height() + 10) / 2; var popupleftmargin = ($(popuprel3).width() + 10) / 2; // Then using .css function style our popup box for center allignment $(popuprel3).css({ 'margin-top' : -popuptopmargin, 'margin-left' : -popupleftmargin }); // Now define one more function which is used to fadeout the // fade layer and popup window as soon as we click on fade layer $('#fade').click(function() { // Add markup ids of all custom popup box here $('#fade , #popuprel3').fadeOut() return false; });}); theres a div on index.php with an id called popuprel3 I am after a script that will allow a calendar to pop up to select a date in UK date format. I have a page that has a form with three date fields so the script needs to be reusable. I have been told to use jquery but could not work out how to reuse or get the calendar to be a different size other than half the size of the full page screen! the whole sites CSS also got messed up using jquery for some reason, think maybe I had used the same CSS tags as jquery? So looking for a basic calendar script no-frills, short sweet reusable. :-) Can anyone suggest some? I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week Thanking you, L.Rajesh rajboy13@gmail.com my code is Code: function addRow() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var sl = document.createElement('input'); sl.type = 'text'; sl.name = 'sln' ; sl.id = 'sln' + iteration; sl.value = iteration; sl.size = 3; sl.readOnly = true; cellLeft.appendChild(sl); var cellRights= row.insertCell(1); var elm= document.createElement('input'); elm.type = 'text'; elm.name = 'txtMdesc' ; elm.id = 'Mdesc' + iteration; elm.size = 20; cellRights.appendChild(elm); var cellRightt= row.insertCell(2); var elmn= document.createElement('input'); elmn.type = 'text'; elmn.name = 'txtMqty' ; elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy'); elmn.id = 'Mqty' + iteration; elmn.size = 20; cellRightt.appendChild(elmn)"; var cellRightu= row.insertCell(3); var elmno= document.createElement('input'); elmno.type = 'text'; elmno.name = 'txtMbill' ; elmno.id = 'Mbill' + iteration; elmno.size = 20; cellRightu.appendChild(elmno); } the button code is : Code: </br> <fieldset style="width:60%;" align="center"> <legend> <SCRIPT LANGUAGE="JavaScript"> function deleteRow(b){ document.getElementById('table_formcontainer').deleteRow(b) } function CompareDates1() { var str1 = document.getElementById("start").value; var str2 = document.getElementById("edate").value; var dt1 = parseInt(str1.substring(0,2),10); var mon1 = parseInt(str1.substring(3,5),10); var yr1 = parseInt(str1.substring(6,10),10); var dt2 = parseInt(str2.substring(0,2),10); var mon2 = parseInt(str2.substring(3,5),10); var yr2 = parseInt(str2.substring(6,10),10); var date1 = new Date(yr1, mon1, dt1); var date2 = new Date(yr2, mon2, dt2); if(date2 < date1) { alert("To date cannot be greater than from date"); return false; } else { alert("Submitting ..."); document.form1.submit(); } return true; } function addRow() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; var iteration = lastRow; var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var sl = document.createElement('input'); sl.type = 'text'; sl.name = 'sln' ; sl.id = 'sln' + iteration; sl.value = iteration; sl.size = 3; sl.readOnly = true; cellLeft.appendChild(sl); var cellRights= row.insertCell(1); var elm= document.createElement('input'); elm.type = 'text'; elm.name = 'txtMdesc' ; elm.id = 'Mdesc' + iteration; elm.size = 20; cellRights.appendChild(elm); var cellRightt= row.insertCell(2); var elmn= document.createElement('input'); elmn.type = 'text'; elmn.name = 'txtMqty' ; elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy'); elmn.id = 'Mqty' + iteration; elmn.size = 20; cellRightt.appendChild(elmn)"; var cellRightu= row.insertCell(3); var elmno= document.createElement('input'); elmno.type = 'text'; elmno.name = 'txtMbill' ; elmno.id = 'Mbill' + iteration; elmno.size = 20; cellRightu.appendChild(elmno); } function delRow1(c) { document.getElementById('tblMed').deleteRow(c) } function validate() { var tbl = document.getElementById('tblMed'); var lastRow= tbl.rows.length-1; var a; for (a=1; a<=lastRow; a++) { var def = document.getElementById('sln'+ a); var ghi = document.getElementById('Mdesc'+ a); var jkl = document.getElementById('Mqty'+ a); var jkl1 = document.getElementById('Mqty'+ a).value; var abc = document.getElementById('Mbill'+ a); var gpexpdt2 = document.getElementById('tblMed').value; var str11 = document.getElementById("sdate").value; var str12 = document.getElementById("edate").value; var tranday = jkl1.substring(0,2); var tranmon = jkl1.substring(3,5); var tranyear = jkl1.substring(6,10); var trandate = new Date(tranyear,tranmon,tranday); var tranday2 = str11.substring(0,2); var tranmon2 = str11.substring(3,5); var tranyear2 = str11.substring(6,10); var trandate2 = new Date(tranyear2,tranmon2,tranday2); var tranday3 = str12.substring(0,2); var tranmon3 = str12.substring(3,5); var tranyear3 = str12.substring(6,10); if ((document.getElementById("AC").value == "")) { alert ( "Please enter Amount Claimed." ); document.form5.AC.focus(); return false; } else if((document.getElementById("Amb").value == "")) { alert ( "Please enter Relationship" ); document.form5.Amb.focus(); return false; } if ( document.form5.Treat.selectedIndex == "") { alert ( "Please select Treatment Type" ); document.form5.Treat.focus(); return false; } else if((document.getElementById("C10").value == "")) { alert ( "Please enter Total " ); document.form5.C10.focus(); return false; } else if((document.getElementById("C11").value == "")) { alert ( "Please enter Place " ); document.form5.C11.focus(); return false; } else if((document.getElementById("start").value == "")) { alert ( "Please enter from date" ); document.form5.start.focus(); return false; } else if((document.getElementById("edate").value == "")) { alert ( "Please enter to date" ); document.form5.edate.focus(); return false; } if (ghi.value.length == "") { alert('Please enter Bill No'); ghi.focus(); return false; } if (jkl.value.length == "") { alert('Please enter Date'); jkl.focus(); return false; } var trandate3 = new Date(tranyear3,tranmon3,tranday3); if (tranmon > 12|| tranmon < 1) { alert('Invalid Month In Date Field .Enter as dd-mm-yy'); jkl.focus(); return false; } if (tranday > 31|| tranday < 1) { alert('Invalid Date In Date Field Enter as dd-mm-yy'); jkl.focus(); return false; } if(trandate2.getTime() > trandate.getTime()) { alert("Bill date should be less than From date"); jkl.focus(); return false; } if(trandate3.getTime() < trandate.getTime()) { alert("Bill date should not be greater than End date"); jkl.focus(); return false; } if (abc.value.length == "") { alert('Please enter Amount'); abc.focus(); return false; } var str3 = document.getElementById("AC").value; var str4 = document.getElementById("Amb").value; if(parseInt(str3) > parseInt(str4)) { alert('Amount Claimed must be less than Amount Balance'); document.form5.AC.focus(); return false; } var alertsay = ""; if (form5.Treat.value > 4) { alert("Sorry You Can Not This Employee Data In Database.........."); form5.Treat.focus(); return (false); } var checkOK = "0123456789"; var checkStr = abc.value; var allValid = true; var allNum = ""; for (e = 0; e < checkStr.length; e++) { ch = checkStr.charAt(e); for (f = 0; f < checkOK.length; f++) if (ch == checkOK.charAt(f)) break; if (f == checkOK.length) { allValid = false; break; } if (ch != ",") allNum += ch; } if (!allValid) { alert("Invalid Data Please enter only digits'"); abc.focus(); return (false); } } return true; } var count =0; function Check() { if (!validate()) return true; addRow() } function removeRow1() { var tbl = document.getElementById('tblMed'); var lastRow = tbl.rows.length; if (lastRow > 1) tbl.deleteRow(lastRow - 1); } function deleteRow(node) { if (rowNum > 1) { var td = node.parentNode; while (td.tblMed.toLowerCase() != "tr") td = td.parentNode; td.parentNode.removeChild(td); rowNum = rowNum - 1; document.form1.count.value = rowNum; } else { alert ("You cannot delete the last remaining row"); } } </script> <b><font color="#153E7E"border="1">Bill Details</b></legend><br> <table id="tblMed" width="75%"> <tr> <th>Sl.No.</th> <th align="left">Bill No</th> <th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th> <th>Bill Amount( <span class="WebRupee">Rs.</span> )</th> </tr> </table> <tr><br/>     <input name="button" type="button" value="Add Bill" onClick="Check()"/> ................................................................................................ i want popup calender in 3rd row of the table please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com Hi All, I have this javaascript which validates fields on a form, and if one of the fields are empty or 0 it will turn that field red, but it does it individually and i want it to turn all fields that are in error in red at the same time, can someone help me with the below code on how i can accomplish this Code: var inputsToCheck = Array('MainDisplayContentChange_txtTitleContent', 'MainDisplayContentChange_txtDescription', 'MainDisplayContentChange_txtjusitification','MainDisplayContentChange_txtDateRequired'); var obj;0 function formCheck() { for(var i=0;i<inputsToCheck.length;i++) { obj = document.getElementById(inputsToCheck[i]); if (obj.value == "") { obj.style.backgroundColor = "red"; return false } else { return true } } } Im new to javascript so this could be a simple change for someone with more knowledge then my self. the webpage is built with ASP.Net Thanks in Advance I am very new to js. I have a jquery plugin that is a live countdown timer and I would like to modify it. Can someone tell me how to modify the code below so that the date is 20 minutes from right now (currently it is set as 26 January 2013). Code: <script type="text/javascript"> $(function () { var austDay = new Date(); austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26); $('#defaultCountdown').countdown({until: austDay}); $('#year').text(austDay.getFullYear()); }); </script> I have a question about the implicit behavior of textNode.data I have someElement.childNodes[0].data += 'some char' The text node has already been initialized with a string value, say 'x' so, what happens is the textNode.data is then XXsome char. This seems to imply that the existing data is getting copied into the result of += When I use just: someElement.childNodes[0].data = 'some char' 'x' is already the I get xsome char; BUT: I am doing a calculator that will display a string representation of a simple calculation in a manner that allows the user to modify the string before it is commited to processing. So, there must be accomadation for a decimal fraction. E.G. .0234 When the decimal is entered first, the rest of the chars are added properly but the decimal gets duplicated when it should not. This last could very well be a code problem I would have to find and correct, the the += problem is not. I don't understand how to use the [icode] or [code] tags: apparently not literally thanks for time and attention JK Hi I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside. I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like - Code: Object.disabled { function set() { this.readOnly = value; } function get() { return this.readOnly; } } then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way? I have the following code for an embed that I would like to add to my site. However, the embed is too large for the box I am trying to put it in on my social network. I tried to add height/width parameters, but it did not work. Is there a way to modify the size? Thanks!!! <div id="wb-9ez75d"></div><script type="text/javascript" src="http://flockdraw.com/embed/9ez75d"></script> Hi guys, For some reason the following code is not working. Anybody see any issues? By default the style of #pricea in my stylesheet is visibility="hidden"; Code: <script type="text/javascript"> function arrow(boxName){ document.getElementById(boxName).style.visibility = "visible"; } </script> <?php if($_REQUEST['sort']=="price" && $_REQUEST['order']=="ASC"){ ?> <script type="text/javascript"> arrow('pricea'); </script> <?php }?> |