Databases
StackOverflow2013
Postsdbo
POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
    primarykey
    data
    text
    <p>//the following function change JavaScript code colors in the CSS rendered images, it is only working in IE9 and FF is there a hack for this or is it something in the code page can be seen at <a href="http://www.cornholeny.com/c_y_b_arrowhead.php" rel="nofollow">http://www.cornholeny.com/c_y_b_arrowhead.php</a> . //</p> <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;title&gt;ARROWHEAD DESIGN&lt;/title&gt; &lt;link href="css/structure.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="css/design.css" rel="stylesheet" type="text/css" /&gt; &lt;!--[if lte IE 7]&gt; &lt;link href="" rel="stylesheet" type="text/css" /&gt; &lt;![endif]--&gt; &lt;?php include('includes/meta.php'); ?&gt; &lt;style type="text/css"&gt; div#menu { width: 880px; height: 65px; float: top; margin:0px } div#main { margin-left: 0%; margin-right: 0%; margin-top: 1px; padding: 10px; } div#footer { padding: 15px; margin: 0px; border-bottom: thin solid #000000; } &lt;/style&gt; //these are the functions that are activated by select options// &lt;script type="text/javascript"&gt; function colorchange1() { document.getElementById("box-a").style.backgroundColor="grey"; document.getElementById("box-a2").style.backgroundColor="grey"; } function colorchange2() { document.getElementById("box-a").style.backgroundColor="orange"; document.getElementById("box-a2").style.backgroundColor="orange"; } function colorchange3() { document.getElementById("box-a").style.backgroundColor="yellow"; document.getElementById("box-a2").style.backgroundColor="yellow"; } function colorchange4() { document.getElementById("box-a").style.backgroundColor="#6DE91B"; document.getElementById("box-a2").style.backgroundColor="#6DE91B"; } function colorchange5() { document.getElementById("box-a").style.backgroundColor="blue"; document.getElementById("box-a2").style.backgroundColor="blue"; } function colorchange6() { document.getElementById("box-a").style.backgroundColor="brown"; document.getElementById("box-a2").style.backgroundColor="brown"; } function colorchange7() { document.getElementById("box-a").style.backgroundColor="red"; document.getElementById("box-a2").style.backgroundColor="red"; } function colorchange8() { document.getElementById("box-a").style.backgroundColor="white"; document.getElementById("box-a2").style.backgroundColor="white"; } function colorchange9() { document.getElementById("box-a").style.backgroundColor="black"; document.getElementById("box-a2").style.backgroundColor="black"; } function colorchange10() { document.getElementById("box-a").style.backgroundColor="pink"; document.getElementById("box-a2").style.backgroundColor="pink"; } function changearrow1() { document.getElementById("arrow").style.borderBottomColor="grey"; document.getElementById("arrow2").style.backgroundColor="grey"; document.getElementById("arrow-a").style.borderBottomColor="grey"; document.getElementById("arrow-a2").style.backgroundColor="grey"; } function changearrow2() { document.getElementById("arrow").style.borderBottomColor="orange"; document.getElementById("arrow2").style.backgroundColor="orange"; document.getElementById("arrow-a").style.borderBottomColor="orange"; document.getElementById("arrow-a2").style.backgroundColor="orange"; } function changearrow3() { document.getElementById("arrow").style.borderBottomColor="yellow"; document.getElementById("arrow2").style.backgroundColor="yellow"; document.getElementById("arrow-a").style.borderBottomColor="yellow"; document.getElementById("arrow-a2").style.backgroundColor="yellow"; } function changearrow4() { document.getElementById("arrow").style.borderBottomColor="#6DE91B"; document.getElementById("arrow2").style.backgroundColor="#6DE91B"; document.getElementById("arrow-a").style.borderBottomColor="#6DE91B"; document.getElementById("arrow-a2").style.backgroundColor="#6DE91B"; } function changearrow5() { document.getElementById("arrow").style.borderBottomColor="blue"; document.getElementById("arrow2").style.backgroundColor="blue"; document.getElementById("arrow-a").style.borderBottomColor="blue"; document.getElementById("arrow-a2").style.backgroundColor="blue"; } function changearrow6() { document.getElementById("arrow").style.borderBottomColor="brown"; document.getElementById("arrow2").style.backgroundColor="brown"; document.getElementById("arrow-a").style.borderBottomColor="brown"; document.getElementById("arrow-a2").style.backgroundColor="brown"; } function changearrow7() { document.getElementById("arrow").style.borderBottomColor="red"; document.getElementById("arrow2").style.backgroundColor="red"; document.getElementById("arrow-a").style.borderBottomColor="red"; document.getElementById("arrow-a2").style.backgroundColor="red"; } function changearrow8() { document.getElementById("arrow").style.borderBottomColor="white"; document.getElementById("arrow2").style.backgroundColor="white"; document.getElementById("arrow-a").style.borderBottomColor="white"; document.getElementById("arrow-a2").style.backgroundColor="white"; } function changearrow9() { document.getElementById("arrow").style.borderBottomColor="black"; document.getElementById("arrow2").style.backgroundColor="black"; document.getElementById("arrow-a").style.borderBottomColor="black"; document.getElementById("arrow-a2").style.backgroundColor="black"; } function changearrow10() { document.getElementById("arrow").style.borderBottomColor="pink"; document.getElementById("arrow2").style.backgroundColor="pink"; document.getElementById("arrow-a").style.borderBottomColor="pink"; document.getElementById("arrow-a2").style.backgroundColor="pink"; } &lt;/script&gt; &lt;?php include('includes/header-menu.php'); ?&gt; &lt;/head&gt; &lt;body&gt; //these are the css images// &lt;style type="text/css"&gt; #container { width: 785px; height: 450px; background-color: #D9F3CF; margin-left: auto; margin-right: auto; padding: 15px; position: relative; } #boardleft { width: 151px; height: 301px; position: relative; float:left; } #boardright { width: 151px; height: 301px; position: relative; float:right; } #circle{ border:none; background-color: #D9F3CF; width:45px; height:45px; border-radius:50%; top:30px; left:52.5px; position: absolute; } #box-a { width: 150px; height:300px; background-color: white; border: none; position: absolute; } #box-a2 { width: 150px; height:300px; background-color: white; border: none; position: relative } #arrow2 { width: 30px; height:150px; background-color: white; border: none; bottom: 0px; left: 60px; position: absolute; } #arrow { width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 75px solid white; bottom: 150px; left: 40px; position: absolute; } #arrow-a2 { width: 30px; height:150px; background-color: white; border: none; bottom: 0px; left: 60px; position: absolute; } #arrow-a { width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 75px solid white; bottom: 150px; left: 40px; position: absolute; } p.numbers_black { color: black; text-align: center; font-size: 20pt; } p.numbers_white { color: white; text-align: center; font-size: 20pt; } #colorchart { width: 325px; height: 130px; background-color: #D9F3CF; position: absolute; bottom: 8px; left: 245px; } #box-grey { width: 65px; height:65px; background-color: grey; border: none; position: relative; float: left; } #box-orange { width: 65px; height:65px; background-color: orange; border: none; position: relative; float: left; } #box-yellow { width: 65px; height:65px; background-color: yellow; border: none; position: relative; float: left; } #box-green { width: 65px; height:65px; background-color: #6DE91B; border: none; position: relative; float: left; } #box-blue { width: 65px; height:65px; background-color: blue; border: none; position: relative; float: left; } #box-brown { width: 65px; height:65px; background-color: brown; border: none; position: relative; float: left; } #box-red { width: 65px; height:65px; background-color: red; border: none; position: relative; float: left; } #box-white { width: 65px; height:65px; background-color: white; border: none; position: relative; float: left; } #box-black { width: 65px; height:65px; background-color: black; border: none; position: relative; float: left; } #box-pink { width: 65px; height:65px; background-color: pink; border: none; position: relative; float: left; } &lt;/style&gt; &lt;h1&gt;YOU HAVE CHOOSEN THE ARROWHEAD DESIGN&lt;/h1&gt;&lt;br&gt;&lt;br&gt; If you are viewing this page using&lt;br&gt; Internet Explorer 8 or earlier,&lt;br&gt; please except or apologies.&lt;br&gt; We are aware that the painting function&lt;br&gt; is not working in these browsers and we&lt;br&gt; are working on the problem.&lt;br&gt; Thank You!&lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;h2&gt;&lt;b&gt;NOW CHOOSE YOUR TYPE OF BOARDS&lt;/b&gt;&lt;/h2&gt; &lt;br&gt; &lt;br&gt; &lt;form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"&gt; &lt;input type="hidden" name="on0" value="BOARD TYPE"&gt; &lt;select name="os0"&gt; &lt;option value="REGULATION SIZE"&gt;REGULATION SIZE ( Most common - also used for tournament play) $85.00 USD&lt;/option&gt; &lt;option value="TOURNAMENT STYLE"&gt;TOURNAMENT STYLE ( All four sides closed when set up ) $130.00 USD&lt;/option&gt; &lt;option value="MEDIUM SIZE"&gt;MEDIUM SIZE (1/2 scale 12&amp;quot; x 24&amp;quot; - comes with ten 3&amp;quot; bags) $45.00 USD&lt;/option&gt; &lt;option value="MINI BOARDS"&gt;MINI BOARDS ( 6&amp;quot; x 12&amp;quot; Table Top - with ten 1-1/2&amp;quot; bags) $30.00 USD&lt;/option&gt; &lt;/select&gt; &lt;input type="hidden" name="on1" value="BOARD DESIGN"&gt; &lt;input type="hidden" name="os1" value="ARROWHEAD"&gt; &lt;br&gt; &lt;br&gt; &lt;h2&gt;NOW, LET'S PAINT YOUR BOARDS&lt;/h2&gt;&lt;br&gt; &lt;h1&gt;&lt;font style="color: red"&gt;Please use the color chart below.&lt;/font&gt;&lt;/h1&gt; &lt;br&gt; &lt;br&gt; &lt;div id="container"&gt; &lt;div id="boardleft"&gt; &lt;div id="box-a"&gt; &lt;span Id="arrow"&gt; &lt;/span&gt; &lt;span Id="arrow2"&gt; &lt;/span&gt; &lt;div Id="circle"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;span id="boardleft"&gt; &lt;b&gt;&lt;u&gt;&lt;h3&gt;FIELD 1 COLOR&lt;/h3&gt;&lt;/u&gt;&lt;/b&gt;&lt;br&gt;&lt;br&gt; &lt;input type="hidden" name="on2" value="FIELD 1 COLOR"&gt; &lt;h3&gt; &lt;select name="os2"&gt; &lt;option name="os2" value=""&gt; &lt;option name="os2" value="GREY" onclick="colorchange1()"&gt; 1&lt;/option&gt; &lt;option name="os2" value="ORANGE" onclick="colorchange2()"&gt; 2&lt;/option&gt; &lt;option name="os2" value="YELLOW" onclick="colorchange3()"&gt; 3&lt;/option&gt; &lt;option name="os2" value="GREEN" onclick="colorchange4()"&gt; 4&lt;/option&gt; &lt;option name="os2" value="BLUE" onclick="colorchange5()"&gt; 5&lt;/option&gt; &lt;option name="os2" value="BROWN" onclick="colorchange6()"&gt; 6&lt;/option&gt; &lt;option name="os2" value="RED" onclick="colorchange7()"&gt; 7&lt;/option&gt; &lt;option name="os2" value="WHITE" onclick="colorchange8()"&gt; 8&lt;/option&gt; &lt;option name="os2" value="BLACK" onclick="colorchange9()"&gt; 9&lt;/option&gt; &lt;option name="os2" value="PINK" onclick="colorchange10()"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/h3&gt; &lt;/span&gt; &lt;div id="boardright"&gt; &lt;div id="box-a2"&gt; &lt;span Id="arrow-a"&gt; &lt;/span&gt; &lt;span Id="arrow-a2"&gt; &lt;/span&gt; &lt;div Id="circle"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;span id="boardright"&gt; &lt;b&gt;&lt;u&gt;&lt;h3&gt;FIELD 2 COLOR&lt;/h3&gt;&lt;/u&gt;&lt;/b&gt;&lt;br&gt;&lt;br&gt; &lt;input type="hidden" name="on3" value="FIELD 2 COLOR"&gt; &lt;h3&gt; &lt;select name="os3"&gt; &lt;option name="os3" value=""&gt; &lt;option name="os3" value="GREY" onclick="changearrow1()"&gt; 1&lt;/option&gt; &lt;option name="os3" value="ORANGE" onclick="changearrow2()"&gt; 2&lt;/option&gt; &lt;option name="os3" value="YELLOW" onclick="changearrow3()"&gt; 3&lt;/option&gt; &lt;option name="os3" value="GREEN" onclick="changearrow4()"&gt; 4&lt;/option&gt; &lt;option name="os3" value="BLUE" onclick="changearrow5()"&gt; 5&lt;/option&gt; &lt;option name="os3" value="BROWN" onclick="changearrow6()"&gt; 6&lt;/option&gt; &lt;option name="os3" value="RED" onclick="changearrow7()"&gt; 7&lt;/option&gt; &lt;option name="os3" value="WHITE" onclick="changearrow8()"&gt; 8&lt;/option&gt; &lt;option name="os3" value="BLACK" onclick="changearrow9()"&gt; 9&lt;/option&gt; &lt;option name="os3" value="PINK" onclick="changearrow10()"&gt;10&lt;/option&gt; &lt;/select&gt; &lt;/h3&gt; &lt;/span&gt; &lt;span id="colorchart"&gt; &lt;div id="box-grey"&gt;&lt;p class="numbers_black"&gt;1&lt;/p&gt;&lt;/div&gt; &lt;div id="box-orange"&gt;&lt;p class="numbers_black"&gt;2&lt;/p&gt;&lt;/div&gt; &lt;div id="box-yellow"&gt;&lt;p class="numbers_black"&gt;3&lt;/p&gt;&lt;/div&gt; &lt;div id="box-green"&gt;&lt;p class="numbers_black"&gt;4&lt;/p&gt;&lt;/div&gt; &lt;div id="box-blue"&gt;&lt;p class="numbers_white"&gt;5&lt;/p&gt;&lt;/div&gt; &lt;div id="box-brown"&gt;&lt;p class="numbers_white"&gt;6&lt;/p&gt;&lt;/div&gt; &lt;div id="box-red"&gt;&lt;p class="numbers_black"&gt;7&lt;/p&gt;&lt;/div&gt; &lt;div id="box-white"&gt;&lt;p class="numbers_black"&gt;8&lt;/p&gt;&lt;/div&gt; &lt;div id="box-black"&gt;&lt;p class="numbers_white"&gt;9&lt;/p&gt;&lt;/font&gt;&lt;/div&gt; &lt;div id="box-pink"&gt;&lt;p class="numbers_black"&gt;10&lt;/p&gt;&lt;/div&gt; &lt;/span&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBenjamin
    1. USCorn Hole LI
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COWelcome to Stack Overflow. I don't know what the problem is, but I will say that your code would be _much_ neater if you had _one_ `colorChange(c)` function that took a parameter to indicate what colour is required. Either pass it the `value` attribute from the selected option element, or a string with the required colour.
      singulars
      1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
      1. USnnnnnn
    2. COPlease trim your HTML/CSS/JavaScript to the smallest amount possible to demonstrate your problem. Also, bonus points if you provide a link to your code on http://jsfiddle.net/ or http://jsbin.com/ so that we can alter the code without saving it to our computers.
      singulars
      1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
      1. USHeretic Monkey
    3. COHey Mike, I'm kinda new to all this so please forgive my ignorance.
      singulars
      1. POthe following color change functions work fine in IE9 and FF but not in earlier IE or CHROME
      1. USCorn Hole LI
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload