JavaScript - Implementing Javascript Popups
I'm trying to do what they are saying at this link:
http://blogs.sitepoint.com/perfect-pop-up/ First, they tell me to do what is listed under the "Scripting Disabled" section: <a href="file.htm" onclick="window.open('file.htm'); <br> return false;" rel="nofollow" target="newWin"> Then, down in the page in the "The Perfect Pop-Up Script" section it has a large script for me to use. I'm wanting to use it at my page http://www.best-stock-trading-system...ng-system.html I want to make each of my images pop up windows like at this site: http://www.polyvore.com/cgi/shop?query=shoes So, are they telling me to use the html in both sections? Where would I put the html in the top section vs. the script in the lower section? Do I have to make another webpage and just paste the script in there and then call it, like they say below: "To call the function you would use the following code:" <a href="my-pop-up-window.htm" <br> onclick="popUp(this.href,'console',400,200);return false;" <br> rel="nofollow" target="_blank">This is my link</a> I'm a bit confused where I am supposed to inserting the page name for the popup that I want to pop up vs inserting the pagename for the script page that I guess I have to make. So what are the steps that I would take to do all of this?! Thank you for your help! Similar TutorialsOkay, so I'm a noob when it comes to JavaScript. I can write the most basic codes but even then it really doesn't make sense. On my website I am trying to implement a JavaScript slideshow from this website: http://nivo.dev7studios.com/ I do everything as it says, but the images don't even show up. Here is a link to my website where the problem is, you can view the source to see my xhtml code (please note my site isn't even close to being done.): http://thegraphicfaction.host56.com/ The slideshow should be showing up in a right next to where it says "Design is our Passion." Here is the code for the slideshow which the site I got the script said to do: Code: <div id="slider"> <img src="Assets/slideshow_assets/stereosound.jpg" alt="" title="Business Card design for StereoSound." /> <img src="Assets/slideshow_assets/triflex.jpg" alt="" title="Logo design for TriFlex Labs." /> </div> Here are both of the CSS files that the slideshow uses: nivo-slider.css: Code: /* * jQuery Nivo Slider v2.0 * http://nivo.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-controlNav { position:absolute; left:47%; bottom:-30px; } .nivo-controlNav a { display:block; width:10px; height:10px; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:-10px 0; } .nivo-directionNav a { display:block; width:32px; height:34px; background:url(arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-32px 0; right:10px; } a.nivo-prevNav { left:10px; } custom-nivo-slider.css Code: /* * Note: Include the nivo-slider.css file that comes * with the main download before including this file. */ #slider { position:relative; margin:30px 30px 60px 30px; background:#202834 url(loading.gif) no-repeat 50% 50%; -moz-box-shadow:0px 0px 10px #333; -webkit-box-shadow:0px 0px 10px #333; box-shadow:0px 0px 10px #333; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; } .nivo-controlNav { position:absolute; left:47%; bottom:-30px; } .nivo-controlNav a { display:block; width:10px; height:10px; background:url(bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:-10px 0; } .nivo-directionNav a { display:block; width:32px; height:34px; background:url(arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-32px 0; right:10px; } a.nivo-prevNav { left:10px; } my page's xhtml: Code: <!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"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- InstanceBeginEditable name="doctitle" --> <title>The Graphic Faction - Home</title> <!-- InstanceEndEditable --> <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script> <link rel="stylesheet" href="css/nivo-slider.css" /> <link rel="stylesheet" href="css/custom-nivo-slider.css" /> <!-- InstanceEndEditable --> <link rel="shortcut icon" href="Assets/favico_16x16.ico" /> <link rel="stylesheet" href="css/main_css.css" /> <script type="text/javascript" src="js/jquery.js"></script> </head> <body style="margin: 0; padding: 0; background-color: #c4c4c4;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: #373737; height: 20px;"> </td> </tr> <tr> <td style="background-color:#606060; height:1px;"> </td> </tr> <tr> <td style="background-color: #181818; height: 175px;"> <table width="100%" cellpadding="0" cellspacing="0"> <tr style="height:175px;"> <td style="width:25px"> </td> <td align="center" style="width: 200px;"> <a href="index.html"> <img src="Assets/GF_main_logo.png" width="164" height="139" alt="GF" style="border: none;" /> </a> </td> <td> <table cellpadding="0" cellspacing="20" style="float:right"> <tr> <!-- InstanceBeginEditable name="menu_links" --> <td style="height:35px; width:75px; text-align:center; background-image:url(Assets/menu_bg_small.png); background-repeat:no-repeat;cursor:pointer;cursor:hand" onclick="document.location.href='index.html';"><a href="index.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Home</a></td> <td style="height:35px; width:75px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_small.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='about.html';"><a href="about.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">About</a></td> <td style="height:35px; width:87px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_large.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='services.html';"><a href="services.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Services</a></td> <td style="height:35px; width:87px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_large.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='portfolio.html';"><a href="portfolio.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Portfolio</a></td> <td style="height:35px; width:87px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_large.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='contact.html';"><a href="index.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Contact</a></td> <td style="width:100px"></td> <!-- InstanceEndEditable --> </tr> </table> </td> </tr> </table> </td> </tr> <!-- InstanceBeginEditable name="header" --> <tr> <td style="background-color: #be1c1c; height:1px;"> </td> </tr> <tr> <td style="background-color: #921a1c; height:7px;"> </td> </tr> <tr> <td style="background-color: #6b1a1c; height:1px;"> </td> </tr> <tr> <td style="background-image:url(Assets/header_gradient.png); height: 300px; background-repeat:repeat-x; vertical-align:top"> <table> <tr> <td> <table width="470px" cellpadding="0" cellspacing="0" style="text-align:left;"> <tr> <td style="width:20px"> </td> <td style="width:450px;"> <img src="Assets/index_header_dpcl.png" alt="Design is our Passion, Creativity is our Life." height="112" width="448" style="vertical-align:top; text-align:center" /> </td> </tr> <tr> <td> </td> <td style="width:450px;"> <p style="text-align:justify; color: #340000;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet interdum rutrum. Ut pellentesque, justo in egestas rhoncus, diam magna semper odio, eu iaculis lacus ipsum cursus odio. Aenean sed lorem velit. Ut felis sapien, fringilla sed fermentum et, placerat non elit. Nam ante est, accumsan elementum viverra tincidunt, sodales ac metus. Suspendisse sed turpis felis. Suspendisse porta. <a href="#">Read More...</a> </p> </td> </tr> </table> </td> <td> <table width="100%"> <tr> <td style="width:50px"> </td> <td valign="top" style="width:112px"> <img src="Assets/vertical_divider.png" alt="vertical divider" height="250" width="112" style="vertical-align:top; text-align:left;" /> </td> <td> <div id="slider"> <img src="Assets/slideshow_assets/stereosound.jpg" alt="" title="Business Card design for StereoSound." /> <img src="Assets/slideshow_assets/triflex.jpg" alt="" title="Logo design for TriFlex Labs." /> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td style="background-color: #990000; height:1px;"> </td> </tr> <!-- InstanceEndEditable --> <tr> <td style="background-image:url(Assets/shadow.png); background-repeat:repeat-x; vertical-align:top;"> </td> </tr> </table> <!-- InstanceBeginEditable name="Body1" --> <p>BODY</p> <!-- InstanceEndEditable --> </body> <!-- InstanceEnd --></html> and finally the javascript for the nivo slider (jquery.nivo.slider.pack.js): Code: /* * jQuery Nivo Slider v2.0 * http://nivo.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * May 2010 - Pick random effect from specified set of effects by toronegro * May 2010 - controlNavThumbsFromRel option added by nerd-sh * May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski * April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk) * March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk) */ eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1f.1q=9(1X){b 3=$.2i({},$.1f.1q.2c,1X);I g.E(9(){b 4={f:0,t:\'\',U:0,o:\'\',N:m,1k:m,1N:m};b 5=$(g);5.1S(\'7:4\',4);5.e(\'2h\',\'2g\');5.1n(\'1q\');b d=5.2j();d.E(9(){b j=$(g);b 1p=\'\';6(!j.K(\'B\')){6(j.K(\'a\')){j.1n(\'7-2k\');1p=j}j=j.1g(\'B:1s\')}b 1c=j.w();6(1c==0)1c=j.s(\'w\');b 1d=j.x();6(1d==0)1d=j.s(\'x\');6(1c>5.w()){5.w(1c)}6(1d>5.x()){5.x(1d)}6(1p!=\'\'){1p.e(\'P\',\'1h\')}j.e(\'P\',\'1h\');4.U++});6(3.1a>0){6(3.1a>=4.U)3.1a=4.U-1;4.f=3.1a}6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');2b(b i=0;i<3.h;i++){b G=X.27(5.w()/3.h);6(i==3.h-1){5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:(5.w()-(G*i))+\'13\'}))}n{5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:G+\'13\'}))}}5.J($(\'<C z="7-H"><p></p></C>\').e({P:\'1h\',y:3.1Y}));6(4.t.s(\'16\')!=\'\'){$(\'.7-H p\',5).1y(4.t.s(\'16\'));$(\'.7-H\',5).1x(3.q)}b l=0;6(!3.1i&&d.1j>1){l=1v(9(){F(5,d,3,m)},3.1m)}6(3.T){5.J(\'<C z="7-T"><a z="7-2a">2f</a><a z="7-29">2m</a></C>\');6(3.2d){$(\'.7-T\',5).24();5.25(9(){$(\'.7-T\',5).2l()},9(){$(\'.7-T\',5).24()})}$(\'a.7-2a\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')});$(\'a.7-29\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')})}6(3.M){b 1b=$(\'<C z="7-M"></C>\');5.J(1b);2b(b i=0;i<d.1j;i++){6(3.20){b j=d.1B(i);6(!j.K(\'B\')){j=j.1g(\'B:1s\')}6(3.1Q){1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'11\')+\'" 28="" /></a>\')}n{1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'D\').2n(3.1R,3.1P)+\'" 28="" /></a>\')}}n{1b.J(\'<a z="7-1l" 11="\'+i+\'">\'+i+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\');$(\'.7-M a\',5).1J(\'1I\',9(){6(4.N)I m;6($(g).2e(\'1o\'))I m;S(l);l=\'\';5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');4.f=$(g).s(\'11\')-1;F(5,d,3,\'1l\')})}6(3.1M){$(2q).2A(9(1L){6(1L.1Z==\'2C\'){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')}6(1L.1Z==\'2D\'){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')}})}6(3.1T){5.25(9(){4.1k=Q;S(l);l=\'\'},9(){4.1k=m;6(l==\'\'&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}})}5.2E(\'7:Z\',9(){4.N=m;$(d).E(9(){6($(g).K(\'a\')){$(g).e(\'P\',\'1h\')}});6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}6(l==\'\'&&!4.1k&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}3.1U.1z(g)})});9 F(5,d,3,19){b 4=5.1S(\'7:4\');6((!4||4.1N)&&!19)I m;3.1W.1z(g);6(!19){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}n{6(19==\'1C\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}6(19==\'1A\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}}4.f++;6(4.f==4.U){4.f=0;3.1V.1z(g)}6(4.f<0)4.f=(4.U-1);6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6(3.M){$(\'.7-M a\',5).2F(\'1o\');$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\')}6(4.t.s(\'16\')!=\'\'){6($(\'.7-H\',5).e(\'P\')==\'1w\'){$(\'.7-H p\',5).22(3.q,9(){$(g).1y(4.t.s(\'16\'));$(g).1x(3.q)})}n{$(\'.7-H p\',5).1y(4.t.s(\'16\'))}$(\'.7-H\',5).1x(3.q)}n{$(\'.7-H\',5).22(3.q)}b i=0;$(\'.7-c\',5).E(9(){b G=X.27(5.w()/3.h);$(g).e({x:\'O\',y:\'0\',W:\'V(\'+4.t.s(\'D\')+\') R-Y -\'+((G+(i*G))-G)+\'13 0%\'});i++});6(3.k==\'1t\'){b 10=2G 2B("1K","14","1F","17","1E","12","1D","1r");4.o=10[X.26(X.1t()*(10.1j+1))];6(4.o==2y)4.o=\'1r\'}6(3.k.2o(\',\')!=-1){b 10=3.k.2r(\',\');4.o=$.2z(10[X.26(X.1t()*10.1j)])}4.N=Q;6(3.k==\'2p\'||3.k==\'1K\'||4.o==\'1K\'||3.k==\'14\'||4.o==\'14\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'14\'||4.o==\'14\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'1G\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'2t\'||3.k==\'1F\'||4.o==\'1F\'||3.k==\'17\'||4.o==\'17\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'17\'||4.o==\'17\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'23\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1E\'||3.k==\'2u\'||4.o==\'1E\'||3.k==\'12\'||4.o==\'12\'){b u=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.k==\'12\'||4.o==\'12\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);6(i==0){c.e(\'1G\',\'O\');i++}n{c.e(\'23\',\'O\');i=0}6(v==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;v++})}n 6(3.k==\'1D\'||4.o==\'1D\'){b u=0;b i=0;$(\'.7-c\',5).E(9(){b c=$(g);b 1H=c.w();c.e({1G:\'O\',x:\'r%\',w:\'O\'});6(i==3.h-1){L(9(){c.A({w:1H,y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({w:1H,y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1r\'||4.o==\'1r\'){b i=0;$(\'.7-c\',5).E(9(){$(g).e(\'x\',\'r%\');6(i==3.h-1){$(g).A({y:\'1.0\'},(3.q*2),\'\',9(){5.18(\'7:Z\')})}n{$(g).A({y:\'1.0\'},(3.q*2))}i++})}}};$.1f.1q.2c={k:\'1t\',h:15,q:2x,1m:2w,1a:0,T:Q,2d:Q,M:Q,20:m,1Q:m,1R:\'.1O\',1P:\'2v.1O\',1M:Q,1T:Q,1i:m,1Y:0.8,1W:9(){},1U:9(){},1V:9(){}};$.1f.1e=[].1e})(2s);',62,167,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||child|effect|timer|false|else|randAnim||animSpeed|100|attr|currentImage|timeBuff||width|height|opacity|class|animate|img|div|src|each|nivoRun|sliceWidth|caption|return|append|is|setTimeout|controlNav|running|0px|display|true|no|clearInterval|directionNav|totalSlides|url|background|Math|repeat|animFinished|anims|rel|sliceUpDownLeft|px|sliceDownLeft||title|sliceUpLeft|trigger|nudge|startSlide|nivoControl|childWidth|childHeight|reverse|fn|find|none|manualAdvance|length|paused|control|pauseTime|addClass|active|link|nivoSlider|fade|first|random|50|setInterval|block|fadeIn|html|call|next|eq|prev|fold|sliceUpDown|sliceUpRight|top|origWidth|click|live|sliceDownRight|event|keyboardNav|stop|jpg|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbsSearch|data|pauseOnHover|afterChange|slideshowEnd|beforeChange|options|captionOpacity|keyCode|controlNavThumbs|left|fadeOut|bottom|hide|hover|floor|round|alt|nextNav|prevNav|for|defaults|directionNavHide|hasClass|Prev|relative|position|extend|children|imageLink|show|Next|replace|indexOf|sliceDown|window|split|jQuery|sliceUp|sliceUpDownRight|_thumb|3000|500|undefined|trim|keypress|Array|37|39|bind|removeClass|new'.split('|'),0,{})) Can anyone please help me figure this out? Any help is appreciated. If you need any more info just ask. I’ve recently bought a Javascript/xml map of the USA. After payment a zip archive could be downloaded that includes a .html file, a .js file and a css stylesheet. Instructions on how to set it up in wordpress were not included though. Basically it comes down to this: every state of the US is clickable. In the .html file the settings can be configured for each state, such as whether the state is active (clickable) or not, and where it should link to. This part i understand and i know how to configure the .html file. The problem is that i can’t implement it on a wordpress page due to my limited programming skills. I tried uploading the .js file in my wp-content folder, and copying the code from index.html to a new page (note that i didn't use the WYSIWYG editor but the HTML option) but it seems like the Javascript file doesn't load. Any help would be greatly appreciated Screenshot of how the map looks like when i open the .html file in my browser (the map is working, i just can't get it to work in Wordpress) Screenshot of the files included in the zip file Thanks in advance I have 3 pop-ups on a particular page, but when I click any of the 3, they all show up as the same one (the 'form' one, whereas they should be 3 different ones). What do I need to change? Here is the 1st one (triggered by clicking 'Pre-purchase pest inspections'): <SCRIPT language="JavaScript"> function topWindow(){ popup = window.open("timberpest.html","timberpest","width=800,height=850,left=0,top=0,toolbar=no,location=no ,directories=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no,resizable=no"); } </SCRIPT> <li><a onmouseover="window.status='Pre-Purchase Timber Pest Inspections >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()">Pre-purchase pest inspections</a></li> Here is the 2nd one (triggered by clicking the image 'img7.jpg'): <SCRIPT language="JavaScript"> function topWindow(){ popup = window.open("form/form.html","form","width=700,height=1400,left=0,top=0,toolbar=no,location=no,directories=no,status=y es,menubar=no,scrollbars=yes,copyhistory=no,resizable=no"); } </SCRIPT> <td class="bg10"><div align="center"><a onmouseover="window.status='Request Form >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()"><img src="images/img7.jpg" alt="" width="177" height="345" border="0" /></a></div> And here is the 3rd one (triggered by clicking 'Read more...'): <SCRIPT language="JavaScript"> function topWindow(){ popup = window.open("About.html","about","width=778,height=650,left=0,top=0,toolbar=no,location=no,directori es=no,status=yes,menubar=no,scrollbars=yes,copyhistory=no,resizable=no"); } </SCRIPT> <a onmouseover="window.status='About Us >>';return true;" onmouseout="window.status='';" href="javascript:topWindow()">Read more...</a> Hey guys I'll try to do my best to explain what I want. Im using a self hosted wordpress and I want to add and image link in one of my sidebars. Code: Code: <a href="http://www.espn.com" target="_blank"> <img src="ahman.gif"> </a> So When someone click on the image I want a box to appear in same window with all the buttons above(facebook,twitter,Gplus,Digg,StumbleUpon ....(the script for the button is down there )) like that(I want A shadow also) http://oi42.tinypic.com/j0vi1i.jpg After that I want all the bookmarks to be done in this box and not in different window. After the bookmark is done I want to show a thank you message in this box Hope you guys Understood. I dont think is complicated but for me it is The bookmarking script is Here http://newsand-reviews.com/javascript.txt Thank million times for help. If you can help me even with half of this I'll be pretty happy I have a tracking ad at the bottom of my site. (no iframes). how do I know and/or prevent that tracking ad from popping up a popup? They are not suppose to, but I suspect they do. Is there a way to track this, or perhaps prevent them from popping the popup from within my page? I have access to various libraries, prototype/jquery etc.. so if there is a func/method in those, I could use too. I have developed one to one chat in asp.net. Now I wanted a gmail chat like feature in it. In left side of page, a list of online users should be available. When I click on a user, a new div should popup on right bottom corner with close and minimise buttons. When I click on another user , a second div should popup on right bottom corner of page but left to the first popup div. I want popping up of divs dynamically. The no of clicked users should decide the no of popped up divs. Also, for each division there should be a separate division ( inside the popped division ) whose innerhtml value is my chat text. And if three divs are popped up and if I close the second one, the third should get attach to first popup. Hope, you'll understand my requirements, and will provide a suitable code in javascript. I found this script while browsing a site: Code: <script language="JavaScript"> <!-- if(popUpsBlocked) alert('Our site uses Pop-Ups.\nPlease enable Pop-Ups for this website.'); } //--> </script> But when I added it to my site, it wont work. Discuss and find a soulution....... Hello. Im trying to put in a Popup printer-friendly page on my site. the Popup works great in Chrome and FireFox. It even works in IE - except im getting a black bg instead of the white i get in the other browsers. Also the print command is not working in Firefox or IE. Im running FireFox 8 and IE 9. heres the code for the Popup: Code: <script language="javascript" type="text/javascript"> <!-- function popitup(url) { newwindow=window.open(url,'name','height=200,width=150'); if (window.focus) {newwindow.focus()} return false; } // --> </script> </head> <div> <img src="IMAGES/BidsCouponSmall-text.png" /> <br /> <br /> <a href="printcoupon.htm" target="coupon" onclick="window.open('printcoupon.htm','coupon','height=500, width=400,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no'); return false;" >Click HERE To Print</a> <br /> </div> To avoid cluttering of this post, the page im having printing problems with can be found he http://bidsservice.net/printcoupon.htm its all html, css, and JS. no server-side code. I have several 'galleries' for each artist on my website. Clicking on each thumbnail opens a popup window with a larger image and details. It works fine on all the browsers except IE. What do I need to add/subtract/alter so that it works in IE? Tried to find the solution with the other threads, but without success. Here's the website: http://artsenses.co.uk I will be eternally thankful for any help! I'm a complete newbie so please excuse me if this is obvious. I'd like to have a drop down menu that pops up a small new window with an image. So for, every attempt results in the image appearing in a new tab instead of a small, pop up style window. Here's my form <select name="parms"> <option value="AirTemp.jpg">AirTemp</option> <option value="Humidity.jpg">Humidity</option> <option value="Windspeed.jpg">Wind Speed</option> </select> Many thanks. Hey guys, I am trying to put this code on a test website (below). How do I get it so that when I preview in browser, the javascript activates because at the moment it just shows a blank page. I have tried putting it in the <javascript> / <script> tags but nothing. Any advice appreciated var input = prompt("Insert Number"); for (i=1; i<=input; i++) { if (i % 3 === 0 && i % 5 === 0) { console.log("FizzBuzz"); } else if (i % 3 === 0) { console.log("Fizz"); } else if (i % 5 === 0) { console.log("Buzz"); } else { console.log(i); } Just trying to get a feel working with javascript, HTML and CSS. Hi All, Hoping somebody can help me with my implementation of the Nivo Slideshow on my website... I've been at it for a couple of days now and I'm just about ready to give up ( Here's my markup: Code: <div id="slider"> <img src="/images/Slide1.png" alt="" title="Dead Kool"/> <a href="http://dev7studios.com"><img src="/images/Slide2.png" alt="" title="Alex Kidd" /></a> <img src="/images/Slide3.png" alt="" title="Asteroids" /> </div> My CSS: Code: #slider { position:relative; width:620px; height:350px; background-image:url(../images/title.gif); background-position:-10px 30px; background-repeat:no-repeat; background-attachment:fixed; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(images/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(images/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { font-family:"Lucida Sans Unicode", "Lucida Grande"; } .nivo-caption a { color:#f71cac; text-decoration:underline; } Slider CSS: Code: /* * jQuery Nivo Slider v2.3 * http://nivo.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute; top:0px; left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0px; left:0px; width:100%; height:100%; border:0; padding:0; margin:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:99; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } The test site is here http://www.koolkiddclothing.com/Test I feel like I'm being dumb, but for some reason I just can't get it to work, so any help is good help... Hi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! I want to sort of MERGE this code Code: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script> <style type="text/css"> #container { text-align: center; } #imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; } #imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; } #imageBox br { clear: both; } #controls img { border: 0; } </style> <script> function moveToPrevious(){ new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal }); } function moveToNext(){ new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal }); } </script> </head> <body> <div id="container"> <div id="imageBox"> <div id="imageBoxInside"> <img src="C:/Users/L33508/Desktop/Images/sauce.jpg" /> <img src="C:/Users/L33508/Desktop/Images/fish.jpg" /> <img src="C:/Users/L33508/Desktop/Images/pizza.jpg" /> <img src="C:/Users/L33508/Desktop/Images/noodles.jpg" /> <img src="C:/Users/L33508/Desktop/Images/cover.jpg" /> <img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" /> <br/> </div> </div> <div id="controls"> <a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a> <a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a> </div> <div> </body> </html> into this one shown he Code: <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain" title="" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <script type="text/javascript"> function addSymbol(){ var map=OneMap.map; if(map.getLayer("symbolLayer")==null){ map.addLayer(gLayer); //dojo.connect(omap.map.infoWindow, "onShow", setInfoContent); map.infoWindow.resize(525,252); map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT); } gLayer.clear(); alert("Do you know where Peranakan food can be found?? Take a look here!!!!"); var stX = "23319.3347409758"; var stY = "28825.7191286444"; var pt= new esri.geometry.Point(stX,stY,map.spatialReference); //var strImage = "http://www.rw-designer.com/i/download48b.png"; var strImage = "images/museum.png"; var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25); var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"}; var infoTemplate = new esri.InfoTemplate(); infoTemplate.setTitle("Building Name:"); infoTemplate.setContent(getInfoContent); var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate); gLayer.add(graphic); } function setInfoContent(){ infoWindow.setContent(getInfoContent()); } function getInfoContent(graphic){ var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"}); var c1 = new dijit.layout.ContentPane({ region: "top", style: "height: 20px width: 100%", content: "hello Peranakan!! Here is a brief description" }); bc.addChild(c1); //make a tab container var tc = new dijit.layout.TabContainer({ region: "center", style: "height: 65%; width: 100%; " }, dojo.create("div")); //display attribute information var cp1 = new dijit.layout.ContentPane({ //style: " background-color: red; ", title: "<font color= #E4287C><b>1900 - 1930</font> ", content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>" }); tc.addChild(cp1); var cp2 = new dijit.layout.ContentPane({ title: "<font color= #E4287C><b>1931 - 1960</b></font>", content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>" }); tc.addChild(cp2); var cp3 = new dijit.layout.ContentPane({ //style: " background-color: red; ", title: "<font color= #E4287C><b>1961 - 1990</b></font> ", content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>" }); tc.addChild(cp3); var cp4 = new dijit.layout.ContentPane({ //style: " background-color: red; ", title: "<font color= #E4287C><b>1990 - 2011</b></font> ", content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>" }); tc.addChild(cp4); bc.addChild(tc); return bc.domNode; } dojo.addOnLoad(addSymbol); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 955px; height: 490px; margin: 0 0 0 0px;"> <div id="map" dojotype="dijit.layout.ContentPane" region="center" position="" style="height: 498px; width: 1004px; margin-left: 63px;" ></div> </div> </div> </asp:Content> I'm still new & learning, any kind souls willing to help me out? P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too? I am trying to implement a credit card check function in the validation script. But whenever i enable the function it bypasses all previous validation checks and just inputs the data, where am i going wrong with this function? Code: function CheckCreditCard(cardtype, cardnumber) { var frm = document.forms["OrderForm"]; if (cardtype == "Visa") { var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/; } else if (cardtype == "Master Card") { var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/; } else if (cardtype == "American Express") { var re = /^3[4,7]\d{13}$/; } if (!re.test(cardnumber)) return false; cardnumber = cardnumber.split("-").join(""); var checksum = 0; for (var i=(2-(cardnumber.length % 2)); i<=cardnumber.length; i+=2) { checksum += parseInt(cardnumber.charAt(i-1)); } for (var i=(cardnumber.length % 2) + 1; i<cardnumber.length; i+=2) { var digit = parseInt(cardnumber.charAt(i-1)) * 2; if (digit < 10) { checksum += digit; } else { checksum += (digit-9); } } if ((checksum % 10) == 0) return true; else sfm_show_error_msg('error message goes here'); return false; } HTML Code is: Code: <script language="JavaScript" type="text/javascript"> var frmvalidator = new Validator("OrderForm"); frmvalidator.EnableOnPageErrorDisplaySingleBox(); frmvalidator.EnableMsgsTogether(); frmvalidator.EnableFocusOnError(false); // other attributes went here but were removed frmvalidator.setAddnlValidationFunction("CheckCreditCard"); </script> FULL Javascript: Attached at a txt file, was too large to post here. Every time I try to use the notEmpty function with an onClick event, the validation stops working. I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well. Please help! I'm completely lost. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Date: 11/12/2014 Filename: validator.html Supporting files: None --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Validator</title> <script type='text/javascript'> function formValidator(){ // Make quick references to our fields var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var gpa = document.getElementById('gpa'); var phone = document.getElementById('phone'); // Check each input in the order that it appears in the form! if(isAlphabet(firstname, "Please enter only letters for your first name")){ if(isAlphabet(lastname, "Please enter only letters for your last name")){ if(gpaValidator(gpa, "Please enter a valid G.P.A.")){ if(phoneValidator(phone, "Please put a valid phone number")){ return true; } } } } return false; } // Functions that check values in input fields! function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function gpaValidator(elem, helperMsg){ var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function phoneValidator(elem, helperMsg){ var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } </script> </head> <body> <form onsubmit='return formValidator()'> <fieldset> <legend>Personal information:</legend><br /> First Name: <input type='text' id='firstname' /><br /> Last Name: <input type='text' id='lastname' /><br /> G.P.A.: <input type='text' id='gpa' /><br /> Phone Number: <input type='text' id='phone' /><br /> <input type='submit' value='Submit' /> </form> </body> </html> I am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. |