|
JavaScript - Is This Fancybox In Adapted Form Or Something Else?
Hello!
I am not sure if I'm posting in the right place so if I'm not, tell me to gtfo (and please let me know where I should be instead)! I want to create a gallery of images with a fancybox-esque style but incorporate the "folder functionality" that this site has: http://www.johannespescatore.com/ In other words: When I click on an image I want it to expand to "fullscreen". (This I can manage with fancybox.) What I can't work out how to do is display more images from the same photo-session at the bottom of the fullscreen. ANY help would be much appreciated! I am at a loss as where to start... Thank you /Hout Similar Tutorialsplease see http://bit.ly/i5TwmL for what I am working on. You can see that when selecting 'Contact' from the top navigation a light-box (fancybox) with a contact form opens, this form can be filled and when the submit button is pressed the content of the form is emailed to myself. However.... The 'Thank you message' is not appearing in the light-box as I would like it to and I cannot work out how to do this. Any suggestions muchly appreciated! Hi, Does anyone know if in FancyBox there is an option to always show the side arrows on image pop ups? http://fancybox.net/ Hi, I am using fancybox to display a contact form in a lightbox here http://bit.ly/i5TwmL this is working in Firefox and Safari but not in IE, I have no idea why. If anyone has any suggestions on how to get this to work it will be more than appreciated! Many Thanks, Ria Does anyone have a solution? The first image works fine, but obviously when the image is changed by the second function it will not work???? Code: <script type="text/javascript">
jQuery(document).ready(function(){
$("a#single_image").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<div class="hidden">
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var large = $(this).attr("title");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<a href="' + large + '" id="single_image"><img src="' + image + '"/></a>');
return false;
});
});
</script>
I am creating a site that has a link with sIFR text that links into inline content via Fancybox. I know it works properly withour sIFR on, so the two are battling. Is there any way to have both?? url: www.happydogwebproductions.com/cadillac The contact link is supposed to pop up via fancybox. You can get it to load if you are quick enough to click it before sIFR kicks in. I've tried asking elsewhere, got over 100 views and not one reply. Any help would be greatly appreciated Hey there, I have a form which open in a jQuery Fancybox Window. The fancybox window opens automatically when the page loads. When it loads, I would like it to set focus on the username field in the form in the Fancybox window. I have found that this must be done when fancybox is envoked, thus I have tried the below code which does not work : Code: <script type="text/javascript">
jQuery(document).ready(function() {
$("#hidden_link").trigger('click');
document.getElementById('login_form.username').focus();
});
</script>
The form name is "login_form" and the field name is "username". Can anyone help???? Thanks a lot!!! Hey everyone, I've got a section on my website where I have 2 images placed on top of each other when the user rollovers the image, the image ontop fades out revealing the image underneath. You can then click on this underneath image to open a fancybox window and scroll through pictures. My problem is that sometimes the fade out gets 'stuck' and after closing the fancybox window, the image reamins half faded out etc and the rollover doesn't work anymore. here's my code: Code: <style type="text/css" media="screen">
.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0
</style>
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('#show').show();
$('tr td a.c').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
</script>
<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
<div class="visible-image">
<img src="images/illustrationslabel.jpg" />
</div>
<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
</div>
</div>
mc All, I'm opening up a page using Fancybox: Code: $("#register_box").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'hideOnOverlayClick': false,
/*'type' : 'iframe',*/
'autoDimensions' : true
});
This works fine and opens up my registration page. However when I have the type commented it won't display my reCaptcha. If I uncomment this in my jQuery then it will display the reCaptcha. Any ideas to why this is? Thanks in advance for any ideas. I did find this link: http://www.warpturn.com/using-fancybox-with-recaptcha/ This doesn't help me though because I need it to load without the iFrame but could give some direction on what is going on. Hi, im using this code as a fancybox replacement for confirm. Code: function fancyAlert(msg) {
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"
});
}
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
modal : true,
content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
onComplete : function() {
jQuery("#fancyConfirm_cancel").click(function() {
ret = false;
jQuery.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
onClosed : function() {
callback.call(this,ret);
}
});
}
function fancyConfirm_text() {
fancyConfirm("Ceci est un test", function(ret) {
alert(ret)
})
}
how can i use fancyConfirm via an onclick in a hyperlink? thanks for your help! I have a page that loads a fancybox popup and it works perfectly with the cookie for setting ho many days to show. the problem i have is that i need it to show 1 every 24 hours over a 3 day period. once the 3rd day is over and the user sees the window for the 3rd day i need a cookie set to never show the window again. here is my code as it sits now. I have worked with this for a couple of days on and off and it is above my head for sure. any help is appreciated. $(function() { if ($.cookie('moment_comm')) { // it hasn't been 1 day yet } else { $("#autostart").fancybox({'overlayShow':true,frameWidth: 840,frameHeight:360}).trigger('click'); } } ); $('#autostart').live('click', function(e) { e.preventDefault(); $.cookie("moment_comm", "true", { path: '/', expires: 1 }); $.fancybox.close() }); Hello, I am building a charirty website and having a great deal of trouble with a page that has a Piecemaker slideshow and a fancybox modal window. When you click on the modal window it launches correctly, but it is also displaying the Piecemaker slideshow over the top of it. What I want is for the Piecemaker slideshow to flow as it is on the page and when you click on the link for the Modal window, for just the modal window to open (hope that makes sense) the web page is : www.imovecornwall.org/index.htm the html for the page is: <title>imove estate agents cornwall, not for profit low cost online estate agents</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.css" /> <link rel="stylesheet" href="fancybox_multiple/fancybox/style.css" /> <script type="text/javascript"> $(document).ready(function() { $("a.pop").fancybox({ 'overlayColor' : '#000', 'overlayOpacity' : 0.8 }); $("a.pop2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); }); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-10061181-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); function FP_changePropRestore() {//v1.0 var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i]; if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; } } function FP_changeProp() {//v1.0 var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x; d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array(); x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x; if(s) eval(s+"=v"); } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } function FP_swapImgRestore() {//v1.0 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) { var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } doc.$imgSwaps=null; } } function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } </script> </head> <body background="images/bg.gif" onload="FP_preloadImgs(/*url*/'images/redbadge.png')"> <div style="position: absolute; width: 1001px; height: 606px; z-index: 2; left: 92px; top: 190px" id="layer2"> <div style="position: absolute; width: 566px; height: 44px; z-index: 1; left: 414px; top: 676px" id="layer9" align="right"> <font face="Trebuchet MS" size="1">Copyright 2011 . imove cornwall . not for profit estate agents in cornwall . a community lead social enterprise</font><p><font face="Trebuchet MS" size="1"> imove estate agents cornwall, cornwall estate agents, imove cornwall, imove, i move, not for profit estate agents, estate agents in cornwall, houses for sale in cornwall, sell privately, private house sales cornwall, i move cornwall, i move estate agents</font></div> <img border="0" src="images/c-head.png" width="980" height="40"><div style="position: absolute; width: 420px; height: 415px; z-index: 2; left: 0px; top: 40px; border-left: 1px solid #DEDBD2; border-right: 1px solid #DEDBD2" id="layer10" align="left"> <div style="position: absolute; width: 1001px; height: 100px; z-index: 1; left: -2px; top: 495px" id="layer11"> <a title="click here for information about imove estate agents" href="about/index.htm"> <img border="0" src="images/_front-small_2.png" width="327" height="135" alt="imove estate agents cornwall"></a><a href="search.htm"><img border="0" src="images/_front-small2_blank3.png" width="324" height="135"></a><a href="sell.htm"><img border="0" src="images/_front-smallr_blank.png" width="330" height="135"></a></div> <p align="center"> <object classid="clsid27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="978" height="495"> <param name="movie" value="piecemaker.swf"> <param name="quality" value="High"> <embed src="piecemaker.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="978" height="495"></object> </div> <address> <a href="sell.htm"> <img border="0" src="resized_png_images/head_new_template.png" width="980" height="416"></a></address> <address> </address> <address> </address> </div> <div style="position: absolute; width: 191px; height: 227px; z-index: 1; left: 93px; top: 11px" id="layer1"> <p align="center"> </p> <address align="left"> <img border="0" src="images/logo_2_72dpi_small.png" width="177" height="176"></address> <address align="center"> </address> <p align="left"> </p> <p align="center"> </div> <div style="position: absolute; width: 116px; height: 121px; z-index: 4; left: 1020px; top: 34px" id="layer36"> <a title="Click here to sell with imove" href="sell.htm"> <img border="0" src="images/bluebadge.png" width="133" height="133" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/redbadge.png')"></a></div> <p align="center"> </p> <div style="position: absolute; width: 171px; height: 58px; z-index: 3; left: 327px; top: 61px" id="layer33"> <a class="pop" href="resized_png_images/modal1.png" rel="group1"> <img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a><address> <span style="font-style: normal"><font face="Myriad Pro" size="1"> </font></span></address> <address> <span style="font-style: normal"><font face="Myriad Pro">Not for profit</font></span></address> </div> <div style="position: absolute; width: 225px; height: 58px; z-index: 3; left: 522px; top: 61px" id="layer34"> <address> <span style="font-style: normal"> <a class="pop" href="resized_png_images/modal2.png" rel="group1"> <img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address> <address> <font size="1"><span style="font-style: normal"> </span></font></address> <address> <span style="font-style: normal"><font face="Myriad Pro">Cost effective</font></span></address> </div> <div style="position: absolute; width: 282px; height: 58px; z-index: 3; left: 721px; top: 61px" id="layer35"> <address> <span style="font-style: normal"> <a class="pop" href="resized_png_images/modal3.png" rel="group1"> <img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address> <address> <font size="1"><span style="font-style: normal"> </span></font></address> <address> <span style="font-style: normal"><font face="Myriad Pro">Supporting local good causes</font></span></address> </div> <p align="center"> </p> <p align="center"> </p> <div style="position: absolute; width: 657px; height: 50px; z-index: 3; left: 262px; top: 194px" id="layer13"> <div style="position: absolute; width: 130px; height: 44px; z-index: 1; left: 679px; top: 1px" id="layer14"> <a title="Join us on Facebook" href="http://www.facebook.com/pages/Truro-United-Kingdom/Imove-cornwall/121184304626633"> <img border="0" src="FaceBook-icon.png" width="33" height="33"></a> <img border="0" src="Twitter-icon.png" width="33" height="33"> <img border="0" src="Feed-icon.png" width="33" height="33"></div> <p><font face="Myriad Pro"> <a title="Back to the Homepage" href="index.htm" style="text-decoration: none"> <font color="#000000" id="id1" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id1',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> home</font></a> <a title="About imove" style="text-decoration: none" href="about/index.htm"> <font color="#000000" id="id2" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id2',1,'style.textDecoration','underline','style.color','#000000','style.fontFamily','Myriad Pro','style.fontSize','12pt')"> about</font></a> <a title="Property for sale with imove" href="search.htm" style="text-decoration: none"> <font color="#000000" id="id3" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id3',1,'style.textDecoration','underline','style.color','#000000','style.fontSize','12pt','style.fo ntFamily','Myriad Pro')"> property search</font></a> <a title="Sell your property with imove" href="sell.htm" style="text-decoration: none"> <font color="#000000" id="id4" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id4',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> sell your property</font></a> <a title="Support for existing customers of imove" href="support.htm" style="text-decoration: none"> <font color="#000000" id="id5" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id5',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> support</font></a> <a title="Contact imove cornwall" href="contact.htm" style="text-decoration: none"> <font color="#000000" id="id6" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id6',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> contact us</font></a></font></div> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> </body> </html> PLease bear with me as I am a total newb to HTML and Jquery. If someone could very kindly tell me where the problem is, I would very very much appreciate it. Thank you for your time. I'm using a simple PHP login script (this one: http://www.zubrag.com/scripts/password-protect.php) in tandem with Fancybox (he http://fancybox.net/). The Fancybox pop-ups on my pages use iframes, to hold written content and links. When I log in once, I can access all the regular HTML pages inside the login script without having to log in again. But when I click Fancybox's pop-up links, the pop-up is logged OUT. How can I make all the iframe pop-ups stay logged in when the user is logged in? Thanks for any help, much appreciated. Hello guys! I have a jquery fancybox that pop's up on exit (using onbeforeunload), now i want it to show only once so i tried doing it with cookies but i just can get it to work. this is my script so far hope you can help me with this, Thanks! Code: <script type="text/javascript">
function PopIt()
{
if (document.cookie.length == 0)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+7);
document.cookie="cook=yes" + ";expires="+exdate.toUTCString();
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Before you leave:\nPlease take a few seconds to answer 2 questions\nso we can better assist you and others in the future. \nThanks!";
}
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
</script>
http://www.earthinke.co.uk/main_site/product.php Hi I'm trying to get something to work on the site URL'd above but failing miserably. If you can please follow the link, hit the red rectangle on the RHS and then when the bigger image loads into the DIV above, click on it... All I want is for this link to open in fancybox (using the class="earthInke") but it won't work from the image...just opens in a new page Below it you will see a text link, this works as I want it to, but I cannot get it work from the image Probably something completely wrong in what I am doing or I've missed something out, any help would be appreicated guys Thanks Pete All, I've got the following bit of code: Code: $(function(){
$(".facebook").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnOverlayClick' : false,
'hideOnContentClick' : false,
'type' : 'iframe'
});
});
When I click on a link I'm trying to open up an iFrame to have my user have some facebook photos be displayed. If they aren't logged in I redirect them to facebook to login and then facebook redirects them back to my page. The return URL looks something like: http://website.com/get_started.php?page=facebook What I would like to do is open up the same iFrame now with their pictures. So I have the following code to do that: Code: function showFacebook(){
alert("goes to show facebook");
$(".facebook").trigger('click');
}
function parseQS(str){
var ob={}, float="", key="", dc=decodeURIComponent;
for( var i=0, mx=str.length; i<mx;i++){
var it=str[i];
if(it==="="){ key=float; float=""; continue;}
if(!it.search(/^[?&]/)){
if(it==="&" && str.slice(i+1,i+5)==="amp;"){ i=(i+4);float+="&"; continue;}
if(key){ob[key]=dc(float);} key=""; float=""; continue;
}
float+=it;
}
ob[key]=dc(float);
return ob;
}
$(window).load(function(){
var allParams=parseQS(location.href);
if(allParams.page!=undefined){
if(allParams.page=="facebook"){
$(".facebook").fancybox({
'width' : '80%',
'height' : '80%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'hideOnOverlayClick' : false,
'hideOnContentClick' : false,
'type' : 'iframe'
});
showFacebook();
}
}
});
I can't get the iFrame to load again. In my window.load function I'm basically trying to reinitialize the fancybox iframe code and then based on the link he http://fancybox.net/blog I'm trying to trigger it again. The alert appears so I know it's getting to the function but it's not opening up the iFrame. Any ideas on how to make this happen? Thanks very much in advance! Hi, I'm new at this stuff, like, super new. Basically, I want to call Fancybox to open a youtube video in a scrolling gallery. I think it's pretty simple to do but so far I can only get it to open when it is specifically clicked on and not part of the scrolling gallery. I think I need a different thing besides "click" to call the function but I have no idea what. For you pros, this should be easy (I hope). Please help! Code: $(document).ready(function() {
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'swf' : {'mode':'transparent'}
});
$("a#p20").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {'allowfullscreen':'true'}
});
return false;
});
});
This is my HTML Code: <a rel="example_group" href="images/portfolio/crapbooking.jpg"><img alt="" src="images/portfolio/crapbooking_thumb.jpg" /></a>
<a rel="example_group" href="images/portfolio/acuppakoko.jpg"><img alt="" src="images/portfolio/acuppakoko_thumb.jpg" /></a>
<a id="p20" rel="example_group" href="http://www.youtube.com/watch?v=GaidsWnSOz0"><img alt="" src="images/portfolio/hongkong_thumb.jpg" /></a>
Thoughts? I moved this to a more appropriate place... http://www.codingforums.com/showthread.php?t=184432 Hi there, I can;t figure out where to change the code/add in code I have installed Fancybox using jQuery and done all the neccessary steps to ensure it works as popup. However I can't find where to add in code/edit code to make my title left for instance or bold type etc. This is the code that calls the fancybox website is: http://www.soltoro.com/NEW/projects/elrayo.html Code: <script> $(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox({
'titlePosition': 'inside'
});
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'titlePosition' : 'inside',
'overlayShow' : false
});
});</script>
Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
|
|||||||