JavaScript - Set The Bgcolor Attribute Value
Hi,
The following doesn't work: Code: <!DOCTYPE HTML> <title>Sample flash</title> <embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" /> <script type="text/javascript"> document.getElementById("foo").setAttribute("bgcolor", "#00FF00"); </script> But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing? Any help is appreciated! Mike Similar TutorialsNot sure if this is a CSS or Javascript fix I need. I think it will be a javascript issue/solution. Browser=Firefox 6.0.2 website page: [suspicious link removed] I am attempting to use CSS for Alert Box background. I created a class: Code: <style type="text/css"> .alert { background-color:#5f9ebe; } </style> But I have tried so many ways to use .alert and none of them work. Code: function btn1(x) { if (x.anyText.value == "") alert("Type Something") else alert("You typed: " + x.anyText.value) x.anyText.value = "" } Perhaps my question really is: How do I make class="alert" change Alert Box Background. I am very new to Javascript but learning everyday. I would prefer code help not be jquery. Thanks so much. codeFLY I'm having a problem with one of my Labs and My TA is not answering emails. I need to make a button, that when you click it, turns the bgColor blue, when you click it twice, it turns bgColor yellow, and a third time turns it orange. The tricky part is, I need to use an internal CSS style sheet for the color, and a function for the javascript. Here is what I have so far, but I'm completely stuck. Code: <html> <head> <style type="text/css" media="all"> highlight {background-color:yellow;} </style> <script type="text/javascript"> function blue() { document.bgcolor = blue; } </script> </head> <body> <p>Good morning. In less than an hour, aircraft from here will join others from around the world..... </p> <input type="button" value="Push me to change color!" onclick="document.bgColor= 'blue'"> </body> </html> (I cut out the doctype for readability) Obviously I'm not utilizing the function.. I tried replacing 'blue' with blue() (which is the name of the function) but that didn't work.. So how I utilize both the function, and the CSS sheet, AND get the button to do consecutive actions onClick..? -Thanks, this is my first post, I hope everything is understandable. I'm taking a JavaScript class in school and we are working with forms and summary pages. We were never taught how to change the font color and bgColor when we go to the summary page after an onSubmit. Can anyone fill me in on how it is done?
hey another know how can i change the background color of the title bar in the dojo dialog box? cause i search and i couldn't find any way.... Please help me and reply asap Thanks p.s if can show me sample code of how to change ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning. The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden. I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so. Any help would be greatly appreciated thanks so much I am aiming to change a couple of items on a CSS definition using JavaScript, so the servicer only needs to update one JS variable. I am so a novice at this... I would like to be able to set the "top" and "height" attributes of my graphbar ID element after the percent in the JS script is changed. Here's the js and CSS that is pertinent: Code: var btmrtx= 380; var btmrty= 280; var tplftx= 40; var tplfty= 20; var totalheight= (btmrty)-(tplfty); <!---- Here is the number or percentage of surveys done as a decimal. This you enter into this script for every update! --> var pctdone= .34; var barpixels= totalheight*pctdone; var newtoplfty = btmrty - barpixels; Code: #graphbar { background:#dd6000; position:relative; float:left; width: 20px; height: 36px; left: 40px; top: 244px; } I don't even know where to begin on a function. Thanks for help! Hi, I'm using JavaScript to check (or leave empty) a checkbox based on stored data. Code: for (var q=0;q<document.Simple.Subject.length;q++) { if (document.Simple.Subject[q].value == document.Restored.Subject.value) { document.Simple.Subject[q].checked = true; break; } It works perfectly, but I've discovered that it adds a simple "checked" to the form: Code: <input type="checkbox" name="Subject" value="Math" checked /> ... I thought I read that checked is not proper... it the attribute should really be checked="checked" . Is there a way to tweak this with JavaScript? Thanks. ~Wayne I am trying to get my script working in FF, IE and Opera but the getAttribute isn't working for me. The domain name isn't getting picked up I have tried this: var dom_name = document.getElementById('dom_nm').getAttribute("value",2); and this: var dom_name = document.getElementById('dom_nm').getAttribute('value'); After this I use the domain name like this: Code: if (per2 == 0) { item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy."; } if (per2 > 0){ item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year."; } document.getElementById('item_pay').setAttribute("value","item_desc"); ( I also tried: Code: document.getElementById('item_pay').setAttribute('value') = item_desc; but that didn't seem to work either ) The HTML is like this: Code: <div style="margin: 5px auto;"> <table> <th>Your New Domain Name Order</th> <tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total Cost</td></tr> <tr><td id="dom_nm" value="John.Doe"><?php echo "Domain: $N_dom.$N_tld" ?></td><td id="price" value = '<?php echo "$priceN" ?>' ><?php echo $priceN ?></td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '<?php echo "$period_1" ?>' ></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '<?php echo "$total_1" ?>'></td></tr> <tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_2" size = '10' value = '<?php echo "$period_2" ?>'></td><td><input type='TEXT' id="total_2" style="text-align: right;" value = '<?php echo "$total_2" ?>'></td></tr> <tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3" style="text-align: right; font-weight: bold;" value = '<?php echo "$total_3" ?>'></td></tr> </table> </div> The result is that I get a zero ( 0 ) where the domain should be. Like this: Domain Name and DNS set up. Domain: 0 Period: 2year Including: Privacy: 2year. Plus Free Blog Install. Any ideas what I am doing wrong ? Thanks When overlay(url) is fired theAgree.href is not being updated with theURL. theURL is being passed correctly, but in IE8 and below it never updates the ID "agree" with the URL. So when you click the "agree" link it just opens a new window using what's in the href which is #. In all other browsers the JS below will rewrite the "agree" URL with the URL that's sent to overlay(). But of course, not in IE8 and below. Code: function overlay(url) { var theURL = url; var theAgree = document.getElementById('agree'); theAgree.href = theURL; var theOverlay = document.getElementById('overlay'); theOverlay.style.visibility = (theOverlay.style.visibility == "visible") ? "hidden" : "visible"; } function overlay_close() { var theOverlayClose = document.getElementById("overlay"); theOverlayClose.style.visibility = "hidden"; theOverlayClose.style.display = "none"; } Code: <map name="Map" id="Map"> <area shape="rect" coords="382,1,573,237" onclick="overlay('http://site3.com'); return false;" href="#" /> <area shape="rect" coords="192,0,383,236" onclick="overlay('http://site3.com'); return false;" href="#" /> area shape="rect" coords="2,1,193,237" onclick="overlay('http://site3.com); return false;" href="#" /> </map> Code: <a name="agree" id="agree" href="#" onclick="overlay_close()" target="_blank" class="button"> Page: http://www.libertyvillesavingsbank.c...c-studio-card/ How would you access information about various attributes of an element with javascript?
I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each. http://jsfiddle.net/defencedog/Zz7cX/ [My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine] regards;; I got this code Code: Div= document.createElement("div"); Table= document.createElement("table"); Table.setAttribute("style","width:100px;height:100px;background-color : #708090;"); Table.setAttribute("bgColor","#708090"); tr=document.createElement("tr"); td=document.createElement("td"); text=document.createTextNode(aText); myTableBody = document.createElement("TBODY") td.appendChild(text); tr.appendChild(td); myTableBody.appendChild(tr); Table.appendChild(myTableBody); Div.appendChild(Table); document.getElementsByTagName('body').item(0).appendChild(Div); Now it all works fine with the exception of the Code: Table.setAttribute("style","width:100px;height:100px;background-color : #708090;"); so I was wondering how do I set the style attribute in the table node? how can i get the number values from style atrributes. currently i have test_tree.style.top which would return 50px instead of 50, is there anyway i can take just the 50 as an integer
I just stucked somewhere in js, i know its simple task but i don't know what's wrong but i believe i just need little guidance to get my result. Here is my problem Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>sample</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/javascript"> function OfferTwo(){ var Name = document.getElementById("txtName").value; var Email = document.getElementById("txtEmail").value; var sUrl = document.getElementById('offer2').src; document.getElementById('offer2').src = 'http://www.getmyname.com?info.php?dp=0&l=0&p=0&Name='+Name+'&email='+Email; alert(document.getElementById('offer2').src); } </script> </head> <body> <form name="myFrom" method="get" action=""> <p>Name <input name="txtName" type="text" id="txtName"> </p> <p>Email <input name="txtEmail" type="text" id="txtEmail"> </p> <p>Yes <input type="radio" name="rb" value="radiobutton" onClick="OfferTwo();"> No <input type="radio" name="rb" value="radiobutton"> </p> </form> <iframe name="offer2" id="offer2" src="" height="500px" width="100%" frameborder="0" scrolling="no">Your Browser not supporting</iframe> </body> </html> what i am trying to do on radio click 'YES' option i pass the value into querystring. Till now i got sucess to pass values but now problem is that how i pass this value into iframe src element. I tried alot did lot of googling but didn't get anything yet. Please help me, i know its very basic thing but i didn't trace my mistake. Thanks i n advance Hello! I have a superclass where I create a "div" element as a property and then proceed to try and set the element's "id" attribute in a subclass. Interestingly, if I create multiple instances of the subclass with different "id"s, they all end up having the last "id" I specify. I would like it if they retain the individual "id" I specify. Here is the code. Code: function Drag() { this.ele = document.createElement("div"); } function Icon(id) { this.ele.id = id; } Icon.prototype = new Drag(); var hello = new Icon("hello"); var goodbye = new Icon("goodbye"); Which of these is the correct way to set the className attribute, or are they both okay? option 1: Code: var t = document.createElement("p"); t.className = "myclass"; option 2: Code: var t = document.createElement("p"); t.setAttribute("class","myclass"); Hi all, I have the following code: Code: <html> <head> <title>Page Title</title> <script type='text/javascript'> mymusic=[]; tracks=[]; mymusic=[{title:"a",artist:"b",artwork:"c",tracks:[{tracktitle:"d",trackmp3:"e"},{tracktitle:"x",trackmp3:"z"}]},{title:"f",artist:"g",artwork:"h",tracks:[{tracktitle:"i",trackmp3:"j"}]}]; function nowplaying(trackindex,albumindex){ q+="<html><head></head><body><p>Song:</p>"; q+="<p>"+mymusic[albumindex].tracks[trackindex].tracktitle+"</p>"; q+="<p>from Album:</p>"; q+="<p>"+mymusic[albumindex].title+"</p>"; q+="<img src=\""+mymusic[albumindex].artwork+"\">"; with(document.getElementById('nowplays').contentDocument){ open(); write(p); close(); } } function anything(i){ p=""; p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.selectedIndex,i);' size='"; p+=mymusic[i].tracks.length+1+"'>"; p+="<option>Choose a song...</option>"; for(j=0;j<mymusic[i].tracks.length;j++){ p+="<option>"+mymusic[i].tracks[j].tracktitle+"</option>"}; p+="</select></form></body></html>"; with(document.getElementById('songs').contentDocument){ open(); write(p); close(); } } function showinitial(){ s=""; s+="<html><head></head><body><form><select onchange='parent.anything(this.selectedIndex-1);' size='"; s+=mymusic.length+1+"'>"; s+="<option>Choose an artist...</option>"; for(i=0;i<mymusic.length;i++){ s+="<option>"+mymusic[i].title+"</option>"}; s+="</select></form></body></html>"; alert(s); with(document.getElementById('albums').contentDocument){ open(); write(s); close(); } } </script> </head> <body onload="showinitial();"> <style type='text/css'> div { padding:0;margin:0; } .container { position:relative; width:100%; height:100%; } .topcontainer { height:65%; } .box { float:left; width:32%; height:90%; padding:5px; border:1px solid black; overflow:scroll; } .bottom { height:35%; border:1px solid black; } </style> <div class="container"> <div class="topcontainer"> <div class="box"><p>Albums:</p><iframe id='albums'>hi </iframe></div> <div class="box"><p>Songs:</p><iframe id='songs'></iframe></div> <div class="box"><p>Now Playing:</p><iframe id='nowplays'></iframe></div> </div> <div class="bottom"></div> </div> </body> </html> which, as you will see if you run it, creates an iframe-based media player based on a collection of albums, and songs within these albums (I just used letters to define these albums and songs in the mymusic array, for simplicity). Focusing on the top 3 iframes, the way I have set out the user interaction is to generate the HTML for forms of available albums and songs using Javascript, and write them to the iframes in the body. This nearly works fine: if you run it and make a selection in the 'Albums' menu, you will see that the options this causes to display in the 'Songs' menu correspond with the mymusic array, so this works. However, when I choose a song, the function "nowplaying(trackindex,albumindex)" should be called using an onchange event in the 'Songs' form, in the exact same way as in the form generated using "showinitial()"...but the function isn't called. I have ruled out the coding of "nowplaying" itself as a cause, because even when I change "nowplaying" to sth simple like alert("hello"), with no variables or anything being passed in, it still doesn't call. So this leads me to think the problem is with the onchange attribute in "anything", but I can't see what the problem is. The way I coded it is no different to before, and that worked fine, so why won't this work? Any help would be much appreciated! Right, so there are a bunch of links in this format: <a href="/profiles/########">username</a> I'm using greasemonkey, and what I want to do is go through and get all of the /profiles/######## part of the anchor tag. I'm using Regex and I can't seem to get a match. This is what I have so far: Code: function ok() { var names = document.getElementsByTagName('a'); var reg = new RegExp("WHAT GOES HERE?"); var e = "links:\n"; var i = 0; while(i<10) { e += reg.exec(names[i].href) + "\n"; i++; } alert(e); } ok(); what is actually desired is I want there to be a way I can select these somehow as well.. |