|
JavaScript - Firefox Keyboard Capture - Works By Itself, But Not In My Program!
I can't seem to capture keystrokes (via onkeydown) in Firefox.
Now before you judge too quickly, here is a snippet that DOES work in Firefox -- but only by itself; not when pasted into my program: ------------------------------------------------------------------------ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script language=javascript>
<!--
function vProcessKeyboard(e)
{
e = e || window.event;
var code = e.keyCode || e.which;
document.getElementById("chardisplay").innerHTML = code;
}
//-->
</script>
<body>
<script language=javascript>
<!--
document.onkeydown = vProcessKeyboard
//-->
</script>
<div id="chardisplay"></div>
</body>
</html>
------------------------------------------------------------------------ Here's my question: What would cause the above code to fail, when used in a larger, more complicated webpage? If I debug my webpage (using FireBug 1.4.5), I note that "onkeydown" indeed points to my keyboard handler. But when I put a simple debug message in that handler, I get absolutely nothing -- no matter what code I paste in the keyboard handler, it doesn't run. No matter how many keys I press! I run the same program in Internet Explorer and it runs fine. I run the keyboard code by itself in Firefox and it runs fine. I've spent about 10 hours Googling this, and all I can find is discussions of how to capture keystrokes in Firefox vs. IE. I found about 20 different variations on the code I pasted above. The "program" I'm trying to use with this keyboard capture code with is a large browser game -- a glorified webpage, even if it behaves like a Windows game -- with hundreds of objects (divs). There are several layers of graphics to make the game happen. I'm just trying to figure out what is FUNDAMENTALLY different between my large program and a simple webpage, when it comes to something simple like keyboard capture. Is it the size, in bytes, of my webpage? Is it the large number of DIVs? The large number of functions? Incidentally, I'm not using Frames. Any help would be much appreciated. Thanks, Matthew Similar TutorialsI have a web application (Javascript) that captures keyboard input. The code works independently -- in fact, I've tried several different variations/code snippets that other people have used/recommended. They all work, and are functionally equivalent. But here's the clincher -- my whole program works fine -- keyboard and all -- once I run Venkman's Javascript debugger and then return to my program window! It's as if Venkman's is doing something (setup, initialization) that my program isn't. What could it be though? Thanks, Matthew Here is the keyboard portion of my program: Code: function keyboard_handler(e) {
e = e || window.event;
var keyunicode = e.charCode || e.keyCode
var KeyID = e.keyCode || e.which;
vDebugPrint("Keyboard pressed: " + KeyID);
vDebugPrint("Unicode: " + keyunicode);
}
document.onkeydown = keyboard_handler;
Hey guys, finished my first javascript assignment and was wondering if anyone could confirm it works. I get weird syntax errors on my comp but others have said that it has worked for them, so i'm wondering if anyone else can confirm this. The syntax errors are all claiming that my functions being called in my buttons are not defined, however they clearly are, so i'm thinking it might just be something weird with my machine/browser. Anyway, here's the code and thanks in advance. Code: <html>
<head>
<script type="text/JavaScript">
var sam = 9;
var sally = 8;
var donald = 4;
var person = prompt("Please enter your name", "Student Name");
if (person != null) {
document.getElementById("intro").innerHTML =
"Hello " + person + "! Thank you for checking your grades today!";
}
function percentage (score) {
return score / 10 * 100;
};
function goperc() {
document.write("Sam's score on the test is " + percentage(sam) + "%, <br \> Sally's score on the test is " + percentage(sally) +
"%, <br \> Donald's score on the test is " + percentage(donald) + "%");
};
function highscore() {
if (Math.max(90, 80, 40) === 90){
document.write("Sam's score was the highest.")};
else if (Math.max(90, 80, 40) === 80){
document.write("Sally's score was the highest.")};
else{
document.write("Donald's score was the highest.")}
};
function lettergrade(grade) {
if (grade > 8.9){
document.write("A")};
else if (grade > 7.9){
document.write("B")};
else if (grade > 6.9){
document.write("C")}
else{
document.write("F | Warning, your letter grade is very low.")}
};
function goletter() {
document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) +
", <br \> Donald's letter grade on the test is: " + lettergrade(donald));
};
</script>
</head>
<body>
<button onclick="goperc()">Student Percentages</button>
<br \>
<button onclick="highscore()">Best Grade</button>
<br \>
<button onclick="goletter()">Student Letter Grade</button>
</body>
</html>
Oh, if anything looks like it's wrong or you see something that could be causing an error, I would love to know. Thanks. Noticed some flaws in my code in the last post, sorry for the back-to-back posting but I can't edit the other post and the changes would be to confusing to point out in another reply. So what i'm wondering is if anyone can test this code and see if it works for them. I'm getting some weird syntax errors saying that functions aren't defined when they clearly are. If there are any errors you encounter, please point them out. Thanks in advance guys. Code: <html>
<head>
<script type="text/JavaScript">
var sam = 9;
var sally = 8;
var donald = 4;
function prompt() {
var person = prompt("Please enter your name", "Student Name");
if (person != null) {
document.getElementById("intro").innerHTML =
"Hello " + person + "! Thank you for checking your grades today!";
}
function percentage (score) {
return score / 10 * 100;
};
function goperc() {
document.write("Sam's score on the test is " + percentage(sam) + "%, <br \> Sally's score on the test is " + percentage(sally) +
"%, <br \> Donald's score on the test is " + percentage(donald) + "%");
};
function highscore() {
if (Math.max(90, 80, 40) === 90){
document.write("Sam's score was the highest.")};
else if (Math.max(90, 80, 40) === 80){
document.write("Sally's score was the highest.")};
else{
document.write("Donald's score was the highest.")}
};
function lettergrade(grade) {
if (grade > 8.9){
document.write("A")};
else if (grade > 7.9){
document.write("B")};
else if (grade > 6.9){
document.write("C")}
else{
document.write("F | Warning, your letter grade is very low.")}
};
function goletter() {
document.write("Sam's letter grade on the test is: " + lettergrade(sam) + ", <br \> Sally's letter grade on the test is: " + lettergrade(sally) +
", <br \> Donald's letter grade on the test is: " + lettergrade(donald));
};
</script>
</head>
<body>
<button onclick="prompt()">Sign In</button>
<br \>
<button onclick="goperc()">Student Percentages</button>
<br \>
<button onclick="highscore()">Best Grade</button>
<br \>
<button onclick="goletter()">Student Letter Grade</button>
</body>
</html>
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> Hi All I have a content slider, but it only seems to work in FF and not any of the other browsers. I am using Wordpress but its not a plugin This is what I have: page.php Code: <?php if (is_front_page()) {
include ("homepage-slider.php");
} ?>
homepage-slider.php Code: <!-- Inner content DIVs should always carry "contentdiv" CSS class -->
<!-- Pagination DIV should always carry "paginate-SLIDERID" CSS class -->
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
<div class="home-div1">
<div class="home-div-logo"></div>
</div>
</div>
<div class="contentdiv">
<div class="home-div2">
<span></span>
</div>
</div>
<div class="contentdiv">
<div class="home-div3">
<span></span>
</div>
</div>
</div>
<div id="paginate-slider1" class="pagination" style="display:none;">
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 4000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
There are 2 other external files : contentslider.js contentslider.css Click Here to see site. If someone could help I would really appreciate it, been bugging me big time. Cheers, Jay Hi, I've been trying to solve this problem for the past few hours and I'm at my wit's end. I have a script that runs through all the div elements on the page, and then if the div's background is a certain color, it increments a counter by 0.5 and then outputs the result into a separate div tag. This works flawlessly in IE, however I cannot get it to work in Firefox. The strange thing is, if I omit the loop and just use the colorToHex on one specific element in the divs array (ie. divs[2]) it works in Firefox. Any suggestions are greatly appreciated. Code: function hrsavailable() {
var divs = document.getElementsByTagName("div");
var srdjanhrs = -0.5;
for (var i=0;i<divs.length;i++){
if (colorToHex(divs[i].style.backgroundColor) == "#ffbb6e") {;
srdjanhrs = srdjanhrs + 0.5;
}
}
document.getElementById("srdjanhrs").firstChild.data = srdjanhrs;
}
function colorToHex(color) {
if (color.substr(0, 1) === '#') {
return color;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
Hi, I am using googles O3D software and it uses a javascript base, one of there plugins works in Firefox only and not Internet Explorer I was wondering if anyone here could help me find out why it isnt working in IE and even how to fix it, here is the page that works in firefox but not IE http://o3d.googlecode.com/svn/trunk/...edesigner.html Many Thanks, Simon This works fine in IE only. Any thoughts. function DisplaySelectedColor(cColor) { var elToFill = document.getElementById(cFieldOnFocus) elToFill.value = cColor; switch(cFieldOnFocus){ case"Page-Background":document.getElementById("Page").style.backgroundColor =cColor; break; case"Page-Background": document.getElementById("Page").style.backgroundColor =cColor; break; case"Outside-Border": document.getElementById("main_container").style.borderColor =cColor; break; case"Logo-Background": document.getElementById("logo_area").style.backgroundColor =cColor; break; case"Logo-Font": document.getElementById("logo_area").style.color =cColor; break; case"Outside-Area-Background": document.getElementById("main_container").style.backgroundColor =cColor; document.getElementById("linktestdiv").style.backgroundColor =cColor; break; case"Outside-Area-Font": document.getElementById("main_container").style.color =cColor; document.getElementById("main_nav").style.color =cColor; document.getElementById("right_column_content").style.color =cColor; document.getElementById("linktestdiv").style.color =cColor; document.getElementById("footer").style.color =cColor; break; case"Content-Background": document.getElementById("main_content").style.backgroundColor =cColor; break; case"Content-Font": document.getElementById("main_content").style.color =cColor; break; case"Footer-Background": document.getElementById("footer").style.backgroundColor =cColor; break; case"Hyper-Link": document.getElementById("activelink").style.color = cColor; break; case"Hyper-Link-Hover": document.getElementById("hoverlink").style.color = cColor; break; case"Hyper-Link-Visited": document.getElementById("visitedlink").style.color = cColor; break; } } Thanks for any help. Can't figure it out. Hey, I'm trying to write a script that makes it so that when using a screen width of 1280 or lower, Google shows one ad at the top of the page. With screen widths over 1280, it shows 2 ads along the side of the screen. I've checked it several times and I don't know what I've done wrong (but I'm also a beginner). The script works flawlessly in all versions of Firefox for both high and low res (I checked with FF 2.0, 3.0, 3.5, and 3.6) but in IE6 and IE8 while displaying almost correctly at the high resolution, it gets completely screwed up at the low resolution. Basically I'm just using Javascript to insert HTML comment tags around the ads that I don't want to appear for that resolution. Apparently it doesn't work in Opera, Chrome, or Safari either and the code doesn't validate as XHTML so there is definitely something wrong. Code:
<!-- Test run of Google AdSense -->
<!-- One ad floats left, one floats right, the rest of the body is center aligned in between (high res only) -->
<!-- There are 3 ads, scripting makes it so that 2 appear on the sides with a screen width above 1280 pixels, and below 1280 pixels just one appears across the top -->
<script type="text/javascript">
<!--
var skip1 = "<!--";
if ( screen.width <= 1280 )
{
document.write (skip1);
}
//-->
</script>
<div style=" float:left; font-size:7pt; color:#777; ">
Advertisement<br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* 160x600, created 2/2/11, left side homepage */
google_ad_slot = "6021069285";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style=" float:right; font-size:7pt; color:#777; ">
Advertisement<br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* 160x600, created 2/2/11, homepage */
google_ad_slot = "3502793671";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<script type="text/javascript">
<!--
var skip2 = "-->";
if ( screen.width <= 1280 )
{
document.write (skip2);
}
//-->
</script>
<script type="text/javascript">
<!--
var skip3 = "<!--";
if ( screen.width > 1280 )
{
document.write (skip3);
}
//-->
</script>
<div style="font-size:7pt; color:#777;">
<center>
Advertisement<br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-9736870014804453";
/* low res top ad */
google_ad_slot = "4610054252";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</div>
<script type="text/javascript">
<!--
var skip4 = "-->";
if ( screen.width > 1280 )
{
document.write (skip4);
}
//-->
</script>
<!-- End of Adsense side banners -->
been a while since i been to the experts for help figures i was about due for an issue beyond my solving capabilities ok so the code The function containing the rogue setTimeout Code: function refresh_timer(){
//alert(window.timer);
var total = getTotal();
document.getElementById('status').innerHTML = 'Updating in '+ (total-(window.timer+1))+' seconds.';
if((total-window.timer) == 0){
refresh_feed();
}
else{
//setTimeout("refresh_timer()",1000);
setTimeout(function(){ alert("");},1000);
window.timer++;
//alert("1");
//alert(window.timer);
}
}
everything in the above function works except the setTimeout itself the script doesn't break and i get no errors in the firebug initially window.timer is set to 0 and everytime refresh_feed() executes window.timer gets reset to 0 refresh_timer() gets called up by the return from an ajax call(again works in chrome and ie8) any help is appreciated Hi, I'm making a Google Map that reads info from a database and pulls Twitter usernames from it to plot points on a map. In the infowindow of these points I have some code that displays the Twitter users latest tweet. There's alot of code for this map so i'll only show you the part i'm working on: Code: function readData() {
var request = GXmlHttp.create();
request.open("GET", "phpsqlinfo_result.php", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
i=[0];
markers=[0];
map.getInfoWindow().hide();
gmarkers = [];
map.clearOverlays();
side_bar_html = "";
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var label = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var html = '<' + 'script src="http://twitter.com/javascripts/blogger.js"><' + '/script><' + 'script type="text/javascript" src="http://twitter.com/statuses/user_timeline/' + label + '.json?callback=twitterCallback2&count=1"><' + '/script><br /><div id="twitter_update_list" style="list-style:none"></div>';
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
}
request.send(null);
}
var html is where it's all happening. I'm using the Twitter script from http://limetouch.com/article/valid-x...vascript-code/ and I have it laid out with all them ' + ' to break it up so it doesn't end the actual javascript used to create the map. I'm new to Javascript so I don't know too much. I know that this method is a really backwards way of doing it, but it works for Firefox. I'm able to retrieve the users latest tweet when I click on their map marker. What I want to know is why it doesn't work in any other browser? I've tried IE7+8, Google Chrome, Opera, and Safari and no tweet displays. Sub-question: While a tweet does display in Firefox, the infowindow doesn't resize with the dynamic content. Any way to fix that? 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 I have a portfolio page on our company site that functions properly on Mac, but not in Windows. The page is here, but I warn you it will possibly freeze IE if you click it. I include it for reference. http://www.dgindy.com/html/portfolio.html In IE, the first thumbnail (of 32) will display and then the page generally locks. I believe the javascript that governs the popups may be the culprit, but I only know enough to be dangerous and need an assist as this site is already live and that was my screwup. The script link is: <script type="text/javascript" src="popup.js"></script> And the script is: function popup(url) { newwindow=window.open(url,'name','height=575,width=620,top=200,left=200'); if (window.focus) {newwindow.focus()} return false; } And finally, here is one of the popup links: <a href="01.html" class="p01" onclick="return popup('01.html')"><span class="displace">Portfolio 01</a> Any assistance is greatly appreciated. If you need to see my css, let mw know. I'm new to HTML and javascript programming, so I apologize if the solution to this is blatantly obvious. I've got expanding text / menus in javascript on my page. These all work in IE with no problems that I can tell. Unfortunately, when I view the page in Firefox, only the first expanding menu is actually a link and works - the rest do not even appear as links and don't work (and the expanded text isn't showing either). You can visit the page at http://www.scienceadvice.ca/uploads/...s/may2010.html Any help would be most appreciated! Thanks! Works in Firefox, chrome, even my phone, but not IE Code: <a onmouseover="document.getElementById('statusbox').innerHTML='<table width=100%><tr><th colspan=3>Carrot statuses</th></tr><tr><th>Status</th><th>Magnitude</th><th>Duration</th></tr><tr class=alt><td>DamageResistDebuff</td><td>5</td><td>2</td></tr><tr class=alt><td>DamageResistDebuff</td><td>5</td><td>2</td></tr><tr class=alt><td>Repeatattack</td><td>5</td><td>1</td></tr><tr class=alt><td>Defense</td><td>10</td><td>2</td></tr><tr class=alt><td>Regen</td><td>7</td><td>4</td></tr></table>'; document.getElementById('statusbox').style.opacity = 100; document.getElementById('statusbox').style.display = 'inline'; document.getElementById('statusbox').style.backgroundColor = 'beige'; document.getElementById('statusbox').style.zIndex = 10; document.getElementById('statusbox').style.filter = 'alpha(opacity=1.0)'" onmousedown="postXMLDoc('/ajaxget?battlerel="nofollow" target=10634','view='+10634)">
Any ideas? I have a script where the user selects an item on the main nav and it will display the sub-nav below. It works fine in every browser except Firefox. ANy ideas? http://tinyurl.com/79wlwq3 EDIT: It's just that script that won't work, btw. I tested an alert box for Firefox and it works fine. 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, JS newbie here trying to cobble together enough to get this page done. Here's the snippet I'm having trouble with (sorry, I know it's sloppy, if you have a better way to do it by all means please post): Code: function showAdv() {
if(claroxanadvanced.style.display == "none")
{
claroxanadvanced.style.display = "block";
claroxanoriginal.style.display = "none";
smokersformula.style.display = "none";
}
else
{
}
}
function showOri() {
if(claroxanoriginal.style.display == "none")
{
claroxanadvanced.style.display = "none";
claroxanoriginal.style.display = "block";
smokersformula.style.display = "none";
}
else
{
}
}
function showSmo() {
if(smokersformula.style.display == "none")
{
claroxanadvanced.style.display = "none";
claroxanoriginal.style.display = "none";
smokersformula.style.display = "block";
}
else
{
}
}
And the page where it is implemented: http://www.claroxan.com/test/ Firefox's debug window says it might be an issue of undeclared variables - 'claroxanadvanced', 'claroxanoriginal' and 'smokersformula' are all div IDs in the html, what line should I put to declare them? Thanks Hi I am not really sure where to start with this as my function works perfect in IE 6. However when I select one of my categories and hit submit in Firefox or IE7 or 8 nothing happens. No error message. Just nothing. How can I get this working for firefox and IE7/8? Code:
<script language="JavaScript">
var categories=[];
var categorieslist=[];
var thecategories=[];
var ItemDetails=[];
var selDate=[];
var content=[];
var imagePaths=[];
var art=[];
var aTheDates=[];
var aTheYear=[];
var catDM=" ";
var catUrl="";
var startposition=0;
var theImage="";
var pageDectect=0;
var thepage=0;
var pc=0;
var starty=0;
var pagenumber=0;
var filteredlist="<ul class='press-items'>";
function changeFilter(){
var selCategory=document.getElementById("browsetopic").value;
//alert(selCategory + " aha");
var selYear=document.getElementById("browseyear").value.substring(2,4);
var selMonth=document.getElementById("browsemonth").value;
//var selDate=document.getElementById("browsemonth").value + "/" + document.getElementById("browseyear").value.substring(2,4);
//alert(pagenumber);
for(pagenumber;pagenumber<art.length;pagenumber++){
//alert(selDate + "=" + aTheDates[pagenumber]);
//alert(selYear + "=" + aTheYear[pagenumber]);
//alert(selCategory + "=" + categories[pagenumber]);
if(((selCategory=="nofilter"||categories[pagenumber]==selCategory))&&(selYear==aTheYear[pagenumber]||selYear=="00")&&(selMonth==aTheDates[pagenumber]||selMonth=="00")){
filteredlist=filteredlist+art[pagenumber];
}
}
filteredlist=filteredlist+"</ul>";
//alert(filteredlist);
document.getElementById("theid").innerHTML=filteredlist;
filteredlist="<ul class='press-items'>";
pagenumber=0;
}
</script>
And the button Code: <a href="javascript:changeFilter();"><img style=" float: left; margin-top: 0px;" class="submit" src="/images/submit.gif" /></a> // otherwise search the parent element tempElem=tempElem.parentElement; // return when it reaches the top of the code if(tempElem.tagName=="HTML") { return el; } } return tempElem; } function fixTBpos() { var OCode = document.getElementById('OCode'); var ODiv = document.getElementById('ODiv'); st=document.body; if(isW3Mode) OCode.style.height=ODiv.style.height=st.clientHeight-119; else OCode.style.height=ODiv.style.height=st.clientHeight-113; typeof(toc) == "undefined" ? '':Resizetoc(); } function hasTagsInText(text) { if(text.indexOf("<TABLE") >=0 || text.indexOf("<table") >=0) return 'table';<<<<<<<<NOT WORKING if(text.indexOf("<TD") >=0 || text.indexOf("<td") >=0) return 'column'; if(text.indexOf("<IMG") >=0 || text.indexOf("<img") >=0) return 'image'; if(text.indexOf("<H2") >=0 || text.indexOf("<h2") >=0) return 'h2'; if(text.indexOf("<DIV") >=0 || text.indexOf("<div") >=0) return 'div'; if(text.indexOf("<A") >=0 || text.indexOf("<a") >=0) return 'link'; if(text.indexOf("<FORM") >=0 || text.indexOf("<form") >=0) return 'form'; if(text.indexOf("<P>") >=0 || text.indexOf("<p>") >=0) return 'invisible paragraph-mark'; if(text.indexOf("<BR>") >=0 || text.indexOf("<br>") >=0) return 'invisible new-line-mark'; return ''; } function hasFormatInText(text) { var format = '' if(text.indexOf("id=subtitle") >=0) format+= 'id=subtitle' if(text.indexOf("class=greytext") >=0) format+= 'class=greytext' if(text.indexOf("class=prices") >=0) format+= 'class=prices' if(text.indexOf("class=small") >=0) format+= 'class=small' if(text.indexOf("class=bct") >=0) format+= 'class=bct' // jae added if(text.indexOf("class=price") >=0) format+= 'class=price' if(text.indexOf("class=error") >=0) format+= 'class=error' // to here if(text.indexOf("<BLOCKQUOTE ") >=0 || text.indexOf("<BLOCKQUOTE>") >=0) format+= 'header=blockquote' if(text.indexOf("formatted-text") >=0 || text.indexOf("class=")>=0) format+= 'id=misctext' if(text.indexOf("<SPAN ") >=0 || text.indexOf("<SPAN>") >=0) format+= 'span' if(text.indexOf("<H1 ") >=0 || text.indexOf("<H1>") >=0) format+= 'header=h1' if(text.indexOf("<H2 ") >=0 || text.indexOf("<H2>") >=0) format+= 'header=h2' if(text.indexOf("<H3 ") >=0 || text.indexOf("<H3>") >=0) format+= 'header=h1' if(text.indexOf("<H4 ") >=0 || text.indexOf("<H4>") >=0) format+= 'header=h2' if(text.indexOf("<EM ") >=0 || text.indexOf("<EM>") >=0) format+= 'style=em' if(text.indexOf("<B ") >=0 || text.indexOf("<B>") >=0) format+= 'style=b' if(text.indexOf("<STRONG ") >=0 || text.indexOf("<STRONG>") >=0) format+= 'style=strong' if(text.indexOf("<I ") >=0 || text.indexOf("<I>") >=0) format+= 'style=i' if(text.indexOf("<U ") >=0 || text.indexOf("<U>") >=0) format+= 'style=u' if(text.indexOf("<FONT ") >=0 || text.indexOf("<FONT>") >=0) format+= 'style=font' return format } |
|||||||