JavaScript - Calling Css In Javascript
in HTML you can call CSS
Code: <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <tr><td class="cssHere">Display</td></tr> can you even call CSS in javascript? Code: document.writeln("<tr><td class="cssHere">" + Display + "</td></tr>"); if so how do you even call the "style.css" thanks Similar TutorialsHello, I am new to using Javascript and have some experience with HTML and CSS. I am trying to use Javascript to display an image based on a value. I have the image positions in my .css. Just to make it easy if my var x=0 i want to call the "position 1" div, or else i want to call the "position 2" div. How can i make this possible. I have positions because i have a background image and i want the different pictures to be in a different location on the background based on the value. Below is my code that I have right now. Thanks for the help. layout.css #layout { position: relative; top:0%; z-inderx:-1; } #date { position: absolute; top:5%; left: 50%; margin-left: -190px; z-index: 1; font-family: calibri; font-size: 44px; font-weight: bold; color:#000000; } #location1 { position: absolute; top:22%; left: 50%; margin-left: -590px; z-index: 1; } #location2 { position: absolute; top:28%; left: 50%; margin-left: -590px; z-index: 1; } Layout.HTML <html> <head> <Title>Layout</title> <link rel"stylesheet" type="text/css" href="layout.css" /> </head> <body> <div id="layout"> <center> <img border="0" src="background.png" width="1200" height="880" /> </center> </div> <div id="date"> 24 OCTOBER </div> <script type="text/javascript"> var x=0; if (x==0) { <div id="location1"> <img border="0" src="picture1.png" width="70" height="60" /> </div> } else { <div id="location2"> <img border="0" src="picture2.png" width="70" height="60" /> </div> } </script> </body> </html> I would like to add some javascript code that used for mobile browser detection to redirect page to another page. I would like to add it to content editor web part in sharepoint. I think I need to add it to the source editor. I got the following javascript code from a website. (function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris| kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo| up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1- 6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te| us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa| cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el (49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w| od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\- (20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( | \/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/| ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50| p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok (6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po (ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/| sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl (45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg \-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk (40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)| wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b}) (navigator.userAgent||navigator.vendor|| window.opera,'http://www.mycustomizedmobilepage.html'); {/script} I also learned that I need to add this line of code to the page: _spBodyOnLoadFunctionNames.push("functionName"); to call the javascript so that there is some kind of time delay to make the page upload to work correclty with the code. My question is: I see this javascript start with function(a,b), I did't see actually a function name, how can I call this function by using _spBodyOnLoadFunctionNames.push Thanks -------------------------------------------------------------------------------- hi i have a sliding vertical menu in my page in the left side and in the right side i have a text say for eg: Home. So when i click on home, i need the left side vertical menu to slide and open and the home in the left side should get highlighted. How do i do this in javascript ???? Pls help!!!! var macs = { getMacAddress : function() { document.macaddressapplet.setSep( "-" ); document.write( "Mac Address = " + document.macaddressapplet.getMacAddress() ); } how do i call this function and display out in the website? this doesn't seems working.. <script type="text/javascript"> document.write(mac.getMacAddress()); </script> Anyone help? Hello all here is a more intelligent question. This one is just on an exercise I am doing. I have to call a function using parameter values. my main function is this Code: function showResults(race,name,party,votes) or just function showResults in the next lines below i have to call the function is this the right way Code: <script type="text/javascript"> { showResults=("race[0],name1,party1,votes1"); } </script> or should it be without the { and } like this? Code: script type="text/javascript"> showResults=("race[0],name1,party1,votes1"); </script> or is it like this Code: script type="text/javascript"> showResults(race[0],name1,party1,votes1); </script> Thanks all, what would be the proper method Thanks I am currently designing a table as such Code: ___________________________ | TABLE | | | FRAME A |___________________________| | last row clicked | FRAME B |___________________________| the top frame is a table and the bottom frame contains the last row clicked called through onclick. question: if frame B is a php file with a javascript object, how do i call the javascript object's function to print the data? here is what i have so far index.html //this is the source code for the site Code: <html> <frameset rows = "60%, 40%"> <frame src = "table_driver.php" name = "A" id = "FRAME1"> <frame src = "bottom_row.php" name = "B" id = "FRAME2"> </frameset> </html> printJSTable() //prints the table shown in frame A Code: function printJSTable() { echo '<script src = "java_script.js"></script>'; echo '<script src="sorttable.js"></script>'; echo '<table class = "sortable" id = "myTable" border = "1">'; echo '<thead id = "header"><tr>'; foreach($this->columns as $header => $order) { echo '<th>'; echo $header; echo '</th>'; } echo '</tr></thead><tbody>'; $counter = 0; for($i = 0; $i < $this->numRows; $i++) { //IMPORTANT changeRow(this) is JS call echo '<tr onclick = "changeRow(this)" onmouseover = "mouseOver(this)" onmouseout = "mouseOut(this)">'; foreach($this->data[$i] as $key => $value) { echo '<td>'; if($value!="") echo $value; else { echo ''; } $counter++; echo '</td>'; } echo '</tr>'; } echo '</tbody></table>'; echo '<form><input id = "'.$this->numRows.'"type = "button" value = "add row" onclick = "addRow(id)"></form>'; } and this is changeRow(this) which is supposed to create the table in frame b Code: //populates headersArr and rowArr correctly parent.B.obj = new TableData(headersArr, rowArr); parent.B.obj.printTable(); here are the function definitions for TableData Code: function TableData(headers, row) { this.headerArr = headers; this.rowArr = row; } TableData.prorotype.printTable = function() { for(i=0; i<this.headerArr.length; i++) { document.write('<tr><th>'); document.write(this.headerArr[i]); document.write('</th><td>'); document.write(this.rowArr[i]); document.write('</td></tr>'); } } and then, finally, this is the php file for the bottom frame Code: <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css"/> <script type = "text/javascript" src="java_script.js"></script> </head> <body> <script> obj = new TableData; </script> </body> </html> what i want to do is populate the variable obj from ^ (bottom_row.php) and then use the print function to print it out. right now it is populating correclt,y but i cant get it to print. The error console says that Value undefined (result of expression parent.B.obj.printTable) is not object. ?? sry for all the code! just didnt want to leave anything out thanks! Hello, I'm making a Javascript implementation for my Java program. But I'm having a proplem. I want to call my own Java code from the Javascript script. Is that possible? Thanks, enderp Hi, The point is to have a PHP code on the same page as a javascript calling the PHP function. I am able to make this work when the PHP code is on an external file. But when all but XSL are on the same page, it won't do what it should. How to make this work? The PHP is correct as it is by its self. And so is the javascript as it is for calling other PHP code. The combination of these two in this case just won't work. PHP and Javascript: [CODE] <html ><head><title>Untitled 1</title></head> <body> <?php function dateToDayOfWeek($xmlDate, $useFormat = 'l') { $rd = 'Unknown'; if (count($xmlDate) == 1) { $element = $xmlDate[0]; if ($element instanceof DOMElement) { $rd = date($useFormat, strtotime($element->nodeValue)); } } return $rd; } function axasal(){ date_default_timezone_set('UTC'); $xslDoc = new DOMDocument(); $xslDoc->load("xslfile.xsl"); // Here comes the xsl file name. $xmlDoc = new DOMDocument(); $xmlDoc->load("http://free.worldweatheronline.com/feed/weather.ashx?q=milan,italy&format=xml&num_of_days=5&key=af8b2fc417222733111712"); $proc = new XSLTProcessor(); $proc->registerPHPFunctions('dateToDayOfWeek'); $proc->importStylesheet($xslDoc); echo $proc->transformToXML($xmlDoc); } ?> <script type="text/javascript"> function call_php(){ document.getElementById("place").innerHTML="<?php echo axasal(); ?>"; } </script> <form name = "form"> <input type = "button" name = "aaa" id = "aaa" value = "Click me" onclick = "call_php()" /> </form> <div id="place"></div> </body></html> [CODE] XSL: [CODE] <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlnshp="http://php.net/xsl"> <xsl:template match="data"> <html> <head><title></title></head> <body> <table> <tr> <xsl:apply-templates select="./weather" /> </tr> </table> </body> </html> </xsl:template> <xsl:template match="weather"> <td style="width: 97px"> <p><xsl:value-of select="php:function('dateToDayOfWeek', date)" /></p> <p><xsl:apply-templates select="./weatherIconUrl" /></p> </td> </xsl:template> <xsl:template match="weatherIconUrl"> <img> <xsl:attribute name="src"> <xsl:value-of select="." /> </xsl:attribute> </img> </xsl:template> </xsl:stylesheet> [CODE] The smiley face on the second line of the last code is ':' and 'p'. Hi, i was wondering if there was a way to call a nested javascript function directly, from outside of the function its nested in? for example, if i have the following functions: Code: <script type="text/javascript"> var test = function(){ var testInner = function(){ alert('testInner'); } } </script> can i then call the 'testInner' function directly from an onclick action something like this: Code: <a href="#" onclick="test.testInner()">TEST JS</a><br /><br /> That code is obviously not working for me, but is there something similar to what ive shown here that will work? Thanks in advanced Hello, I am using a script I found that allows me to upload a file, convert it to PDF via Ghostscript and then annotate the new PDF. I can type in the area or draw lines under selected text. What I am hoping to do however is be able to use my pen tools in my tablet to annotate the new PDF. Anyone have any ideas how would be able to call upon my pen tools to do this? Hi - I have an ASP.Net 2.5 application and I need to call a javascript function when one of the pages loads initially. I've tried: Code: string ScriptToCall = @"EnableCheckboxes(" + cblDetails.ClientID + ", false);"; ClientScript.RegisterStartupScript(this.GetType(), "addScript", ScriptToCall, true); where EnableCheckboxes is a javascript function on the page. This doesn't work (doesn't disable the CheckBoxList), although the EnableCheckboxes function DOES work when I call it in other ways, so I'm sure that the problem is that I'm not calling it properly on page load. I've tried: Code: ClientScript.RegisterStartupScript(this.GetType(), "addScript", "alert('Hello');", true); which DOES work, so I know I'm on the right track, but how do I do this? Thanks! Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 2</title> </head> <SCRIPT LANGUAGE = JavaScript> function estimateHolidays() { var service1; var service2; var service3; var txtGrade; var txtHolidays; var dblEntitlement; var strService; strService = cmbService.value; if (strService == "Service1") { dblEntitlement = 20; } else if (strService == "Service2" && Grade--"1") { dblEntitlement = 24; } else if (strService == "Service2" && Grade--"2") { dblEntitlement = 26; } else if (strService == "Service2" && Grade--"3") { dblEntitlement = 28; } else if (strService == "Service3") { dblEntitlement = 30; } else { dblEntitlement = "Error! Please try again."; } txtHoliday.value = dblEntitlement; } </SCRIPT> <body> <p> <input name="txtGrade" size="25" value="Enter Your Staff Grade"> </p> <p> Years of Service: <select name="cmbService" size="1"> <option value="Service1">Less than 5 years service</option> <option value="Service2">5 to 9 years service</option> <option value="Service3">10 or more years of service</option> </select> </p> <p> <input type="button" value="Estimate Holidays" name="cmdEstimateHolidays" onclick="estimateHolidays()"> </p> <p> Holiday Entitlement: <input name="txtHolidays" size="25"> </p> </body> </html> Why won't this code work!? Its driving me mad. Is it possible to set onmouseover only in js file without running the function on html code? P.S. I found a coding thread here but I don't understand it and it's too old (2005 archive). Thank you very much I have a page that loads various "applications" into an iframe inside the main page. One of the applications loaded calls a javascript function that is loaded with the "application" page. It works great in Safari, Chrome & Firefox but error's out in IE8 - "Object doesn't support this action". Anyone know why ? Have other calls that work but this one is the only one that uses href Thanks, JerryB [CODE] <div id = 'trainingsubmitbutton' style='display:none;'><a href='javascript: submitdata(0)'>Submit This Record</a></div> [CODE] Hi I'm New to javascript how to Call WCF service using Javascript or Jquery in html page.(with out using Activex Objects) <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="Javascript" type="text/javascript"> function user_prompt() { alert.("Hello there"); } user_prompt(); </script> </head> <body> </body> </html> I am such a noob. But I am so bad I cannot even get a window alert to pop up. All I want to do is call the function in the body. But do not know how... First of all, I must say that I am recently introduced to JavaScript and I am not fully aware of its complete functionality. So I have an HTML document which has defined within a its body a JavaScript function and I have also a JApplet class which is also loaded in the HTML and can call the JavaScript function. But I have also another Java class which is not an applet and I would like to find a way for this class to be able to call the JavaScript function (but it is essential for this class not to be an applet). I am aware that this would raise some security concerns but it is for local usage and I am interested to hear some ways if possible for this to be done. Thank You beforehand to all of you! I have a function which I placed in the header of my html file: Code: <script language="javascript" type="text/javascript"> function UngreyInstallButtons() { document.form1.viewbutton1.disabled = false; document.form2.viewbutton2.disabled = false; document.form3.viewbutton3.disabled = false; } </script> I want to call this from within the body of my html page: Code: <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- var name = GetCookie('COOKIENAME'); if (name != null) { alert("I GET HERE" + name + "!"); UngreyInstallButtons(); alert("I DONT MAKE IT HERE"); } //--> </SCRIPT> The GetCookie func works and returns name correctly. The first alert() box is displayed, - the second one isn't! It does not come back from the call to UngreyInstallButtons() Why? I also tried this: Code: if (name != null) { alert("I GET HERE" + name + "!"); document.form1.viewbutton1.disabled = false; document.form2.viewbutton2.disabled = false; document.form3.viewbutton3.disabled = false; alert("I DONT MAKE IT HERE"); } Again, it does not execute the = false lines at all. Perhaps I'm missing something obvious? (I am new to js) Hi, Im new to javascript so thankyou in advance for reading this! Im trying to create a video gallery, with thumbnails below a main content div, which when clicked display the relevant video in the said div. This isn't a problem and I have managed to do this... However, I also need to display descriptive text (different for every video) in a seperate div, and the first video also needs to autoplay when the page is loaded (rather than waiting until the user requests a video by clicking a thumbnail) I've made an example of where Im at so far and its viewable here... http://www.phixfilm.com/video_thumbn...ideo_test.html The div 'a few lines of info about vid here' is currently just static but this is what i need to change each time a different video is requested by the user (sorry if thats obvious but just in case its not clear) I will be using .movs but I've embedded youtube for now although I don't think that makes any difference... Im presuming it will be a case of having text that is hidden until the thumbnail is clicked...? Which I guess I could do with css but that way seems a little clumsy, I really am a newbie to javascript so a helping hand in the right direction would be very much appreciated. THANKYOU! ps- an example of something similar to what Im trying to achieve is here... http://somesuchandco.com/#670098/Nathalie-Canguilhem How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way. Any suggestions? PHP Code: <?php function phpQuery(){ $query = mysql_query("INSERT INTO mytable VALUES('','name','email')"); } ?> <script type="text/javascript"> function delayQueries() { timeoutID = window.setTimeout(doQueries, 2000); } function doQueries() { var runQuery = "<?php phpQuery(); ?>"; } </script> |