|
JavaScript - Strange Behavior Getelementbyid() In Safari/firefox
So I've started learning Javascript some days ago.
Reading 'JavaScript Bible' Seventh Edition. One of the things the book repeatedly says is: use: Code: if(!document.getElementById()) return; (and others like: Code: if(!document.createTextNode()) return; ) to filter out all the browser who are in fact not supporting DOM. As I'm using Safari (and Firefox for testing purpose) the 'document.getElementById()' and therefo DOM is supported. Now, my browsers (both Safari and Firefox) get returned out of the javascript anyway. as simple as: Code: if(!document.getElementById()) return;
document.write("testIt!");
the document.write doesn't get executed. Now: I found a simple solutions which seems to work.... partially: Code: if(document.getElementById() == "undefined") return;
document.write("testIt!");
This seems to work for Safari, but Firefox still gets returned out of the javascript. I could just omit the if statements to make it work altogether. But that doesn't sound like the best method to me, because (so I've read) it can crash browsers and such. Now my question: Why are my browsers (or javascript for all I care) acting so strange? Is there a way to make the if(!document.getElementById()) work? or is it just a silly rule the writers of the JavaScript Bible made up? Thanks in advance for any help :) Similar TutorialsI have an interval set that runs indefinitely (backgrounds switching) or until the viewer stops it. I've noticed that when I close a tab while it's running and revisit the page, it "doubles" the interval and the backgrounds get mixed up. Refreshing the page returns it to normal. Does anyone know how to fix this? I've tried clearing the interval with window.onunload and window.onbeforeunload. I'm thinking it has something to do with firefox not clearing its cache for the tab. I'll look into disabling that. hi i am using an image scroller and i have it on three pages, the pages use the same header, the same css and the same basic structure. such as table content footer the problem is that the scroller works fine on two of the pages but does not work at all on the one page. here is what i am getting on that page Code: Message: 'ElementExtensions' is null or not an object Line: 1898 Char: 3 Code: 0 URI: http://www.mysite.com/lightbox_slideshow/prototype.js Message: Object doesn't support this property or method Line: 705 Char: 41 Code: 0 URI: http://www.mysite.com/lightbox_slideshow/lightbox.js Message: Array length must be assigned a finite positive number Line: 464 Char: 5 Code: 0 URI: http://www.mysite.com/lightbox/js/prototype.js the only common denominator i can see is that the page it does NOT work on is in fact a photo manager page, the other two (that DO work dont deal with photos) i checked the array and the js vars and stuff are different from my photo manager vars (php) so i was thinking maybe there might be a clash of some kind accessing the queries at the same time when the page loads but i dont get any errors other than these. by the way the scroller is black not grey like the others for background. does it sound like from the errors that i am getting that it might be a db query clash of somekind or do you know anything about those errors above that might give me a clue whats going on. thanks have a look at this website. www.projectorhire.ie in the contactDetails div the number appears for a split second and then disappears.. it only happens in firefox.. Can anyone tell me what the prob could be? Hi, I think from what I have been reading that Firefox has quite a problem with some Javascript. We had this little script written for us which works great in IE but I have no clue how to get it to work with Firefox. Any ideas would be greatly appreciated! Code: <script type="text/javascript">
<!--
function getObject(obj) {
var theObj;
if(document.all) {
if(typeof obj=="string") {
return document.all(obj);
} else {
return obj.style;
}
}
if(document.getElementById) {
if(typeof obj=="string") {
return document.getElementById(obj);
} else {
return obj.style;
}
}
return null;
}
function checkqty(item1,item2) {
var item1Obj=getObject(item1);
var item2Obj=getObject(item2);
if (item1Obj.checked == true) {
item2Obj.value = "1";
}
else if (item1Obj.checked == false) {
item2Obj.value = "0";
}
}
//-->
</script>
<input type="checkbox" name="item2" value="012345" onClick="checkqty('item2','quantity2');">
<input type="hidden" name="quantity2" value="0">
This code works fine in IE but it won't in FF. The error console says topdiv.style and sidediv.style are 'undefined' This is the javascript: Code: function changeposition() {
topdiv = "document.getElementById('top')";
sidediv = "document.getElementById('side')";
if (document.scrolltop > 100) {
topdiv.style.position = "fixed";
topdiv.style.top = "-100px";
sidediv.style.position = "fixed";
sidediv.style.position = "35px";
} else {
topdiv.style.position = "absolute";
topdiv.style.top = "0px";
sidediv.style.position = "absolute";
sidediv.style.position = "135px";
}}
window.onscroll = changeposition();
and the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="standardstyle.css"> <script type="text/javascript" src="menuposition.js"></script> </head> <body> <div class="top" id="top"> ... </div> <div class="sidebar" id="side"> ... </div> ... </body> </html> I'm using FF4 I'm working on my own site for layouts for sites like Myspace and Ning. Myspace changed their layouts to no longer include CSS so I am working on a new way to post their layouts. I used this same method to post all our other layouts. For some reason this is not showing up in IE. Firefox: IE: Interestingly enough, when I run the debugger in IE it loads when it is done. If not I get the black hole effect above. ERRORS: Object required Not implemented Any help will be greatly appreciated! Code: bgImg = document.getElementById('bg').innerHTML;
tile = document.getElementById('bgtile').innerHTML;
att = document.getElementById('bgatt').innerHTML;
pos = document.getElementById('bgpos').innerHTML;
top = document.getElementById('mar').innerHTML;
ht = document.getElementById('marht').innerHTML;
alink = document.getElementById('sel').innerHTML;
col = document.getElementById('bgcol').innerHTML;
hed = document.getElementById('hdr').innerHTML;
bord = document.getElementById('bdr').innerHTML;
con = document.getElementById('ct').innerHTML;
div3 = document.getElementById('MS3css').innerHTML;
if (document.getElementById('bg')){
document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;" onclick="select()" ><img src="'+bgImg+'"></textarea><br />';}
if (document.getElementById('bgtile')){
document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+tile+'</textarea><br />';}
if (document.getElementById('bgatt')){
document.getElementById('bgattEmpty').innerHTML='Background Attachment: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+att+'</textarea><br />';}
if (document.getElementById('bgpos')){
document.getElementById('bgposEmpty').innerHTML='Background Position: <br /><textarea id="MS3" style="width: 250px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+pos+'</textarea><br />';}
if (document.getElementById('mar')){
document.getElementById('marEmpty').innerHTML='Marquee: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"><a href="http://skemaholicsanonymous.com/"><img src="'+top+'"></a></textarea><br />';}
if (document.getElementById('marht')){
document.getElementById('marhtEmpty').innerHTML='Marquee Height: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+ht+'</textarea><br />';}
if (document.getElementById('sel')){
document.getElementById('selEmpty').innerHTML='Selected: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+alink+'</textarea><br />';}
if (document.getElementById('bgcol')){
document.getElementById('bgcolEmpty').innerHTML='Background Color: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+col+'</textarea><br />';}
if (document.getElementById('hdr')){
document.getElementById('hdrEmpty').innerHTML='Header: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+hed+'</textarea><br />';}
if (document.getElementById('bdr')){
document.getElementById('bdrEmpty').innerHTML='Borders: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+bord+'</textarea><br />';}
if (document.getElementById('ct')){
document.getElementById('ctEmpty').innerHTML='Content: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;" onclick="select()" >'+con+'</textarea><br />';}
if (document.getElementById('MS3css')){
document.getElementById('code2Empty').innerHTML='<form id="genDone"action="http://blog.skemaholicsanonymous.com/MSPreview3/preview.php" method="post" rel="nofollow" target="_blank"><textarea id="codebox" style="display: none;" name="genCode">'+div3+'</textarea><br /><input type="submit" value="Preview" id="prevLoad" /></form>';}
Hi, This code uses the getElementById to change the background of certain <tr>'s. In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells. Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it. Can anyone shed light on the solution please? Code: <script language="javascript" type="text/javascript">
function changeBackgroundColor(objDivID)
{
var backColor = new String();
if ( objDivID == "lifesciences" )
{
backColor = document.getElementById('claire').style.backgroundColor;
}
if ( objDivID == "healthcare" )
{
backColor = document.getElementById('adrienne').style.backgroundColor;
}
if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
// IE works with hex code of color e.g.: #eeeeee
// Firefox works with rgb color code e.g.: rgb(238, 238, 238)
// Thats why both types are used in If-condition below
{
if ( objDivID == "lifesciences" )
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#c0c0c0';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
document.getElementById('paul').style.backgroundColor = '#c0c0c0';
document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
else
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
}
else
{
document.getElementById('david').style.backgroundColor = '#ffffff';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#ffffff';
document.getElementById('alice').style.backgroundColor = '#ffffff';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#ffffff';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#ffffff';
document.getElementById('chantal').style.backgroundColor = '#ffffff';
document.getElementById('lee').style.backgroundColor = '#ffffff';
document.getElementById('lisa').style.backgroundColor = '#ffffff';
}
}
</script>
Hi coders, I have an .asp page on which you can change the background picture of a cell by simply selecting the desired color from a dropdown field. When running the page in Firefox its Error console tells me the following: Error: document.getElementById.bgtd is undefined Source File: [localhost...] Line: 29 Here is the code: <select name=ADDITIONALINFO1 ID="Select1" onchange="changebg(document.forms[0].ADDITIONALINFO1[document.forms[0].ADDITIONALINFO1.selectedIndex].value)"> <option value="White"> White <option value="Black"> Black <option value="Blue"> Blue </select> And here is the changebg script: function changebg(color){ if (color=="Black") document.getElementById("bgtd").background = "img/bg-tshirt5.jpg"; else if (color=="Blue") document.getElementById("bgtd").background = "img/bg-tshirt_bl.jpg"; else document.getElementById("bgtd").background = "img/bg-tshirt2.jpg"; document.forms[0].bgimg.value = document.getElementById("bgtd").background; } Here is the table where the image is displayed as bachground: <td width="353" background="img/bg-tshirt2.jpg" height="269" id="bgtd"> <p align="center"><font size="1"> <br> <img src="<%=imgSrc%>"></font></td> Internet Explorer does not complain and does the job without any errors. I Could not find out how to make it work also with Firefox. Any comments are appreciated. for some reason on my site 2 javascipts are acting strange there is obviously a conflict in them but I have no idea when it comes to javascript. My site can be viewed at www.actioncomputing.co.uk The images on the right hand side use a script which makes them open a window with the enlarged image in, the revolving image below just cycles through other jobs i have done. now problem is when the side images are clicked everything else on page should go dark including the revolving image but it doesnt it stays light and even goes over the top of my close button ( please try clicking on the sds asbuilt image you will see what i mean. my html code is below but i dont think there is a issue here Im thinking there must be a variable thats conflicting between the 2?!?!? Code: <!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>Web Design Bournemouth, Graphic Design Hampshire, Logo Design Dorset, Southampton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Website Design and Graphic Design by Action computing, A leading Website Design Company. Website Design, Ecommerce Web Design & Web Development. Logo Design, Label Design ."/>
<meta name="keywords" content="web design bournemouth, website design, web designers, website optimization, advert design,logo design, pc repair, label design, design, web design company, ecommerce, ecommerce web design, hampshire, dorset, bournemouth, southampton"/>
<meta name="author" content="Website and Graphic Design Company, Action Computing"/>
<meta name="language" content="EN"/>
<meta name="Classification" content="Website Design and Graphic Design Company"/>
<meta name="copyright" content="www.ActionComputing.co.uk"/>
<meta name="robots" content="index, follow"/>
<meta name="revisit-after" content="7 days"/>
<meta name="document-classification" content="Website Design and Graphic Development"/>
<meta name="document-type" content="Public"/>
<meta name="document-rating" content="Safe for Kids"/>
<meta name="document-distribution" content="Global"/>
<link href="new-css-rebuild.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1",
dimensions: [220, 200],
imagearray: [
["images/demos/sdsasbuilt.jpg", "http://www.asbuiltsdsgroup.co.uk/", "_new", "Asbuilt SDS group front portal"],
["images/demos/sdsgroup.jpg", "http://www.sds-group.co.uk/", "_new", "SDS Asbuilt group front portal"],
["images/demos/gillyprint.jpg", "http://www.gillyprinters.com", "_new", "Gilly Print, professional labelling Website"],
["images/demos/firetradeasia.jpg", "http://www.hemminginfo.co.uk/index.cfm?fuseaction=home.products&producttypeid=2", "_new", "Hemming Information Group online Fire Trade Europe Directory ."],
["images/demos/timespace.jpg", "http://www.intensive-driving-schools.co.uk/", "_new", "Time and Space driving schools website"],
["images/partytubhire.jpg", "http://www.partytubhire.co.uk", "_new", "Party Tub Hire Website 'Relax in style'"],
["images/demos/arborventure.jpg", "http://www.arborventure.co.uk/", "_new", "Arbor Venture Website"]
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<div class="header">
<div class="Topleftmenu">
<p style="text-align:center; padding-top:7px;">
<a class="menu" href="index.html">Home</a> <span class="vertline">|</span> <a class="menu" href="contact-action-computing-web-design.php">Contact</a> <span class="vertline">|</span> <a class="menu" href="#">About Us</a> <span class="vertline">|</span></p>
</div>
<div class="topmenuright"></div>
<div class="menumiddle"></div>
<div class="menubottomimage"></div><div class="menubottomright">
<p style="text-align:center; padding-top:7px;"><a class="menu" href="webdesign-web-designer-hampshire-dorset-bournemouth.htm">Web Design</a> <span class="vertline">|</span><a class="menu" href="pc-maintenance-hampshire-dorset.htm"> PC Maintenance</a> <span class="vertline">|</span> <a class="menu" href="logo-Design-hampshire-dorset-bournemouth.htm">Logo Design</a> <span class="vertline">|</span> <a class="menu" href="label-Design-hampshire-dorset-bournemouth.htm">Label Design</a> <span class="vertline">|</span> <a class="menu" href="graphic-Design-hampshire-dorset-bournemouth.htm">Other Graphic Design</a></p>
</div>
<div class="Flashtop">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','622','height','101','src','images/headermov','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','images/headermov' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="622" height="101">
<param name="movie" value="images/headermov.swf" />
<param name="quality" value="high" />
<embed src="images/headermov.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="622" height="101"></embed>
</object></noscript>
</div>
</div>
<div class="content1container">
<div class="contentleft">
<div class="insideleftborder"><img src="images/sidegradients.jpg" width="9" /></div>
<div class="leftcontent-tops">
<h1 class="titles"> Welcome To Action Computing, Bournemouth!</h1>
</div>
<div class="leftcontent-bottom">
<p><br />
<h2>Welcome to Action Computing . We are a <strong>Web Design</strong> and <strong>Graphic Design</strong> studio based near Bournemouth, Dorset on the south coast of the United Kingdom. that specialize in <strong>Web Design</strong>, <strong>Web Optimisation</strong> and all elements of <strong>Graphic Design</strong> including <strong>Stationary Design</strong>, <strong>Logo Design</strong>,<strong> Label Design</strong>, <strong>Advert Design</strong>, <strong>Brochure Design</strong>, <strong>Exhibition Artwork Design</strong> and <strong>Packaging Design</strong>. Action Computing will Design Internationally as well as locally.<br /></h2>
<br />
</p>
<p>Action Computing focuses on three main goals, </p>
<p> </p>
<p ><img src="images/QuestionMark.png" width="53" height="51" style="float:right; padding-right:20px; padding-left:20px" /></p>
<p><strong>One</strong>, making things as simple for the customer as possible using language and explanations that anyone can understand rather than using <strong>Web Design</strong> /<strong> Graphic Design 'jargon'</strong>, this way rather than being confused about the subject matter the client can feel completely Comfortable with exactly what is going on</p>
<p> </p>
<p><img src="images/handshake.jpg" style="float:right; padding-right:10px; padding-left:20px; padding-top:10px;"/><strong>Two</strong>, Building a friendly long term relationship with our customers. Successful web site's are not built overnight, they evolve over a period of months and years and with Action Computing by your side you can guarantee a constant aid to all your <strong>Web Design</strong> and <strong>Graphic Design</strong> needs.</p>
<p> </p>
<p><img src="images/pile_english_money.JPG" width="72" height="59" style="float:right; padding-right:10px; padding-left:20px;" /><strong>Three</strong>, Making you money while keeping your Web or <strong>Graphic Design</strong> costs as low as possible. Its all well and good having a pretty web site but if it does not generate money or business then it is simply a waste of time and money, at Action Computing we strive to make sure your web site will succeed.</p>
<p> </p>
<p align="justify" class="style10">With over 10 Years of <strong>Web Design</strong> experience we hope to make your journey to the web as smooth as possible and guarantee to cater to your needs as best possible as we can.</p>
<p align="justify" class="style10">For Everything that is needed to take your first steps into you <strong>Web Design</strong> or <strong>Graphic future</strong> please<a href="contact.php"> click here</a> or above on the appropriate Design needed.</p>
<br />
<p align="right" style="border-top:1px dashed #000000; border-bottom:1px dashed #000000; "> Regards<br />
Action Computing </p>
</div>
<div class="leftcontent-tops">
<h1 class="titles">Our Promise</h1>
</div>
<div class="leftcontent-bottom"><br />
At Action computing are promise to to make you happy, Whether it be <strong>Graphic Design</strong> including <strong>Logo Design</strong>, <strong>Label Design</strong> and <strong>Advert Design</strong> or <strong>Web Design</strong> we will not simply make one <strong>web site</strong> or graphic that you "must" take off us! we will not give up on your <strong>Web site</strong> or Graphics until you are "100%" happy with the outcome, We do usually manage to interpret our customers design dreams to a almost identical result first time, but we will always make your design dreams become a reality!
<p></p>
<br />
<br />
<p align="right" style="border-top:1px dashed #000000; border-bottom:1px dashed #000000; ">Regards<br />
Action Computing </p>
<div align="center">
<p>All of our web sites are tested on the most common browsers.</p>
<p> </p>
<p><img src="images/ie.jpg" style=" padding-left:70px; float:left" /><img src="images/firefox.jpg" style=" padding-left:20px; float:left" /><img src="images/aol.jpg" style=" padding-left:20px; float:left"/><img src="images/SAFARI.jpg" style=" padding-left:20px; float:left"/> </p>
<p style="clear:both; padding-left:67px; float:left;">Internet Explorer Fire Fox AOL Safari<br />
<br /><strong>Web Design Bournemouth, Graphic Design Hampshire, Logo Design Dorset, Southampton </strong></p>
</div>
</div>
</div>
<div class="contentright">
<div class="insiderightborder"></div>
<div class="rightcontent-tops">
<h1 class="titles">Recent Examples</h1>
</div>
<div class="rightcontent-bottom">
<div align="center"><br />
<a href="images/demos/full size/levelchecker.jpg" title="Level-Checker Web site visit at www.level-checker.co.uk" rel="lightbox"> <img src="images/demos/level-checker.jpg" width="212" height="221" /></a><br />
<a href="images/demos/full size/levelchecker.jpg" title="Level-Checker Web site visit at www.level-checker.co.uk" rel="lightbox">Level-Checker</a><br />
Web site </p>
<hr />
<a href="images/demos/full size/asbuilt.jpg" title="Asbuilt SDS Group Web Portal visit at www.asbuiltsdsgroup.co.uk" rel="lightbox"><img src="images/demos/sdsasbuilt.jpg" width="212" height="191" /></a><br />
<a href="images/demos/full size/asbuilt.jpg" title="Asbuilt SDS Group Web Portal visit at www.asbuiltsdsgroup.co.uk" rel="lightbox">Asbuilt SDS Group</a><br />
Web site / Portal
<hr />
<div id="fadeshow1"></div>
****
******
</div>
</div>
<div class="rightcontent-tops"><h1 class="titles">Testimonials</h1></div>
<div class="rightcontent-bottom"></div>
</div>
<div class="bottommenu">
<p><a class="menubottom" href="contact-action-computing-web-design.php">Contact</a> <span class="vertline">| </span><a class="menubottom" href="webdesign-web-designer-hampshire-dorset-bournemouth.htm">Web Design</a> <span class="vertline">|</span><a class="menubottom" href="pc-maintenance-hampshire-dorset.htm"> PC Maintenance</a> <span class="vertline">|</span> <a class="menubottom" href="logo-Design-hampshire-dorset-bournemouth.htm">Logo Design</a> <span class="vertline">|</span> <a class="menubottom" href="label-Design-hampshire-dorset-bournemouth.htm">Label Design</a> <span class="vertline">|</span> <a class="menubottom" href="graphic-Design-hampshire-dorset-bournemouth.htm">Other Graphic Design</a> </p>
<p>Action Computing email:<a href="mailto:enquiries@actioncomputing.co.uk">enquiries@actioncomputing.co.uk</a> phone: 07927255606</p>
</div>
</div>
</div>
</body>
</html>
Major thanks to anyone who can help Hello. When a user visits index.html on my site, they input their email address. The form redirects them to "confirmed.html", the form also writes a cookie with their email address. When the user gets to confirmed.html, I use an "if/else" statement. If there is a cookie (email address), I append ("#"+user_email) to the window location. I do this so that when the user shares with "addthis" tool, I will know who is sharing. Unfortunately addthis only shares the current page, so I want new users to the site to be redirected to index.html My code works in firefox, but not safari. In safari it just seems to redirect to index nomatter what. The user never even sees confirmed.html. Code: var user_email = unescape(document.cookie);
if (document.cookie)
{
window.location.replace("#"+user_email);
}
else {
window.location.replace("index.html");
}
})();
</script>
The website is www.saverally.com Code:
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=200
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-150;//150 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
I have know much about javascript, but the code above works fine in safari and firefox but not IE. it's for a popup, when you click a link it blankets the page and theres a popup window. here's other parts of supporting css/php Code:
<?php
if(!$_POST['submit'] == 'login'){
echo "<div id=\"blanket\" style=\"display:none;\"></div>\n";
echo "<div id=\"popUpDiv\" style=\"display:none;\">\n";
echo "<div id=\"loginform\">\n";
echo '<div id="close">';
echo "<a href=\"#\" onclick=\"popup('popUpDiv')\">\n";
echo '<img src="images/login/close.png" border="0">';
echo "</a>\n";
echo '</div>';
echo '<div class="clear"></div>';
echo "<form name=\"login\" method=\"post\" action=\"#\">\n";
echo "<div id=\"usernametext\">Username</div>\n";
echo "<input name=\"username\" type=\"text\" id=\"usernameinput\">\n";
echo '<div class="clear"></div>';
echo "<div id=\"passwordtext\">Password</div>\n";
echo "<input name=\"password\" type=\"password\" id=\"passwordinput\">\n";
echo '<div class="clear"></div>';
echo '<div id="loginsubmit"><input type="submit" name="submit" value="Submit"></div>';
echo "</form>\n";
echo "</div>\n";
echo "</div>\n";
echo "<span class=\"login_text\"><a href=\"#\" onclick=\"popup('popUpDiv')\">LOG IN</a></span>\n";
?>
Code:
#blanket {
background-color:#000000;
opacity: 0.40;
filter:alpha(opacity=40);
position:absolute;
z-index: 10;
padding:0;
top:0;
right:0;
left:0;
bottom:0;
width:100%;
height:100%;
margin:0 0 0 0;
}
#popUpDiv {
position:absolute;
background-color:#FFFFFF;
width:280px;
height:135px;
z-index: 10;
}
any help would be VERY much appreciated. thanks Hi, I have a login script which is working in IE but not firefox or safari. I was hopoing someone might be able to point me in the right direction as i'm at a loss as to why it isn't working My login form looks like this Code: <?php
session_start();
include_once("inc.php");
$wlog='not';
$msm_error='';
if (isset($_GET['wlog']))
{
$wlog=$_GET['wlog'];
if($wlog =='out' or $wlog =='not')
{
global $HTTP_SESSION_VARS;
unset($HTTP_SESSION_VARS['client']);
}
if($wlog =='not')
{
$msm_error='<h1 style="color:#CC0000">Username or Password is incorrect</h1>';
}
}else{
$wlog=$_GET['wlog'];
}
$cms=check_login_status();
$show_cat=0;
$show_cat_sub=0;
$brand=0;
$p_size=0;
$color=0;
$r_price=0;
$status=0;
?>
function client_login_signup_form($wlog,$msm_error)
{
if($wlog =='out')
{
global $HTTP_SESSION_VARS;
unset($HTTP_SESSION_VARS['client']);
}
?>
<form name='Formlogin' id='Formlogin' method='post' action='check_user.php' onSubmit='return clientvalidate();'>
<input type='hidden' name='wlog' id='wlog' value='<?php echo $wlog; ?>'/>
<div id='logmsm'><?php echo $msm_error; ?></div>
<h1>Existing Customer - Login</h1>
<p style='color:#fdca00'>Please enter your email address and password</p>
<table width='100%' border='0' cellspacing='2' cellpadding='2'>
<tr>
<td width="20%" align='left'><p>Email Address: </p></td>
<td width="80%" ><input name='e_mail' type='text' class="input1" id='e_mail' /></td>
</tr>
<tr>
<td align='left'><p>Password: </p></td>
<td><input name='pass' type='password' class='input1' id='pass' /></td>
</tr>
<tr>
<td> </td>
<td><input name='submit' type='submit' value='Submit' /></td>
</tr>
<tr>
<td colspan="2"><p style="margin-top:5px; font-size:10px"><a href="forgotten_password.php">Forgot your password ?</a></p></td>
</tr>
</table>
</form>
<?php
}
My Javascript validation looks like this Code: function clientvalidate()
{
//alert('user')
if (document.Formlogin.e_mail.value=="")
{
alert("Please fill the E-mail.")
document.Formlogin.e_mail.focus()
return false
}else{
var user=document.Formlogin.e_mail.value;
}
if (document.Formlogin.pass.value=="")
{
alert("Please fill the password.")
document.Formlogin.pass.focus()
return false
}else{
var str=document.Formlogin.pass.value
var v2=replacewithreg(str)
if(v2==false)
{
document.Formlogin.pass.focus();
return false;
}else{
var pass=document.Formlogin.pass.value;
}
}
var wlog=document.Formlogin.wlog.value;
url='ajax_check_client_login.php?user='
url =url+user
url += '&';
url += 'pass=';
url =url+pass;
url += '&';
url += 'wlog=';
url =url+wlog;
//alert(url)
javascript:void(0);
new Ajax.Updater('', url);
//updateaccountlink();
return true
}
Can someone help me figure out why these two scripts conflict in Firefox and Safari? They work fine in Internet Explorer, and they work fine in ALL browsers when they don't have to work together on the same page. When they both need to work on the same page, it's the div/column resize script that is acting up in Safari and Firefox (again, it works fine in IE). What's really strange is that when I click on my firebug icon (in the lower righthand corner) in Firefox the divs/columns resize like they should and everything looks fine. It's almost as if it's not resizing in real time like it should be, and something about me clicking that icon is making it refresh or update or something. Any help given with this matter would be greatly appreciated! Resize two Divs (columns) to be the same height: Code: // Replace 'center' 'right' and 'left' with the ID names of the columns you want to balance.
// The last one is there to show how you can add more columns. Just delete the ones you're not using.
var divs = new Array('col1, 'col2');
// Initialize Scripts - is this a browser that understands DOM?
function scriptInit() { if (!document.getElementById) { return; } }
// Set up Event Listener
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; }
else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; }
else { elm['on' + evType] = fn; }
}
// Start Column Script
function setTall() {
if (document.getElementById) { var maxHeight = 0; for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = null; if (div.offsetHeight > maxHeight) maxHeight = div.offsetHeight; }
}
for (var i = 0; i < divs.length; i++) {
if (document.getElementById(divs[i]) != null)
{ var div = document.getElementById(divs[i]); div.style.height = maxHeight + 'px'; if (div.offsetHeight > maxHeight) { div.style.height = (maxHeight - (div.offsetHeight - maxHeight)) + 'px'; } }
}
}
}
// Assign one of the columns to the TextResizeDetector.
function initTall() {
if (document.getElementById) { for (var i = 0; i < divs.length; i++)
{ if (document.getElementById(divs[i]) != null) { TextResizeDetector.TARGET_ELEMENT_ID = divs[i]; break; } }
setTall(); }
}
// Fire Events
addEvent(window, 'load', initTall, false);
addEvent(window, 'resize', setTall, false);
/* Detects changes to font sizes when user changes browser settings
Fires a custom event with the following data:
iBase : base font size
iDelta : difference in pixels from previous setting
iSize : size in pixel of text
author Lawrence Carvalho carvalho@uk.yahoo-inc.com */
// @constructor
TextResizeDetector = function() {
var el = null;
var iIntervalDelay = 200;
var iInterval = null;
var iCurrSize = -1;
var iBase = -1;
var aListeners = [];
var createControlElement = function() {
el = document.createElement('span');
el.id='textResizeControl';
el.innerHTML=' ';
el.style.position="absolute";
el.style.left="-9999px";
var elC = document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID);
// insert before firstChild
if (elC)
elC.insertBefore(el,elC.firstChild);
iBase = iCurrSize = TextResizeDetector.getSize();
};
function _stopDetector() {
window.clearInterval(iInterval);
iInterval=null;
};
function _startDetector() {
if (!iInterval) {
iInterval = window.setInterval('TextResizeDetector.detect()',iIntervalDelay);
}
};
function _detect() {
var iNewSize = TextResizeDetector.getSize();
if(iNewSize!== iCurrSize) {
for (var i=0;i <aListeners.length;i++) {
aListnr = aListeners[i];
var oArgs = { iBase: iBase,iDelta:((iCurrSize!=-1) ? iNewSize - iCurrSize + 'px' : "0px"),iSize:iCurrSize = iNewSize};
if (!aListnr.obj) {
aListnr.fn('textSizeChanged',[oArgs]);
}
else {
aListnr.fn.apply(aListnr.obj,['textSizeChanged',[oArgs]]);
}
}
}
return iCurrSize;
};
var onAvailable = function() {
if (!TextResizeDetector.onAvailableCount_i ) {
TextResizeDetector.onAvailableCount_i =0;
}
if (document.getElementById(TextResizeDetector.TARGET_ELEMENT_ID)) {
TextResizeDetector.init();
if (TextResizeDetector.USER_INIT_FUNC){
TextResizeDetector.USER_INIT_FUNC();
}
TextResizeDetector.onAvailableCount_i = null;
}
else {
if (TextResizeDetector.onAvailableCount_i<600) {
TextResizeDetector.onAvailableCount_i++;
setTimeout(onAvailable,200)
}
}
};
setTimeout(onAvailable,500);
return {
/*
* Initializes the detector
*
* @param {String} sId The id of the element in which to create the control element
*/
init: function() {
createControlElement();
_startDetector();
},
/**
* Adds listeners to the ontextsizechange event.
* Returns the base font size
*
*/
addEventListener:function(fn,obj,bScope) {
aListeners[aListeners.length] = {
fn: fn,
obj: obj
}
return iBase;
},
/**
* performs the detection and fires textSizeChanged event
* @return the current font size
* @type {integer}
*/
detect:function() {
return _detect();
},
/**
* Returns the height of the control element
*
* @return the current height of control element
* @type {integer}
*/
getSize:function() {
var iSize;
return el.offsetHeight;
},
/**
* Stops the detector
*/
stopDetector:function() {
return _stopDetector();
},
/*
* Starts the detector
*/
startDetector:function() {
return _startDetector();
}
}
}();
/*** end TextResizeDetector */
TextResizeDetector.TARGET_ELEMENT_ID = 'doc';
TextResizeDetector.USER_INIT_FUNC = function() {
var iBase = TextResizeDetector.addEventListener(setTall, null);
};
Click link to show hidden text: Code: function expand(ele) {
if (document.getElementById('answer'+ele).style.display == '')
document.getElementById('answer'+ele).style.display='none';
else
document.getElementById('answer'+ele).style.display='';
for (i=0;i <= 75;i++) {
if (document.getElementById('answer'+i) != null && i != ele) document.getElementById('answer'+i).style.display='none';
}
}
function collapse(ele) {
document.getElementById('answer'+ele).style.display='none';
}
Can anyone tell me why the following works in IE but not the other browsers? It's the "Select category..." jump menu at this URL: www.savasbeatie.com/books.htm Code:
<TD>
<form name="whichCat" style="margin-bottom:0" method="get">
<select name="catChoice" onChange="sendValue(this);">
<option class="news4" value="javascript:location.reload(true)" selected>Select Category...</option>
<option class="news4" value="php/IraqWars.php?q=Iraq%20Wars">Iraq Wars/Current Affairs</option>
<option class="news4" value="php/AncientHistory.php?q=Ancient%20History">Ancient History</option>
<option class="news4" value="php/AmericanRevolution.php?q=American%20Revolution">American Revolution</option>
<option class="news4" value="php/NapoleonicWar.php?q=Napoleonic%20War">Napoleonic War</option>
<option class="news4" value="php/AmericanCivilWar.php?q=American%20Civil%20War">American Civil War</option>
<option class="news4" value="php/IndianWars.php?q=Indian%20Wars">Indian Wars</option>
<option class="news4" value="php/WorldWars.php?q=World%20Wars">World Wars</option>
<option class="news4" value="php/Naval.php?q=Naval">Naval</option>
<option class="news4" value="php/MilitaryScience.php?q=Military%20Science">Military Science</option>
<option class="news4" value="php/SportsHistory.php?q=Sports%20History">Sports History</option>
<option class="news4" value="php/Other.php?q=Other">Other</option>
</select>
</form>
</TD>
I've been called in to help with this, but did not build the site. There's a frame that's supposed to display the link contents, and it's returning the error: Error: document.getElementById("SB_Frame") is null Source File: http://savasbeatie.com/jscripts/SB_util.js Line: 11 I think it has something to do with the ID of the frame, (from Googling the error and reading some other posts,) but can't figure out where to put the tag. Thanks for any help. - David ok so ive nearly finished the animated javascript in my site. http://calumk.com/ to see the effect launch in chrome or safari, it works fine.. but its not working in Firefox (and i havent tested IE.. if someone could, i would appreciate it) i have no-idea why.. . im using the http://berniecode.com/writing/animator.html library which works fine in all browsers.. Any help would be apreciated... I would post the code, but its probably easier if you just view source <BODY onLoad="populateYearSelect()"> <font face="Verdana"> <title>owner Calendar</title> </font> <!--webbot BOT="GeneratedScript" PREVIEW=" " startspan --> function populateYearSelect() { d = new Date(); curr_month = d.getMonth(); document.getElementById('arrivemonth').options[curr_month + 1].selected=true; curr_year = d.getFullYear(); for(i = 0; i <= 3; i++) { document.getElementById('arriveyear').options[i] = new Option(curr_year+i,curr_year+i); } } </script> This is the function I am using and it works great in IE but all other browsers are not even loading the function at all. What must i do to make this work in other browsers? I need them to work more so in Firefox and Safari more so than Opera, Avant or Netscape. I can't figure it out hoping for some help. The calendar pops up in IE but will not work in Firefox or safari. The page can be viewed at http://www.lackawanna.edu/lib-form/e...nt-request.asp Since I like to minimize on graphics to keep bandwidth low, I have been using a script to simulate buttons. When you mouseover, you get some color changes which revert back when you move the mouse off. Simple, right? The problem is that firefox totally ignores the script. Even worse, safari changes on mouseover, but doesn't revert on mouseout. I have this in the heading: Code: <script LANGUAGE="JavaScript">
function ColorBlock(oRegion,sLinkID)
{
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
oRegion.className = "MenuSelected";
oRegion.style.cursor="hand";
sLinkID.style.color = "black";
}
function UncolorBlock(oRegion,sLinkID)
{
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
var oToEl = window.event.toElement;
if ((oToEl && !oRegion.contains(oToEl))||!oToEl)
{
sLinkID.style.color = "white";
oRegion.className = "MenuUnSelected";
}
}
</script>
And this is in the body. Code: <table class=MenuTable>
<tr><td OnMouseover="ColorBlock(this, Link4);"
OnMouseout="UncolorBlock(this, Link4);"
CLASS="MenuUnSelected" nowrap>
<a STYLE="color:white" ID="Link4"
OnMouseover="this.style.textDecorationNone=true;" href="javascript:createWindow('edu.htm','edu','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollbars=1,resizable=1,width=825,height=725')">
<div style="width:144; cursor=hand; font-weight:bold;">
Education
</a></div></td>
</tr>
</table>
I have a bunch of these "buttons" ... firefox ignoring the code is annoying but safari only using half the code makes it look really bad. Anyone have any ideas? I've done a lot of work over time on the site, there are just a few bugs that have been avoiding me and I am trying to hunt them all down and kill them. The page is at www.adam-k-watts.com i have an onclick function, but after debuging i found that firefox and only firefox blocks at the line " individualNames = names.childNodes[0].innerText; " is there somthin im missing please help. function searchForm() { var change = 0; var searchValue = document.getElementById("searchValue").value.toLowerCase(); var count = document.getElementById("excelTable").rows.length; var once = true; myArray = new Array(); if(searchValue == ""){alert("Please enter a value"); return false} for(i=0;i<=count;i++){ names = document.getElementById("excelTable").rows[i]; individualNames = names.childNodes[0].innerText; //only by last name of the file coming in format == "LastName, FirstName" lastName = individualNames.split(", "); //only by last name lowerCaseNames = lastName[0].toLowerCase(); names.style.backgroundColor = "#FFF"; if(lowerCaseNames.indexOf(searchValue) != -1) { names.style.backgroundColor = "#999"; //make the first result with the search apear on screen than stop after the first if(once==true){document.getElementById("excelTable").rows[i].scrollIntoView(true); once=false;} myArray[change] = document.getElementById("excelTable").rows[i];//fill a passing array to next function change++;//make the array go to next slot document.getElementById("nextButton").disabled = false; document.getElementById("searchTitle").scrollIntoView(true); } } } I had to develop a word game for a class project. The final is revolving around this class project but I was marked down some points for this project. I need to find out what I did wrong so I can pass my Final Exam. The program passed Google Chrome and Safari, but the teacher said it didn't pass Firefox Error Console. Any pointers will help. <html> <head> <title> Project </title> <script type="text/javascript" src="http://balance3e.com/random.js"></script> <script type="text/javascript"> function GetLetter() // Assumes: There are 5 letters // Results: Returns a single letter { var letter letter = RandomOneOf(['a', 'e', 'l', 'm', 'n']); return letter; } </script> <script type="text/javascript"> function GetWord(lastLetter) // Assumes: There is a letter the user has selected // Results: Returns a four letter word ending with the letter the user has selected { var word lastLetter = document.getElementById('lastLetter').value word = ''; l = 0; while (l < 3) { word = word + GetLetter(); l = l + 1; } return word + lastLetter; } </script> <script type="text/javascript" src="http://balance3e.com/random.js"></script> <script type="text/javascript"> function CheckWord(word) // Assumes: The user entered a word // Results: Will check to see if the word matched the winning word { var cWord cWord = false; if (word=="lane" || word=="lean" || word=="mama" || word=="meal" || word=="name") { cWord = true; } return cWord } </script> <script type="text/javascript"> function trytowin() // Assumes: The user returned a true or false answer // Results: Will Check to see if the user has won or lost { var word, t = 0; document.getElementById('winningWord').value = ""; document.getElementById('winLoss').value = 'Lose'; document.getElementById('lowords').innerHTML = ''; valid = false; while (t < 20 && valid == false) { word = GetWord(lastLetter); valid = CheckWord(word); document.getElementById('lowords').innerHTML = document.getElementById('lowords').innerHTML + word + '<br>'; t = t + 1; if (valid == true) { document.getElementById('winningWord').value = word; document.getElementById('winLoss').value = 'Won after ' + t + ' times!'; } } } </script> </head> <body> <p> Your word is: <input type="text" id="winningWord" size=10><br> You: <input type="text" id="winLoss" size=20><br> Type in a letter chosen from a,e,l,m,n <input type="text" id="lastLetter" size=2 value=""> Press the button to get a word ending with that letter and see if you won<input type="button" value="Try to Win!" onclick="trytowin();"> <hr> <div id="lowords"></div> </body> </html> |
|||||||