|
JavaScript - Javascript Not Functioning Correctly
I have a form and javascript that doesn't work correctly. I think there's a problem with the javascript, but it's possible the form is the culprit. I'm new at this.
Here is the form code for a search boxx: Code: <form id="search" method="get" name="search" action="promotions.html">
<input type="text" size="15" name="ws" maxlength="500" value="pen, keychain, etc." onfocus="this.value='';return false;" />
<button type="submit" value="Search">Go</button>
<input type="hidden" name="ID" value="64857723-2161-4778-BDEB-3EE622F6CFF3" />
</form>
Here is the javascript that's in the head of /promotions.html: Code: <script type="text/javascript">
function FrameRedirect()
{
var q = window.location.search;
q = (q.length > 1) ? q.substring(1, q.length) : 0;
var s = q.substring(0, 2);
switch (s)
{
case 'ws':
q = 'http://www.asiconnection.com/ProductSearch/LinkInQS.aspx?'+q;
document.getElementById('Content').className = 'active';
break;
case 'bn':
q = q.substring(3,q.length);
document.getElementById('RD2').className = 'active';
break;
default:
document.getElementById('RD1').className = 'active';
break;
}
iframe = '<iframe id="frame" src="'+q+'" width="780" scrolling="yes" frameborder="0" height="500"></iframe>';
document.getElementById('Content').innerHTML = iframe;
}
</script>
The search box code is suppose to send the inputted search word to the javascript on /promotions.html page and then load the search results http://www.asiconnection.com/Product.../LinkInQS.aspx into the iframe on that page. The only thing that appears in that iframe is "Oops. Firefox cannot find productsearch" Can someone help me figure this out? Thanks in advance. Similar TutorialsHi, I have created a site and on one page it uses 2 divs side by side to display text information. in the left hand div it contains 8 links. these links when clicked load up text stored in separate text files and display it in the right hand div. The code below was working when i ran it from my mac but when i try to load it off the webhost it fails to execute. Code: $(document).ready(function() {
$("#mc").click(function() {
$("#innertext").load('mc.txt');
});
$("#sd").click(function() {
$("#innertext").load('sd.txt');
});
$("#ma").click(function() {
$("#innertext").load('ma.txt');
});
$("#rtm").click(function() {
$("#innertext").load('rtm.txt');
});
$("#cm").click(function() {
$("#innertext").load('cm.txt');
});
$("#r").click(function() {
$("#innertext").html('r.txt');
});
$("#bp").click(function() {
$("#innertext").load('bp.txt');
});
$("#pc").click(function() {
$("#innertext").load('pc.txt');
});
});
Code: <div class="wrapper p2">
<ul class="list1 col-1">
<li>> <a href="javascript:void(0);" onclick="function("mc");" id="mc">Consultancy</a></li>
<li>> <a href="javascript:void(0);" onclick="function("sd"); id="sd">Strategy</a></li>
<li>> <a href="javascript:void(0);" onclick="function("ma"); id="ma">Market Assessment</a></li>
<li>> <a href="javascript:void(0);" onclick="function("rtm"); id="rtm">Routes to Market</a></li>
</ul>
<ul class="list1 col-2">
<li>> <a href="javascript:void(0);" onclick="function("cm"); id="cm">Change management</a></li>
<li>> <a href="javascript:void(0);" onclick="function("r"); id="r">Restructuring</a></li>
<li>> <a href="javascript:void(0);" onclick="function("bp"); id="bp">Planning</a></li>
<li>> <a href="javascript:void(0);" onclick="function("pc"); id="pc">Project management</a></li>
</ul>
</div>
here is a link to the page on the webhost-- http://herkes.host56.com/index-2.html Any ideas to why this does not work? any help is appreciated I have a script that works until I add the clearInterval command, and I am not sure what I have done wrong. The code is: Code:
<script type="text/javascript">
function loadChatTalkRefresh(File,ID,Msg){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
empress = setInterval(function(){loadChatTalkRefresh(File,ID,Msg)},3000);
willow = clearInterval(empress,210000);
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
Hey guys, My code works perfectly fine in internet explorer and google chrome, however, in firefox it does not. I have created an online form, but nothing happens when pressing the "submit" button firefox, whereas in other browsers, it works correctly. Also, the centering of the form is different. Please help me if possible. Thanks <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Airduct Cleaning</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <link href="text.css" rel="stylesheet" type="text/css"> <script type="text/JavaScript"> function gosubmit(){ musimw.submit(); } </script> <style type="text/css"> #text { width: 250px; position: relative; margin-left: 200px; } </style> </head> <body leftmargin="0" topmargin="0"> <table width="998" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="147" valign="top"> <!----LEFT MENU---------> <? include "left_menu.php"; ?> </td> <td width="591" valign="top" colspan="1"> <!----TOP---------> <? include "top.php"; ?> <!----TITLE---------> <table width="100%" heigt="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="590" height="33" background="images/top_bg2.gif" valign="bottom"><img src="images/title_sub09_01.gif" /></td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> <!----CONTENT---------> <!----story------> <form action=sendmail2.php method=post name=musimw enctype=multipart/form-data onSubmit="return musimm_check(this);"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr style=" position: relative; margin-left: 28px;"> <td width="50"></td> <td><p><span class="stxt2">Call for a Free Estimate</span><br> <br> <img src="images/img25.gif" align="left"><strong>For a free estimate, call: </strong></p> <div id="text"> Office: Insert Office #<br /> Toll-Free: Insert Toll Free # <br /> Email: Insert Email<br /> <br><em>Or, submit the online form below.</em> </div> </td> </tr> <tr> <td width="50"></td> <td> <table width="530" align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#EFEFEF"> <tr> <td width="10"></td> <td width="180" height="25">*First name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='fname'/></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Last name</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='lname'/></td> </tr> <tr> <td></td> <td >Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ptel'/> <select name='pteltype'> <option value='Home'>Home</option> <option value='Work'>Work</option> </select></td> </tr> <tr> <td></td> <td >Cell Phone Number<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='ctel'/></td> </select></td> </tr> <tr> <td></td> <td height="25">*Email Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='email'/></td> </tr> <tr> <td></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td width="10"></td> <td width="180" height="25">*Type of Service</td> <td style="padding:10px 5px 5px 5px"><select name='bnametype'> <option value='Air Duct Cleaning'>Air Duct Cleaning</option> <option value='Dryer Vent Cleaning'>Dryer Vent Cleaning</option> <option value='Chimney Cleaning'>Chimney Cleaning</option> </select></td> </tr> <tr> <td></td> <td height="25">Square Footage<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20" name='feet'/></td> </tr> <tr> <td></td> <td height="25">Approximate # of Ducts<br /></td> <td style="padding:10px 5px 5px 5px"><input type="text" size="20"name='vent' /></td> </tr> <tr> <td></td> <td height="25">Number of furnaces</td> <td style="padding:10px 5px 5px 5px"><select name='furnaces'> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> </select></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">*Address</td> <td style="padding:10px 5px 5px 5px"><input type="text" class="inputPlain004" size="30" name='address'></td> <tr> <td></td> <td height="25">*City<br /></td> <td style="padding:10px 5px 5px 5px"><input name="city" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td></td> <td height="25">*State </td> <td style="padding:10px 5px 5px 5px"><select name='statetype'> <option value='State'>IL</option></td> </tr> <tr> <td></td> <td height="25">*Zip Code</td> <td style="padding:10px 5px 5px 5px"><input name="zip" type="text" class="inputPlain004" value="" size="12"></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> <tr> <td></td> <td valign="top" style="padding-top:5px">Comments or Questions</td> <td style="padding:10px 5px 5px 5px"><textarea name='Comment' cols="45" rows="8"></textarea></td> </tr> <tr> <td colspan="3"height="1" background="images/point.gif"></td> </tr> </table> <!---BUTTON---> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="50" align="center"><a href="javascript:gosubmit()"><img src="images/bt_submit.gif"></a> <a href="#"><img src="images/bt_cancel.gif"></a></td> </tr> </table> </form> </td> <td width="1" bgcolor="#d3dfe6"></td> </tr> </table> </td> <td width="260" valign="top"> <!----RIGHT--------> <? include "right_menu.php"; ?> </td> </tr> </table> <!------BOTTOM----------> <? include "foot.php"; ?> </body> </html> Hi, I wonder if someone can help! I am not a JavaScript programmer at all, so I cant really see what I am doing wrong with the following code... Just to explain I have 2 fields on a form that retrieve monetary data from a mysql database. The data is a monetary value e.g. 12.59. Which works fine as normal. I have been asked to hide this value depending on what the customers preferences are set to i.e Show Price = Yes or Show Price = No. Hopefully that makes sense. After lots of deliberation I realised that I couldnt hide the fields because the database called an error saying the price data was missing. So I thought change the field type to a 'password field' and the price data would still be accepted by the database. This thankfully worked and didnt break the php code. So I found some javascript code, chopped and pasted it and came up with the following script. This is called with an onclick event through a link. <script language="JavaScript"> function changetype(){ var myTextField = document.getElementById('hf_showmobprices'); if(myTextField.value == "Yes") document.getElementById('price1jd').type='password'; document.getElementById('price2jd').type='password'; else return false; } I thought the above would work but it doesn't. If I take out one of the lines "document.getElementById('price2jd').type='password';", then it does work. After more playing around I thought, create a function caller as shown below but again that doesnt work. The first function works but the second function doesnt seem to work. I shoved in an alert just to check that the second function was being called and it is. So what I gather is It seems to convert the first price field to a password type field but not the second field. Does anyone know why? is it some thing to do with the getElement and can only run once? I am using FireFox 3.6 if that will help <script type="text/javascript"> function checkprefs() { price1(); price2(); } </script> <script language="JavaScript"> function price1(){ var myTextField = document.getElementById('hf_showmobprices'); if(myTextField.value == "Yes") document.getElementById('price1jd').type='password'; else return true; } </script> <script language="JavaScript"> function price2(){ var mynewtestField2 = document.getElementById('hf_showmobprices'); if(mynewtestField2.value == "Yes") document.getElementById('price2jd').type='password'; else alert("alert2") } </script> Any guidance would be much appreciated john Hi There, I have recently completed making a website for my sister's wedding. I am quite new to the web design world, and have only taken 2 classes on the subject. I used a Javascript function that was provided to us in one of my HTML coding classes in order to automatically resize the (nesting?) div's according to how long the content in them is. This all seems to work perfectly fine in Google Chrome, as well as most versions of Internet Explorer - however, in some versions of internet explorer, and ALL versions of Firefox, this resize function does not seem to work. Since this coding was provided to me by a teacher (who is unfortunately in another country), I'm not sure what kinda of edit would make it so it would function in Firefox, or if there is a way to make in function in Firefox at all. I would appreciate if some of you could take a look at it, and let me know if you have any ideas/suggestions/advice, as to what is happening with the code/why it does not work in Firefox/some versions of Internet Explorer. The specific javascript code (which i assume is the issue here - please let me know if I'm wrong about it being the javascript that isn't working) is he PHP Code: function fnReset(){ document.getElementById('dTorso').style.height="380px"; document.getElementById('dMiddle').style.height="auto"; var middleHt=document.getElementById('dMiddle').scrollHeight; var maxHt=Math.max(380,middleHt); document.getElementById('dTorso').style.height=maxHt + "px"; document.getElementById('dMiddle').style.height=maxHt + "px"; } Which is then called to action he Code: <body onLoad="fnReset();> Also, in some versions of Firefox, the background image for the whole page isn't showing up either - any tips on why that is happening would also be amazing. Thank you so much for any help you may provide. This is a gift to my sister and her fiance, and I really want it to work well for them, and all their guests. Thanks! Hi I want to pass a strings from JS client to PHP server and vice versa. Problem is that I can't find a simple method of escaping them that gives consistent results. I've tried escape, unescape, urlencode and urldecode, but there are problems with some characters eg + From what I've read, JSON is the most reliable way to do this. I've figured out how to use json_encode to get a php string to a javascript variable, but I can't go the other way. How do I get the JSON string that represents a javascript object? Thanks for any help. I wasn't quite sure where to post this request as its JSON, javascript and php, so please tell me if I'm in the wrong place. I am sorry if this is a stupid question. I have never really used javascript before. I found some code online that I tried to piece together so I might not even be going about this the right way. I want the background to take up 100% and resize with the browser. That works fine. I also want the text "welcome to the ahi life" stick to the bottom left hand corner and the enter button to stick to the bottom right. I would like these to resize with the browser as well. It all kind of works, except the first time you load the page the text and the button are much smaller than I would like them to be. If you refresh the page everything is correct. The url is http://www.ahiapparel.com/landing.html Code: <style>
* { margin: 0; padding: 0; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position:absolute; bottom:0; left:20px; width: 700px; margin: 50px auto;}
#welcometext { position: fixed; bottom: 20px; left: 25px; }
.welcometextwidth { width: 7%; }
.welcometextheight { height: 7%; }
#entertext { position: fixed; bottom: 20px; right: 25px; }
.entertextwidth { width: 7%; }
.entertextheight { height: 7%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function funct1() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
$(function funct2() {
var theWindow = $(window),
$welcometext = $("#welcometext"),
aspectRatio = $welcometext.width() / $welcometext.height();
function resizewelcometext() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$welcometext
.removeClass()
.addClass('welcometextheight');
} else {
$welcometext
.removeClass()
.addClass('welcometextwidth');
}
}
theWindow.resize(function() {
resizewelcometext();
}).trigger("resize");
});
$(function funct3() {
var theWindow = $(window),
$entertext = $("#entertext"),
aspectRatio = $entertext.width() / $entertext.height();
function resizeentertext() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$entertext
.removeClass()
.addClass('entertextheight');
} else {
$entertext
.removeClass()
.addClass('entertextwidth');
}
}
theWindow.resize(function() {
resizeentertext();
}).trigger("resize");
});
</script>
My best guess is that either the functions or some of the variables are conflicting somehow, but I have tried just about everything to fix it. Any help would be much appreciated. Thanks! Hello, I followed a Mega Drop Down menu tutorial and everything is working great, except for some reason on certain pages - when the menu drops down, some table elements behind the menu actually appear in front of it? I'm not quite sure what or why this is happening. Here is the URL for reference. http://gem-tech.com.mytempweb.com/store/pc/home.asp Here is an example of what I am talking about: Here is how it should look: Any help would be appreciated, thanks! I'm attempting to have the example code section which is currently commented out to keep from code spamming this forum to react with the IF statement created within the FUNCTION that I called "calc". The code in the example section does work, however the FUNCTION or IF statement is not working. Could anyone help me visualize the problem. Thank you Code: <select name="ship_country" id="ship_country" style="min-width:200px;" onclick="calc;">
<option value="" selected="selected"></option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
</select>
<script type="text/javascript">
function calc() {
if (document.getElementById("ship_country").value = ("United States");) {
// Example comment representing a lot nonsequential code pertaining to this topic.
}
}
</script>
This <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why? Is it possible to fix it so that it works with the doctype in ie? Code: <!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
screenWidth = screen.width;
if (screenWidth == 1024)
{
var yside = 390;
}
else if (screenWidth == 1152)
{
var yside = 400;
}
else if (screenWidth == 1280)
{
var yside = 400;
}
else
{
var yside = 450;
}
if(document.body.scrollTop != "undefined")
sidemenu.style.top = document.body.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}
setInterval("FixY()",100);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working. When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them. I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar. I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck! Could anyone help? I have attached the code showing the html, the custom.js function and the css. Thanks, nevblanc79 HTML: Code:
<div id="carousel">
<h3>Our Titles</h3>
<div class="carousel">
<ul>
<li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
</ul>
</div>
<button class="prev"><</button>
<button class="next">></button>
</div>
Javascript: Code: $(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});
CSS: Code: #carousel {
width:900px;
overflow:hidden;
margin-bottom:30px;
}
.carousel ul li {
width:198px;
margin-right:36px;
}
#carousel .next, #carousel .prev {
margin:0px;
font-size:15px;
padding:4px 10px;
}
#carousel .next {
float:right;
}
#carousel .prev {
float:left;
}
The issue I'm having is that the sound for the animation will not go off after the initial operation, every subsequent animation will be silent. Here is the pastebin: Pastebin.com Keep in mind this is not my code and I privately contracted someone out to do this. They are not responding and will not help at this point. I will try to answer any question you may have to the best of my ability. I have a CMS that was built for our company website that relies on some JS to upload media through a regular browser directly to be displayed on our site. There is a button one clicks to upload video. When clicked the file browser on your computer is supposed to pop-up so you can choose the media you would like to upload. This button no longer is responsive on any of my 12 mac desktops in any common browser nor my mac laptop which is on a different OS X version. Any ideas? Here is the script from the page: [CODE] <script type="text/javascript"> var upload1; window.onload = function() { upload1 = new SWFUpload({ // Backend Settings upload_url: "/08/assets/includes/php/uploadGall.php?id=<?php echo $id; ?>", // Relative to the SWF file (or you can use absolute paths) post_params: { "PHPSESSID" : "<?php echo session_id(); ?>"}, // File Upload Settings file_size_limit : "3102400", // 100MB file_types : "*.*", file_types_description : "All Files", file_upload_limit : "1", file_queue_limit : "1", // Event Handler Settings (all my handlers are in the Handler.js file) file_dialog_start_handler : fileDialogStart, file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, // Flash Settings flash_url : "/08/assets/includes/js/swfupload/swfupload_f8.swf", // Relative to this file (or you can use absolute paths) swfupload_element_id : "flashUI1", // Setting from graceful degradation plugin degraded_element_id : "degradedUI1", // Setting from graceful degradation plugin custom_settings : { progressTarget : "fsUploadProgress1", cancelButtonId : "btnCancel1" }, // Debug Settings debug: false }); }; var n=new Date().getTime();var c=escape(n*1000+Math.round(Math.random()*1000)); $(document).ready(function() { $('#nav_entry div.sub').each(function(i) { $(this).hide(); }); $('#nav_entry div.title').each(function(i) { $(this).click(function() { $(this).siblings('.sub').slideDown('fast'); $(this).parent().siblings('.ne').children('.sub').slideUp(); }); }); $('img.mover').hide(); <?php if(!$errors) { ?> $("#addEntry").hide(); $("a#nevermind_post").hide(); <?php } else { ?> $("a#add_driver_btn").hide(); <?php } ?> $("a#add_driver_btn").click(function() { $(this).hide(); $("a#nevermind_post").show(); $("#addEntry").slideDown('slow'); }); $("a#nevermind_post").click(function() { $(this).hide(); $("a#add_driver_btn").show(); $("#addEntry").slideUp('slow'); }); }); </script>[CODE] And here is where the button lies in the page: [CODE] <input type="button" value="Upload file (Max 200 MB)" onclick="upload1.selectFiles()" style="font-size: 8pt;" />[CODE] THANKS! on this site. There are no validation errors. firebug says my linkOut function is not defined... but I have this: Code: function linkOut(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("H2.png","H.png");
}
not sure where to go from here. I have some javascript code: first it gets string of the url in the address bar then it splits the string at the ? and grabs the right half it then makes an IFrame go to that string(which is yet another url I would manually insert) here is the code: Code: function redirect(){
var raw=window.document.location.href;
if(content_address_start=raw.indexOf("?")!=-1){
var content_address=raw.split("frame.html?")[1];
window.document.getElementById('content').src=content_address;
}
}
'content' is the id of the IFrame, and frame.html is the html file this code is inside. Ok, so everything works perfectly when I test this code offline, but as soon as I load it to my website, and the .src line occurs, it just loads a blank page in the IFrame. What could be causing this? Perhaps certain sites will not allow themselves to be inside iframes? Much thanks in advance. I hope I gave enough information and relayed my problem clearly. EDIT: It seems that the code works on other sites, just not youtube. Why would it do this and are there any ways around it? Hi Guys, I'm trying to do up a contact form that after a user submits the information, the drop down contact box will slide back up instead of redirecting to another page. The script works fine in Chrome and Safari, but Firefox and IE keeps redirecting to the php page. Hope someone can shed some light here, thanks! Html form: Code: <div class="left">
<!-- Login Form -->
<form class="clearfix" action="contactengine.php" name="cform" method="post">
<h4>Drop us a mail</h4>
<label class="grey" for="emailName">Name:</label>
<input class="field" type="text" name="emailName" id="emailName" value="" size="23" />
<label class="grey" for="emailFrom">Email Address:</label>
<input class="field" type="text" name="emailFrom" id="emailFrom" value="" size="23" />
<label class="grey" for="message">Message:</label>
<textarea type="text" name="message" id="message" size="23"></textarea>
<div class="clear"></div>
<input type="submit" rows="" cols="" name="submit" value="Submit" class="bt_register" />
<span id="messageSent">Message sent successfully!</span>
</form>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("cform");
frmvalidator.addValidation("emailName","req","Please enter your Name");
frmvalidator.addValidation("emailName","maxlen=20", "Max length for Name is 20");
frmvalidator.addValidation("emailFrom","maxlen=50", "Max length for email is 50");
frmvalidator.addValidation("emailFrom","req","Please enter your Email");
frmvalidator.addValidation("emailFrom","email","Please enter a valid email");
</script>
</div>
<div class="left right">
<!-- Register Form -->
<h4>Contact Details</h4>
<p class="grey"><b>XXX<br /></b>XXX<br />XXX<br />XXX</p>
<p class="grey">T: 999<br />F: 999</p>
<h5>Stalk Us</h5>
<a href="index.html"><img src="misc/fb.png" border="0" alt="Facebook" /></a> <a href="index.html"><img src="misc/twit.png" border="0" alt="Twitter" /></a>
</div>
</div>
</div>
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Hello there</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Contact Us</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
The Slider JS: Code: $(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Hey There | Contact us" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
//submission scripts
$('div#panel').submit( function(){
//statements to validate the form
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var email = document.getElementById('emailFrom');
if (!filter.test(emailFrom.value)) {
$('.email-missing').show();
} else {$('.email-missing').hide();}
if (document.cform.emailName.value == "") {
$('.name-missing').show();
} else {$('.name-missing').hide();}
if (document.cform.message.value == "") {
$('.message-missing').show();
} else {$('.message-missing').hide();}
if ((document.cform.emailName.value == "") || (!filter.test(email.value)) || (document.cform.message.value == "")){
return false;
}
if ((document.cform.emailName.value != "") && (filter.test(email.value)) && (document.cform.message.value != "")) {
//hide the form
$('.div#panel').hide();
//show the loading bar
$('.loader').append($('.bar'));
$('.bar').css({display:'block'});
//send the ajax request
$.post('contactengine.php',{emailName:$('#emailName').val(),
emailFrom:$('#emailFrom').val(),
message:$('#message').val()},
//return the data
function(data){
//hide the graphic
$('.bar').css({display:'none'});
$('.loader').append(data);
});
//waits 2000, then closes the form and fades out
$("#messageSent").show("slow");
setTimeout('$("#toggle a").toggle(); $("div#panel").slideUp("slow")', 2000);
//stay on the page
return false;
}
});
});
The PHP Code: PHP Code: <?php $EmailFrom = "xxx@xxx.com"; $EmailTo = "xxx@xxx.com"; $Subject = Trim(stripslashes($_POST['Webmail'])); $Name = Trim(stripslashes($_POST['emailName'])); $Email = Trim(stripslashes($_POST['emailFrom'])); $Message = Trim(stripslashes($_POST['message'])); // validation $validationOK=true; if (!$validationOK) { print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; exit; } // prepare email body text $Body = ""; $Body .= "Name: "; $Body .= $Name; $Body .= "\n"; $Body .= "Email Adress: "; $Body .= $Email; $Body .= "\n"; $Body .= "Message: "; $Body .= $Message; $Body .= "\n"; // send email $success = mail($EmailTo, Webmail, $Body, "From: <$EmailFrom>"); // redirect to success page if ($success){ print "<meta http-equiv=\"refresh\" content=\"0;URL=success.html\">"; } else{ print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; } ?> I thought this would be simple. Evidently it's not With the date below (and it being 11.45 on the 27th as I type this), the counter returns the correct number of hours/mins/seconds remaining, but shows 33 days. It seems to be adding 31 days to the count, but I can't figure out where Code: function countdown(){
var bigday = new Date(2009,10,29,14,30,0,0);
var today = new Date();
var difference = bigday - today;
var remaining = Math.floor(difference/1000); // want seconds, not milliseconds
var days = Math.floor(remaining/86400);
remaining = remaining % 86400;
var hours = Math.floor(remaining/3600);
remaining = remaining % 3600;
var minutes = Math.floor(remaining/60);
remaining = remaining % 60;
seconds = Math.floor(remaining);
var out = days + " days, " + hours + " hours, " + minutes + " minutes and " + seconds + " seconds left...";
$('#countdown').text(out);
setTimeout(countdown, 1000);
}
I would like this image gallery to sit behind everything else. right now white shows through on either side. Any help would be greatly appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Get Hosting With Joe (13.0.1.020)">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<title>Home</title>
<script type="text/javascript" src="wpscripts/jquery.js"></script>
<script type="text/javascript" src="wpscripts/jquery.timers.js"></script>
<script type="text/javascript" src="wpscripts/jquery.wpgallery.js"></script>
<script type="text/javascript">
var nImgNum_pg_2 = 0;
wp_imgArray_pg_2 = new Array();
wp_imgArray_pg_2[nImgNum_pg_2++] = new wp_galleryimage("wpimages/6ec6f779d991.jpg", 844, 369, "wpimages/6ec6f779d991t.jpg", "");
wp_imgArray_pg_2[nImgNum_pg_2++] = new wp_galleryimage("wpimages/8dcdb90c2d41.jpg", 844, 370, "wpimages/8dcdb90c2d41t.jpg", "");
</script>
<style type="text/css">
body {margin: 0px; padding: 0px;}
</style>
<script type="text/javascript" src="wpscripts/jspngfix.js"></script>
<script type="text/javascript">
var blankSrc = "wpscripts/blank.gif";
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#wp_gallery_pg_2').wpgallery({
imageArray: wp_imgArray_pg_2,
nTotalImages: nImgNum_pg_2,
nGalleryLeft: 77,
nGalleryTop: -183,
nGalleryWidth: 844,
nGalleryHeight: 842,
nImageDivLeft: 0,
nImageDivTop: 0,
nImageDivWidth: 844,
nImageDivHeight: 842,
nControlBarStyle: 0,
nControlBarExternalTop: 10,
bNavBarOnTop: false,
bShowNavBar: false,
nNavBarAlignment: 0,
strNavBarColour: 'none',
nNavBarOpacity: 1.0,
nNavBarIconWidth: 24,
nNavBarIconHeight: 24,
bShowCaption: false,
bCaptionCount: true,
strCaptionColour: '#ffffff',
nCaptionOpacity: 0.6,
strCaptionTextColour: '#000000',
nCaptionFontSize: 12,
strCaptionFontType: 'Courier New,Arial,_sans',
strCaptionAlign: 'center',
strCaptionFontWeight: 'normal',
bShowThumbnails: false,
nThumbStyle: 1,
nThumbPosition: 0,
nThumbLeft: 30,
nThumbTop: 732,
nThumbOpacity: 0.5,
nTotalThumbs: 2,
nThumbSize: 40,
nThumbSpacing: 10,
bThumbBorder: false,
strThumbBorderColour: '#000000',
strThumbBorderHoverColour: '#ffffff',
strThumbBorderActiveColour: '#ffffff',
bShowThumbnailArrows: false,
nThumbButtonSize: 24,
nThumbButtonIndent: 50,
nColBorderWidth: 2,
nTransitionStyle: 1,
nStaticTime: 3044,
nTransitTime: 1015,
bAutoplay: true,
loadingButtonSize: 38,
bPageCentred: true,
nPageWidth: 1000,
nZIndex: 100,
loadingButtonSrc: 'wpimages/wpgallery_loading_1.gif',
blankSrc: 'wpscripts/blank.gif',
rewindButtonSrc: 'wpimages/wpgallery_rewind_0.png',
prevButtonSrc: 'wpimages/wpgallery_previous_0.png',
playButtonSrc: 'wpimages/wpgallery_play_0.png',
pauseButtonSrc: 'wpimages/wpgallery_pause_0.png',
nextButtonSrc: 'wpimages/wpgallery_next_0.png',
forwardButtonSrc: 'wpimages/wpgallery_forward_0.png',
thumbRewindButtonSrc: 'wpimages/wpgallery_rewind_0.png',
thumbForwardButtonSrc: 'wpimages/wpgallery_forward_0.png',
rewindoverButtonSrc: 'wpimages/wpgallery_rewind_over_0.png',
prevoverButtonSrc: 'wpimages/wpgallery_previous_over_0.png',
playoverButtonSrc: 'wpimages/wpgallery_play_over_0.png',
pauseoverButtonSrc: 'wpimages/wpgallery_pause_over_0.png',
nextoverButtonSrc: 'wpimages/wpgallery_next_over_0.png',
forwardoverButtonSrc: 'wpimages/wpgallery_forward_over_0.png',
thumboverRewindButtonSrc: 'wpimages/wpgallery_rewind_over_0.png',
thumboverForwardButtonSrc: 'wpimages/wpgallery_forward_over_0.png',
strRewindToolTip: 'Reverse',
strPreviousToolTip: 'Previous',
strPlayToolTip: 'Play',
strPauseToolTip: 'Pause',
strNextToolTip: 'Next',
strForwardToolTip: 'Forward',
strThumbRewindToolTip: 'Reverse',
strThumbForwardToolTip: 'Forward'
});
})
</script>
</head>
<body text="#000000" style="background-color:#ffffff; text-align:center; height:1200px;">
<div style="background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;position:relative;width:1000px;height:1200px;">
<div id="wp_gallery_pg_2" style="position:absolute; left:77px; top:-183px; width:844px; height:842px; overflow:hidden;"></div>
<img src="wpimages/wp7d3e6c5d_06.png" width="997" height="1197" border="0" alt="" onload="OnLoadPngFix()" style="position:absolute;left:0px;top:3px;">
</div>
</body>
</html>
IE, Chrome, and Safari all display this page correctly: http://eataustineat.com/testfolder2/ here is what i mean by Firefox displays it incorrectly in firefox: 1) type 'f' into the search field 2) you should move over to a youtube video 3) now click the Search tab at the bottom 4) you should notice the a portion of the video remains visable. the site uses jquery for the slider. what should I be looking for? I read that you don't allow homework assignments to be posted, but this is only one small section of the assignment (1 page of 5), and I have a migraine, and I am utterly hopeless and lost (ha)... I was wondering if there was any errors you could point out to me that would explain why the button isn't doing ANYTHING (i.e. not calculating the sum, average, or grade) when i click it. I'm new to js so I'm sure it could be pretty much any n00b error in the function code. But like I said any help would be greatly appreciated... Code: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="5A.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
function DisplayGrades()
{ var aNum= 1* document.getElementById("txtaNum").value;
var bNum= 1* document.getElementById("txtbNum").value;
var Avg = (aNum+bNum)/2; document.getElementById("txtAvg").value=Avg;
var Sum= aNum+bNum; document.getElementById("txtSum").value=Sum;
var alphaGr= document.getElementbyID("txtalphaGr").value=alphaGr;
if (Avg <= 60)
alphaGr="F";
if (Avg>60 && Avg <= 70)
alphaGr="D";
if (Avg>70 && Avg <= 80)
alphaGr="C";
if (Avg>80 && Avg <=90)
alphaGr="B";
if (Avg>90 && Avg <=100)
alphaGr="A";}
</script>
</head>
<body>
<div id="wrapper">
<div id="interact">
Enter your grade for Test 1: <input type="text" id=txtaNum" class="controls" size="10" /> <br />
Enter your grade for Test 2: <input type="text" id=txtbNum" class="controls" size="10" /> <br />
<input type="button" id="btnDisplayGrades" value="Display Grades" onclick="DisplayGrades();" />
<hr/>
Sum of Your Grades: <input type="text" id="txtSum" class="controls" size="10" readonly="readonly" /> <br/>
Average Grade: <input type="text" id="textAvg" class="controls" size="10" readonly="readonly" /> <br />
Alpha Grade: <input type="text" id="txtalphaGr" class="controls" size="10" readonly="readonly" />
</div>
</div>
</body>
</html>
|
|||||||