JavaScript - Java Breaks On One Page Only
I am trying to get a site working that some hack developed. Got it nearly operational, except for one page, the down arrows do not work. They fire via javascript. It is just a hover and scroll deal. The java gets loaded the same for every page, but it breaks on this one.
I am decent with some coding, but I know I am light years behind the smart people in this forum, especially when it comes to java. I really could use a hand. Thanks Working scroll: http://66.147.244.241/~finalco1/inde...mation-fm.html The broken scroller: http://66.147.244.241/~finalco1/inde...act-us-fm.html Similar Tutorialshere is my code Code: <ul id="myList" class="myList"> <form method="post" action="somepage"> <li id="item_1"> <a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a> Link Group </li> <li id="item_2"> <a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a> Page Group </li> <li id="item_3"> <a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a> SEO </li> <li id="item_4"> <a href="#"><img src="images/build/handle.jpg" alt="handle" border="0" /></a> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "advanced" }); function toggleEditor(id) { if (!tinyMCE.get(id)) tinyMCE.execCommand('mceAddControl', false, id); else tinyMCE.execCommand('mceRemoveControl', false, id); } </script> <textarea name="content" style="width:96%"> </textarea> <a href="javascript:toggleEditor('content');">Add/Remove editor</a> </li> </form> </ul> <p id="myList_serialize"></p> <script type="text/javascript" language="javascript" charset="utf-8"> Sortable.create('myList',{ghosting:false,constraint:true,hoverclass:'over', onChange:function(element){ var totElement = 7; var newOrder = Sortable.serialize(element.parentNode); for(i=1; i<=totElement; i++){ newOrder = newOrder.replace("myList[]=",""); newOrder = newOrder.replace("&",","); } $('myList_serialize').innerHTML = '<strong>New Order</strong>: '+newOrder; } }); </script> I some draggable li's which works fine, I have a tinyMCE WYSIWYG editor which works fine! How can I add a form to my UL LI? i am dynamically making pdf files, works great using abcpdf etc etc. the only problem that i am having is with the page breaking. i want to create a function that runs onload and can read the position of elements and add breaks before the element if it is cut off. each block ("from the west", "holiday inn express") is a span with the class name of "entry" i want to loop through those, get their height, add them together and if that span falls in the range of the page size (792px) add a page break before it. the difficult part will be when we get to pages 2 and above does that make sense? im throwing around some ideas now in a js file, if you have any please post them thanks I've got a page (hrnewseastanglia.com) where I have to use a jquery function to stretch the body to the user's window height if it isn't already. In the same code I also use a condition that if the body is bigger than the user's window, the content has a padding to stop it going over the grass. The reason I need to do the resize is because I have a background image that needs to sit at the very bottom of the page (with no bar or gap below it). The reason the padding can only exist when the body is bigger than the window is because it will put a scrollbar on pages that shouldn't have them. It works great, but the only trouble is that if somebody decides to resize their window on a page that fits in it - it breaks. This is my script: Code: <script type="text/javascript"> $(document).ready( function() { stretch_portal_content(); $(window).resize( stretch_portal_content ); }); function stretch_portal_content() { // if the body isn't at least as big as the user's window - force it to be if( $(window).height() > $('body').height() ) { $( '#wrapper' ).height( $(window).height() - ( $('body').height() - $('#wrapper').height() ) ); } // if the content goes beyond the window make sure it doesn't go beyond the grass at the bottom if( $(window).height() < $('#wrapper').height() ) { $( '#wrapper' ).css("padding-bottom", '130px'); } } </script> I've been scratching my head over this for hours but haven't come up with a solution. If anyone can help I'd really appreciate it! The title says it all really. An example of the cufon breaking is when I add a product to my cart, example here http://joemeetsjoy.com/products When you click buy now then click ok on the pop up box the cufon breaks. It also happens if you go the the shopping cart and choose a shipping option. Any ideas why this happens. Thanks Something is up with my coding, when I try to load the page.. it will only load in notepad. Help! <html> <head> <title>Other ways to help</title> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } function validateForm(form) { var fName = form.txtFname.value; var dataIsValid = true; var errMsg = "The following inputs are missing or invalid:\n\n"; if(fName == '') { errMsg = errMsg + "First Name\n"; dataIsValid = false; } if(lName == '') { errMsg = errMsg + "Last Name\n"; dataIsValid = false; } if(dataIsValid) { return true; } else { alert(errMsg); return false; } } //--> </SCRIPT> </head> <body> <a name="other"> <body background="otherbackground.jpg"> <center><table border="2" cellspacing="2" width="900" height="190" bordercolor="#000000"> <tr> <td width="60%" td bgcolor="white"> <b>To make a donation, fill and submit the following form. You can also make a cash donation directly by filling out your credit card information.<br/> Also, be sure to check yes if you would like to subscribe to our online monthly newsletter.</b><br/> <form name="Donations" method="post" action="#" onsubmit="validateForm(this);"> First Name<input type="text" name="txtFname" size="25" tabindex="1"> M.I.<input type="text" name="M.I." size="1"> Last Name<input type="text" name="Last Name" size="25"><br/> Street Address<input type="text" name="Street Address" size="25"> Street Address 2<input type="text" name="Street Address 2" size="25"><br/> City<input type="text" name="City" id="myCity" size="20"> State<input type="text" name="State" size="2"> Zip<input type="text" name="Zip Code" size="10"maxlength="9"><br/> Email<input type="text" name="Email" size="25"><br/> Credit Card Number<input type="text" name="Credit Card Number" size="10"maxlength="8"> Expiration Date<input type="text" name="Expiration Date" size="5"> Security Number<input type="text" name="Security Number" size="3"maxlength="3"> <textarea cols="50" rows="4" name="Comments">Comments or Questions:</textarea><br/> Subscribe to newsletter? <input type="radio" name="choices" value="Yes">Yes<input type="radio" name="choices" value="No">No<br/><br/> <input type="submit" value="Submit"> <input type="reset"> </form><br/> </table><br/> <FORM ACTION="../cgi-bin/redirect.pl" METHOD=POST onSubmit="return dropdown(this.gourl)"> <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="home.html">Home Page <OPTION VALUE="dogs.html">Learn About Dogs <OPTION VALUE="cats.html">Learn About Cats <OPTION VALUE="exotics.html">Learn About Exotics <OPTION VALUE="other.html">Other Ways To Help </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <br/><br?> </body> </html> here is all my code for _form.php PHP Code: <?php use_stylesheets_for_form($form) ?> <?php use_javascripts_for_form($form) ?> <html> <head> <script type="text/JavaScript"> function refreshPage(value) { [COLOR="Red"]//need to test here id user selects from the dropdown "zed-catcher" i must display on the page the following: [/COLOR] if ($row->getName() == "zed-catcher") { echo $form['service_code']->renderLabel(); echo $form['service_code']->renderError(); echo $form['service_code']; } [COLOR="Red"]///so the code above is not right...dont know how to code this in java script[/COLOR] window.location.reload(); } </script> </head> </html> <body> <form action="<?php echo url_for('adminservice/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getId() : '')) ?>" method="post" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>> <?php if (!$form->getObject()->isNew()): ?> <input type="hidden" name="sf_method" value="put" /> <?php endif; ?> <table > <tfoot> <tr> <td colspan="2"> <?php echo $form->renderHiddenFields(false) ?> <a href="<?php echo url_for('adminservice/index') ?>">Back to list</a> <?php if (!$form->getObject()->isNew()): ?> <?php echo link_to('Delete', 'adminservice/delete?id='.$form->getObject()->getId(), array('method' => 'delete', 'confirm' => 'Are you sure?')) ?> <?php endif; ?> <input type="submit" value="Save" /> </td> </tr> </tfoot> <tbody> <?php echo $form->renderGlobalErrors() ?> <tr> <th><?php echo $form['name']->renderLabel() ?></th> <td> <?php echo $form['name']->renderError() ?> <?php echo $form['name']?> </td> </tr> <tr> <th><?php echo $form['logo_url']->renderLabel() ?></th> <td> <?php echo $form['logo_url']->renderError() ?> <?php echo $form['logo_url'] ?> </td> </tr> <tr> <th><?php echo $form['wap_home']->renderLabel() ?></th> <td> <?php echo $form['wap_home']->renderError() ?> <?php echo $form['wap_home'] ?> </td> </tr> <tr> <th><?php echo $form['call_center_number']->renderLabel() ?></th> <td> <?php echo $form['call_center_number']->renderError() ?> <?php echo $form['call_center_number'] ?> </td> </tr> <tr> <th><?php echo $form['catcher_id']->renderLabel(); $catcher_id = $form->getObject()->getCatcherId(); $catcher = LpmCatcherPeer::getByCatcherId($catcher_id); $catcher_name = $catcher->getName(); ?></th> <td> <?php echo $form['catcher_id']->renderError() ?> <select name="services"> <?php $catcher_names = LpmCatcherPeer::getByAllNames(); foreach($catcher_names as $row) { ?> <option value="<?php echo $row->getName()."/".$row->getId();?>" <?php if($row->getName() == $catcher_name) echo ' selected="selected"'; ?> [COLOR="Red"]onchange="refreshPage(this.value)"[/COLOR]><?php echo $row->getName();?></option> <?php } ?> </select> </td> </tr> <tr> <th><?php echo $form['price_description']->renderLabel() ?></th> <td> <?php echo $form['price_description']->renderError() ?> <?php echo $form['price_description'] ?> </td> </tr> <tr> <th><?php echo $form['invalid_msisdn_text']->renderLabel() ?></th> <td> <?php echo $form['invalid_msisdn_text']->renderError() ?> <?php echo $form['invalid_msisdn_text'] ?> </td> </tr> <tr> <th><?php echo $form['terms_and_conditions']->renderLabel() ?></th> <td> <?php echo $form['terms_and_conditions']->renderError() ?> <?php echo $form['terms_and_conditions'] ?> </td> </tr> </tbody> </table> </form> </body> please see code and comments in red... dont know how to code it in java script..please help??? many thanks how can set focus on Drop down after page is reset . when i press down key first time its working fine and select value but when i press again down key its focus out from drop down when i hard code means i give the control name its working fine but when i checking the type document.getElementById(document.activeElement.id).type == "select-one" its getting focus out after second time pressing down key sample code if (document.getElementById('control name'!=null) { document.getElementById('control name).focus(); if (document.getElementById(''control name)[document.getElementById('cntrlname').selectedIndex+1] !== null) { document.getElementById('cntrlname').selectedIndex=document.getElementById('cntrl namer').selectedIndex+1; document.getElementById('ctr name').onchange(); document.getElementById("ctlr name").selectedIndex = document.getElementById("ctr name").selectedIndex; document.getElementById('cntrl').focus(); } return false; } This code is working fine but this is spcefic to the control i want all drop down control in my app are set by pressing Hi, I'm creating a new email in javascript via outlook. When i try entering a line break "\n", "\r", "\r\r", etc, Outlook just ignores it completely. I've tried using "%0D%0A" and "fromCharCode(10)" as well but it doesnt seem to read it as a line break. Is there any way to code it so that a line break or a carriage return appears on outlook? I have the following code: Code: <script> $(function() { var inputArr = new Array("#register_id #username_id", "#register_id #email_id", "#register_id #password1_id", "#register_id #password2_id", "#signin_id #email_id", "#signin_id #password_id"); var inputToOverlayDict = new Array(); inputToOverlayDict[inputArr[0]] = "#register_id #usernameOverlay_id"; inputToOverlayDict[inputArr[1]] = "#register_id #emailOverlay_id"; inputToOverlayDict[inputArr[2]] = "#register_id #passwordOverlay1_id"; inputToOverlayDict[inputArr[3]] = "#register_id #passwordOverlay2_id"; inputToOverlayDict[inputArr[4]] = "#signin_id #emailOverlay_id"; inputToOverlayDict[inputArr[5]] = "#signin_id #passwordOverlay_id"; var i; for(i=0; i<6; i++) { $(inputArr[i]).focus(function() { $(inputToOverlayDict[inputArr[i]]).hide(); }); } /* $(inputArr[0]).focus(function() { $(inputToOverlayDict[inputArr[0]]).hide(); }); $(inputArr[0]).blur(function() { if($(this).val().length == 0) $(inputToOverlayDict[inputArr[0]]).show(); }); $(inputArr[1]).focus(function() { $(inputToOverlayDict[inputArr[1]]).hide(); }); $(inputArr[2]).focus(function() { $(inputToOverlayDict[inputArr[2]]).hide(); }); $(inputArr[3]).focus(function() { $(inputToOverlayDict[inputArr[3]]).hide(); }); $(inputArr[4]).focus(function() { $(inputToOverlayDict[inputArr[4]]).hide(); }); $(inputArr[5]).focus(function() { $(inputToOverlayDict[inputArr[5]]).hide(); }); */ }); </script> The whole idea is that if a certain div object comes to focus, something else disappears (using JQuery). For some reason the code in the comments is working fine, but the for loop breaks everything down. Why? My page is he http://acq.matthewboehler.com/ I have jQuery script written on my page to create a fade-effect when an image is hovered. See the large, kitchen image in the middle of the screen to see this effect in action. This is done on images with the "fade" class and styled with the second image as its background image. My problem is when I apply the "fade" class to another image, the background image does not appear on a rollover. See the bottom left corner image, when you rollover it goes away. Can someone explain why? I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7. When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely. The error I'm getting from the IE9 developer tools debugger is: SCRIPT65535: Invalid calling object dynamicselect.js, line 31 character 18 I have bolded the relevant line below. Code: function dynamicSelect(id1, id2) { // Browser and feature tests to see if there is enough W3C DOM support var agt = navigator.userAgent.toLowerCase(); var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); var is_mac = (agt.indexOf("mac") != -1); if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) { // Obtain references to both select boxes var sel1 = document.getElementById(id1); var sel2 = document.getElementById(id2); // Clone the dynamic select box var clone = sel2.cloneNode(true); // Obtain references to all cloned options var clonedOptions = clone.getElementsByTagName("option"); // Onload init: call a generic function to display the related options in the dynamic select box refreshDynamicSelectOptions(sel1, sel2, clonedOptions); // Onchange of the main select box: call a generic function to display the related options in the dynamic select box sel1.onchange = function() { refreshDynamicSelectOptions(sel1, sel2, clonedOptions); }; } } function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) { // Delete all options of the dynamic select box while (sel2.options.length) { sel2.remove(0); } // Create regular expression objects for "select" and the value of the selected option of the main select box as class names var pattern1 = /( |^)(select)( |$)/; var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)"); // Iterate through all cloned options for (var i = 0; i < clonedOptions.length; i++) { // If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) { // Clone the option from the hidden option pool and append it to the dynamic select box sel2.appendChild(clonedOptions[i].cloneNode(true)); } } } Thank you in advance for any help provided. I pulled together a custom RSS twitter feed that uses javascript; however, when I tell the code to "callback" 3 posts, they all run together without line breaks. What is the best way to have breaks between the posts? This page shows the html code (in the right sidebar): http://www.westbrockdesign.com/twitter.html The javascript looks like this: Code: function twitterCallback2(C){var A=[];for(var D=0;D<C.length;D++){var E=C[D].user.screen_name;var B=C[D].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(F){return'<a href="'+F+'">'+F+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(F){return F.charAt(0)+'<a href="http://www.twitter.com/'+F.substring(1)+'">'+F.substring(1)+"</a>"});A.push("<span>"+B+'</span> <a style="font-size:85%" href="http://twitter.com/'+E+"/statuses/"+C[D].id+'">'+relative_time(C[D].created_at)+"</a>")}document.getElementById("twitter_gretchen").innerHTML=A.join("")}function relative_time(C){var B=C.split(" ");C=B[1]+" "+B[2]+", "+B[5]+" "+B[3];var A=Date.parse(C);var D=(arguments.length>1)?arguments[1]:new Date();var E=parseInt((D.getTime()-A)/1000);E=E+(D.getTimezoneOffset()*60);if(E<60){return"less than a minute ago"}else{if(E<120){return"about a minute ago"}else{if(E<(60*60)){return(parseInt(E/60)).toString()+" minutes ago"}else{if(E<(120*60)){return"about an hour ago"}else{if(E<(24*60*60)){return"about "+(parseInt(E/3600)).toString()+" hours ago"}else{if(E<(48*60*60)){return"1 day ago"}else{return(parseInt(E/86400)).toString()+" days ago"}}}}}}}; Any insights would be much appreciated! Hi I currently have this: var d = new Date() var theDay = d.getDay() switch (theDay) { case 1: document.write("On Air Tonight...") <br> document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break case 2: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break case 3: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break case 4: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break case 5: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break case 6: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break case 7: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") break default: document.write("On Air Tonight...") document.write("ALAN POWELL!") document.write("8pm - 10pm") document.write("CARL KANE!") } Which obviously outputs the following: On Air Tonight...ALAN POWELL!8pm - 10pmCARL KANE! How do i code it so it displays On Air Tonight... ALAN POWELL! 8pm - 10pm CARL KANE! Also in Firefox, its not displaying ANYTHING... is there anything wrong in the code which FF would throw out? CSS validation says everything is ok any help would be fantastic. Thanks in advance UKD. Hi, I have my page here. There is a tab system on the page that uses javascript. View the source the see the javascript file (tabber9.compressed.js). Now, on my end, I am adding some tracking code. The code looks like this: Code: <SCRIPT TYPE='text/javascript' LANGUAGE='JavaScript'><!-- // window.onload = initPage; function initPage() { if (this.GetCustomerGUID) document.forms["Test"].elements["CustomerGUID"].value = GetCustomerGUID(); } //--></SCRIPT> The problem is, when I add this code to my footer, it breaks the tab system. The tabs don't work any more. I am not a JavaScript expert by any means (or else I would have known what the issue is! lol) but, I guess it has something to do with the window.onload function? I say that because I see the window.onload code in the tabber javascript as well. Any advice or help anyone can give would be greatly appreciated. Thanks in advance for any help! I must have spent around 8 hours looking for the JavaScript code I need for putting text on the screen using onclick. Here is the code I found: http://javascript.internet.com/snipp...functions.html Code: /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: HunBug | http://www.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11430 */ function appendText(node,txt) { node.appendChild(document.createTextNode(txt)); } function appendElement(node,tag,id,htm) { var ne = document.createElement(tag); if(id) ne.id = id; if(htm) ne.innerHTML = htm; node.appendChild(ne); } That works great, but I need to add three lines of text at a time, not just one. I spent at least 4 more hours searching for ways to add a line break with JavaScript, but nothing I have found works with this code. Here's what the onclick code looks like: Code: onclick="appendText(document.getElementById('bb1'),'8,4,6' + '0,0,0' + '16'); <div id="bb1"></div> The page I'm working on will have clickable text and image maps and when you click, three lines of batari Basic code will be added to a DIV. Here's an example of what that code will look like: Code: 8,4,6 0,0,0 16 Click on another link and you'd see something like this: Code: 8,4,6 0,0,0 16 8,12,17 0,0,0 16 It would keep adding three lines of batari Basic code to the list every time you clicked. If somebody can figure out how to stick line breaks in this code that really work, I'll be all set. I have tried <BR>, \n, \r\n and a couple of other things, but nothing works so far. Thanks. hi, I have some HTML to edit in my database, in my back end administration I have it in a textarea but when I go to edit it, it all messes up and lots of '/' area added, see below: Code: Site Design by: <a href=\\\\\\\"http://www.jbiddulph.com\\\\\\\" target=\\\\\\\"_blank\\\\\\\" title=\\\\\\\"John Biddulph - Web Development\\\\\\\">jbiddulph.com</a> php code Code: <p> <label>Site Design by</label> <textarea class="text-input small-input" name="SiteDesignby"><?php echo $row1['SiteDesignby'] ?></textarea> </p> Can anyone help please? This is about http://www.aecp.pt You will see this on the page, and I highlight the problem on the screenshot itself: http://skitch.com/ricardosalta/nk9g4...ub-de-portugal I know by trial and error that the problem is caused by the presence of image galleries like this on the homepage: http://skitch.com/ricardosalta/nk988...ub-de-portugal I use Mac; is there a good tool to find these incompatibilities? Anyway, I appreciate all the help you can gift me with. Any pointers will be much valuable. Thanks. All the best, Tatonka Hello; I am testing some code that finds and element and attempts to add an event handler attribute to it as 'onclick' (test case in Firefox 3.5.9) /* The actual code is: window.onload = function() { //<irrelevant code> var test = document.getElementById('tstEl'); test.setAttributeNode('onclick'); test.setAttribute('onclick', "alert(\"Don\'t get testy\")"); } */ The error per the js console in Firefox is: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLInputElement.setAttributeNode]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://192.168.1.6/<pathInfo>/SC_branch2_dev.php :: anonymous :: line 35" data: no] I am trying to do this because Element.addEventListener or Element.attachEvent won't allow for arguments to be passed to the event handler code/function. What is going on here? The only line referenced, line35, in the document text containing javascript code is irrelevant to the problem. Thank you for time, interest and attention; WhoEverIReallyAm |