|
JavaScript - Implementing Javascript Map In A Wordpress Page
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 Similar TutorialsI'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! Okay, 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. Hey, I need some help with a javascript code. The code works fine in a HTML editor but produces this error, "HTTP method GET is not supported by this URL" in WordPress. Problem: I can't get this URL: https://www.geonlineapply.com/servlet/MCSGenericApp to function probably in WordPress. Any suggestions would be highly appreciated! Here's the HTML code: <SCRIPT language=javascript>function callSubmit() { document.frmApplicationTermsCond.submit(); } </SCRIPT> <FORM name=frmApplicationTermsCond action=https://www.geonlineapply.com/servlet/MCSGenericApp method=post target="_blank"> <INPUT type=hidden value=N name=MCSCLIENTTEST> <INPUT type=hidden value=OR name=PRODUCTCODE> <INPUT type=hidden value=03 name=GROUPCODE> <INPUT type=hidden value=1290800802 name=MERCHANTNUMBER> <INPUT type=hidden value=http://www.hrirrigation.com name=HOMEURL> <INPUT type=hidden value=TC name=OPERATION> <INPUT type=hidden value=I name=ORIGINATIONCODE> <INPUT type=hidden value=N name=CALLBACKCODE> <INPUT type=hidden value=00 name=FRAMESIZE> <INPUT type=hidden name=DEALERIMG1> <INPUT type=hidden name=DEALERIMG2> <INPUT type=hidden name=DEALERIMG3> <INPUT type=hidden name=BOTTOMFRAME> <INPUT type=hidden name=STORELOCATOR> <INPUT type=hidden value=3E name=APPROVALTEMPLATE> <INPUT type=hidden value=#FFFFFF name=BGCOLOR> <INPUT type=hidden name=DECLINEURL></FORM> <TABLE width="32%" align="center"> <TBODY> <TR> <TD width="100%" colSpan=2> <P align=center><A href="javascript:callSubmit()"><SPAN style="FONT-SIZE: 18px; COLOR: #cc0000">Apply Now hello folks, I start modding on a new theme, that wordpress theme got a javasript that flash news. see the website : Code: http://www.casapost.biz the problem is if i want to put any post or page, in that section, so I have to do it manually, so i have to put the HTML code. My Question is how can I change that probleme, in instead of coping HTML code, just to get post automatically from a category, So any post from that category will be showen as the news flash right now. the javaScript for that file is : Code: <div id="Featured">
<script type="text/javascript">
var delay = 5000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(234,250,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style="font: normal 11px Geneva, Arial, Helvetica, sans-serif; padding: 10px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>News 1</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit elit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros......<br><br>Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet nec, congue non, accumsan sit amet, lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.";
fcontent[1]="<b>News 2</b><br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris eros semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maec at nisl. ullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante ui, aliquet neccon non, accumsan sit amet, lectus. Mauris et mauris. Duis sed assa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquamit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, ec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallist, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. ullam lorem mi......";
fcontent[2]="<b>News 3</b><br><br> Flash Info</a>";
closetag='</div>';
var fwidth='672px'; //set scroller width
var fheight='176px'; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);
}
}
/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid #282828; background: #ffffff; width:'+fwidth+';height:'+fheight+'"></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
</div>
Thank you, any help is welcome, i'm noob to this world Hello, I'm trying to change the background image with a mouseover function on the menu (Center Consoles, etc.). Here's my the page I'm working on (Boats | Striper Boats) When you hover on Center Consoles> 200CC, the background image should change. What am I doing wrong?? My Wordpress template uses this php code to call the background image: PHP Code: <?php /* #Start the Loop ======================================================*/ if (have_posts()) : while (have_posts()) : the_post(); ?> <?php /* #Get Fullscreen Background ======================================================*/ $pageimage = get_post_meta($post->ID,'_thumbnail_id',false); $pageimage = wp_get_attachment_image_src($pageimage[0], 'full', false); ag_fullscreen_bg($pageimage[0]); ?> and here is my code for the Javascript I set up to get the mouseover function and to set up the menu: PHP Code: <script language="JavaScript"> var backImage = new Array(); // don't change this // Note how backImage[3] = "" -- which would // set the page to *no* background image. backImage[0] = "http://takeitto11.com/striper2015/wp-content/uploads/2014/10/Striper_HPS_1500x150010.jpg"; backImage[1] = "22.jpg"; backImage[2] = "33.jpg"; backImage[3] = ""; // Do not edit below this line. //----------------------------- function changeBGImage(whichImage){ if (document.body){ document.body.background = backImage[whichImage]; } } </script> <div class="contentarea"> <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'>Center Consoles</a> <ul> <li class='sub'><a class="rollover" href="http://takeitto11.com/striper2015/portfolio/2oo-cc/" onMouseOver="javascript:changeBGImage(0)">200 CC</a></li> <li class='sub'><a class="220CC" href='#'>220 CC</a></li> <li class='sub'><a class="2605CC" href='#'>2605 CC</a></li> </ul> </li> <li class='has-sub '><a href='#'>Dual Consoles</a> <ul> <li class='sub'><a class="200DC" href='#'>200 DC</a></li> <li class='sub'><a class="220DC" href='#'>220 DC</a></li> </ul> </li> <li class='has-sub '><a href='#'>Walk Arounds</a> <ul> <li class='sub'><a class="200WA" href='#'>200 Walk Around</a></li> <li class='sub'><a class="220WA" href='#'>220 Walk Around</a></li> <li class='sub'><a class="2601WA" href='#'>2601 Walk Around</a></li> <li class='sub'><a class="2901WA" href='#'>2901 Walk Around</a></li> </ul> </li> </div> <div class="clear"></div> </ul> For some reason it's not working. I've already tried jQuery and that ended up with some weird results, please help!! I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category: PHP Code: <li> <?php if (in_category(3) ) { ?> <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(4) ) { ?> <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? }elseif (in_category(7) ) { ?> <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } else { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> <? } ?> </li> Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line: PHP Code: <?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?> I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered. I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this? how do i make a wordpress website with tabs to different sub-sections without changing pages, its almost seems like an iframe... example: http://www.alexa.com/siteinfo/google.com [look at the tabbing, and how it doesn't change URL] how can i make it like this using wordpress? is there a plugin? also, i need something that will make an iframe for me [of another website] but make it impossible to click or right-click, BUT can scroll. is there some type of plugin for wordpress that can help me do that? [so i can customize the template of the iframe and the page the holds the iframe] 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>
Hi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya 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 don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. hello guys the idea is to make "offline" bill of lading i used to do php thing and well this time i only need to kinda make bill of lading generator so i want to pass value from page 1 to page 2 and to page . all offline without web server interaction i was never fluent in javascript and i wanted to get a quick start from you guys how do i pass the form ( javascript variable from 1 page to another page ) i am googling this as well right now and hoping answer from codingforums thanks http://www.ebay.com/ctg/NorthPoint-N...1&_rptype=4295 At the above URL if you scroll down the page a little bit on the left bottom of the site you will see a image appear with an up arrow. If you click it it takes you to the top of the page. Could someone give directions on installing this script on a website. I would like to add this feature to my website. Thanks in advance for the help All, Does anyone have any examples or links of some free Javascript code that will turn the pages of your website when you click the mouse and drag the "page"? Thanks in advance for any ideas! The website I'm updating is peachbasketonline.com. I am not the original web designer. I'm trying to reach an install page that is located in the directory, but anytime I go to a page outside of the site navigation (i.e. part of site navigation: About Us works fine, versus a page outside of site navigation: peachbasketonline.com/anythingelse) it automatically takes you back to the home page. Is there enough info here for someone to tell me if javascript is doing this? I just don't know what I'm looking for. I have a tab that scrolls through images in a frame through javascript. It works in one page, but not the other. I'm trying to get the page not working to work, obviously. I also have checked and temporarily fixed validation errors, and that doesn't help. Working page: www.happydogwebproductions.com Same images in different page: http://www.happydogwebproductions.co...--css-websites I've been trying the "BDirect lists" on both pages. Java: "new SimpleSlide". Just when I think I am close, I can't get it to work. Going mental. Thanks for any help |
|||||||