JavaScript - Stylesheets - How Can I Access Unrecognised Css Rules?
Hi everybody!
I am trying to work out how to access unrecognised CSS properties within stylesheets from JavaScript. Say I have a stylesheet containing the following: Code: p {border-radius: 20px;} Now. The CSS3 "border-radius" property is not recognised by any browsers at the moment. In Internet Explorer I can still access the property as follows: Code: alert(document.styleSheets[0].rules[0].style['border-radius']); // Alerts "20px" However, Gecko and V8 don't seem to include the rule in their JavaScript engines at all: Code: alert(document.styleSheets[0].cssRules[0].cssText); // Alerts "p { }" Does anyone know of any way to access unrecognised rules in these engines? Or even better if there are any scripts or plugins available anywhere that will do this for me? Cheers, Robin. Similar TutorialsI'm trying to allow the user to change the stylesheet of my website. I can change the stylesheet on a page by page basis (eg. from red style to blue style) but once the user navigates to a different page the stylesheet resets back to the original setting. For example, when the user visits the site first its set to the red style, they can change it to blue but when they navigate to another page the style goes back to red again where as I want the style to stick across pages. Does anybody know how I can sort this out? I assume I'll have to edit my javascript but Im not very good at javascript so any help would be great! HTML Code: <html> <head> <link href="red.css" rel="stylesheet" type="text/css" title="red" media="screen" /> <link href="green.css" rel="alternate stylesheet" type="text/css" title="green" media="screen" /> <link href="blue.css" rel="alternate stylesheet" type="text/css" title="blue" media="screen" /> <script type="text/javascript"> function changeStyle(title) { var lnks = document.getElementsByTagName('link'); for (var i = lnks.length - 1; i >= 0; i--) { if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) { lnks[i].disabled = true; if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false; }}} </script> </head> <body> <a href = "home1.html">Page 1</a> <br> <br> <a href = "home2.html">Page 2</a> <br> <br> <a href = "home3.html">Page 3</a> <br> <br> <br> <br> <a href = "#" onclick="changeStyle('red')">Red Stylesheet</a> <br> <br> <a href = "#" onclick="changeStyle('blue')">Blue Stylesheet</a> <br> <br> <a href = "#" onclick="changeStyle('green')">Green Stylesheet</a> </body> </html> CSS Code: body { background-color:red; } I have one question about <style> elements, are they counted in document.styleSheets array? and can I add rules to them by using insertRule() and deleteRule() methods?
Sup gents. Excuse my tenaciously novice questions, but dont disparage just yet, im beginning to grasp how the mechanism behind the code words, in due part to your helpful suggestions Im in the last stages of the code. In this section i have added three methods, whose function is to direct access control over the ciphers i will be adding shortly. I firstly need for the methods to be working. What they do is, categorize the set of values inside the first array and give a set of names privileges. The three methods that deal with the access control are link(), secondgroup() and third group. Ive assigned that the first three names( link() ) can access all the ciphers, ie administrators, the next three names ( secondgroup() ) can only access the shift, permutation and vigenere ciphers and the rest ( thirdgroup() ) can access the other remaining ciphers. But ive added so much code at once that i overwhelmed myself and i now i cant figure out where ive gone wrong, be it in the syntax or the logic Code: <html> <head> <script type ="text/JavaScript"> var counter = 0; var counter2 = 0; var arraynumb = 0; var arraynumb2 = 0; var global; var array = ['Mohamad', 'Karim', 'Anthony', 'Rami', 'Natalia', 'Sarah', 'Samer', 'Violette', 'Plume', 'Sharshabil']; var array2 = ["1000", "1001", "1002", "1003", "1004", "1005", "1006", "1007", "1008", "1009"]; function pass(){ var searchKey = document.searchform.inputVal.value; for (var i = 0, len = array.length; i < len; i++){ if (array[i] == searchKey){ counter = 1; arraynumb = i; } } } function pass1(){ var searchKey2 = document.searchform.inputVal2.value; for (var i = 0, len = array2.length; i < len; i++){ if (array2[i] == searchKey2){ counter2 = 1; arraynumb2 = i; } } } function access() { if (counter == 1 && counter2 == 1 && arraynumb == arraynumb2) { window.alert("You may access the website"); global = 1; } else{ window.alert("You may not access the website"); global = 0; } } function link() { var searchKey3 = document.searchform.inputVal.value; if (global == 1 && (searchkey3 == array[0] || searchkey3 == array[1] || searchkey3 == array[2] )) { window.alert("You are an administrator, you may use all the ciphers"); } else window.alert("you are not signed in, please do so"); } function secondgroup() { var searchKey4 = document.searchform.inputVal.value; if (global == 1 && (searchkey4 == array[3] || searchkey4 == array[4] || searchkey4 == array[5] )) { window.alert("You are an ordinary user of class A, you may proceed to access the Shift, Vigenere and Permutation ciphers"); } else window.alert("You may not access this cipher"); } fucntion thirdgroup() { var searchKey5 = document.searchform.inputVal.value; if (global == 1 && (searchkey5 == array[6] || searchkey5 == array[7] || searchkey5 == array[8] || searchkey5 == array[9] )) { window.alert("You are an ordinary user of class B, you may proceed to access the Hill, Affine, Substitution and DES ciphers"); } else window.alert("You may not access this cipher"); } </script> </head> <body> <form name = "searchform" action = ""> <p>Enter username<br/> <input name = "inputVal" type = "text" size = "30"/> <input name = "search2" type = "button" value = "Search" onclick = "pass()"/> </p> <p>Enter password<br/> <input name = "inputVal2" type = "password" size = "30"/> <input name = "search" type = "button" value = "Search" onclick = "pass1()"/> <input name = "Access site" type = "button" value = "Access" onclick = "access()"/> <br/> <br/> <input name = "link to" type = "button" value = "Shift" onclick = "link();return secondgroup();" enabled=""/> <input name = "link to" type = "button" value = "Vigenere" onclick = "link();return secondgroup();" enabled=""/> <input name = "link to" type = "button" value = "Permutation" onclick = "link();return secondgroup();" enabled=""/> <input name = "link to" type = "button" value = "Hill" onclick = "link();return thirdgroup();" enabled=""/> <input name = "link to" type = "button" value = "Affine" onclick = "link();return thirdgroup();" enabled=""/> <input name = "link to" type = "button" value = "Substitution" onclick = "link();return thirdgroup();" enabled=""/> <input name = "link to" type = "button" value = "Des" onclick = "link();return thirdgroup();" enabled=""/> <br/> </p> <br/> <p></p> </form> </body> </html> it is said that the 'form' node can be accessed by document.forms.certainName but it fails on my browser(IE8) however for images, it works, that is, document.images.certainName returns a Node. is there bugs only on 'form' tag? btw, document.forms[0] works ... quite quirky... i noticed today that if i type in my js file name in the url i get a download box, i have an htaccess on my site so this should not be happening, thats another issue.. my question is, is there a trick to creating a js file that cant be accessed in this manner, i was thinking about adding a php define statement as it comes from one source only, but i wanted to ask first to see if there was something on the js side i could do or is that strictly a htaccess or server side issue.. hi, i want to make an ftp access page using javascript i know it's possible using "ftp://" , but when i use this, the browser loads a window with the ftp folder i want a javascript to get ftp access and to give the commands itself any1 who knows how to get ftp access and ability to give file send/receive/... commands with javascript? Hi this is what I want to do. I have an online store and a need get fixed the machines from where my clients use my web site. what I'm doing right now is using an activeX to retrieve theirs OS code, HD serial number and other stuff and is working fine but since I'm using an ActiveX they are forced to use Internet Explorer and that's the big problem. my clients agree for me doing this check on their computers, actually they allow the activex to run, but they are requesting the posibility of using for example mozilla. thanks in advance and sorry about my english I'm just learning Hi, I want to access SQL database using javascript. I am passing 1 value to the java script but I want to pass that value further to the SQL query as an where clause parameter to retrieve data. If the value retrieves multiple or single data then how do i handle it. Is it possible to use dataset in javascript? Regards, Anthony. Hi, I'm a retired social worker with beginner skills in scripting a web page and need some suggestions. I create eLearning materials which are given away as a communty service to help people improve their health. A typical eLearning project has a few educational screens (using a Learner Management System-LMS-template) and an interactive exercise (on an external web page-htm or html-usually accessed by button which navigates to the exercise's URL). The interactive exercise should only be accessed from inside the eLearning lesson using the button, because it requires understanding of the way it works plus important cautions to assure proper use. I need to prevent the use of the URL outside of taking the lesson (for example, someone taking the lesson acquires the exercise's URL from their browser history and then may give this to others who access the exercise directly-without necessary knowledge and cautions). I tried document.referrer, using JavaScript. Using the referrer URL from inside the lesson and adding the JavaScript to the exercise's htm code worked OK in FF, but not in IE 8. In FF, if the referrer was not the correct single URL from inside the lesson, then it redirected; if the correct URL, the exercise appears. The JS code follows: Code: <script language="JavaScript" type="text/javascript"> <!-- var oksite = "http://www.mysite.com/xyz/courseidxxxxx/yyyy/zzz.html"; var redirect = "http://mysite.com/error.html"; if (document.referrer != oksite) { location.replace(redirect); } //--> </script> In IE 8, I was not able to get it to work. Using an alert, I noticed that the referrer in IE 8 was blank. My web hosting (GoDaddy) is a shared Windows hosting. I would have to upgrade from IIS6 to IIS7 to use PHP. Bigger challenge: I've never used PHP. If possible, I would prefer to use JS. But, I am open to any suggestion that will help. I am also wondering if part of the IE 8 issue is that I am using IE 8 X 64? I'm stuck and hope someone can suggest a way to solve this access issue. Thanks for your help. Kind Regards, saratogacoach First post! Hey all! So I've been having trouble figuring out how to make this page work. The page I'm working on has 3 frames: top/main/title frame, left frame, and right frame. What the page is supposed to be is like a shopping page. The left frame has all the items that you can select, while the right page has the "receipt" of your selected items. Now here's the problem: The left frame has an "Update Order" button on the bottom that updates the receipt on the right frame. However, I can't get the button to work. I'm not exactly sure how to write the code for the receipt frame (if there is any javascript code needed for that frame) or how to have the left frame send all that information to the right frame. I hope this all makes sense. Thanks for taking the time to read all that! hi'yall i want to setup a piece of code that allows me to drag text onto a div, and have that text be recorded into a javascript variable. the text is text brought in from anywhere; website, other website, a notepad text file, etc. basically any text so, im thinking i need to access the system's clipboard to get that info? thanks Hi someone please let me know the way to access a smarty value with javascript? my smarty value is = {$value.url} i want to access it like Code: <script type="text/javascript"> function load() { document.location = '{$value.url}'; } </script> i tried with wrapping code with {literal} {/literal} but it isnt working. can some one correct this please sorry for bad english Thanks I'm trying to write a little Greasemonkey script (in Firefox) to manipulate the top bar Google Translate produces when translating a site. For example: http://translate.google.com/translat.../www.google.de. Google has employed traditional HTML frames. According to many websites, I can use something like window.frames[0].contentDocument to access the first frame. However, this is refusing to work! I have been debugging this for hours. I have verified that I am indeed running the script from the top-level window (window.parent === window.top), and I am able to manipulate the frames themselves without a problem. When I try something like window.frames[0].contentDocument.URL, it returns as about:blank (I also get this with the other frame, i.e., frames[1]). I have tried several different methods of getting at that frame, including getElementsByTagName("frame")[0] (which works for manipulating the frame itself, but not for editing the frame's content through contentDocument). Here's my little script so far. I've included the first part so you can see for yourself that I'm definitely in the top-level window and using the right @include because it works. In this example, the URL returned is "about:blank" (again, I'm in Firefox). Code: // ==UserScript== // @name GTranslate // @include /^https?://translate\.google\.com/translate\?.*/ // ==/UserScript== // change how the frame is displayed var bar = document.getElementsByTagName("frame")[0]; bar.removeAttribute("noresize"); // manipulate the content inside the frame var gt = bar.contentDocument; alert(bar.URL); Hi all, Have problem from getting data of JavaScript Object ie. Associative Array. Code: var a, table1 a = new ActiveXObject("MyProgID"); a.GetDataFromExcel("C:\\Users\\myFolder\\Desktop\\test.xls","Sheet1") a.Generate() table1 = a.writeInTable(); Here writeInTable function returns a 2D Object array from DLL written in VB.Net. So I got the Object to table1. But from table1, I can't access the values but its there. table1 shows values as in this image(Image Attached.) Actually, I tried many ways like tab(0)(0) tab[0][0] tab["0"] tab.(0).(0) tab.[0].[0] Also with toArray(), (new VBArray(tab)).toArray().... I don't know what I am wrong..Can anyone help me on this? Thanks... Shanmugavel.C How would you access information about various attributes of an element with javascript?
I'm trying to get the value of a radio button when clicked. I'm dynamically creating these radio buttons while populating a table like this: Code: var rad for(blah blah blah){ insert array data into table... insert array data into table... insert array data into table... rad = document.createElement('input'); rad.setAttribute('type', 'radio'); rad.setAttribute('name', 'options'); rad.setAttribute('value', id); rad.onclick = function() { doSomething() }; cell.appendChild(rad); } If I'm in the doSomething function, how do I access the value or ID of the radio button? Thanks! Hi, I am trying to access an XML file from a server in my JavaScript code. I have an XML file like this: -<stream version="1.2"> -<room id="simulator" time="128168557915"> -<dimention id=0 x="1.25" y="2.00"> <m mcu="160" sid="75"> </dimention> </room> -<room id="simulator" time="128168557928"> -<dimention id=0 x="1.95" y="1.86"> <m mcu="160" sid="55"> </dimention> </room> </stream> this file is generated by an application and I can access it from a URL ( since I am using the simulator for this application the XML is accessible from http://localhost:8081/feed/demo) This xml file is updated every few seconds and constantly growing. I have a javascript code which I've added the following code to it in order to use the data from XML file: <script type="text/javascript"> if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("GET","http://localhost:8081/feed/demo",false); xmlhttp.send(); xmlDoc=xmlhttp.responseXML; document.write("<table border='1'>"); var x=xmlDoc.getElementsByTagName("room"); for (i=0;i<x.length;i++) { document.write("<tr><td>"); document.write(xmlDoc.getElementsByTagName("dimention")[i].getAttribute("x")); document.write("</td><td>"); } document.write("</table>"); </script> Now here comes my problem: if I have the XML file saved on same drive as html page and I address it like this: xmlhttp.open("GET","floor.xml",false); it works fine, but when I pass the URL it doesn't. is there anything else I should do in case of loading the xml from URL? my second question is that I want to use the text values returned by xmlDoc.getElementsByTagName("dimention")[i].getAttribute("x") in an if statement like this : if (valuereturned = 2.00) { do sth } what is the best way to do that, since the returned value is a text. I need the answer ASAP and I really appreciate your help, thanx :-) Hello, I am trying to set up this Javascript to work with my XML exported from Microsoft Access for support on an Intranet page. I borrowed from a tutorial code but I cant seem to figure out how to get the Javascript to recognize my values in the xml file. I believe my issue is related to the formatting of the xml file. The example is formatted like Code: <index> <name><![CDATA[ Paul ]]></name> <age><![CDATA[ 26 ]]></age> <height><![CDATA[ 6'0" ]]></height> </index> While my access file exports a little messy... Sadly, unless this can be changed.. I would love to just enter the code myself for each entry.. but I need it to be exportable and immediately updated to the Javascript search. Access exports like this. Code: <Employee_x0020_Database> <Employee_x0020_Number>200786</Employee_x0020_Number> <First_x0020_Name>Stacey</First_x0020_Name> <Middle_x0020_Name>Leanne</Middle_x0020_Name> <Last_x0020_Name>Evans</Last_x0020_Name> <Gender>F</Gender> <Date_x0020_of_x0020_Hire>2005-04-07T00:00:00</Date_x0020_of_x0020_Hire> <Position>Cashier</Position> </Employee_x0020_Database> Any advice on how I can get Javascript to recognize the values without a CDdata tag? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>Search</title> <script type="text/javascript"> window.onload = loadIndex; function loadIndex() { // load indexfile // most current browsers support document.implementation if (document.implementation && document.implementation.createDocument) { xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.load("index.xml"); } // MSIE uses ActiveX else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = "false"; xmlDoc.load("index.xml"); } } function searchIndex() { // search the index (duh!) if (!xmlDoc) { loadIndex(); } // get the search term from a form field with id 'searchme' var searchterm = document.getElementById("searchme").value; var allitems = xmlDoc.getElementsByTagName("item"); results = new Array; if (searchterm.length < 3) { alert("Enter at least three characters"); } else { for (var i=0;i<allitems.length;i++) { // see if the XML entry matches the search term, // and (if so) store it in an array var name = allitems[i].lastChild.nodeValue; var exp = new RegExp(searchterm,"i"); if ( name.match(exp) != null) { results.push(allitems[i]); } } // send the results to another function that displays them to the user showResults(results, searchterm); } } // Write search results to a table function showResults(results, searchterm) { if (results.length > 0) { // if there are any results, write them to a table document.write('<div><a href="search.html">New Search</a></div>You searched for <b><i>'+searchterm+'</i></b><br><br>'); document.write('<table border="1" style="width: 100%;">'); document.write('<tr><th>NAME</th><th>AGE</th><th>HEIGHT</th><th>WEIGHT</th></tr>'); for(var i=0; i<results.length; i++) { document.write('<tr>'); document.write('<td>' + results[i].getAttribute("name") + '</td>'); document.write('<td>' + results[i].getAttribute("age") + '</td>'); document.write('<td>' + results[i].getAttribute("height") + '</td>'); document.write('<td>' + results[i].getAttribute("weight") + '</td>'); document.write('</tr>'); } document.write('<table>'); document.close(); } else { // else tell the user no matches were found var notfound = alert('No results found for '+searchterm+'!'); } } </script> </head><body> <form action=""><b>Search: </b><input id="searchme" type="text" size="20"> <input value="Submit" onClick="searchIndex(); return false;" type="submit"></form> </body></html> Thanks for helping me with this... Totally way over my head on this one. Delvok Hello everybody, I am new in this forum (and I'm also new in web coding, but not in programming)... This is the first problem I met: I can't understand how to acccess a property in this snippet: Code: function FGGE() { this.totalExternals = 0; this.loadedExternals = 0; this.loadImage = function(image) { image.onload = function() { alert("Loaded 1: "+this.loadedExternals+"/"+this.totalExternals); }; alert("Loaded 2: "+this.loadedExternals+"/"+this.totalExternals); }; } Output is this: Loaded 1: NaN/undefined Loaded 2: 0/0 Could someone help me fixing "Loaded 1"? Thanks a lot I have a JS method register in a TD element as below: <td Id="MyTd" ondragenter="MyMethod('MyParam')" /> Below is the Js Method: function MyMethod(MyParam) { event.dataTransfer.dropEffect = 'move'; } The JS method works fine in IE but in mozilla throws an error that event is undefined. I cant pass the event object from HTML while registering the method as HTML is written by someone else and I cannot change that. All I can change is the JS method. How can i access the event object in JS method. Thanks. |