JavaScript - Jquery Newb Question
I have a form validation with an AJAX username check and it works perfectly on FF, but doesn't work in IE 9. I am a complete newb when it comes to Jquery and Javascript, so any help/suggestions would be greatly appreciated.
Jquery: Code: $('#username').bind('blur',function() { var formData = $('#register').serialize(); $.post('username.php',formData,processData).error('ouch'); function processData(data) { console.log(data); if (data=='pass') { if (! $('#fail').length) { $('#usernameavail').prepend('<p id=\"fail\">Username Is Available!</p>'); } else { $('#usernameavail').html('<p id=\"fail\">Username Is Available!</p>'); } } else { if (! $('#fail').length) { $('#usernameavail').prepend('<p id=\"fail\"><img src=\"http://images/error.png\"> Username Not Available</p>'); } else { $('#usernameavail').html('<p id=\"fail\"><img src=\"http:///images/error.png\"> Username Not Available</p>'); } } } // end processData }); // end submit Here is the username field I am validating against the database for a duplicate username: Code: <input name='username' type='text' id='username' class='required' maxlength='20'> Thanks in advance. Similar TutorialsI am trying to learn javascript and have no idea why this wont work. I am very familiar with java but am very rusty with html and completely new to javascript. Regardless of whether or not the regular expression is correct, this will not produce any sort of result: Code: <html> <head> <script type="text/javascript"> function checkPhoneNumber(phoneNumber) { var phoneRE = /^\(\d{3}\) \d{3}-\d{4}$/; if (phoneNumber.match(phoneRE)) { //document.write("yes") return true; } else { //document.write("no") alert(“blahblahblah” ); return false; } } </script> </head> <body> <script type="text/javascript"> var num = 555-555-5555 document.write(checkPhoneNumber(3)); //*** </script> </body> </html> the *** line, i have tried with the num variable and as a string, and as it is now, it should at least produce the error.... thank you I'm trying to insert a title and a body into a Google maps window through PHP. The body could contain double or single quotes. How do I output these so that they don't break the script? Relevant code: Code: $('#map_canvas').gmap('openInfoWindow', { 'content': '<strong><?php echo $m->marker->Title; ?></strong><br /><?php echo $m->marker->Body; ?><?php echo '<a href="./marker_info.php?id='.$m->marker->Nid.'"></a>' ?><br /><a id="m_location" href="#" data-role="button" data-icon="search" onclick="$.mobile.silentScroll(500);"></a>'}, this); Im using the toggle script demonstrated he http://www.sohtanaka.com/web-design/examples/toggle/ It works perfectly, but im wondering if it is possible to have a button to expand all and contract all. Ive been reading through this page: http://api.jquery.com/toggle/ Im having a hard time understanding it, because this is one of the first things I have worked on with jquery. Can anyone help explain how I can do this? Ok super new to Jquery here. I finally got talked into trying it. Ok so... I have Code: function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; action1.style.filter = "alpha(opacity=" + (0*100) + ")"; action1.style.opacity = 0; var si = setInterval(function() { io+=0.05; action1.style.filter = "alpha(opacity=" + (io*100) + ")"; action1.style.opacity = io; }, 100); io = 0; if(io==1) { window.clearInterval(si); } clearMenu(); } I would love to know how to replace that with the fadein() function. I'm looking for something like this Code: function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; //THE FADE IN GOES HERE but how? clearMenu(); } ok last question. Do I need to hide my elements somehow differently in CSS before I can use this? update: ok so far trying this and its not working Code: function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; action1.fadeIn('slow'); clearMenu(); } finally made it work with Code: function windowOpen() { windowSize() action1.innerHTML = ''; action1.style.display = "none"; $("#action1").fadeIn(1300); clearMenu(); } Hello, posted this on dynamicdrive.com with no response, so I am trying this forum. I have been assigned to build a content locator. We cannot use a database and all content needs to load from same page. Based on my boss' design and client needs, this is what I came up with: http://contentx.com/content_locator/ I am using a Dynamic Drive script to power the dropdown and content underneath the drop down, http://contentx.com/content_locator/js/dd_cx_script.js and using a JQuery script to change the content in the window to the right. http://contentx.com/content_locator/...s_cx_script.js My questions a 1) Is there a better method to do this? (stupid question I know... of course there is!!) I would like it to be as simple as possible, no animation needed. Just need to have content from the DIV on the right side load content in the Main body div on the left (the box) 2)Is it possible to change the content on the right side when you select an option from the drop down? (say I select <option>Free Campaigns</option> I want the content to change on the right to match one of the free campagins) 3)Finally, my margins in IE 7 are all over the map, looks great in all other browsers, but in IE my TABS (colored green and blue) are about 10pixels up to high, and my belowcontent div on the left has a top margin of 12px below the dropdown... Thanks for any help, zack Not entirely lost in the dark with jquery here, ive done quite a bit with it. I was just wondering if anyone might have ideas to solve this particular problem i am having. The code pretty much looks like this... Code: $('#created').hover( function(){ if(y == false) { $(this).css({'border' : '1px groove #dfdfdf'}); $('div#csite').show('slide',{ direction: "down" },500); $('div#sa').hide('slide',{ direction: "up" },500); }; }, function() { $(this).css({'border-style' : 'none'}); $('div#csite').hide('slide',{ direction: "up" },500); $('div#sa').show('slide',{ direction: "down" },500); }); //home hover $('#home').hover( function(){ if(y == false) { $(this).css({'border' : '1px groove #dfdfdf'}); $('div#psite').show('slide',{ direction: "down" },500); $('div#sa').hide('slide',{ direction: "up" },500); }; }, function() { $(this).css({'border-style' : 'none'}); $('div#psite').hide('slide',{ direction: "up" },500); $('div#sa').show('slide',{ direction: "down" },500); }); The div sa is always present (its a sponsor logo) when hovering over a #created link or #parent site link, a div csite or psite comes up, (image representing parent site, image representing creator site) making them work is no problem however i was wondering if anyone had any ideas as how to change this so that when you are quickly moving from the created link to the parentsite the .hide and .show animation for #sa does not overlap, or does not fire otherwise they get in the way of each other... any help would be appreciated thanks in advance! Hi, as the title states, I'm trying to learn some basic javascript, more particularly, jQuery. I HATE having to "allow" active content to run on my IE browser. Is there a way to allow active content permanantly? Instead of having to click allow each time I refresh or reload my test pages? Also, IE keeps freezing or crashing when I run pages with scripts on them. Is this just my browser? or something to do with the active content permissions? Trying to google my questions, but no luck yet. OK, new to the boards. I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can. Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click. I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way). The best example I can share is this: http://j.mp/5U79i1 What he is using is flash based (slideshowpro director and slideshow pro for flash). Not interested in flash for this personal project. Any advice would be hugely appreciated. thanks in advance. What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file. It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page. Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference. Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there. Code: $(document).ready(function($){ var dataret = 0; $.ajax({ type: 'POST', url: 'mobile.php', beforeSend: function(){ $('#status').show(); }, success: function(data){ //initialize localstorage here alert('success'); // if it takes as long as it does, a few minutes, at least show a loading bar... $('#progress').progressbar({ }); }, dataType: 'json' }); }); Thanks in advance! I am a total newb with javascript. i got this slideshow code from the following URL http://javascriptsource.com/miscella...slideshow.html its not working and i dont know why. there were no instructions and i cant figure out why there is only one image listed. i replace the img source with one of of my own but shouldnt there be multiple images? isnt that the point of a slideshow? anyway heres the code: Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Mike Canonigo (mike@canonigo.com) --> <!-- Web Site: http://www.munkeehead.com --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin NewImg = new Array ( "images/1.gif", "images/2.gif", "images/3.gif" ); var ImgNum = 0; var ImgLength = NewImg.length - 1; //Time delay between Slides in milliseconds var delay = 3000; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.slideshow.src = NewImg[ImgNum]; } } function auto() { if (lock == true) { lock = false; window.clearInterval(run); } else if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <img src="images/1.gif" name="slideshow"> <table> <tr> <td align="right"><a href="javascript:chgImg(-1)">Previous</a></td> <td align="center"><a href="javascript:auto()">Auto/Stop</a></td> <td align="left"><a href="javascript:chgImg(1)">Next</a></td> </tr> </table> </center><p> If someone can help me i would really appreciate it. (NO THIS IS NOT HOMEWORK!) Hello all, I am an admin, and I am building a radial button search option on a webpage. It works fine, except I cant seem to get it to open the results in a new window. I tried using the "window.open" but it didnt work. Any assitance would be appreciated! Also, I am not a great java programmer, and what you see below is the extent of my knowledge Thanks in Advance!! ===================CODE=============== <html> <body> <script language="JavaScript">eng = 'http://www.google.com/search?q=';</script> Search: <input type="text" id="searchterms"> <input type="button" value="Search" onload="" onclick="window.location = eng + escape(document.getElementById('searchterms').value); return false;"> <br /> <input type="radio" onclick="eng = this.value;" checked name="sengines" value="http://www.google.com/search?q=" />Google <input type="radio" onclick="eng = this.value;" name="sengines" value="http://support.citrix.com/search/basic/?searchQuery=" />CTX KB <input type="radio" onclick="eng = this.value;" name="sengines" value="http://support.microsoft.com/search/default.aspx?mode=r&query=" />MS KB </body> </html> Hello, I am trying to make an example that will change when a user selects options. Like: This is some text. <user checks box to remove "some"> This is text. <user checks box to remove "text"> This is. <user UN-checks box to remove "text"> This is text. The problem is, if I try to add the removed text back, I get the original string, even though it was previously changed. I use to have the string between the <p> tags, but then moved it as a global var in the JS file. Code: /* HTML Code */ <body> <input type="checkbox" id="anoption" /> <p id="exampletext"></p> //Text use to be here </body> /* Javascript code(including jquery) */ var example = "This is some text"; //Global in JS file $('document').ready(function(){ $('#exampletext').text(example); //Place the global var in the html }); $('#anoption').click(function() { //Place a click handler for checkbox var tmp = example; if(tmp.search(/some/)) //Attempting to check if the word is there, i don't think this works right { example = tmp.replace("some", ""); } else // if word is not there - add it back { /* Here is where I could also use some logic help. I tried a few things here. */ } I am not sure if using a string is the best way or not. Could anyone please point me in the right direction? Thank you! I just started with javascript and am working on a little game to wrap my head around it and came across an error I can't seem to fix. Code: if (AsteriodXpos[i] < -50 || AsteriodYpos[i] < -100 || AsteriodYpos[i] > WinHeight + 100) { AsteriodXpos[i] = WinWidth; AsteriodYpos[i] = Math.round(Math.random() * WinHeight); AsteriodXSpeed[i] = Math.random() * 5 + 7; AsteriodYSpeed[i] = Math.random() * 7 - 5; AstriodsAvoided += 1; if (AstriodsAvoided % 15 == 0) { document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); document.write('<div id="ast" style="position:absolute;font-size:2px"><img src="asteroid.png" height=50 width=50></div>'); document.write('</div>'); document.write('</div>'); AsteriodYpos[AsteriodYpos.length] = Math.round(Math.random() * WinHeight); AsteriodXpos[AsteriodXpos.length] = Math.round(Math.random() * WinWidth) + WinWidth; AsteriodXSpeed[AsteriodXSpeed.length] = Math.random() * 10 + 5; AsteriodYSpeed[AsteriodYSpeed.length] = Math.random() * 7 - 5; asteriods += 1; } } ast[i].style.pixelLeft = AsteriodXpos[i]; ast[i].style.pixelTop = AsteriodYpos[i]+hscrll; When it seems to not like these last two lines as it says "Error: Unable to get value of the property 'style': object is null or undefined". Essentially it is a game where you are flying through space avoiding astroids. after you avoid so many it increases the number of astroids which is where the problem is happening. In case someone would like to see this in context of what im doing the whole code is Code: <html> <head> </head> <body bgcolor="#000000" onload="fly()" onkeypress="displayunicode(event)" style="overflow: hidden"> > <script language="JavaScript"> <!-- Begin x = 0; var startTime = new Date(); // create object imageObj = new Image(); // set image list images = new Array(); images[0] = "ship1.png" images[1] = "ship2.png" images[2] = "ship3.png" images[3] = "ship4.png"; images[4] = "ship5.png" images[5] = "ship6.png" // start preloading for (i = 0; i <= 5; i++) { imageObj.src = images[i]; } AstriodsAvoided = 1; wasCollision = 0; SmallStars = 20; LargeStars = 50; asteriods = 5; SmallYpos = new Array(); SmallXpos = new Array(); LargeYpos = new Array(); LargeXpos = new Array(); Smallspeed = new Array(); Largespeed = new Array(); AsteriodXpos = new Array(); AsteriodYpos = new Array(); AsteriodXSpeed = new Array(); AsteriodYSpeed = new Array(); document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); for (i = 0; i < SmallStars; i++) { document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>'); } document.write('</div>'); document.write('</div>'); document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); for (i = 0; i < LargeStars; i++) { document.write('<div id="li" style="position:absolute;top:0;left:0;width:3px;height:2px;background:#ffffff;font-size:2px"></div>'); } document.write('</div>'); document.write('</div>'); document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); for (i = 0; i < asteriods; i++) { document.write('<div id="ast" style="position:absolute;top:0;left:0;font-size:2px"><img src="asteroid.png" height=50 width=50></div>'); } document.write('</div>'); document.write('</div>'); imgWidth = 150; imgHeight = 150; document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); document.write('<div id="shipLayer" style="position:absolute;top:0;font-size:2px"><img id="ship" src="ship.png" height=150 width=150></div>'); document.write('</div>'); document.write('</div>'); WinHeight = window.document.body.clientHeight; WinWidth = window.document.body.clientWidth; ShipYpos = Math.round(Math.random() * WinHeight); ShipXpos = Math.round(Math.random() * WinWidth) / 2; ShipXSpeed = 0; ShipYSpeed = 0; shipLayer.style.pixelLeft = ShipXpos; shipLayer.style.pixelTop = ShipYpos; for (i = 0; i < SmallStars; i++) { SmallYpos[i] = Math.round(Math.random() * WinHeight); SmallXpos[i] = Math.round(Math.random() * WinWidth); Smallspeed[i] = Math.random() * 5 + 1; } for (i = 0; i < LargeStars; i++) { LargeYpos[i] = Math.round(Math.random() * WinHeight); LargeXpos[i] = Math.round(Math.random() * WinWidth); Largespeed[i] = Math.random() * 10 + 5; } for (i = 0; i < asteriods; i++) { AsteriodYpos[i] = Math.round(Math.random() * WinHeight); AsteriodXpos[i] = Math.round(Math.random() * WinWidth) + WinWidth; AsteriodXSpeed[i] = Math.random() * 10 + 5; AsteriodYSpeed[i] = Math.random() * 7 - 5; } function fly() { document.getElementById("ship").src = images[x]; x += 1; if (x == 6) { x = 0; } var WinHeight = window.document.body.clientHeight; var WinWidth = window.document.body.clientWidth; var hscrll = document.body.scrollTop; var wscrll = document.body.scrollLeft; for (i = 0; i < LargeStars; i++) { LargeXpos[i] -= Largespeed[i]; if (LargeXpos[i] < -10) { LargeXpos[i] = WinWidth; LargeYpos[i] = Math.round(Math.random() * WinHeight); Largespeed[i] = Math.random() * 10 + 5; } li[i].style.pixelLeft = LargeXpos[i]; li[i].style.pixelTop = LargeYpos[i] + hscrll; } for (i = 0; i < SmallStars; i++) { SmallXpos[i] -= Smallspeed[i]; if (SmallXpos[i] < -10) { SmallXpos[i] = WinWidth; SmallYpos[i] = Math.round(Math.random() * WinHeight); Smallspeed[i] = Math.random() * 5 + 1; } si[i].style.pixelLeft = SmallXpos[i]; si[i].style.pixelTop = SmallYpos[i] + hscrll; } for (i = 0; i < asteriods; i++) { AsteriodXpos[i] -= AsteriodXSpeed[i]; AsteriodYpos[i] -= AsteriodYSpeed[i]; //for (j=0; j<30; j++){ // xDistance = AsteriodXpos[i]+25-AsteriodXpos[j]+25; // yDistance = AsteriodYpos[i]-25-AsteriodYpos[j]-25; // distance =xDistance*xDistance+yDistance*yDistance; // if (distance<3000 && i!=j){ // } if (AsteriodXpos[i] < -50 || AsteriodYpos[i] < -100 || AsteriodYpos[i] > WinHeight + 100) { AsteriodXpos[i] = WinWidth; AsteriodYpos[i] = Math.round(Math.random() * WinHeight); AsteriodXSpeed[i] = Math.random() * 5 + 7; AsteriodYSpeed[i] = Math.random() * 7 - 5; AstriodsAvoided += 1; if (AstriodsAvoided % 15 == 0) { document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); document.write('<div id="ast" style="position:absolute;font-size:2px"><img src="asteroid.png" height=50 width=50></div>'); document.write('</div>'); document.write('</div>'); AsteriodYpos[AsteriodYpos.length] = Math.round(Math.random() * WinHeight); AsteriodXpos[AsteriodXpos.length] = Math.round(Math.random() * WinWidth) + WinWidth; AsteriodXSpeed[AsteriodXSpeed.length] = Math.random() * 10 + 5; AsteriodYSpeed[AsteriodYSpeed.length] = Math.random() * 7 - 5; asteriods += 1; } } ast[i].style.pixelLeft = AsteriodXpos[i]; ast[i].style.pixelTop = AsteriodYpos[i]+hscrll; } if (ShipXpos - ShipXSpeed < -150) { ShipXpos = WinWidth; } else { if (ShipXpos - ShipXSpeed > WinWidth) { ShipXpos = -150; } } if (ShipYpos - ShipYSpeed < -150) { ShipYpos = WinHeight; } else { if (ShipYpos - ShipYSpeed > WinHeight) { ShipYpos = -150; } } ShipXpos -= ShipXSpeed; ShipYpos -= ShipYSpeed; shipLayer.style.pixelLeft = ShipXpos; shipLayer.style.pixelTop = ShipYpos + hscrll; DidCollide() sleep(10); setTimeout('fly()', 10); } // End --> function displayunicode(e) { var unicode = e.keyCode ? e.keyCode : e.charCode; var keyPressed; keyPressed = (String.fromCharCode(unicode)); moveShip(keyPressed) } function moveShip(keyPressed) { switch (keyPressed) { case "w" || "W": if (ShipYSpeed != 25) { ShipYSpeed += 5; } break; case "a" || "A": if (ShipXSpeed != 25) { ShipXSpeed += 5; } break; ww case "s" || "S": if (ShipYSpeed != -25) { ShipYSpeed += -5; } break; case "d" || "D": if (ShipXSpeed != -25) { ShipXSpeed += -5; } break; } } function DidCollide() { for (i = 0; i < asteriods; i++) { xDistance = AsteriodXpos[i] + 25 - ShipXpos - 75; yDistance = AsteriodYpos[i] + 25 - ShipYpos - 75; distance = xDistance * xDistance + yDistance * yDistance; if (distance < 4225) { wasCollision = 1; document.write('<img src="Explosion.png">'); var endTime = new Date(); var totalTime = new Date(); totalTime.setTime(endTime.getTime() - startTime.getTime()); test = "this is a test"; document.write('You managed to last ' + totalTime.getSeconds() + '.' + totalTime.getMilliseconds() + ' seconds. You avoided a total of ' + AstriodsAvoided + 'astroids'); } } } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds) { break; } } } </script> <!-- Script Size: 3.79 KB --> </body> </html> Any help someone could provide would be wonderful, and if you can explain to me whats going wrong and why its not working that would be even better! So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){ //References var change = $("#menu li a"); var loading = $("#loading"); var content = $("#content"); //Manage click events change.click(function(){ //show the loading bar showLoading(); //load selected section if(this.id == "home") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/index.php", hideLoading); content.slideDown(); } else if(this.id == "secondpage") { change.load(this.className='current-page'); content.slideUp(); content.load("pages/secondpage.php", hideLoading); content.slideDown(); } else { //hide loading bar if there is no selected section hideLoading(); } }); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; }); Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) { function load(num) { $('#content').load(num +".html"); } $.history.init(function(url) { load(url == "" ? "1" : url); }); $('#ajax-links a').live('click', function(e) { var url = $(this).attr('href'); url = url.replace(/^.*#/, ''); $.history.load(url); return false; }); }); I play a text game that allows you to input javascript into a "QuickBar" set up for links. I currently have a couple of short "links" set up to fill in a form for me, but I am trying to do something else now. An example for one I use that fills in a specific blank text area: javascript: var doc=document; if(window.frames.length>0) doc=window.main.document; doc.getElementsByName('light')[0].value=40; doc.getElementsByName('Okay')[0].click(); end(); On a different page than the empty text areas, there is a fixed drop down select with 5 choices, and I would like to set up a 6th choice using the same insert javascript "link" system. Code: <tr> <td>Map size:</td> <td><select name="map_size"> <option label="7x7" value="7">7x7</option> <option label="9x9" value="9">9x9</option> <option label="11x11" value="11">11x11</option> <option label="13x13" value="13">13x13</option> <option label="15x15" value="15" selected="selected">15x15</option> </select></td> </tr> What I would like to do is set up another javascript "link" that will add a "30x30" option to that list and be able to select it after clicking the javascript "link." I know this has probably been asked many times, but as a total newb I am struggling to find the answer. This page : www.imovecornwall.org/index.htm has two scripts on it, a peicemaker lightbox animation (which works perfectly fine) and a Fancybox script that launches modal windows onclick. The problem is when you launch the fancybox script the screen displays both the Fancybox script and the Peicemaker script. the code is Code: <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="clsid:D27CDB6E-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="images/FaceBook-icon.png" width="33" height="33"></a> <img border="0" src="images/Twitter-icon.png" width="33" height="33"> <img border="0" src="images/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.fontFamily','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> I know it's probably something really simple but I'm totally lost. Any help would be very much appreciated. Hey guys. I am pretty new to JS and programming. The company that I am working for put me on this project and I have a question. Here is a snippit for a form that we have. We use a dreamweaver extension "HDW form to database" to process the forms and put them in a mysql database. the wpform() is a validation function that has been written. what I want, is the fallowing, if you look at the code below in the option object, there are different categories... rock, funk, hip hop, synth etc. i want it so when one of them is selected, it goes to a different respected page. for example, if the value Rock is selected, and you press submit, it would take you to www.google.com . On the other hand if the value Funk is submitted, it will take you to www.yahoo.com . Code: <form action="/HDWFormToDatabase/FormToDatabase.php" method="post" name="theForm" onSubmit="return wpform()" accept-charset="iso-8859-1"> <select size="1" name="genre"> <option selected="selected" value="genre">Choose a Genre!</option> <option value="Rock">Rock</option> <option value="Funk">Funk</option> <option value="Hip Hop">Hip Hop</option> <option value="80s">Synthesizer</option> <option value="Techno">Techno</option> </select> <input type="hidden" name="hdwok" id="hdwok" value=" URL GOES HERE" /> </form> Normally, when this option object is not present, the user presses submit and after the form gets processed to the database, the browser forwards to the "URL GOES HERE" value. However, I am not sure exactly what to do now since the URL which it is forwarded to will change. can someone give me a hint on how to make this happen? just some general advice for a newb? I would write it but I am pretty lost. I was thinking of including a if statement in the wpform() function that goes something like: Code: if (document.theForm.genre.selectedIndex == 0) { alert("Please select your genre."); document.theForm.genre.focus(); return (false); } if (document.theForm.genre.selectedIndex==1) { window.location = "http://www.google.com/"; return(true); } if (document.theForm.genre.selectedIndex==2) { window.location = "http://www.yahoo.com/"; return(true); } etc etc Would this work? Is there a more efficient way of doing something like this that I should know of due to my lack of JS skills? Thanks in advance so much for help. hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... Hey, First time poster... Apreciate any help here getting this thing to work (apoligise if its in the wrong section as it does cover php aswell) Problem is getting this form to work, it seems to go through ok, but it never makes it back to my mailbox. Its from a template that didnt explain how to get it to work. Codes.... the js in html head Code: <script type="text/javascript" src="js/forms.js"></script> the form html body Code: <form action="#" id="ContactForm"> <div class="success"> Contact form submitted!<br> <strong>We will be in touch soon.</strong> </div> <fieldset> <div class="wrapper"><label class="name"> <span class="bg"><input type="text" value="Name" class="input"></span> <span class="error">*This is not a valid name.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="email"> <span class="bg"><input type="text" value="Email" class="input"></span> <span class="error">*This is not a valid email address.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="phone"> <span class="bg"><input type="tel" value="Phone" class="input"></span> <span class="error">*This is not a valid phone number.</span> <span class="empty">*This field is required.</span> </label></div> <div class="wrapper"><label class="comment"> <span class="bg"><textarea rows="1" cols="1">Message</textarea></span> <span class="error">*The message is too short.</span> <span class="empty">*This field is required.</span> </label></div> <div class="btns relative"><a href="#" class="button1" data-type="reset"><img src="images/button_hover.png" alt=""><strong>Clear</strong></a><a href="#" class="button1" data-type="submit"><img src="images/button_hover.png" alt=""><strong>Submit</strong></a></div> </fieldset> </form> The Js code Code: (function($){ $.fn.extend({ forms:function(opt){ if(opt===undefined) opt={} this.each(function(){ var th=$(this), data=th.data('forms'), _={ errorCl:'error', emptyCl:'empty', invalidCl:'invalid', successCl:'success', successShow:'4000', mailHandlerURL:'submit.php', ownerEmail:'admin@bundesign.net', stripHTML:true, smtpMailServer:'localhost', targets:'input,textarea', controls:'a[data-type=reset],a[data-type=submit]', validate:true, rx:{ ".name":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'}, ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'}, ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'}, ".comment":{rx:/.{20}/,target:'textarea'} }, preFu:function(){ _.labels.each(function(){ var label=$(this), inp=$(_.targets,this), defVal=inp.attr('value'), trueVal=(function(){ var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html() return tmp })() trueVal!=defVal &&inp.val(defVal=trueVal||defVal) label.data({defVal:defVal}) inp .bind('focus',function(){ inp.val()==defVal &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl)) }) .bind('blur',function(){ !inp.val() ?inp.val(defVal) :(_.isValid(label) ?_.showErrorFu(label) :_.hideErrorFu(label)), (_.isEmpty(label) ?_.showEmptyFu(label) :_.hideEmptyFu(label)) }) .bind('keyup',function(){ label.hasClass(_.invalidCl) &&_.isValid(label) ?_.showErrorFu(label) :_.hideErrorFu(label) }) label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide() }) _.success=$('.'+_.successCl,_.form).hide() }, isValid:function(el){ var ret=true, empt=_.isEmpty(el) if(empt) ret=false, el.addClass(_.invalidCl) else $.each(_.rx,function(k,d){ if(el.is(k)) d.rx.test(el.find(d.target).val()) ?(el.removeClass(_.invalidCl),ret=false) :el.addClass(_.invalidCl) }) return ret }, isEmpty:function(el){ var tmp return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal') }, validateFu:function(){ _.labels.each(function(){ var th=$(this) _.isEmpty(th) ?_.showEmptyFu(th) :_.hideEmptyFu(th) _.isValid(th) ?_.showErrorFu(th) :_.hideErrorFu(th) }) }, submitFu:function(){ _.validateFu() if(!_.form.has('.'+_.invalidCl).length) $.ajax({ type: "POST", url:_.mailHandlerURL, data:{ name:$('.name input',_.form).val()||'nope', email:$('.email input',_.form).val()||'nope', phone:$('.phone input',_.form).val()||'nope', fax:$('.fax input',_.form).val()||'nope', state:$('.state input',_.form).val()||'nope', comment:$('.comment textarea',_.form).val()||'nope', owner_email:_.ownerEmail, stripHTML:_.stripHTML }, success: function(){ _.showFu() } }) }, showFu:function(){ _.success.slideDown(function(){ setTimeout(function(){ _.success.slideUp() _.form.trigger('reset') },_.successShow) }) }, controlsFu:function(){ $(_.controls,_.form).each(function(){ var th=$(this) th .bind('click',function(){ _.form.trigger(th.data('type')) return false }) }) }, showErrorFu:function(label){ label.find('.'+_.errorCl).slideDown() }, hideErrorFu:function(label){ label.find('.'+_.errorCl).slideUp() }, showEmptyFu:function(label){ label.find('.'+_.emptyCl).slideDown() _.hideErrorFu(label) }, hideEmptyFu:function(label){ label.find('.'+_.emptyCl).slideUp() }, init:function(){ _.form=this _.labels=$('label',_.form) _.preFu() _.controlsFu() _.form .bind('submit',function(){ if(_.validate) _.submitFu() else _.form[0].submit() return false }) .bind('reset',function(){ _.labels.removeClass(_.invalidCl) _.labels.each(function(){ var th=$(this) _.hideErrorFu(th) _.hideEmptyFu(th) }) }) _.form.trigger('reset') } } if(!data) (typeof opt=='object'?$.extend(_,opt):_).init.call(th), th.data({cScroll:_}), data=_ else _=typeof opt=='object'?$.extend(data,opt):data }) return this } }) })(jQuery) the php ( this is possibly where the problem lies, but i assume it goes hand in hand with the JS, is reason why i posted it here as the js seemed really complex. Code: <?php $myemail = "admin@bundesign.net"; $name = $_POST["name"]; $email = $_POST["email"]; $comment = $_POST["comment"]; $phone = $_POST["phone"]; $from = "Bundesign Web <admin@bundesign.net>"; $subject = "Bundesign Web"; $message .= "$name <br> $email <br> $phone <br> $comment"; mail($myemail, $subject, $message,); ?> submit.php is located in the root and also i stuck it in the js folder just in case thats where it was looking. Thanks for any help, Chris. |